/*
 * 长景禄电商工具箱全局界面层。
 * 参考好漫剧的顶部信息架构，保留现有业务 DOM、接口和交互脚本。
 */

:root {
  --hmj-bg: #f5f7fb;
  --hmj-bg-deep: #edf1f6;
  --hmj-card: rgba(255, 255, 255, .96);
  --hmj-card-raised: #ffffff;
  --hmj-card-hover: #f8faff;
  --hmj-input: #f8fafc;
  --hmj-nav: rgba(255, 255, 255, .88);
  --hmj-line: #d9e1ec;
  --hmj-line-soft: #e7ebf2;
  --hmj-line-strong: #c3cfdd;
  --hmj-text: #162235;
  --hmj-text-secondary: #44536a;
  --hmj-muted: #526176;
  --hmj-primary: #e74667;
  --hmj-primary-soft: rgba(231, 70, 103, .1);
  --hmj-secondary: #c52f55;
  --hmj-cyan: #167bb4;
  --hmj-amber: #b96800;
  --hmj-green: #07856b;
  --hmj-danger: #c72c50;
  --hmj-on-primary: #ffffff;
  --hmj-shadow: 0 12px 32px rgba(25, 39, 58, .08), 0 1px 2px rgba(25, 39, 58, .04);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hmj-bg: #0b0d11;
    --hmj-bg-deep: #07090c;
    --hmj-card: rgba(19, 22, 29, .97);
    --hmj-card-raised: #20252e;
    --hmj-card-hover: #262c37;
    --hmj-input: #151922;
    --hmj-nav: rgba(19, 22, 29, .9);
    --hmj-line: #333b48;
    --hmj-line-soft: #262d38;
    --hmj-line-strong: #4b5666;
    --hmj-text: #f4f7fb;
    --hmj-text-secondary: #c1cad6;
    --hmj-muted: #b7c0cd;
    --hmj-primary: #ff4f70;
    --hmj-primary-soft: rgba(255, 79, 112, .14);
    --hmj-secondary: #ff7b93;
    --hmj-cyan: #63c9ff;
    --hmj-amber: #ffd166;
    --hmj-green: #65e7b1;
    --hmj-danger: #ff829c;
    --hmj-on-primary: #ffffff;
    --hmj-shadow: 0 18px 46px rgba(0, 0, 0, .34), 0 1px 1px rgba(255, 255, 255, .03);
    color-scheme: dark;
  }
}

html[data-toolbox-theme="light"] {
  --hmj-bg: #f5f7fb;
  --hmj-bg-deep: #edf1f6;
  --hmj-card: rgba(255, 255, 255, .96);
  --hmj-card-raised: #ffffff;
  --hmj-card-hover: #f8faff;
  --hmj-input: #f8fafc;
  --hmj-nav: rgba(255, 255, 255, .88);
  --hmj-line: #d9e1ec;
  --hmj-line-soft: #e7ebf2;
  --hmj-line-strong: #c3cfdd;
  --hmj-text: #162235;
  --hmj-text-secondary: #44536a;
  --hmj-muted: #526176;
  --hmj-primary: #e74667;
  --hmj-primary-soft: rgba(231, 70, 103, .1);
  --hmj-secondary: #c52f55;
  --hmj-cyan: #167bb4;
  --hmj-amber: #b96800;
  --hmj-green: #07856b;
  --hmj-danger: #c72c50;
  --hmj-on-primary: #ffffff;
  --hmj-shadow: 0 12px 32px rgba(25, 39, 58, .08), 0 1px 2px rgba(25, 39, 58, .04);
  color-scheme: light;
}

html[data-toolbox-theme="dark"] {
  --hmj-bg: #0b0d11;
  --hmj-bg-deep: #07090c;
  --hmj-card: rgba(19, 22, 29, .97);
  --hmj-card-raised: #20252e;
  --hmj-card-hover: #262c37;
  --hmj-input: #151922;
  --hmj-nav: rgba(19, 22, 29, .9);
  --hmj-line: #333b48;
  --hmj-line-soft: #262d38;
  --hmj-line-strong: #4b5666;
  --hmj-text: #f4f7fb;
  --hmj-text-secondary: #c1cad6;
  --hmj-muted: #b7c0cd;
  --hmj-primary: #ff4f70;
  --hmj-primary-soft: rgba(255, 79, 112, .14);
  --hmj-secondary: #ff7b93;
  --hmj-cyan: #63c9ff;
  --hmj-amber: #ffd166;
  --hmj-green: #65e7b1;
  --hmj-danger: #ff829c;
  --hmj-on-primary: #ffffff;
  --hmj-shadow: 0 18px 46px rgba(0, 0, 0, .34), 0 1px 1px rgba(255, 255, 255, .03);
  color-scheme: dark;
}

html:has(body[data-page="home"]),
html:has(body[data-page="image"]),
html:has(body[data-page="video"]),
html:has(body.workspace-page) {
  background: var(--hmj-bg);
}

body[data-page="home"],
body[data-page="image"],
body[data-page="video"],
body.workspace-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--hmj-text) !important;
  background: var(--hmj-bg) !important;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body[data-page="home"] *,
body[data-page="image"] *,
body[data-page="video"] *,
body.workspace-page * {
  box-sizing: border-box;
  letter-spacing: 0;
}

body[data-page="home"] [hidden],
body[data-page="image"] [hidden],
body[data-page="video"] [hidden],
body.workspace-page [hidden] {
  display: none !important;
}

body[data-page="home"] a,
body[data-page="image"] a,
body[data-page="video"] a,
body.workspace-page a,
body[data-page="home"] button,
body[data-page="image"] button,
body[data-page="video"] button,
body.workspace-page button,
body[data-page="home"] input,
body[data-page="image"] input,
body[data-page="video"] input,
body.workspace-page input,
body[data-page="home"] textarea,
body[data-page="image"] textarea,
body[data-page="video"] textarea,
body.workspace-page textarea,
body[data-page="home"] select,
body[data-page="image"] select,
body[data-page="video"] select,
body.workspace-page select {
  font: inherit;
  letter-spacing: 0;
}

body[data-page="home"] a:focus-visible,
body[data-page="image"] a:focus-visible,
body[data-page="video"] a:focus-visible,
body.workspace-page a:focus-visible,
body[data-page="home"] button:focus-visible,
body[data-page="image"] button:focus-visible,
body[data-page="video"] button:focus-visible,
body.workspace-page button:focus-visible,
body[data-page="home"] input:focus-visible,
body[data-page="image"] input:focus-visible,
body[data-page="video"] input:focus-visible,
body.workspace-page input:focus-visible,
body[data-page="home"] textarea:focus-visible,
body[data-page="image"] textarea:focus-visible,
body[data-page="video"] textarea:focus-visible,
body.workspace-page textarea:focus-visible,
body[data-page="home"] select:focus-visible,
body[data-page="image"] select:focus-visible,
body[data-page="video"] select:focus-visible,
body.workspace-page select:focus-visible {
  outline: 2px solid var(--hmj-secondary);
  outline-offset: 3px;
}

body[data-page="home"] ::selection,
body[data-page="image"] ::selection,
body[data-page="video"] ::selection,
body.workspace-page ::selection {
  color: var(--hmj-on-primary);
  background: var(--hmj-primary);
}

/* Shared header: the reference site keeps the main menu centered in a compact top bar. */
body[data-page="home"] .haomj-topbar,
body[data-page="image"] .topbar,
body[data-page="video"] .topbar {
  position: sticky !important;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: 65px;
  height: 65px;
  margin: 0;
  padding: 0 24px;
  color: var(--hmj-text) !important;
  background: var(--hmj-nav) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hmj-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: var(--hmj-shadow) !important;
  backdrop-filter: blur(20px);
}

body[data-page="home"] .haomj-topbar-inner {
  width: min(1320px, 100%);
  height: 65px;
  margin: 0 auto;
}

body[data-page="home"] .nt-brand,
body[data-page="image"] .topbar .brand,
body[data-page="video"] .topbar .brand {
  color: var(--hmj-text) !important;
}

body[data-page="home"] .nt-brand .brand-mark,
body[data-page="image"] .topbar .brand-mark,
body[data-page="video"] .topbar .brand-mark {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 8px 22px rgba(231, 70, 103, .2) !important;
}

body[data-page="home"] .nt-brand__copy strong,
body[data-page="image"] .topbar .brand strong,
body[data-page="video"] .topbar .brand strong {
  color: var(--hmj-text) !important;
}

body[data-page="home"] .nt-brand__copy small,
body[data-page="image"] .topbar .brand small,
body[data-page="video"] .topbar .brand small {
  color: var(--hmj-muted) !important;
}

body[data-page="home"] .haomj-topbar .topnav,
body[data-page="image"] .topbar .topnav,
body[data-page="video"] .topbar .topnav {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--hmj-primary-soft) !important;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 999px;
  scrollbar-width: none;
}

body[data-page="home"] .haomj-topbar .topnav::-webkit-scrollbar,
body[data-page="image"] .topbar .topnav::-webkit-scrollbar,
body[data-page="video"] .topbar .topnav::-webkit-scrollbar {
  display: none;
}

body[data-page="home"] .haomj-topbar .topnav a,
body[data-page="image"] .topbar .topnav a,
body[data-page="video"] .topbar .topnav a {
  min-height: 32px;
  padding: 0 14px;
  color: var(--hmj-text-secondary) !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
}

body[data-page="home"] .haomj-topbar .topnav a:hover,
body[data-page="home"] .haomj-topbar .topnav a.active,
body[data-page="image"] .topbar .topnav a:hover,
body[data-page="image"] .topbar .topnav a.active,
body[data-page="video"] .topbar .topnav a:hover,
body[data-page="video"] .topbar .topnav a.active {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  box-shadow: 0 3px 10px rgba(20, 32, 48, .08);
}

body[data-page="home"] .haomj-topbar-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="home"] .haomj-purchase-link,
body[data-page="home"] .haomj-account-link,
body[data-page="home"] .haomj-member-chip {
  border-radius: 10px !important;
}

body[data-page="home"] .haomj-purchase-link {
  color: #2d2108 !important;
  background: var(--hmj-amber) !important;
  border-color: var(--hmj-amber) !important;
}

body[data-page="home"] .haomj-account-link {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-member-chip {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .topbar,
body[data-page="video"] .topbar {
  display: flex !important;
  align-items: center;
  gap: 16px;
}

body[data-page="image"] .topbar .brand,
body[data-page="video"] .topbar .brand {
  flex: 0 1 310px;
  min-width: 0;
}

body[data-page="image"] .topbar .topnav,
body[data-page="video"] .topbar .topnav {
  flex: 0 1 auto;
  margin: 0 auto;
}

body[data-page="image"] .topbar .global-recharge-panel,
body[data-page="video"] .topbar .global-recharge-panel {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
  box-shadow: none !important;
}

body[data-page="image"] .topbar .global-recharge-button,
body[data-page="video"] .topbar .global-recharge-button {
  color: #2d2108 !important;
  background: var(--hmj-amber) !important;
  border-color: var(--hmj-amber) !important;
}

/* One predictable theme control replaces the legacy nine-theme palette. */
.toolbox-theme-control {
  position: relative;
  z-index: 120;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-width: 44px !important;
  min-height: 36px !important;
  padding: 0 !important;
  color: var(--hmj-text-secondary) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
}

.toolbox-theme-control > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.toolbox-theme-control > summary::-webkit-details-marker {
  display: none;
}

.toolbox-theme-control > summary:hover,
.toolbox-theme-control[open] > summary {
  color: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

.toolbox-theme-control > summary svg {
  width: 16px;
  height: 16px;
}

.toolbox-theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: 190px;
  padding: 6px;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(20, 32, 48, .18);
}

.toolbox-theme-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--hmj-text-secondary) !important;
  text-align: left;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
  cursor: pointer;
}

.toolbox-theme-menu button:hover,
.toolbox-theme-menu button.is-selected {
  color: var(--hmj-text) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: rgba(231, 70, 103, .25) !important;
}

.toolbox-theme-menu button > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--hmj-primary) !important;
}

.toolbox-theme-menu button > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toolbox-theme-menu strong {
  color: inherit !important;
  font-size: 12px;
  line-height: 1.2;
}

.toolbox-theme-menu small {
  overflow: hidden;
  color: var(--hmj-muted) !important;
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Image and video pages share a second, horizontal function rail. */
.toolbox-subnav {
  position: sticky;
  top: 65px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 48px;
  padding: 6px 24px;
  overflow-x: auto;
  background: var(--hmj-bg-deep) !important;
  border-bottom: 1px solid var(--hmj-line-soft);
  scrollbar-width: none;
}

.toolbox-subnav::-webkit-scrollbar {
  display: none;
}

.toolbox-subnav a,
.toolbox-subnav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px;
  color: var(--hmj-text-secondary) !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 999px;
  cursor: pointer;
}

.toolbox-subnav a:hover,
.toolbox-subnav button:hover,
.toolbox-subnav button.is-active {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
  box-shadow: 0 4px 12px rgba(20, 32, 48, .08);
}

.toolbox-subnav svg {
  width: 15px;
  height: 15px;
  color: var(--hmj-primary);
}

/* Home follows the reference page's centered hero, compact feature cards and work surface. */
body[data-page="home"] .nt-page,
body[data-page="home"] .haomj-home-main {
  min-height: calc(100vh - 65px);
  background: var(--hmj-bg) !important;
  background-image: none !important;
}

body[data-page="home"] .haomj-page-intro {
  width: min(1152px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 24px 30px;
  text-align: center;
}

body[data-page="home"] .haomj-eyebrow {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: rgba(231, 70, 103, .34) !important;
}

body[data-page="home"] .haomj-eyebrow svg {
  width: 15px;
  height: 15px;
}

body[data-page="home"] .haomj-page-intro h1 {
  margin: 0 0 12px;
  color: var(--hmj-text) !important;
  font-size: 56px;
  line-height: 1.1;
}

body[data-page="home"] .haomj-page-intro h1 em {
  color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-page-intro p:last-child {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="home"] .haomj-feature-section,
body[data-page="home"] .haomj-workspace-panel {
  width: min(1152px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

body[data-page="home"] .haomj-feature-grid {
  gap: 16px;
}

body[data-page="home"] .haomj-feature-card,
body[data-page="home"] .haomj-start-card,
body[data-page="home"] .haomj-workspace-panel {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line-soft) !important;
  box-shadow: var(--hmj-shadow) !important;
}

body[data-page="home"] .haomj-feature-card:hover,
body[data-page="home"] .haomj-start-card:hover {
  background: var(--hmj-card-hover) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-feature-card.is-primary {
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
  box-shadow: 0 10px 28px rgba(231, 70, 103, .15) !important;
}

body[data-page="home"] .haomj-feature-icon,
body[data-page="home"] .haomj-start-card > span:first-child {
  color: var(--hmj-primary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="home"] .haomj-feature-icon svg {
  width: 21px;
  height: 21px;
}

body[data-page="home"] .haomj-upload-drop > svg {
  width: 24px;
  height: 24px;
  color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-feature-card strong,
body[data-page="home"] .haomj-start-card strong,
body[data-page="home"] .haomj-panel-head h2 {
  color: var(--hmj-text) !important;
}

body[data-page="home"] .haomj-feature-card p,
body[data-page="home"] .haomj-start-card p,
body[data-page="home"] .haomj-panel-meta,
body[data-page="home"] .haomj-price-note,
body[data-page="home"] .haomj-account-strip small {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="home"] .haomj-workspace-panel {
  min-height: 560px;
  padding: 20px 24px 28px;
}

body[data-page="home"] .haomj-control-bar,
body[data-page="home"] .haomj-panel-head {
  border-color: var(--hmj-line-soft) !important;
}

body[data-page="home"] .haomj-control-field,
body[data-page="home"] .haomj-control-field select,
body[data-page="home"] .haomj-settings-grid label > span {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="home"] .haomj-control-field select,
body[data-page="home"] .haomj-settings-card select {
  color: var(--hmj-text) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="home"] .haomj-upload-drop,
body[data-page="home"] .haomj-settings-card,
body[data-page="home"] .haomj-account-strip {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="home"] .haomj-upload-drop strong,
body[data-page="home"] .haomj-settings-card > strong,
body[data-page="home"] .haomj-account-strip strong {
  color: var(--hmj-text) !important;
}

body[data-page="home"] .haomj-upload-drop small,
body[data-page="home"] .haomj-upload-label,
body[data-page="home"] .haomj-settings-grid label > span {
  color: var(--hmj-muted) !important;
}

body[data-page="home"] .haomj-upload-drop b {
  color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-submit,
body[data-page="home"] #homeCheckInButton {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="home"] .haomj-output-grid article {
  color: var(--hmj-muted) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line-soft) !important;
}

/* Image and video work surfaces share readable controls and the same content width. */
body[data-page="image"] .app-shell,
body[data-page="video"] .app-shell {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 32px;
  background: var(--hmj-bg) !important;
}

body[data-page="image"] .ak-workspace,
body[data-page="video"] .workbench-grid {
  width: min(1240px, calc(100% - 48px));
  max-width: none;
  margin: 0 auto !important;
  padding: 28px 0 80px;
  background: transparent !important;
}

body[data-page="image"] .panel,
body[data-page="video"] .panel,
body[data-page="image"] .member-login,
body[data-page="video"] .member-login,
body[data-page="image"] .member-package-box,
body[data-page="video"] .member-package-box,
body[data-page="image"] .image-workbench-panel,
body[data-page="video"] .video-form-panel,
body[data-page="video"] .video-history-panel {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  background-image: none !important;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: var(--hmj-shadow) !important;
}

body[data-page="image"] .section-head,
body[data-page="video"] .section-head,
body[data-page="image"] .member-summary,
body[data-page="video"] .member-summary,
body[data-page="image"] .package-box-head,
body[data-page="video"] .package-box-head {
  border-color: var(--hmj-line-soft) !important;
}

body[data-page="image"] .section-head h1,
body[data-page="video"] .section-head h1,
body[data-page="image"] .section-head p,
body[data-page="video"] .section-head p,
body[data-page="image"] legend,
body[data-page="video"] legend,
body[data-page="image"] .field > span,
body[data-page="video"] .field > span,
body[data-page="image"] .package-box-head strong,
body[data-page="video"] .package-box-head strong {
  color: var(--hmj-text) !important;
}

body[data-page="image"] .eyebrow,
body[data-page="video"] .eyebrow,
body[data-page="image"] .section-head .eyebrow,
body[data-page="video"] .section-head .eyebrow {
  color: var(--hmj-primary) !important;
}

body[data-page="image"] .field small,
body[data-page="video"] .field small,
body[data-page="image"] .mode-tab-copy small,
body[data-page="video"] .mode-tab-copy small,
body[data-page="video"] .production-direction-hint,
body[data-page="image"] .member-summary small,
body[data-page="video"] .member-summary small {
  color: var(--hmj-muted) !important;
}

body[data-page="image"] input,
body[data-page="image"] textarea,
body[data-page="image"] select,
body[data-page="video"] input,
body[data-page="video"] textarea,
body[data-page="video"] select {
  min-height: 38px;
  color: var(--hmj-text) !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

body[data-page="image"] input::placeholder,
body[data-page="image"] textarea::placeholder,
body[data-page="video"] input::placeholder,
body[data-page="video"] textarea::placeholder {
  color: var(--hmj-muted) !important;
  opacity: 1;
}

body[data-page="image"] input:focus,
body[data-page="image"] textarea:focus,
body[data-page="image"] select:focus,
body[data-page="video"] input:focus,
body[data-page="video"] textarea:focus,
body[data-page="video"] select:focus {
  border-color: var(--hmj-primary) !important;
  box-shadow: 0 0 0 3px var(--hmj-primary-soft) !important;
}

body[data-page="image"] .field,
body[data-page="video"] .field,
body[data-page="video"] .video-member-credits,
body[data-page="video"] .top-package-box,
body[data-page="image"] .mode-tabs,
body[data-page="video"] .production-direction-field,
body[data-page="image"] .workbench-upload-card,
body[data-page="video"] .workbench-upload-card {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .mode-tab,
body[data-page="video"] .production-direction-grid label > span {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .mode-tab.active,
body[data-page="image"] .mode-tab:has(input:checked),
body[data-page="video"] .production-direction-grid label:has(input:checked) > span {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
  box-shadow: inset 0 -3px var(--hmj-primary) !important;
}

body[data-page="image"] .mode-tab strong,
body[data-page="video"] .production-direction-grid strong,
body[data-page="video"] .production-direction-group-title strong {
  color: inherit !important;
}

body[data-page="image"] .workbench-upload-copy,
body[data-page="video"] .workbench-upload-copy {
  color: var(--hmj-primary) !important;
}

body[data-page="image"] .workbench-upload-card:hover,
body[data-page="video"] .workbench-upload-card:hover {
  border-color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

body[data-page="image"] .button.primary,
body[data-page="video"] .button.primary,
body[data-page="image"] .mini-button.primary,
body[data-page="video"] .mini-button.primary {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="image"] .button.secondary,
body[data-page="video"] .button.secondary,
body[data-page="image"] .mini-button,
body[data-page="video"] .mini-button {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .aurora-task-track,
body[data-page="video"] .aurora-task-track,
body[data-page="image"] .thumb-grid,
body[data-page="video"] .thumb-grid,
body[data-page="image"] .inline-preview,
body[data-page="video"] .inline-preview,
body[data-page="image"] .actions,
body[data-page="video"] .actions {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .aurora-task-track li,
body[data-page="video"] .aurora-task-track li {
  color: var(--hmj-muted) !important;
}

body[data-page="image"] .aurora-task-track li.is-current,
body[data-page="image"] .aurora-task-track li.is-complete,
body[data-page="video"] .aurora-task-track li.is-current,
body[data-page="video"] .aurora-task-track li.is-complete {
  color: var(--hmj-primary) !important;
}

body[data-page="image"] .aurora-task-track i,
body[data-page="video"] .aurora-task-track i {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line-strong) !important;
}

body[data-page="image"] .aurora-task-track li.is-current i,
body[data-page="image"] .aurora-task-track li.is-complete i,
body[data-page="video"] .aurora-task-track li.is-current i,
body[data-page="video"] .aurora-task-track li.is-complete i {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="video"] .video-duration-price,
body[data-page="video"] .video-fixed-quality {
  color: var(--hmj-text) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="video"] .video-fixed-quality > span {
  color: var(--hmj-muted) !important;
}

body[data-page="video"] .video-fixed-quality > strong {
  color: var(--hmj-green) !important;
}

/* The legacy image stylesheet hard-coded a dark detail-page block. Rebind it to the active theme. */
body[data-page="image"] .image-workbench-panel .mode-note,
body[data-page="image"] .image-workbench-panel.mode-clone .mode-note {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: color-mix(in srgb, var(--hmj-primary) 30%, var(--hmj-line)) !important;
}

body[data-page="image"] .copy-field .field-heading label,
body[data-page="image"] .detail-module-option strong,
body[data-page="image"] .image-workbench-panel .subhead,
body[data-page="image"] .structure-head span {
  color: var(--hmj-text) !important;
}

body[data-page="image"] .copy-field .field-guidance,
body[data-page="image"] .clone-settings-help,
body[data-page="image"] .detail-module-option small,
body[data-page="image"] .kit-structure > small,
body[data-page="image"] .structure-head small {
  color: var(--hmj-muted) !important;
}

body[data-page="image"] .kit-structure,
body[data-page="image"] .detail-module-option {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  background-image: none !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .structure-head strong {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

body[data-page="image"] .detail-module-option:hover,
body[data-page="image"] .detail-module-option.selected,
body[data-page="image"] .detail-module-option:has(input:checked) {
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="image"] .detail-module-option input {
  accent-color: var(--hmj-primary) !important;
}

body[data-page="image"] .copy-field .ai-write-status {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .api-result,
body[data-page="image"] .image-workbench-panel .api-result,
body[data-page="image"] .history-toolbar,
body[data-page="image"] .history-empty {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

/* Workspace: flatten the old fixed sidebar into a second horizontal rail below the main menu. */
body.workspace-page .workspace-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 65px auto auto minmax(0, 1fr) !important;
  min-height: 100vh;
  background: var(--hmj-bg) !important;
}

body.workspace-page .workspace-stage {
  display: contents !important;
  min-width: 0;
  margin-left: 0 !important;
  background: var(--hmj-bg) !important;
}

body.workspace-page .workspace-topbar {
  position: sticky !important;
  top: 0;
  z-index: 100;
  grid-column: 1;
  grid-row: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  height: 65px;
  min-height: 65px;
  margin: 0;
  padding: 0 24px;
  color: var(--hmj-text) !important;
  background: var(--hmj-nav) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hmj-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: var(--hmj-shadow) !important;
}

body.workspace-page .workspace-menu-button,
body.workspace-page .workspace-topbar-slogan {
  display: none !important;
}

body.workspace-page .workspace-search {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: min(250px, 100%);
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-search input {
  min-height: 34px;
  color: var(--hmj-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.workspace-page .workspace-global-nav {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex !important;
  align-items: center;
  gap: 2px;
  max-width: min(100%, 560px);
  padding: 4px;
  overflow-x: auto;
  background: var(--hmj-primary-soft) !important;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 999px;
  transform: none !important;
  scrollbar-width: none;
}

body.workspace-page .workspace-global-nav::-webkit-scrollbar {
  display: none;
}

body.workspace-page .workspace-global-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 13px;
  color: var(--hmj-text-secondary) !important;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 999px;
}

body.workspace-page .workspace-global-nav a:hover,
body.workspace-page .workspace-global-nav a.active {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
}

body.workspace-page .workspace-topbar-actions {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex !important;
  align-items: center;
  gap: 6px !important;
  min-width: 0;
}

body.workspace-page .workspace-icon-button,
body.workspace-page .workspace-balance-chip,
body.workspace-page .workspace-profile {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-icon-button:hover,
body.workspace-page .workspace-balance-chip:hover,
body.workspace-page .workspace-profile:hover {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .workspace-top-recharge,
body.workspace-page .workspace-button.primary {
  color: #2d2108 !important;
  background: var(--hmj-amber) !important;
  border-color: var(--hmj-amber) !important;
}

body.workspace-page .workspace-sidebar {
  position: sticky !important;
  inset: auto !important;
  top: 65px;
  z-index: 70;
  grid-column: 1;
  grid-row: 2;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  width: 100% !important;
  height: auto !important;
  min-height: 70px;
  max-height: none !important;
  padding: 10px max(14px, calc((100% - 1320px) / 2));
  overflow: hidden;
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hmj-line-soft) !important;
  box-shadow: 0 8px 20px rgba(20, 32, 48, .07) !important;
  transform: none !important;
}

body.workspace-page .workspace-brand {
  display: inline-flex;
  flex: 0 0 220px;
  align-items: center;
  height: auto !important;
  max-height: none !important;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px;
  color: var(--hmj-text) !important;
  border: 1px solid transparent;
  border-radius: 10px;
}

body.workspace-page .workspace-brand:hover {
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-brand-mark {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(231, 70, 103, .2);
}

body.workspace-page .workspace-brand strong,
body.workspace-page .workspace-nav-group > span,
body.workspace-page .workspace-page-heading h1,
body.workspace-page .workspace-section-head h2,
body.workspace-page .workspace-tool-grid strong,
body.workspace-page .workspace-card strong,
body.workspace-page .workspace-metrics strong {
  color: var(--hmj-text) !important;
}

body.workspace-page .workspace-brand small,
body.workspace-page .workspace-nav-group > span,
body.workspace-page .workspace-page-heading span,
body.workspace-page .workspace-section-head span,
body.workspace-page .workspace-metrics small,
body.workspace-page .workspace-metrics em,
body.workspace-page .workspace-tool-grid small,
body.workspace-page .workspace-card small,
body.workspace-page .workspace-empty-state {
  color: var(--hmj-muted) !important;
}

body.workspace-page .workspace-nav {
  display: flex !important;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 2px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

body.workspace-page .workspace-nav::-webkit-scrollbar {
  display: none;
}

body.workspace-page .workspace-nav-group {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding-right: 8px;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--hmj-line-soft) !important;
  box-shadow: none !important;
}

body.workspace-page .workspace-nav-group:last-child {
  border-right: 0 !important;
}

body.workspace-page .workspace-nav-group > span {
  flex: 0 0 auto;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

body.workspace-page .workspace-nav-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  color: var(--hmj-text-secondary) !important;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px;
}

body.workspace-page .workspace-nav-group a:hover,
body.workspace-page .workspace-nav-group a.is-active,
body.workspace-page .workspace-nav-group a.active {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: rgba(231, 70, 103, .3) !important;
  box-shadow: inset 0 -2px var(--hmj-primary);
}

body.workspace-page .workspace-nav-group a svg,
body.workspace-page .workspace-nav-group a i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  color: var(--hmj-muted) !important;
}

body.workspace-page .workspace-nav-group a:hover svg,
body.workspace-page .workspace-nav-group a.is-active svg,
body.workspace-page .workspace-nav-group a.active svg,
body.workspace-page .workspace-nav-group a:hover i,
body.workspace-page .workspace-nav-group a.is-active i,
body.workspace-page .workspace-nav-group a.active i {
  color: var(--hmj-primary) !important;
}

body.workspace-page .workspace-service {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 42px;
  width: auto !important;
  max-width: 190px;
  margin-left: 10px;
  padding: 5px 10px;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 10px;
}

body.workspace-page .workspace-service svg,
body.workspace-page .workspace-service i {
  color: var(--hmj-primary) !important;
}

body.workspace-page .workspace-visit-tabs-shell {
  grid-column: 1;
  grid-row: 3;
  min-height: 0;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-bottom-color: var(--hmj-line-soft) !important;
}

body.workspace-page .workspace-visit-tabs button {
  color: var(--hmj-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body.workspace-page .workspace-visit-tabs button.is-active {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-main {
  grid-column: 1;
  grid-row: 4;
  width: min(1380px, 100%);
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: 30px clamp(18px, 4vw, 54px) 72px;
  color: var(--hmj-text) !important;
  background: var(--hmj-bg) !important;
}

body.workspace-page .workspace-tool-subnav {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 6px;
  overflow-x: auto;
  background: var(--hmj-bg-deep) !important;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 10px;
  scrollbar-width: none;
}

body.workspace-page .workspace-tool-subnav::-webkit-scrollbar {
  display: none;
}

body.workspace-page .workspace-metrics article,
body.workspace-page .workspace-section,
body.workspace-page .workspace-form-surface,
body.workspace-page .workspace-placeholder,
body.workspace-page .workspace-panel,
body.workspace-page .workspace-card,
body.workspace-page .workspace-table-surface {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  background-image: none !important;
  border-color: var(--hmj-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: var(--hmj-shadow) !important;
}

body.workspace-page .workspace-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.workspace-page .workspace-tool-grid > a {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-tool-grid > a:hover {
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .workspace-workflow {
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line-soft) !important;
}

body.workspace-page .workspace-workflow li {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line-soft) !important;
}

body.workspace-page .workspace-workflow li span,
body.workspace-page .workspace-page-heading p,
body.workspace-page .workspace-section-head p {
  color: var(--hmj-primary) !important;
}

body.workspace-page .workspace-button.secondary {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .workspace-field input,
body.workspace-page .workspace-field textarea,
body.workspace-page .workspace-field select {
  color: var(--hmj-text) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
}

/* Auth and dialog surfaces use the same contrast rules in both themes. */
body[data-page="home"] .member-auth-modal,
body[data-page="image"] .member-auth-modal,
body[data-page="video"] .member-auth-modal,
body.workspace-page .member-auth-modal,
body[data-page="home"] .member-auth-dialog,
body[data-page="image"] .member-auth-dialog,
body[data-page="video"] .member-auth-dialog,
body.workspace-page .member-auth-dialog,
body[data-page="home"] .cj-auth-dialog,
body[data-page="image"] .cj-auth-dialog,
body[data-page="video"] .cj-auth-dialog,
body.workspace-page .cj-auth-dialog,
body[data-page="image"] dialog,
body[data-page="video"] dialog,
body.workspace-page dialog {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  box-shadow: 0 24px 70px rgba(20, 32, 48, .2) !important;
}

body[data-page="home"] .member-auth-card,
body[data-page="image"] .member-auth-card,
body[data-page="video"] .member-auth-card,
body.workspace-page .member-auth-card,
body[data-page="home"] .cj-auth-card,
body[data-page="image"] .cj-auth-card,
body[data-page="video"] .cj-auth-card,
body.workspace-page .cj-auth-card {
  color: var(--hmj-text) !important;
  background: transparent !important;
}

body[data-page="home"] .member-auth-card input,
body[data-page="image"] .member-auth-card input,
body[data-page="video"] .member-auth-card input,
body.workspace-page .member-auth-card input,
body[data-page="home"] .cj-auth-field input,
body[data-page="image"] .cj-auth-field input,
body[data-page="video"] .cj-auth-field input,
body.workspace-page .cj-auth-field input {
  color: var(--hmj-text) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="home"] .member-auth-card button[type="submit"],
body[data-page="image"] .member-auth-card button[type="submit"],
body[data-page="video"] .member-auth-card button[type="submit"],
body.workspace-page .member-auth-card button[type="submit"],
body[data-page="home"] .cj-auth-submit,
body[data-page="image"] .cj-auth-submit,
body[data-page="video"] .cj-auth-submit,
body.workspace-page .cj-auth-submit {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

/* Responsive behavior keeps both rails horizontal and scrollable instead of stacking every business item. */
@media (max-width: 1280px) {
  body[data-page="home"] .haomj-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.workspace-page .workspace-brand {
    flex-basis: 190px;
  }

  body.workspace-page .workspace-service {
    display: none;
  }
}

@media (max-width: 900px) {
  body[data-page="home"] .haomj-topbar {
    padding: 0 12px;
  }

  body[data-page="home"] .haomj-topbar-inner {
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  body[data-page="home"] .haomj-topbar .topnav:not(.is-open) {
    position: static !important;
    display: inline-flex !important;
    flex: 1 1 0;
    max-width: none;
    margin: 0;
  }

  body[data-page="home"] .nt-menu-button {
    display: none !important;
  }

  body[data-page="home"] .haomj-topbar-actions {
    flex: 0 0 auto;
  }

  body[data-page="home"] .haomj-purchase-link {
    display: none;
  }

  body[data-page="image"] .topbar,
  body[data-page="video"] .topbar {
    padding: 0 12px;
  }

  body[data-page="image"] .topbar .global-recharge-panel,
  body[data-page="video"] .topbar .global-recharge-panel {
    display: none !important;
  }

  body[data-page="image"] .topbar .toolbox-theme-control,
  body[data-page="video"] .topbar .toolbox-theme-control {
    display: block !important;
  }

  body[data-page="image"] .topbar .brand,
  body[data-page="video"] .topbar .brand {
    flex-basis: 190px;
  }

  body[data-page="image"] .topbar .topnav,
  body[data-page="video"] .topbar .topnav {
    flex: 1 1 0;
    max-width: none;
  }

  body.workspace-page .workspace-topbar {
    padding: 0 12px;
  }

  body.workspace-page .workspace-search {
    width: 180px;
  }

  body.workspace-page .workspace-global-nav {
    max-width: 440px;
  }

  body.workspace-page .workspace-sidebar {
    padding-right: 12px;
    padding-left: 12px;
  }

  body.workspace-page .workspace-brand {
    flex-basis: 150px;
  }

  body.workspace-page .workspace-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .nt-brand__copy small,
  body[data-page="image"] .topbar .brand > span:last-child,
  body[data-page="video"] .topbar .brand > span:last-child {
    display: none !important;
  }

  body[data-page="home"] .nt-brand {
    flex: 0 0 auto;
  }

  body[data-page="home"] .haomj-topbar .topnav a,
  body[data-page="image"] .topbar .topnav a,
  body[data-page="video"] .topbar .topnav a {
    padding: 0 10px;
    font-size: 11px;
  }

  body[data-page="home"] .haomj-page-intro,
  body[data-page="home"] .haomj-feature-section,
  body[data-page="home"] .haomj-workspace-panel,
  body[data-page="image"] .ak-workspace,
  body[data-page="video"] .workbench-grid {
    width: calc(100% - 24px);
  }

  body[data-page="home"] .haomj-page-intro {
    padding: 30px 8px 24px;
  }

  body[data-page="home"] .haomj-page-intro h1 {
    font-size: 40px;
  }

  body[data-page="home"] .haomj-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-page="home"] .haomj-feature-card {
    min-height: 132px;
    padding: 15px;
  }

  body[data-page="home"] .haomj-feature-card p {
    white-space: normal;
  }

  body[data-page="home"] .haomj-workspace-panel {
    padding: 16px;
  }

  .toolbox-subnav {
    justify-content: flex-start;
    padding-right: 12px;
    padding-left: 12px;
  }

  body.workspace-page .workspace-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.workspace-page .workspace-search {
    display: none !important;
  }

  body.workspace-page .workspace-global-nav {
    grid-column: 1;
    max-width: none;
    justify-self: stretch;
    justify-content: flex-start;
  }

  body.workspace-page .workspace-topbar-actions {
    grid-column: 2;
  }

  body.workspace-page .workspace-sidebar {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 8px 10px;
  }

  body.workspace-page .workspace-brand {
    grid-column: 1;
    flex-basis: auto;
    width: 42px;
    padding: 2px;
  }

  body.workspace-page .workspace-brand > span:last-child,
  body.workspace-page .workspace-nav-group > span {
    display: none !important;
  }

  body.workspace-page .workspace-nav {
    grid-column: 2;
    width: 100%;
  }

  body.workspace-page .workspace-nav-group {
    padding-right: 4px;
  }

  body.workspace-page .workspace-nav-group a {
    min-height: 36px;
    padding-right: 9px;
    padding-left: 9px;
    font-size: 10px;
  }

  body.workspace-page .workspace-main {
    padding: 22px 12px 48px;
  }

  body.workspace-page .workspace-tool-grid {
    grid-template-columns: 1fr;
  }
}

/* Final readability pass: legacy history markup follows the shared theme. */
body[data-page="image"] .history-card,
body[data-page="video"] .history-card {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  box-shadow: var(--hmj-shadow) !important;
}

body[data-page="image"] .history-card.accent,
body[data-page="image"] .history-card.warning,
body[data-page="image"] .history-card.success,
body[data-page="image"] .history-card.danger,
body[data-page="video"] .history-card.accent,
body[data-page="video"] .history-card.warning,
body[data-page="video"] .history-card.success,
body[data-page="video"] .history-card.danger {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .history-title,
body[data-page="video"] .history-title,
body[data-page="image"] .history-card strong,
body[data-page="video"] .history-card strong {
  color: var(--hmj-text) !important;
}

body[data-page="image"] .history-meta,
body[data-page="image"] .history-detail,
body[data-page="image"] .history-card small,
body[data-page="video"] .history-meta,
body[data-page="video"] .history-detail,
body[data-page="video"] .history-card small {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="image"] .history-compact-meta > span,
body[data-page="image"] .history-items span,
body[data-page="video"] .history-compact-meta > span,
body[data-page="video"] .history-items span {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .history-success-time,
body[data-page="video"] .history-success-time {
  color: var(--hmj-green) !important;
  background: color-mix(in srgb, var(--hmj-green) 11%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-green) 32%, var(--hmj-line)) !important;
}

body[data-page="image"] .history-task-duration,
body[data-page="video"] .history-task-duration {
  color: var(--hmj-danger) !important;
}

body[data-page="image"] .history-actions .mini-button,
body[data-page="video"] .history-actions .mini-button {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

/* The real child remains visible while its business scripts finish mounting. */
body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame,
body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* Upload rail: keep the optional video face material beside the other two uploads. */
@media (min-width: 760px) {
  body[data-page="image"] .workbench-upload-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body[data-page="image"] .workbench-upload-pair:has(> .workbench-upload-card[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="video"] .workbench-upload-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body[data-page="video"] .workbench-upload-pair:has(> #faceAssetsCard:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="image"] .workbench-upload-pair > .workbench-upload-card,
  body[data-page="video"] .workbench-upload-pair > .workbench-upload-card {
    min-width: 0 !important;
    min-height: 78px !important;
    margin: 0 !important;
  }

  body[data-page="video"] .workbench-upload-pair > #faceAssetsCard:not([hidden]) {
    display: grid !important;
  }
}

@media (max-width: 759px) {
  body[data-page="image"] .workbench-upload-pair,
  body[data-page="video"] .workbench-upload-pair {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* Video controls: restore contrast after the legacy green treatment and keep the quality card light. */
body[data-page="video"] .video-copy-field .field-heading label,
body[data-page="video"] .video-copy-field .field-guidance,
body[data-page="video"] .video-copy-field textarea,
body[data-page="video"] .video-option-field > span,
body[data-page="video"] .video-option-field legend {
  color: var(--hmj-text) !important;
}

body[data-page="video"] .video-copy-field .field-heading label {
  font-size: 14px !important;
  font-weight: 800 !important;
}

body[data-page="video"] .video-copy-field .field-guidance {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="video"] .video-copy-field textarea::placeholder {
  color: var(--hmj-muted) !important;
  opacity: 1;
}

body[data-page="video"] .video-fixed-quality {
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 72px !important;
  padding: 10px 12px !important;
  color: var(--hmj-text) !important;
  background: linear-gradient(135deg, #fff8ee 0%, #fff1f4 52%, #edf8ff 100%) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-primary) 22%, var(--hmj-line)) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(57, 36, 32, .06) !important;
}

body[data-page="video"] .video-fixed-quality > span {
  color: var(--hmj-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

body[data-page="video"] .video-fixed-quality .video-segmented {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body[data-page="video"] .video-fixed-quality .video-segmented label {
  display: block !important;
}

body[data-page="video"] .video-fixed-quality .video-segmented label > span {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  color: var(--hmj-primary) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-page="video"] .video-spec-strip .video-price-hd {
  color: var(--hmj-text) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

html[data-toolbox-theme="dark"] body[data-page="video"] .video-fixed-quality {
  background: linear-gradient(135deg, #30241d 0%, #30202a 52%, #172b35 100%) !important;
  border-color: color-mix(in srgb, var(--hmj-primary) 46%, var(--hmj-line)) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .24) !important;
}

/* History panel: compact, high-contrast hierarchy for retention, filters and records. */
body[data-page="video"] .video-history-panel .history-toolbar {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body[data-page="video"] .video-retention-notice {
  display: block !important;
  margin: 0 !important;
  padding: 8px 11px !important;
  color: var(--hmj-text-secondary) !important;
  background: color-mix(in srgb, var(--hmj-amber) 9%, var(--hmj-card-raised)) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-amber) 28%, var(--hmj-line)) !important;
  border-left: 3px solid var(--hmj-amber) !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

body[data-page="video"] .history-date-filter {
  display: grid !important;
  grid-template-columns: minmax(0, .85fr) minmax(190px, 1.15fr) !important;
  gap: 12px !important;
  align-items: center !important;
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  background: linear-gradient(120deg, #fffaf2 0%, #fff6f8 52%, #f4f8ff 100%) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-primary) 24%, var(--hmj-line)) !important;
  border-radius: 9px !important;
}

body[data-page="video"] .history-date-filter > div,
body[data-page="video"] .history-date-filter > label {
  min-width: 0 !important;
}

body[data-page="video"] .history-date-filter > div {
  display: grid !important;
  gap: 3px !important;
}

body[data-page="video"] .history-date-filter span {
  color: var(--hmj-text-secondary) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

body[data-page="video"] .history-date-filter strong {
  color: var(--hmj-text) !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

body[data-page="video"] .history-date-filter > label {
  display: grid !important;
  gap: 4px !important;
}

body[data-page="video"] .history-date-filter input {
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 0 9px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

body[data-page="video"] .history-status-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 10px !important;
}

body[data-page="video"] .history-status-tabs button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body[data-page="video"] .history-status-tabs button strong {
  display: grid !important;
  place-items: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 6px !important;
  color: inherit !important;
  background: color-mix(in srgb, currentColor 10%, var(--hmj-card-raised)) !important;
  border-radius: 999px !important;
  font-size: 11px !important;
}

body[data-page="video"] .history-status-tabs button:nth-child(1) { color: var(--hmj-cyan) !important; }
body[data-page="video"] .history-status-tabs button:nth-child(2) { color: var(--hmj-amber) !important; }
body[data-page="video"] .history-status-tabs button:nth-child(3) { color: var(--hmj-green) !important; }

body[data-page="video"] .history-action-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(94px, .75fr)) !important;
  gap: 7px !important;
  align-items: center !important;
  margin: 0 0 10px !important;
}

body[data-page="video"] .history-action-row > *,
body[data-page="video"] .history-select-stack,
body[data-page="video"] .history-download-stack {
  min-width: 0 !important;
}

body[data-page="video"] .history-select-stack,
body[data-page="video"] .history-download-stack {
  display: grid !important;
  gap: 4px !important;
}

body[data-page="video"] .history-action-row button {
  width: 100% !important;
  min-height: 34px !important;
  padding: 0 9px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 7px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

body[data-page="video"] .history-action-row #downloadSelectedVideos {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body[data-page="video"] #historySelectStatus {
  overflow: hidden !important;
  color: var(--hmj-cyan) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body[data-page="video"] .video-history-list {
  gap: 8px !important;
  max-height: 680px !important;
}

body[data-page="video"] .video-history-list.empty {
  min-height: 100px !important;
  padding: 24px 14px !important;
  color: var(--hmj-muted) !important;
  background: var(--hmj-input) !important;
  border: 1px dashed var(--hmj-line) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  text-align: center !important;
}

html[data-toolbox-theme="dark"] body[data-page="video"] .history-date-filter {
  background: linear-gradient(120deg, #28221b 0%, #2b1f27 52%, #18252d 100%) !important;
}

@media (max-width: 759px) {
  body[data-page="video"] .history-date-filter,
  body[data-page="video"] .history-action-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="video"] .history-status-tabs {
    gap: 6px !important;
  }

  body[data-page="video"] .history-status-tabs button {
    padding-inline: 7px !important;
    font-size: 10px !important;
  }
}

/* Seed remake pricing is intentionally omitted from the user-facing controls. */
body.workspace-page .video-remake-view .video-remake-durations span {
  min-height: 48px !important;
  padding: 8px 10px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 8px !important;
}

body.workspace-page .video-remake-view .video-remake-durations strong {
  color: inherit !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

body.workspace-page .video-remake-view .video-remake-durations label.is-active span,
body.workspace-page .video-remake-view .video-remake-durations label.is-active strong {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-view .video-remake-clip-note {
  margin: 0 !important;
  padding: 7px 10px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}

body.workspace-page .video-remake-view #videoRemakeQuote {
  display: none !important;
}

/* Feature rail: equal cards with centered icon, title and description. */
body[data-page="home"] .haomj-feature-grid {
  align-items: stretch;
}

body[data-page="home"] .haomj-feature-card {
  display: grid !important;
  grid-template-rows: 40px 22px minmax(18px, auto) !important;
  justify-items: center !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 150px !important;
  padding: 16px 12px 14px !important;
  text-align: center !important;
}

body[data-page="home"] .haomj-feature-icon {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

body[data-page="home"] .haomj-feature-card strong,
body[data-page="home"] .haomj-feature-card p {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body[data-page="home"] .haomj-feature-card strong {
  align-self: center !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

body[data-page="home"] .haomj-feature-card p {
  align-self: start !important;
  margin: 0 !important;
  color: var(--hmj-text-secondary) !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

@media (max-width: 1280px) {
  body[data-page="home"] .haomj-feature-card {
    min-height: 142px !important;
    padding-inline: 10px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .haomj-feature-card {
    min-height: 150px !important;
    padding-inline: 12px !important;
  }
}

/* Six compact entry cards fit the desktop rail in one row. */
@media (min-width: 1281px) {
  body[data-page="home"] .haomj-feature-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-page="home"] .haomj-feature-card {
    grid-template-rows: 34px 20px 18px !important;
    min-height: 126px !important;
    padding: 12px !important;
    gap: 6px !important;
  }

  body[data-page="home"] .haomj-feature-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  body[data-page="home"] .haomj-feature-icon svg {
    width: 18px;
    height: 18px;
  }

  body[data-page="home"] .haomj-feature-card strong {
    font-size: 14px !important;
    line-height: 20px !important;
    white-space: nowrap;
  }

  body[data-page="home"] .haomj-feature-card p {
    overflow: hidden;
    font-size: 11px !important;
    line-height: 18px !important;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Image modes with two active upload cards stay on one row. The reference card
   keeps a legacy hidden attribute while the mode script makes it visible. */
@media (min-width: 760px) {
  body[data-page="image"] .image-workbench-panel:has(input[name="taskMode"][value="hot_clone"]:checked) .workbench-upload-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="image"] .image-workbench-panel:has(input[name="taskMode"][value="hot_clone"]:checked) .workbench-upload-pair > .workbench-upload-card {
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .haomj-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="home"] .haomj-feature-card {
    height: auto !important;
    min-height: 176px;
    overflow: visible;
  }

  body[data-page="home"] .haomj-feature-card strong,
  body[data-page="home"] .haomj-feature-card p {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  body[data-page="home"] .haomj-topbar-actions .haomj-account-link {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 11px;
  }

  .toolbox-theme-control > summary {
    padding-right: 8px;
    padding-left: 8px;
  }

  .toolbox-theme-control > summary span {
    display: none;
  }
}

/* The legacy mobile sheet stacks this header vertically; keep the primary rail horizontal. */
@media (max-width: 760px) {
  body[data-page="home"] .haomj-topbar-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: calc(100% - 20px) !important;
  }

  body[data-page="home"] .nt-brand {
    flex: 0 0 auto !important;
    min-width: 40px;
  }

  body[data-page="home"] .nt-menu-button {
    display: none !important;
  }

  body[data-page="home"] .haomj-topbar .topnav,
  body[data-page="home"] .haomj-topbar .topnav.is-open {
    position: static !important;
    display: inline-flex !important;
    flex: 1 1 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: var(--hmj-primary-soft) !important;
    border-color: var(--hmj-line-soft) !important;
    box-shadow: none !important;
  }

  body[data-page="home"] .haomj-topbar .topnav a {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }

  body[data-page="home"] .haomj-topbar-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 6px !important;
  }

  body[data-page="image"] .topbar,
  body[data-page="video"] .topbar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  body[data-page="image"] .topbar .topnav,
  body[data-page="video"] .topbar .topnav {
    order: 0 !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    min-width: 0;
  }

  body[data-page="image"] .topbar .topnav a,
  body[data-page="video"] .topbar .topnav a {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
  }
}

/* Home portal: mount the existing business pages below the feature rail. */
body[data-page="home"] .haomj-page-intro,
body[data-page="home"] .haomj-feature-section,
body[data-page="home"] .haomj-home-portal {
  width: min(1240px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

body[data-page="home"] .haomj-home-portal {
  padding: 0 0 72px;
  scroll-margin-top: 84px;
}

body[data-page="home"] .haomj-portal-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 74px;
  padding: 0 2px 16px;
  border-bottom: 1px solid var(--hmj-line-soft);
}

body[data-page="home"] .haomj-portal-heading > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body[data-page="home"] .haomj-panel-kicker {
  margin: 0;
  color: var(--hmj-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

body[data-page="home"] .haomj-portal-heading h2 {
  margin: 0;
  color: var(--hmj-text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
}

body[data-page="home"] .haomj-portal-heading > div:first-child > span {
  color: var(--hmj-muted);
  font-size: 12px;
  line-height: 1.6;
}

body[data-page="home"] .haomj-portal-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

body[data-page="home"] .haomj-portal-status,
body[data-page="home"] .haomj-portal-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  color: var(--hmj-text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: var(--hmj-input);
  border: 1px solid var(--hmj-line);
  border-radius: 7px;
}

body[data-page="home"] .haomj-portal-status[data-tone="success"] {
  color: var(--hmj-green);
  background: color-mix(in srgb, var(--hmj-green) 9%, var(--hmj-card));
  border-color: color-mix(in srgb, var(--hmj-green) 28%, var(--hmj-line));
}

body[data-page="home"] .haomj-portal-status[data-tone="error"] {
  color: var(--hmj-danger);
}

body[data-page="home"] .haomj-portal-back {
  gap: 6px;
  color: var(--hmj-text);
  cursor: pointer;
}

body[data-page="home"] .haomj-portal-back:hover {
  color: var(--hmj-primary);
  border-color: var(--hmj-primary);
}

body[data-page="home"] .haomj-portal-back svg {
  width: 15px;
  height: 15px;
}

body[data-page="home"] .haomj-portal-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding-top: 16px;
}

body[data-page="home"] .haomj-home-portal.is-tool-only .haomj-portal-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-page="home"] .haomj-home-portal.is-tool-only .haomj-record-rail {
  display: none;
}

body[data-page="home"] .haomj-record-rail,
body[data-page="home"] .haomj-tool-stage {
  min-width: 0;
  color: var(--hmj-text);
  background: var(--hmj-card);
  border: 1px solid var(--hmj-line-soft);
  border-radius: 8px;
  box-shadow: var(--hmj-shadow);
}

body[data-page="home"] .haomj-tool-stage {
  order: 2;
}

body[data-page="home"] .haomj-record-rail {
  position: sticky;
  top: 81px;
  order: 1;
  display: grid;
  grid-template-rows: auto auto auto minmax(110px, 1fr) auto;
  max-height: calc(100vh - 98px);
  overflow: hidden;
}

body[data-page="home"] .haomj-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 66px;
  padding: 14px 15px 12px;
  border-bottom: 1px solid var(--hmj-line-soft);
}

body[data-page="home"] .haomj-record-head > div {
  display: grid;
  gap: 2px;
}

body[data-page="home"] .haomj-record-head h3 {
  margin: 0;
  color: var(--hmj-text);
  font-size: 16px;
  line-height: 1.25;
}

body[data-page="home"] .haomj-record-count {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--hmj-primary);
  font-size: 11px;
  font-weight: 800;
  background: var(--hmj-primary-soft);
  border: 1px solid color-mix(in srgb, var(--hmj-primary) 28%, var(--hmj-line));
  border-radius: 50%;
}

body[data-page="home"] .haomj-record-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 9px;
  border-bottom: 1px solid var(--hmj-line-soft);
}

body[data-page="home"] .haomj-record-tabs button {
  min-width: 0;
  min-height: 30px;
  padding: 0 6px;
  color: var(--hmj-muted);
  font-size: 11px;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

body[data-page="home"] .haomj-record-tabs button:hover,
body[data-page="home"] .haomj-record-tabs button.is-active {
  color: var(--hmj-text);
  background: var(--hmj-input);
  border-color: var(--hmj-line);
}

body[data-page="home"] .haomj-record-date-filter {
  display: grid;
  gap: 8px;
  padding: 10px 10px 9px;
  border-bottom: 1px solid var(--hmj-line-soft);
}

body[data-page="home"] .haomj-record-date-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

body[data-page="home"] .haomj-record-date-presets button {
  min-width: 0;
  min-height: 28px;
  padding: 0 4px;
  color: var(--hmj-muted);
  font-size: 10px;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

body[data-page="home"] .haomj-record-date-presets button:hover,
body[data-page="home"] .haomj-record-date-presets button.is-active {
  color: var(--hmj-text);
  background: var(--hmj-input);
  border-color: var(--hmj-line);
}

body[data-page="home"] .haomj-record-date-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

body[data-page="home"] .haomj-record-date-field span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--hmj-muted);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

body[data-page="home"] .haomj-record-date-field svg {
  width: 13px;
  height: 13px;
  color: var(--hmj-primary);
}

body[data-page="home"] .haomj-record-date-field input {
  width: 100%;
  min-width: 0;
  min-height: 29px;
  padding: 0 7px;
  color: var(--hmj-text-secondary);
  font: inherit;
  font-size: 10px;
  background: var(--hmj-input);
  border: 1px solid var(--hmj-line);
  border-radius: 6px;
}

body[data-page="home"] .haomj-record-date-field input:focus {
  outline: 0;
  border-color: var(--hmj-primary);
  box-shadow: 0 0 0 2px var(--hmj-primary-soft);
}

body[data-page="home"] .haomj-record-list {
  min-height: 110px;
  padding: 6px 9px;
  overflow: auto;
  overscroll-behavior: contain;
}

body[data-page="home"] .haomj-record-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 156px;
  margin: 0;
  color: var(--hmj-muted);
  font-size: 11px;
  text-align: center;
}

body[data-page="home"] .haomj-record-empty svg {
  width: 22px;
  height: 22px;
  color: var(--hmj-primary);
}

body[data-page="home"] .haomj-record-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 58px;
  margin: 0;
  padding: 7px 5px;
  color: var(--hmj-text);
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hmj-line-soft);
  border-radius: 0;
  cursor: pointer;
}

body[data-page="home"] .haomj-record-item:last-child {
  border-bottom: 0;
}

body[data-page="home"] .haomj-record-item:hover,
body[data-page="home"] .haomj-record-item.is-active {
  background: var(--hmj-card-hover);
}

body[data-page="home"] .haomj-record-item.is-active::before {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -1px;
  width: 2px;
  content: "";
  background: var(--hmj-primary);
}

body[data-page="home"] .haomj-record-preview {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  color: var(--hmj-primary);
  background: var(--hmj-bg-deep);
  border: 1px solid var(--hmj-line-soft);
  border-radius: 6px;
}

body[data-page="home"] .haomj-record-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body[data-page="home"] .haomj-record-preview svg {
  width: 18px;
  height: 18px;
}

body[data-page="home"] .haomj-record-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

body[data-page="home"] .haomj-record-copy strong,
body[data-page="home"] .haomj-record-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="home"] .haomj-record-copy strong {
  color: var(--hmj-text);
  font-size: 11px;
  line-height: 1.3;
}

body[data-page="home"] .haomj-record-copy small {
  color: var(--hmj-muted);
  font-size: 9px;
}

body[data-page="home"] .haomj-record-state {
  max-width: 54px;
  overflow: hidden;
  color: var(--hmj-muted);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-page="home"] .haomj-record-item.is-success .haomj-record-state { color: var(--hmj-green); }
body[data-page="home"] .haomj-record-item.is-error .haomj-record-state { color: var(--hmj-danger); }
body[data-page="home"] .haomj-record-item.is-pending .haomj-record-state { color: var(--hmj-amber); }

body[data-page="home"] .haomj-record-foot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 10px;
  color: var(--hmj-text-secondary);
  font-size: 10px;
  font-weight: 700;
  background: var(--hmj-input);
  border: 0;
  border-top: 1px solid var(--hmj-line-soft);
  border-radius: 0;
  cursor: pointer;
}

body[data-page="home"] .haomj-record-foot:hover {
  color: var(--hmj-primary);
}

body[data-page="home"] .haomj-record-foot svg {
  width: 14px;
  height: 14px;
}

body[data-page="home"] .haomj-tool-stage {
  position: relative;
  min-height: 760px;
  overflow: hidden;
}

body[data-page="home"] #homeToolFrame {
  display: block;
  width: 100%;
  min-height: 760px;
  color-scheme: light dark;
  background: transparent;
  border: 0;
  opacity: 1;
  transition: opacity 120ms ease;
}

/* 统一媒体上传控件：桌面端保持字段名、操作提示、格式说明在同一行。 */
body[data-page="image"] .workbench-upload-card,
body[data-page="video"] .workbench-upload-card,
body.workspace-page .video-remake-upload {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .workbench-upload-card > span:first-child,
body[data-page="video"] .workbench-upload-card > span:first-child,
body[data-page="image"] .workbench-upload-card .workbench-upload-copy strong,
body[data-page="video"] .workbench-upload-card .workbench-upload-copy strong,
body.workspace-page .video-remake-upload strong {
  color: var(--hmj-text) !important;
}

body[data-page="image"] .workbench-upload-card .workbench-upload-copy em,
body[data-page="video"] .workbench-upload-card .workbench-upload-copy em,
body.workspace-page .video-remake-upload small,
body[data-page="image"] .field small,
body[data-page="video"] .field small,
body.workspace-page .workspace-field small,
body.workspace-page .video-remake-section-title small,
body.workspace-page .video-remake-built-in-note,
body.workspace-page .video-remake-clip-note {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
  min-width: 0;
}

body[data-page="image"] .workbench-upload-card .workbench-upload-copy .upload-media-icon,
body[data-page="video"] .workbench-upload-card .workbench-upload-copy .upload-media-icon {
  color: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-upload {
  color: var(--hmj-text) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

body.workspace-page .video-remake-upload > i {
  color: var(--hmj-primary) !important;
}

@media (min-width: 760px) {
  body[data-page="image"] .workbench-upload-card,
  body[data-page="video"] .workbench-upload-card {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    min-height: 74px;
  }

  body[data-page="image"] .workbench-upload-card > span:first-child,
  body[data-page="video"] .workbench-upload-card > span:first-child {
    min-width: max-content;
    white-space: nowrap;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    overflow: hidden;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy strong,
  body[data-page="image"] .workbench-upload-card .workbench-upload-copy em,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy strong,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="image"] .workbench-upload-card .inline-preview:not(.empty),
  body[data-page="video"] .workbench-upload-card .inline-preview:not(.empty) {
    grid-column: 1 / -1;
  }

  body.workspace-page .video-remake-upload {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    min-height: 66px;
    column-gap: 10px;
  }

  body.workspace-page .video-remake-upload > span {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }
}

@media (max-width: 759px) {
  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy,
  body.workspace-page .video-remake-upload > span {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }

  body.workspace-page .video-remake-upload {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 8px;
  }
}

/* 旧页面的浅色硬编码由共享主题接管，确保白天、夜间和跟随系统都保持可读。 */
body[data-page="image"] .field,
body[data-page="video"] .field,
body[data-page="image"] .mode-tab-copy,
body[data-page="video"] .production-direction-grid label,
body[data-page="video"] .production-direction-hint,
body.workspace-page .video-remake-section,
body.workspace-page .video-remake-current-task,
body.workspace-page .video-remake-history-date,
body.workspace-page .video-remake-history-actions {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="image"] .field > span:first-child,
body[data-page="video"] .field > span:first-child,
body[data-page="image"] legend,
body[data-page="video"] legend,
body[data-page="image"] .mode-tab-copy strong,
body[data-page="video"] .production-direction-grid strong,
body.workspace-page .video-remake-section-title strong,
body.workspace-page .video-remake-current-task strong,
body.workspace-page .video-remake-history-date strong {
  color: var(--hmj-text) !important;
}

body[data-page="image"] input::placeholder,
body[data-page="image"] textarea::placeholder,
body[data-page="video"] input::placeholder,
body[data-page="video"] textarea::placeholder,
body.workspace-page input::placeholder,
body.workspace-page textarea::placeholder {
  color: var(--hmj-muted) !important;
  opacity: 1 !important;
}

body[data-page="image"] button:disabled,
body[data-page="video"] button:disabled,
body.workspace-page button:disabled {
  color: var(--hmj-muted) !important;
  border-color: var(--hmj-line) !important;
  opacity: .82;
}

body.workspace-page .workspace-referral-poster-section {
  display: none !important;
}

body[data-page="home"] .haomj-record-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 10px;
  color: var(--hmj-text-secondary);
  background: var(--hmj-input);
  border-top: 1px solid var(--hmj-line-soft);
}

body[data-page="home"] .haomj-record-pager button,
body[data-page="home"] .haomj-record-pager input {
  min-height: 28px;
  color: var(--hmj-text-secondary);
  background: var(--hmj-card-raised);
  border: 1px solid var(--hmj-line);
  border-radius: 6px;
}

body[data-page="home"] .haomj-record-pager button {
  padding: 0 8px;
  cursor: pointer;
}

body[data-page="home"] .haomj-record-pager button:hover:not(:disabled) {
  color: var(--hmj-primary);
  border-color: var(--hmj-primary);
}

body[data-page="home"] .haomj-record-pager button:disabled {
  cursor: not-allowed;
}

body[data-page="home"] .haomj-record-pager label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

body[data-page="home"] .haomj-record-pager input {
  width: 42px;
  padding: 0 5px;
  text-align: center;
}

body[data-page="home"] .haomj-record-pager small {
  color: var(--hmj-muted);
  white-space: nowrap;
}

body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame {
  opacity: .55;
  pointer-events: none;
}

body[data-page="home"] .haomj-tool-loading,
body[data-page="home"] .haomj-tool-error {
  position: absolute;
  inset: 0;
  z-index: 2;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 360px;
  padding: 30px;
  color: var(--hmj-muted);
  font-size: 12px;
  text-align: center;
  background: var(--hmj-card);
}

body[data-page="home"] .haomj-tool-loading:not([hidden]),
body[data-page="home"] .haomj-tool-error:not([hidden]) {
  display: grid;
}

body[data-page="home"] .haomj-tool-loading svg,
body[data-page="home"] .haomj-tool-error svg {
  width: 26px;
  height: 26px;
  color: var(--hmj-primary);
}

body[data-page="home"] .haomj-tool-loading svg {
  animation: toolbox-portal-spin 800ms linear infinite;
}

body[data-page="home"] .haomj-tool-error strong {
  color: var(--hmj-text);
  font-size: 15px;
}

@keyframes toolbox-portal-spin {
  to { transform: rotate(360deg); }
}

/* Embedded pages keep their business DOM and scripts while dropping duplicate chrome. */
html.portal-embedded,
html.portal-embedded body,
html.portal-embedded body[data-page="image"],
html.portal-embedded body[data-page="video"],
html.portal-embedded body.workspace-page {
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  background-image: none !important;
}

html.portal-embedded body[data-page="image"] .topbar,
html.portal-embedded body[data-page="video"] .topbar,
html.portal-embedded body[data-page="image"] .toolbox-subnav,
html.portal-embedded body[data-page="video"] .toolbox-subnav,
html.portal-embedded body.workspace-page .workspace-sidebar,
html.portal-embedded body.workspace-page .workspace-topbar,
html.portal-embedded body.workspace-page .workspace-visit-tabs-shell,
html.portal-embedded body.workspace-page .workspace-scrim,
html.portal-embedded body .global-site-footer {
  display: none !important;
}

html.portal-embedded body[data-page="image"] .app-shell,
html.portal-embedded body[data-page="video"] .app-shell {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

html.portal-embedded body[data-page="image"] .ak-workspace,
html.portal-embedded body[data-page="video"] .workbench-grid {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.portal-embedded body[data-page="image"] .image-workbench-panel,
html.portal-embedded body[data-page="video"] .video-form-panel,
html.portal-embedded body[data-page="image"] .image-workbench-panel + .panel,
html.portal-embedded body[data-page="video"] .video-history-panel {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

html.portal-embedded:not(.portal-history-focus) body[data-page="image"] .image-workbench-panel + .panel,
html.portal-embedded:not(.portal-history-focus) body[data-page="video"] .video-history-panel,
html.portal-embedded:not(.portal-history-focus) body.workspace-page [data-view="video-remake"] .video-remake-history-panel {
  display: none !important;
}

html.portal-embedded.portal-history-focus body[data-page="image"] .image-workbench-panel,
html.portal-embedded.portal-history-focus body[data-page="video"] .video-form-panel,
html.portal-embedded.portal-history-focus body.workspace-page [data-view="video-remake"] .video-remake-form {
  display: none !important;
}

html.portal-embedded.portal-history-focus body[data-page="image"] .image-workbench-panel + .panel,
html.portal-embedded.portal-history-focus body[data-page="video"] .video-history-panel,
html.portal-embedded.portal-history-focus body.workspace-page [data-view="video-remake"] .video-remake-history-panel {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

html.portal-embedded body.workspace-page .workspace-shell,
html.portal-embedded body.workspace-page .workspace-stage {
  display: block !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}

html.portal-embedded body.workspace-page .workspace-main {
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 20px !important;
  background: transparent !important;
}

html.portal-embedded body.workspace-page .workspace-tool-subnav {
  margin-top: 0 !important;
}

html.portal-embedded body.workspace-page [data-view="video-remake"] .video-remake-layout {
  display: block !important;
}

html.portal-embedded body.workspace-page [data-view="video-remake"] .video-remake-form,
html.portal-embedded body.workspace-page [data-view="video-remake"] .video-remake-history-panel {
  width: 100% !important;
}

/* Navigation changes keep the real form visible while a new embedded document loads. */
body[data-page="home"] .haomj-home-portal.is-loading #homeToolLoading {
  display: none !important;
}

body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame {
  opacity: 1 !important;
  filter: none !important;
}

body[data-page="home"] .haomj-tool-empty {
  display: none !important;
}

@media (max-width: 980px) {
  body[data-page="home"] .haomj-portal-layout {
    grid-template-columns: 238px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  body[data-page="home"] .haomj-portal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"] .haomj-record-rail {
    position: static;
    order: 2;
    grid-template-rows: auto auto auto auto;
    max-height: none;
  }

  body[data-page="home"] .haomj-tool-stage {
    order: 1;
  }

  body[data-page="home"] .haomj-record-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 10px;
    max-height: 250px;
  }

  body[data-page="home"] .haomj-record-empty {
    grid-column: 1 / -1;
    min-height: 100px;
  }
}

@media (max-width: 760px) {
  body[data-page="home"] .haomj-page-intro,
  body[data-page="home"] .haomj-feature-section,
  body[data-page="home"] .haomj-home-portal {
    width: calc(100% - 24px);
  }

  body[data-page="home"] .haomj-portal-heading {
    align-items: flex-start;
    min-height: 0;
    padding: 4px 0 12px;
  }

  body[data-page="home"] .haomj-portal-heading > div:first-child > span,
  body[data-page="home"] .haomj-portal-status {
    display: none;
  }

  body[data-page="home"] .haomj-portal-heading h2 {
    font-size: 20px;
  }

  body[data-page="home"] .haomj-tool-stage,
  body[data-page="home"] #homeToolFrame {
    min-height: 620px;
  }

  html.portal-embedded body.workspace-page .workspace-main {
    padding: 12px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .haomj-record-list {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"] .haomj-record-copy strong {
    font-size: 10px;
  }

  body[data-page="home"] .haomj-portal-back span {
    display: none;
  }

  body[data-page="home"] .haomj-portal-back {
    width: 36px;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .haomj-tool-loading svg {
    animation-duration: 1600ms;
  }
}

/* Portal v5: fixed chrome, denser controls and uninterrupted tool switching. */
body[data-page="home"] .haomj-topbar,
body[data-page="image"] .topbar,
body[data-page="video"] .topbar,
body.workspace-page .workspace-topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1000 !important;
}

body[data-page="home"] .haomj-home-main {
  padding-top: 65px;
}

html:not(.portal-embedded) body[data-page="image"] .app-shell,
html:not(.portal-embedded) body[data-page="video"] .app-shell {
  padding-top: 65px;
}

body[data-page="home"] .haomj-feature-card {
  gap: 8px;
  transition-property: transform, border-color, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

body[data-page="home"] .haomj-feature-card:active {
  transform: translateY(1px) scale(.99);
}

body[data-page="home"] .haomj-feature-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--hmj-line-soft) !important;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
}

body[data-page="home"] .haomj-feature-card:nth-child(1) .haomj-feature-icon {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

body[data-page="home"] .haomj-feature-card:nth-child(2) .haomj-feature-icon {
  color: #2563eb !important;
  background: color-mix(in srgb, #2563eb 10%, var(--hmj-card-raised)) !important;
}

body[data-page="home"] .haomj-feature-card:nth-child(3) .haomj-feature-icon {
  color: #0f8a64 !important;
  background: color-mix(in srgb, #0f8a64 10%, var(--hmj-card-raised)) !important;
}

body[data-page="home"] .haomj-feature-card:nth-child(4) .haomj-feature-icon {
  color: #b86a00 !important;
  background: color-mix(in srgb, #f59e0b 13%, var(--hmj-card-raised)) !important;
}

body[data-page="home"] .haomj-feature-card:nth-child(5) .haomj-feature-icon {
  color: #7c3aed !important;
  background: color-mix(in srgb, #7c3aed 10%, var(--hmj-card-raised)) !important;
}

body[data-page="home"] .haomj-feature-icon svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

body[data-page="home"] .haomj-portal-layout {
  grid-template-columns: minmax(0, 1fr) 290px;
}

body[data-page="home"] .haomj-tool-stage {
  order: 1;
}

body[data-page="home"] .haomj-record-rail {
  top: 81px;
  order: 2;
}

body[data-page="home"] #homeToolFrame {
  background: var(--hmj-card);
  transition-property: opacity, filter;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame {
  opacity: .55;
  filter: saturate(.72);
}

body[data-page="home"] .haomj-tool-loading {
  cursor: progress;
  color: var(--hmj-text-secondary);
  background: color-mix(in srgb, var(--hmj-card) 78%, var(--hmj-primary-soft)) !important;
  border: 1px solid var(--hmj-line-soft);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-page="home"] .haomj-tool-loading span {
  padding: 7px 11px;
  color: var(--hmj-text);
  font-weight: 700;
  background: var(--hmj-card-raised);
  border: 1px solid var(--hmj-line);
  border-radius: 7px;
  box-shadow: var(--hmj-shadow);
}

body[data-page="home"] .haomj-tool-loading[hidden],
body[data-page="home"] .haomj-tool-error[hidden] {
  display: none !important;
}

body[data-page="video"] .video-history-panel .section-head {
  position: sticky;
  top: 81px;
  z-index: 5;
  margin: 0 0 12px !important;
  padding: 12px 14px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  background-image: none !important;
  border: 1px solid var(--hmj-line) !important;
  border-left: 4px solid var(--hmj-primary) !important;
  border-radius: 7px !important;
  box-shadow: 0 7px 18px rgba(20, 32, 48, .08) !important;
  filter: none !important;
  backdrop-filter: none !important;
}

body[data-page="video"] .video-history-panel .section-head h2 {
  color: var(--hmj-text) !important;
}

body[data-page="video"] .video-history-panel .section-head .eyebrow {
  color: var(--hmj-primary) !important;
}

html.portal-embedded body[data-page="video"] .video-history-panel .section-head {
  top: 0;
}

.compact-option-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.compact-option-row > .field,
.compact-option-row > fieldset {
  align-self: stretch;
  min-width: 0;
}

.compact-option-row select,
.compact-option-row input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  min-height: 42px;
}

body[data-page="video"] .video-option-row {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

body[data-page="video"] .video-option-row .video-segmented {
  min-height: 42px;
}

body.workspace-page .automation-batch-toolbar,
body.workspace-page .video-publisher-toolbar {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  align-items: end !important;
  gap: 10px !important;
}

@media (min-width: 1000px) {
  body[data-page="home"] .haomj-feature-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 980px) and (min-width: 821px) {
  body[data-page="home"] .haomj-portal-layout {
    grid-template-columns: minmax(0, 1fr) 238px;
  }
}

@media (max-width: 820px) {
  body[data-page="home"] .haomj-portal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-page="home"] .haomj-record-rail {
    position: static;
    order: 2;
  }

  body[data-page="home"] .haomj-tool-stage {
    order: 1;
  }
}

@media (max-width: 640px) {
  .compact-option-row,
  body[data-page="video"] .video-option-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
}

@media (max-width: 420px) {
  .compact-option-row,
  body[data-page="video"] .video-option-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Use the customer-service site's canonical mark everywhere in the toolbox chrome. */
body[data-page="home"] .nt-brand .brand-mark,
body[data-page="image"] .topbar .brand-mark,
body[data-page="video"] .topbar .brand-mark,
body[data-page="image"] .member-auth-head .brand-mark,
body.workspace-page .workspace-brand-mark {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body[data-page="home"] .toolbox-brand-logo,
body[data-page="image"] .toolbox-brand-logo,
body[data-page="video"] .toolbox-brand-logo,
body.workspace-page .toolbox-brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
}

/* Layout refinement v7: compact media rows and a unified video-remake history surface. */
body[data-page="home"] .haomj-feature-card {
  grid-template-rows: 40px 22px 19px;
  gap: 8px;
  height: auto !important;
  min-height: 153px !important;
  padding: 18px !important;
  overflow: visible;
}

body[data-page="home"] .haomj-feature-icon {
  margin-bottom: 0 !important;
}

body[data-page="home"] .haomj-feature-card strong {
  align-self: center;
  min-width: 0;
  margin: 0 !important;
  line-height: 22px !important;
}

body[data-page="home"] .haomj-feature-card p {
  min-width: 0;
  min-height: 19px;
  line-height: 19px !important;
}

body[data-page="home"] .haomj-record-pager {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 5px !important;
  min-height: 48px !important;
  padding: 8px !important;
}

body[data-page="home"] .haomj-record-pager button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 54px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  word-break: keep-all;
}

body[data-page="home"] .haomj-record-pager label {
  display: inline-flex;
  flex: 1 1 82px;
  justify-content: center;
  min-width: 74px;
  height: 32px;
  padding: 0 6px;
  color: var(--hmj-text-secondary);
  background: var(--hmj-card-raised);
  border: 1px solid var(--hmj-line);
  border-radius: 6px;
  font-size: 11px;
}

body[data-page="home"] .haomj-record-pager input {
  flex: 0 0 32px;
  width: 32px !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 2px !important;
  color: var(--hmj-text) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px;
  box-shadow: none !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

body[data-page="home"] .haomj-record-pager small {
  flex: 0 0 auto;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 760px) {
  body[data-page="image"] .workbench-upload-pair,
  body[data-page="video"] .workbench-upload-pair {
    display: grid !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  body[data-page="image"] .workbench-upload-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="image"] .workbench-upload-pair:has(> .workbench-upload-card[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="video"] .workbench-upload-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="video"] .workbench-upload-pair.has-face-upload,
  body[data-page="video"] .workbench-upload-pair:not(:has(> .workbench-upload-card[hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="image"] .workbench-upload-pair > .workbench-upload-card,
  body[data-page="video"] .workbench-upload-pair > .workbench-upload-card {
    align-self: stretch !important;
    height: 100% !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
    gap: 8px !important;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy strong,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy strong {
    flex: 0 1 auto;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy em,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy em {
    flex: 1 1 auto;
  }

  body.workspace-page .video-remake-uploads {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.workspace-page .video-remake-uploads:has(> .video-remake-upload[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

body.workspace-page .video-remake-form,
body.workspace-page .video-remake-history-panel {
  color: var(--hmj-text) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--hmj-shadow) !important;
}

body.workspace-page .video-remake-task-track {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .video-remake-task-track li {
  color: var(--hmj-text-secondary) !important;
}

body.workspace-page .video-remake-task-track li:not(:last-child)::after {
  background: var(--hmj-line-strong) !important;
}

body.workspace-page .video-remake-task-track i {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-line-strong) !important;
}

body.workspace-page .video-remake-task-track li.is-complete,
body.workspace-page .video-remake-task-track li.is-current {
  color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-task-track li.is-complete i,
body.workspace-page .video-remake-task-track li.is-current i,
body.workspace-page .video-remake-task-track li.is-complete:not(:last-child)::after {
  background: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-current-task,
body.workspace-page .video-remake-built-in-note,
body.workspace-page .video-remake-clip-note,
body.workspace-page .video-remake-authorization,
body.workspace-page .video-remake-quote {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  background-image: none !important;
  border: 1px solid var(--hmj-line) !important;
}

body.workspace-page .video-remake-current-task > span {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

body.workspace-page .video-remake-section + .video-remake-section {
  border-top-color: var(--hmj-line-soft) !important;
}

body.workspace-page .video-remake-section-title > b {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-modes label,
body.workspace-page .video-remake-durations span {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .video-remake-modes label:hover,
body.workspace-page .video-remake-upload:hover {
  border-color: var(--hmj-primary) !important;
  background: var(--hmj-card-hover) !important;
}

body.workspace-page .video-remake-modes label.is-active {
  color: var(--hmj-text) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hmj-primary) 20%, transparent) !important;
}

body.workspace-page .video-remake-modes svg,
body.workspace-page .video-remake-upload > svg,
body.workspace-page .video-remake-upload > i {
  color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-modes strong,
body.workspace-page .video-remake-durations strong,
body.workspace-page .video-remake-authorization strong,
body.workspace-page .video-remake-quote strong {
  color: var(--hmj-text) !important;
}

body.workspace-page .video-remake-modes small,
body.workspace-page .video-remake-durations small,
body.workspace-page .video-remake-authorization small,
body.workspace-page .video-remake-quote span,
body.workspace-page .video-remake-quote small {
  color: var(--hmj-text-secondary) !important;
}

body.workspace-page .video-remake-upload {
  min-width: 0;
  min-height: 76px !important;
  padding: 11px 12px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px dashed var(--hmj-line-strong) !important;
  border-radius: 8px !important;
}

body.workspace-page .video-remake-upload[hidden] {
  display: none !important;
}

body.workspace-page .video-remake-upload > span {
  min-width: 0;
}

body.workspace-page .video-remake-upload strong,
body.workspace-page .video-remake-upload small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-page .video-remake-durations label.is-active span {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-durations label.is-active strong,
body.workspace-page .video-remake-durations label.is-active small {
  color: var(--hmj-on-primary) !important;
}

body.workspace-page .video-remake-authorization input {
  accent-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-requirements textarea {
  color: var(--hmj-text) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
}

body.workspace-page .video-remake-history-panel {
  container: remake-history / inline-size;
  min-width: 0;
  min-height: 0 !important;
  padding: 16px !important;
}

body.workspace-page .video-remake-history-panel > header {
  min-height: 42px;
  padding-bottom: 12px !important;
  border-bottom-color: var(--hmj-line-soft) !important;
}

body.workspace-page .video-remake-history-panel > header p {
  color: var(--hmj-primary) !important;
  font-size: 9px !important;
  letter-spacing: 0 !important;
}

body.workspace-page .video-remake-history-panel > header h2 {
  color: var(--hmj-text) !important;
  font-size: 16px !important;
  line-height: 1.35;
}

body.workspace-page .video-remake-history-panel > header .workspace-button {
  flex: 0 0 auto;
  min-height: 32px !important;
  height: 32px;
  padding: 0 10px !important;
  white-space: nowrap;
}

body.workspace-page .video-remake-retention {
  margin: 12px 0 0 !important;
  padding: 9px 11px !important;
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 7%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 28%, var(--hmj-line)) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}

body.workspace-page .video-remake-history-date {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 220px) !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding: 10px 11px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 7px !important;
}

body.workspace-page .video-remake-history-date span {
  color: var(--hmj-text-secondary) !important;
  font-size: 10px !important;
}

body.workspace-page .video-remake-history-date strong {
  color: var(--hmj-text) !important;
  font-size: 13px !important;
  line-height: 1.35;
}

body.workspace-page .video-remake-history-date input {
  min-height: 34px !important;
  height: 34px;
  margin-top: 4px !important;
  padding: 0 9px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
}

body.workspace-page .video-remake-history-status-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin-top: 9px !important;
}

body.workspace-page .video-remake-history-status-tabs button {
  min-width: 0;
  min-height: 38px !important;
  padding: 6px 8px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-status-tabs button strong {
  min-width: 22px !important;
  height: 22px !important;
  padding: 0 5px !important;
  color: currentColor !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid color-mix(in srgb, currentColor 18%, var(--hmj-line)) !important;
  border-radius: 6px !important;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-status-tabs .is-submitted {
  color: var(--hmj-cyan) !important;
  background: color-mix(in srgb, var(--hmj-cyan) 8%, var(--hmj-card-raised)) !important;
}

body.workspace-page .video-remake-history-status-tabs .is-generating {
  color: var(--hmj-amber) !important;
  background: color-mix(in srgb, var(--hmj-amber) 9%, var(--hmj-card-raised)) !important;
}

body.workspace-page .video-remake-history-status-tabs .is-completed {
  color: var(--hmj-green) !important;
  background: color-mix(in srgb, var(--hmj-green) 8%, var(--hmj-card-raised)) !important;
}

body.workspace-page .video-remake-history-status-tabs button.is-active {
  border-color: currentColor !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 25%, transparent) !important;
}

body.workspace-page .video-remake-history-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start;
  gap: 7px !important;
  margin-top: 9px !important;
}

body.workspace-page .video-remake-history-actions > div {
  display: grid !important;
  gap: 3px !important;
  min-width: 0;
}

body.workspace-page .video-remake-history-actions .workspace-button {
  width: 100%;
  min-width: 0 !important;
  min-height: 32px !important;
  height: 32px;
  padding: 0 8px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-actions small {
  min-height: 13px;
  padding-left: 2px !important;
  color: var(--hmj-text-secondary) !important;
  font-size: 9px !important;
  line-height: 13px;
}

body.workspace-page .video-remake-history-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 9px !important;
  max-height: 620px;
  margin-top: 10px !important;
  padding-right: 2px;
}

body.workspace-page .video-remake-history-list .workspace-empty-state {
  min-height: 150px;
  margin: 0;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border: 1px dashed var(--hmj-line-strong) !important;
  border-radius: 7px !important;
}

body.workspace-page .video-remake-history-item {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 10px !important;
  min-width: 0;
  padding: 12px 12px 12px 14px !important;
  overflow: hidden;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-left: 3px solid var(--hmj-cyan) !important;
  border-radius: 7px !important;
  box-shadow: 0 4px 12px rgba(20, 32, 48, .05);
}

body.workspace-page .video-remake-history-item.is-segment_generating,
body.workspace-page .video-remake-history-item.is-segment_validating,
body.workspace-page .video-remake-history-item.is-merging,
body.workspace-page .video-remake-history-item.is-uploading {
  background: color-mix(in srgb, var(--hmj-amber) 6%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-amber) 32%, var(--hmj-line)) !important;
  border-left-color: var(--hmj-amber) !important;
}

body.workspace-page .video-remake-history-item.is-completed {
  background: color-mix(in srgb, var(--hmj-green) 5%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-green) 28%, var(--hmj-line)) !important;
  border-left-color: var(--hmj-green) !important;
}

body.workspace-page .video-remake-history-item.is-failed,
body.workspace-page .video-remake-history-item.is-partial_failed,
body.workspace-page .video-remake-history-item.is-refunded,
body.workspace-page .video-remake-history-item.is-cancelled {
  background: color-mix(in srgb, var(--hmj-danger) 5%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 30%, var(--hmj-line)) !important;
  border-left-color: var(--hmj-danger) !important;
}

body.workspace-page .video-remake-history-copy strong {
  color: var(--hmj-text) !important;
  font-size: 11px !important;
  line-height: 1.45;
}

body.workspace-page .video-remake-history-copy small {
  color: var(--hmj-text-secondary) !important;
  font-size: 9px !important;
  line-height: 1.4;
}

body.workspace-page .video-remake-history-status {
  justify-self: end;
  min-height: 24px;
  padding: 4px 7px !important;
  color: var(--hmj-cyan) !important;
  background: color-mix(in srgb, var(--hmj-cyan) 10%, var(--hmj-card-raised)) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-cyan) 24%, var(--hmj-line));
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 14px;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-status.is-completed {
  color: var(--hmj-green) !important;
  background: color-mix(in srgb, var(--hmj-green) 10%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-green) 26%, var(--hmj-line));
}

body.workspace-page .video-remake-history-status.is-failed,
body.workspace-page .video-remake-history-status.is-refunded,
body.workspace-page .video-remake-history-status.is-cancelled {
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 9%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 26%, var(--hmj-line));
}

body.workspace-page .video-remake-history-meta {
  display: flex !important;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 5px !important;
  color: var(--hmj-text-secondary) !important;
  font-size: 9px !important;
}

body.workspace-page .video-remake-history-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 7px;
  background: var(--hmj-input);
  border: 1px solid var(--hmj-line-soft);
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-detail {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 8px 9px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line-soft);
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 1.55 !important;
}

body.workspace-page .video-remake-history-card-actions {
  display: flex !important;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 6px !important;
}

body.workspace-page .video-remake-history-card-actions button,
body.workspace-page .video-remake-history-card-actions a {
  display: inline-flex;
  flex: 1 1 96px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 30px !important;
  padding: 0 8px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-card-actions button:hover,
body.workspace-page .video-remake-history-card-actions a:hover {
  color: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
}

body.workspace-page .video-remake-history-card-actions .primary {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-history-card-actions .danger {
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 7%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 28%, var(--hmj-line)) !important;
}

body.workspace-page .video-remake-history-pager {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px !important;
  margin-top: 10px !important;
  color: var(--hmj-text-secondary) !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-pager > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-pager > div {
  display: flex !important;
  gap: 4px !important;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.workspace-page .video-remake-history-pager button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 30px !important;
  min-height: 30px !important;
  height: 30px;
  padding: 0 8px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 1;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-pager button:first-child,
body.workspace-page .video-remake-history-pager button:last-child {
  min-width: 54px !important;
}

body.workspace-page .video-remake-history-pager button.is-active {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-history-pager button:disabled {
  color: var(--hmj-muted) !important;
  background: var(--hmj-input) !important;
  cursor: not-allowed;
  opacity: .72;
}

/* Keep the horizontal workspace directory readable at tablet widths. */
body.workspace-page .workspace-nav-group {
  width: max-content;
  min-width: max-content;
  white-space: nowrap;
}

body.workspace-page .workspace-nav-group a {
  width: max-content;
}

@container remake-history (min-width: 680px) {
  body.workspace-page .video-remake-history-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  body.workspace-page .video-remake-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container remake-history (max-width: 459px) {
  body.workspace-page .video-remake-history-date {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.workspace-page .video-remake-history-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-page .video-remake-history-pager > div {
    justify-content: flex-start;
  }
}

@media (max-width: 759px) {
  body[data-page="home"] .haomj-feature-card {
    min-height: 145px !important;
    padding: 14px !important;
  }

  body[data-page="image"] .workbench-upload-pair,
  body[data-page="video"] .workbench-upload-pair,
  body.workspace-page .video-remake-uploads {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.workspace-page .video-remake-history-panel {
    padding: 13px !important;
  }

  body.workspace-page .video-remake-history-status-tabs button {
    padding-inline: 6px !important;
  }
}

@media (max-width: 420px) {
  body[data-page="home"] .haomj-record-pager {
    gap: 4px !important;
    padding-inline: 6px !important;
  }

  body[data-page="home"] .haomj-record-pager button {
    min-width: 50px !important;
    padding-inline: 7px !important;
  }

  body[data-page="home"] .haomj-record-pager label {
    min-width: 68px;
  }
}

/* History refinement v8: keep the remake rail compact, readable, and consistent with the workbench. */
body.workspace-page .video-remake-history-panel {
  align-self: start;
  padding: 15px !important;
  background: var(--hmj-card) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 26px rgba(25, 39, 58, .07) !important;
}

body.workspace-page .video-remake-history-panel > header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 0 0 11px !important;
  border-bottom: 1px solid var(--hmj-line-soft) !important;
}

body.workspace-page .video-remake-history-panel > header > div {
  min-width: 0;
}

body.workspace-page .video-remake-history-panel > header p {
  margin: 0 0 2px !important;
  color: var(--hmj-primary) !important;
  font-size: 9px !important;
  font-weight: 800;
  line-height: 1.2 !important;
  text-transform: uppercase;
}

body.workspace-page .video-remake-history-panel > header h2 {
  margin: 0 !important;
  color: var(--hmj-text) !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.3 !important;
  text-wrap: balance;
}

body.workspace-page .video-remake-history-panel > header .workspace-button {
  min-width: 56px !important;
  min-height: 34px !important;
  height: 34px;
  padding: 0 9px !important;
  border-radius: 7px !important;
  white-space: nowrap;
}

body.workspace-page .video-remake-retention {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 11px 0 0 !important;
  padding: 8px 10px !important;
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 6%, var(--hmj-card-raised)) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-danger) 24%, var(--hmj-line)) !important;
  border-radius: 7px !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  text-wrap: pretty;
}

body.workspace-page .video-remake-retention::before {
  content: "!";
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--hmj-danger);
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

body.workspace-page .video-remake-history-date {
  display: grid !important;
  grid-template-columns: minmax(0, .82fr) minmax(154px, 1.18fr) !important;
  align-items: end !important;
  gap: 8px !important;
  margin-top: 9px !important;
  padding: 9px !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 8px !important;
}

body.workspace-page .video-remake-history-date > div,
body.workspace-page .video-remake-history-date > label {
  min-width: 0;
}

body.workspace-page .video-remake-history-date > div {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 38px;
}

body.workspace-page .video-remake-history-date label {
  display: grid;
  gap: 3px;
}

body.workspace-page .video-remake-history-date span {
  color: var(--hmj-muted) !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

body.workspace-page .video-remake-history-date strong {
  color: var(--hmj-text) !important;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.2 !important;
}

body.workspace-page .video-remake-history-date input {
  width: 100%;
  min-width: 0;
  min-height: 34px !important;
  height: 34px;
  margin-top: 0 !important;
  padding: 0 8px !important;
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-status-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px !important;
  margin-top: 9px !important;
  padding: 3px !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 8px !important;
}

body.workspace-page .video-remake-history-status-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 35px !important;
  padding: 5px 6px !important;
  color: var(--hmj-text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

body.workspace-page .video-remake-history-status-tabs button:hover {
  background: var(--hmj-card-hover) !important;
}

body.workspace-page .video-remake-history-status-tabs button.is-active {
  background: var(--hmj-card-raised) !important;
  border-color: currentColor !important;
  box-shadow: 0 2px 7px rgba(25, 39, 58, .08) !important;
}

body.workspace-page .video-remake-history-status-tabs button strong {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 4px !important;
  color: currentColor !important;
  background: color-mix(in srgb, currentColor 8%, var(--hmj-card-raised)) !important;
  border: 1px solid color-mix(in srgb, currentColor 18%, var(--hmj-line)) !important;
  border-radius: 5px !important;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 5px !important;
  margin-top: 9px !important;
  padding: 5px !important;
  background: var(--hmj-input) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 8px !important;
}

body.workspace-page .video-remake-history-actions > div {
  display: grid !important;
  gap: 2px !important;
  min-width: 0;
}

body.workspace-page .video-remake-history-actions .workspace-button {
  width: 100%;
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px;
  padding: 0 7px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  white-space: nowrap;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

body.workspace-page .video-remake-history-actions .workspace-button:hover:not(:disabled) {
  box-shadow: 0 3px 8px rgba(25, 39, 58, .08);
}

body.workspace-page .video-remake-history-actions .workspace-button:active:not(:disabled),
body.workspace-page .video-remake-history-card-actions button:active:not(:disabled),
body.workspace-page .video-remake-history-card-actions a:active {
  transform: translateY(1px);
}

body.workspace-page .video-remake-history-actions .workspace-button:disabled {
  color: var(--hmj-muted) !important;
  background: var(--hmj-card) !important;
  border-color: var(--hmj-line-soft) !important;
  cursor: not-allowed;
  opacity: .62;
}

body.workspace-page .video-remake-history-actions small {
  min-height: 12px;
  padding: 0 2px !important;
  color: var(--hmj-muted) !important;
  font-size: 9px !important;
  line-height: 12px;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px !important;
  max-height: 620px;
  margin-top: 10px !important;
  padding: 0 2px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--hmj-line-strong) transparent;
  scrollbar-width: thin;
}

body.workspace-page .video-remake-history-list .workspace-empty-state {
  display: grid;
  place-items: center;
  min-height: 132px;
  margin: 0;
  padding: 16px;
  color: var(--hmj-muted) !important;
  background: var(--hmj-input) !important;
  border: 1px dashed var(--hmj-line-strong) !important;
  border-radius: 8px !important;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

body.workspace-page .video-remake-history-item {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px 9px !important;
  min-width: 0;
  padding: 11px 11px 10px 13px !important;
  overflow: hidden;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-left: 3px solid var(--hmj-cyan) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 7px rgba(25, 39, 58, .035);
  transition-property: border-color, background-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

body.workspace-page .video-remake-history-item:hover {
  background: var(--hmj-card-hover) !important;
  box-shadow: 0 5px 14px rgba(25, 39, 58, .08);
  transform: translateY(-1px);
}

body.workspace-page .video-remake-history-copy {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

body.workspace-page .video-remake-history-copy strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hmj-text) !important;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.4;
  text-wrap: pretty;
}

body.workspace-page .video-remake-history-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hmj-muted) !important;
  font-size: 9px !important;
  line-height: 1.35;
}

body.workspace-page .video-remake-history-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  min-width: 45px;
  min-height: 24px;
  padding: 4px 7px !important;
  color: var(--hmj-cyan) !important;
  background: color-mix(in srgb, var(--hmj-cyan) 8%, var(--hmj-card-raised)) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-cyan) 23%, var(--hmj-line)) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 800;
  line-height: 14px;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-status.is-completed {
  color: var(--hmj-green) !important;
  background: color-mix(in srgb, var(--hmj-green) 8%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-green) 24%, var(--hmj-line)) !important;
}

body.workspace-page .video-remake-history-status.is-failed,
body.workspace-page .video-remake-history-status.is-partial_failed,
body.workspace-page .video-remake-history-status.is-refunded,
body.workspace-page .video-remake-history-status.is-cancelled {
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 8%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 24%, var(--hmj-line)) !important;
}

body.workspace-page .video-remake-history-meta {
  display: flex !important;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 4px !important;
  min-width: 0;
  color: var(--hmj-muted) !important;
  font-size: 9px !important;
}

body.workspace-page .video-remake-history-meta span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 22px;
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--hmj-input);
  border: 1px solid var(--hmj-line-soft);
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-detail {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 5px 0 5px 9px !important;
  color: var(--hmj-text-secondary) !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid var(--hmj-line-strong) !important;
  border-radius: 0 !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

body.workspace-page .video-remake-history-card-actions {
  display: flex !important;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 5px !important;
  padding-top: 8px;
  border-top: 1px solid var(--hmj-line-soft);
}

body.workspace-page .video-remake-history-card-actions button,
body.workspace-page .video-remake-history-card-actions a {
  display: inline-flex;
  flex: 1 1 96px;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 32px !important;
  padding: 0 7px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

body.workspace-page .video-remake-history-card-actions button:hover,
body.workspace-page .video-remake-history-card-actions a:hover {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
  box-shadow: 0 3px 8px rgba(25, 39, 58, .07);
}

body.workspace-page .video-remake-history-card-actions .primary {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-history-card-actions .primary:hover {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-secondary) !important;
  border-color: var(--hmj-secondary) !important;
}

body.workspace-page .video-remake-history-card-actions .danger {
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 5%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 24%, var(--hmj-line)) !important;
}

body.workspace-page .video-remake-history-pager {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px !important;
  margin-top: 10px !important;
  padding-top: 9px;
  color: var(--hmj-muted) !important;
  border-top: 1px solid var(--hmj-line-soft);
  font-size: 9px !important;
  font-variant-numeric: tabular-nums;
}

body.workspace-page .video-remake-history-pager > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-pager > div {
  display: flex !important;
  gap: 4px !important;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.workspace-page .video-remake-history-pager button {
  flex: 0 0 auto;
  min-width: 31px !important;
  min-height: 31px !important;
  height: 31px;
  padding: 0 7px !important;
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border: 1px solid var(--hmj-line) !important;
  border-radius: 6px !important;
  font-size: 9px !important;
  line-height: 1;
  white-space: nowrap;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

body.workspace-page .video-remake-history-pager button:first-child,
body.workspace-page .video-remake-history-pager button:last-child {
  min-width: 54px !important;
}

body.workspace-page .video-remake-history-pager button:hover:not(:disabled) {
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-history-pager button.is-active {
  color: var(--hmj-on-primary) !important;
  background: var(--hmj-primary) !important;
  border-color: var(--hmj-primary) !important;
}

body.workspace-page .video-remake-history-pager button:disabled {
  color: var(--hmj-muted) !important;
  background: var(--hmj-input) !important;
  cursor: not-allowed;
  opacity: .62;
}

@container remake-history (min-width: 760px) {
  body.workspace-page .video-remake-history-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container remake-history (max-width: 459px) {
  body.workspace-page .video-remake-history-date {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.workspace-page .video-remake-history-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  body.workspace-page .video-remake-history-pager > div {
    justify-content: flex-start;
  }
}

@container remake-history (max-width: 340px) {
  body.workspace-page .video-remake-history-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-page .video-remake-history-item,
  body.workspace-page .video-remake-history-actions .workspace-button,
  body.workspace-page .video-remake-history-card-actions button,
  body.workspace-page .video-remake-history-card-actions a,
  body.workspace-page .video-remake-history-pager button,
  body.workspace-page .video-remake-history-status-tabs button {
    transition: none !important;
  }

  body.workspace-page .video-remake-history-item:hover,
  body.workspace-page .video-remake-history-actions .workspace-button:active:not(:disabled),
  body.workspace-page .video-remake-history-card-actions button:active:not(:disabled),
  body.workspace-page .video-remake-history-card-actions a:active {
    transform: none;
  }
}

/* History refinement v9: give each remake record a clear media anchor and progress cue. */
body.workspace-page .video-remake-history-heading {
  display: grid;
  gap: 2px;
}

body.workspace-page .video-remake-history-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

body.workspace-page .video-remake-history-total {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  color: var(--hmj-primary) !important;
  background: var(--hmj-primary-soft) !important;
  border: 1px solid color-mix(in srgb, var(--hmj-primary) 22%, var(--hmj-line)) !important;
  border-radius: 5px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

body.workspace-page .video-remake-history-panel > header .workspace-button svg {
  width: 13px;
  height: 13px;
}

body.workspace-page .video-remake-history-panel > header .workspace-button:focus-visible,
body.workspace-page .video-remake-history-date input:focus-visible,
body.workspace-page .video-remake-history-status-tabs button:focus-visible,
body.workspace-page .video-remake-history-actions .workspace-button:focus-visible,
body.workspace-page .video-remake-history-card-actions button:focus-visible,
body.workspace-page .video-remake-history-card-actions a:focus-visible,
body.workspace-page .video-remake-history-pager button:focus-visible {
  outline: 2px solid var(--hmj-focus) !important;
  outline-offset: 2px;
}

body.workspace-page .video-remake-history-actions .workspace-button {
  gap: 4px;
}

body.workspace-page .video-remake-history-actions .workspace-button svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

body.workspace-page .video-remake-history-item {
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  padding: 12px 11px 11px 12px !important;
}

body.workspace-page .video-remake-history-item:not(:has(> .video-remake-history-mark)) {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body.workspace-page .video-remake-history-item.is-selected {
  border-color: var(--hmj-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hmj-primary) 14%, transparent), 0 5px 14px rgba(25, 39, 58, .08) !important;
}

body.workspace-page .video-remake-history-mark {
  display: inline-grid;
  place-items: center;
  align-self: start;
  width: 30px;
  height: 30px;
  color: var(--hmj-cyan);
  background: color-mix(in srgb, var(--hmj-cyan) 10%, var(--hmj-card-raised));
  border: 1px solid color-mix(in srgb, var(--hmj-cyan) 22%, var(--hmj-line));
  border-radius: 7px;
}

body.workspace-page .video-remake-history-mark svg {
  width: 15px;
  height: 15px;
}

body.workspace-page .video-remake-history-item.is-segment_generating .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-segment_validating .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-merging .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-uploading .video-remake-history-mark {
  color: var(--hmj-amber);
  background: color-mix(in srgb, var(--hmj-amber) 10%, var(--hmj-card-raised));
  border-color: color-mix(in srgb, var(--hmj-amber) 24%, var(--hmj-line));
}

body.workspace-page .video-remake-history-item.is-completed .video-remake-history-mark {
  color: var(--hmj-green);
  background: color-mix(in srgb, var(--hmj-green) 10%, var(--hmj-card-raised));
  border-color: color-mix(in srgb, var(--hmj-green) 24%, var(--hmj-line));
}

body.workspace-page .video-remake-history-item.is-failed .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-partial_failed .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-refunded .video-remake-history-mark,
body.workspace-page .video-remake-history-item.is-cancelled .video-remake-history-mark {
  color: var(--hmj-danger);
  background: color-mix(in srgb, var(--hmj-danger) 9%, var(--hmj-card-raised));
  border-color: color-mix(in srgb, var(--hmj-danger) 24%, var(--hmj-line));
}

body.workspace-page .video-remake-history-copy strong {
  font-size: 12px !important;
  line-height: 1.35;
}

body.workspace-page .video-remake-history-copy small {
  font-size: 10px !important;
  line-height: 1.35;
}

body.workspace-page .video-remake-history-status {
  gap: 4px;
  min-height: 26px;
  padding-inline: 7px !important;
  font-size: 10px !important;
}

body.workspace-page .video-remake-history-status svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}

body.workspace-page .video-remake-history-meta {
  gap: 4px !important;
  font-size: 10px !important;
}

body.workspace-page .video-remake-history-meta span {
  min-height: 23px;
  padding-inline: 7px;
}

body.workspace-page .video-remake-history-detail {
  padding-block: 6px !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

body.workspace-page .video-remake-history-progress {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  background: var(--hmj-input);
  border: 1px solid var(--hmj-line-soft);
  border-radius: 999px;
}

body.workspace-page .video-remake-history-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--hmj-primary);
  border-radius: inherit;
  transition: width 180ms ease-out;
}

body.workspace-page .video-remake-history-item.is-segment_generating .video-remake-history-progress span,
body.workspace-page .video-remake-history-item.is-segment_validating .video-remake-history-progress span,
body.workspace-page .video-remake-history-item.is-merging .video-remake-history-progress span,
body.workspace-page .video-remake-history-item.is-uploading .video-remake-history-progress span {
  background: var(--hmj-amber);
}

body.workspace-page .video-remake-history-card-actions {
  align-items: stretch;
  gap: 5px !important;
  padding-top: 8px;
}

body.workspace-page .video-remake-history-card-actions button,
body.workspace-page .video-remake-history-card-actions a {
  gap: 4px;
  min-height: 33px !important;
  font-size: 10px !important;
}

body.workspace-page .video-remake-history-card-actions button svg,
body.workspace-page .video-remake-history-card-actions a svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

body.workspace-page .video-remake-history-card-actions button span,
body.workspace-page .video-remake-history-card-actions a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.workspace-page .video-remake-history-list .workspace-empty-state {
  gap: 7px;
  font-size: 10px;
}

body.workspace-page .video-remake-history-list .workspace-empty-state svg {
  width: 20px;
  height: 20px;
  color: var(--hmj-primary);
}

body.workspace-page .video-remake-history-list .workspace-empty-state.is-error {
  color: var(--hmj-danger) !important;
  background: color-mix(in srgb, var(--hmj-danger) 5%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-danger) 28%, var(--hmj-line)) !important;
}

@container remake-history (min-width: 360px) {
  body.workspace-page .video-remake-history-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container remake-history (max-width: 359px) {
  body.workspace-page .video-remake-history-actions .workspace-button {
    padding-inline: 5px !important;
    font-size: 9px !important;
  }
}

@container remake-history (max-width: 459px) {
  body.workspace-page .video-remake-history-card-actions button,
  body.workspace-page .video-remake-history-card-actions a {
    flex-basis: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.workspace-page .video-remake-history-progress span {
    transition: none !important;
  }
}
/* Account menu: compact, clickable, and free of the legacy link underline. */
body[data-page="home"] .haomj-member-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}

body[data-page="home"] .haomj-member-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 5px 10px 5px 6px;
  color: var(--hmj-text-primary, #182335) !important;
  text-decoration: none !important;
  cursor: pointer;
}

body[data-page="home"] .haomj-member-chip:hover,
body[data-page="home"] .haomj-member-menu.is-open .haomj-member-chip {
  border-color: var(--hmj-primary, #ef4966) !important;
  box-shadow: 0 6px 18px rgba(31, 42, 68, .1);
}

body[data-page="home"] .haomj-member-chip > span:not(.nt-member-avatar) {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

body[data-page="home"] .haomj-member-chip strong,
body[data-page="home"] .haomj-member-chip small {
  overflow: hidden;
  max-width: 96px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none !important;
}

body[data-page="home"] .haomj-member-chip > svg {
  width: 15px;
  height: 15px;
  color: var(--hmj-text-muted, #7b8798);
  transition: transform .18s ease;
}

body[data-page="home"] .haomj-member-menu.is-open .haomj-member-chip > svg {
  transform: rotate(180deg);
}

body[data-page="home"] .haomj-member-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: 154px;
  padding: 6px;
  border: 1px solid var(--hmj-line, #dfe5ef);
  border-radius: 12px;
  background: var(--hmj-card, #fff);
  box-shadow: 0 16px 32px rgba(31, 42, 68, .14);
}

body[data-page="home"] .haomj-member-dropdown a,
body[data-page="home"] .haomj-member-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: var(--hmj-text-primary, #182335);
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body[data-page="home"] .haomj-member-dropdown a:hover,
body[data-page="home"] .haomj-member-dropdown button:hover {
  background: var(--hmj-surface, #f3f6fb);
}

body[data-page="home"] .haomj-member-dropdown button:last-child {
  color: #d23f56;
}

body[data-page="home"] .haomj-member-dropdown svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

body[data-page="home"] .haomj-tool-empty {
  display: grid;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 36px;
  color: var(--hmj-text-secondary, #67748a);
  text-align: center;
}

body[data-page="home"] .haomj-tool-empty svg {
  width: 28px;
  height: 28px;
  color: var(--hmj-primary, #ef4966);
}

body[data-page="home"] .haomj-tool-empty strong {
  color: var(--hmj-text-primary, #182335);
  font-size: 17px;
}

body[data-page="home"] .haomj-feature-card--toolbox {
  border-color: rgba(22, 123, 180, .24);
}

body[data-page="home"] .haomj-toolbox-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--hmj-line, #d9e1ec);
  border-radius: 14px;
  background: var(--hmj-card, #fff);
}

body[data-page="home"] .haomj-toolbox-subnav {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 20px 12px;
  border-right: 1px solid var(--hmj-line-soft, #e7ebf2);
  background: var(--hmj-surface, #f5f7fb);
}

body[data-page="home"] .haomj-toolbox-subnav > p {
  margin: 0 8px 1px;
}

body[data-page="home"] .haomj-toolbox-subnav > strong {
  margin: 0 8px 12px;
  color: var(--hmj-text, #162235);
  font-size: 16px;
}

body[data-page="home"] .haomj-toolbox-subnav button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--hmj-text-secondary, #44536a);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-page="home"] .haomj-toolbox-subnav button:hover,
body[data-page="home"] .haomj-toolbox-subnav button.is-active {
  color: var(--hmj-primary, #e74667);
  border-color: var(--hmj-primary-soft, rgba(231, 70, 103, .1));
  background: var(--hmj-card, #fff);
}

body[data-page="home"] .haomj-toolbox-subnav svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

body[data-page="home"] .haomj-toolbox-frame-wrap {
  min-width: 0;
  background: var(--hmj-bg, #f5f7fb);
}

body[data-page="home"] .haomj-toolbox-frame-wrap iframe {
  display: block;
  width: 100%;
  min-height: 520px;
  border: 0;
  background: var(--hmj-bg, #f5f7fb);
}

/* The iframe is shared by every home tool; only the toolbox keeps its side rail. */
body[data-page="home"] .haomj-toolbox-shell:not(.is-toolbox-mode) {
  display: block;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="home"] .haomj-toolbox-shell:not(.is-toolbox-mode) .haomj-toolbox-subnav {
  display: none;
}

body[data-page="home"] .haomj-toolbox-shell:not(.is-toolbox-mode) .haomj-toolbox-frame-wrap,
body[data-page="home"] .haomj-toolbox-shell:not(.is-toolbox-mode) .haomj-toolbox-frame-wrap iframe {
  min-height: 760px;
}

@media (max-width: 760px) {
  body[data-page="home"] .haomj-member-dropdown {
    right: -4px;
  }
  body[data-page="home"] .haomj-tool-empty {
    min-height: 260px;
    padding: 24px;
  }
  body[data-page="home"] .haomj-toolbox-shell {
    grid-template-columns: 1fr;
  }
  body[data-page="home"] .haomj-toolbox-subnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--hmj-line-soft, #e7ebf2);
  }
  body[data-page="home"] .haomj-toolbox-subnav > p,
  body[data-page="home"] .haomj-toolbox-subnav > strong {
    grid-column: 1 / -1;
  }
}

/* Final cascade: keep legacy history records readable in both themes. */
body[data-page="image"] .history-card,
body[data-page="video"] .history-card {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
  box-shadow: var(--hmj-shadow) !important;
}

body[data-page="image"] .history-card.accent,
body[data-page="image"] .history-card.warning,
body[data-page="image"] .history-card.success,
body[data-page="image"] .history-card.danger,
body[data-page="video"] .history-card.accent,
body[data-page="video"] .history-card.warning,
body[data-page="video"] .history-card.success,
body[data-page="video"] .history-card.danger {
  color: var(--hmj-text) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .history-title,
body[data-page="video"] .history-title,
body[data-page="image"] .history-card strong,
body[data-page="video"] .history-card strong {
  color: var(--hmj-text) !important;
}

body[data-page="image"] .history-meta,
body[data-page="image"] .history-detail,
body[data-page="image"] .history-card small,
body[data-page="video"] .history-meta,
body[data-page="video"] .history-detail,
body[data-page="video"] .history-card small {
  color: var(--hmj-text-secondary) !important;
}

body[data-page="image"] .history-compact-meta > span,
body[data-page="image"] .history-items span,
body[data-page="video"] .history-compact-meta > span,
body[data-page="video"] .history-items span {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-bg-deep) !important;
  border-color: var(--hmj-line) !important;
}

body[data-page="image"] .history-success-time,
body[data-page="video"] .history-success-time {
  color: var(--hmj-green) !important;
  background: color-mix(in srgb, var(--hmj-green) 11%, var(--hmj-card-raised)) !important;
  border-color: color-mix(in srgb, var(--hmj-green) 32%, var(--hmj-line)) !important;
}

body[data-page="image"] .history-task-duration,
body[data-page="video"] .history-task-duration {
  color: var(--hmj-danger) !important;
}

body[data-page="image"] .history-actions .mini-button,
body[data-page="video"] .history-actions .mini-button {
  color: var(--hmj-text-secondary) !important;
  background: var(--hmj-card-raised) !important;
  border-color: var(--hmj-line) !important;
}

/* Feature rail: centered content with stable single-line labels. */
body[data-page="home"] .haomj-feature-card {
  display: grid !important;
  grid-template-rows: 40px 22px minmax(18px, auto) !important;
  justify-items: center !important;
  align-content: start !important;
  min-width: 0 !important;
  min-height: 150px !important;
  padding: 16px 12px 14px !important;
  text-align: center !important;
}

body[data-page="home"] .haomj-feature-icon {
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
}

body[data-page="home"] .haomj-feature-card strong,
body[data-page="home"] .haomj-feature-card p {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}

body[data-page="home"] .haomj-feature-card strong {
  align-self: center !important;
  font-size: 14px !important;
  line-height: 22px !important;
}

body[data-page="home"] .haomj-feature-card p {
  align-self: start !important;
  margin: 0 !important;
  color: var(--hmj-text-secondary) !important;
  font-size: 11px !important;
  line-height: 18px !important;
}

@media (min-width: 1281px) {
  body[data-page="home"] .haomj-feature-card {
    grid-template-rows: 40px 22px minmax(18px, auto) !important;
    min-height: 150px !important;
    padding: 16px 12px 14px !important;
  }

  body[data-page="home"] .haomj-feature-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  body[data-page="home"] .haomj-feature-card {
    min-height: 150px !important;
    padding-inline: 12px !important;
  }
}

/* Never dim or tint the real page while a route is being prepared. */
body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame,
body[data-page="home"] .haomj-home-portal.is-loading #homeToolFrame:hover {
  opacity: 1 !important;
  filter: none !important;
}

/* Final portal contract: route changes keep one background and never expose an overlay. */
body[data-page="home"] .haomj-tool-stage,
body[data-page="home"] .haomj-toolbox-frame-wrap,
body[data-page="home"] #homeToolFrame {
  background: var(--hmj-bg) !important;
}

body[data-page="home"] .haomj-home-portal.is-loading #homeToolLoading {
  display: none !important;
}

/* Final upload layout: single desktop rail, stable widths, and no text collision. */
@media (min-width: 760px) {
  body[data-page="image"] .workbench-upload-pair,
  body[data-page="video"] .workbench-upload-pair {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body[data-page="image"] .workbench-upload-pair:has(> .workbench-upload-card[hidden]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-page="video"] .workbench-upload-pair:has(> #faceAssetsCard:not([hidden])) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="image"] .workbench-upload-pair > .workbench-upload-card,
  body[data-page="video"] .workbench-upload-pair > .workbench-upload-card {
    min-width: 0 !important;
    min-height: 82px !important;
    margin: 0 !important;
  }

  body[data-page="video"] .workbench-upload-pair > .workbench-upload-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    row-gap: 4px !important;
  }

  body[data-page="video"] .workbench-upload-card > span:first-child,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
    width: 100% !important;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
    gap: 6px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy strong,
  body[data-page="image"] .workbench-upload-card .workbench-upload-copy em,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy strong,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy em,
  body[data-page="image"] .workbench-upload-card > small,
  body[data-page="video"] .workbench-upload-card > small {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* Medium desktop: keep upload cards side by side while giving their copy
   enough width to remain readable instead of squeezing it into a second rail. */
@media (min-width: 760px) and (max-width: 1080px) {
  body[data-page="image"] .workbench-upload-card,
  body[data-page="video"] .workbench-upload-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-content: center !important;
    row-gap: 4px !important;
  }

  body[data-page="image"] .workbench-upload-card > span:first-child,
  body[data-page="video"] .workbench-upload-card > span:first-child,
  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="image"] .workbench-upload-card > small,
  body[data-page="video"] .workbench-upload-card > small {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-page="image"] .workbench-upload-card > span:first-child,
  body[data-page="video"] .workbench-upload-card > span:first-child {
    grid-row: 1 !important;
  }

  body[data-page="image"] .workbench-upload-card .workbench-upload-copy,
  body[data-page="video"] .workbench-upload-card .workbench-upload-copy {
    grid-row: 2 !important;
    min-height: 0 !important;
  }

  body[data-page="image"] .workbench-upload-card > small,
  body[data-page="video"] .workbench-upload-card > small {
    grid-row: 3 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body[data-page="image"] .workbench-upload-card .inline-preview:not(.empty),
  body[data-page="video"] .workbench-upload-card .inline-preview:not(.empty) {
    grid-column: 1 / -1 !important;
  }
}

@media (min-width: 760px) and (max-width: 900px) {
  body[data-page="video"] .workbench-upload-pair:has(> #faceAssetsCard:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Hidden mode-specific upload cards must stay out of the layout after the
   shared card display rule has been applied. */
body[data-page="image"] .workbench-upload-card[hidden],
body[data-page="video"] .workbench-upload-card[hidden] {
  display: none !important;
}