.home-shell {
  background: var(--app-gradient-page, #f3f6f5);
  display: flex;
  min-height: 100vh;
}

.home-sidebar {
  align-items: stretch;
  background: var(--app-gradient-garnet, #581522);
  border-right: 1px solid rgba(34, 7, 15, 0.4);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 clamp(264px, 21vw, 420px);
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  overflow: hidden;
  padding: 8px 0 22px 4px;
  position: sticky;
  top: 0;
}

.home-brand {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex: 0 0 auto;
  color: var(--app-color-text, #203236);
  font-weight: 700;
  gap: 2px;
  min-height: 42px;
  margin: 0 10px;
  padding: 0 2px 8px;
  white-space: nowrap;
}

.home-brand .brand-mark {
  background: transparent url("../images/BDLogo.png") center/contain no-repeat;
  border-radius: 0;
  box-sizing: border-box;
  height: 48px;
  margin-right: 10px;
  position: relative;
  width: 48px;
}

.home-brand .brand-wordmark {
  color: inherit;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.045em;
}

.home-brand .brand-wordmark strong {
  font-weight: 700;
}

.home-sidebar .home-brand {
  color: #fff;
}

.home-sidebar .home-brand .brand-wordmark {
  color: #fff;
}

.home-sidebar oj-label {
  color: #eadde0;
}

.home-sidebar oj-select-single {
  --oj-text-field-text-color: #fff;
  --oj-text-field-placeholder-color: #eadde0;
  --oj-text-field-border-color: rgba(255, 255, 255, .35);
  --oj-text-field-bg-color: rgba(255, 255, 255, .08);
}

.home-sidebar oj-navigation-list {
  --oj-core-text-color-primary: #fbf1f2;
  --oj-core-text-color-secondary: #ead9dc;
  --oj-heading-text-color: #fff;
  --oj-button-borderless-chrome-text-color: #fff;
  --oj-button-borderless-chrome-text-color-hover: #fff;
  --oj-button-borderless-chrome-text-color-active: #fff;
  --oj-link-text-color: #fbf1f2;
  --oj-navigation-list-item-label-color: #fbf1f2;
  --oj-navigation-list-item-label-color-hover: #fff;
  --oj-navigation-list-item-bg-color-hover: rgba(239, 126, 131, .16);
  --oj-navigation-list-item-label-color-selected: #fff;
  --oj-navigation-list-item-bg-color-selected: rgba(164, 54, 68, .48);
  --oj-navigation-list-item-border-color-selected: rgba(255, 255, 255, .08);
  --oj-navigation-list-font-size: 14px;
  --oj-navigation-list-font-weight: 650;
  --oj-navigation-list-icon-size: 20px;
  --oj-navigation-list-icon-to-text-padding: 14px;
  --oj-navigation-list-item-padding: 14px 16px;
  --oj-navigation-list-item-min-height: 58px;
  --oj-navigation-list-item-margin: 4px 0;
  --oj-navigation-list-sliding-heading-font-size: 14px;
  --oj-navigation-list-sliding-heading-font-weight: 700;
  --oj-navigation-list-sliding-heading-line-height: 1.25;
  color: #fbf1f2;
}

.home-sidebar .page-navigation .oj-navigationlist-current-header {
  color: #fff !important;
  font-family: inherit;
}

.home-sidebar .page-navigation .oj-navigationlist-toolbar,
.home-sidebar .page-navigation .oj-navigationlist-previous-link,
.home-sidebar .page-navigation .oj-navigationlist-previous-button {
  color: #fff !important;
  --oj-button-borderless-chrome-text-color: #fff;
  --oj-button-borderless-chrome-text-color-hover: #fff;
  --oj-button-borderless-chrome-text-color-active: #fff;
}

.home-sidebar .page-navigation .oj-navigationlist-previous-button .oj-button-icon {
  color: #fff !important;
}

.home-sidebar .page-navigation .oj-navigationlist-item,
.home-sidebar .page-navigation .oj-navigationlist-item a,
.home-sidebar .page-navigation a {
  color: #fbf1f2 !important;
  text-decoration: none;
}

.home-sidebar .page-navigation .oj-navigationlist-item-icon,
.home-sidebar .page-navigation a .oj-navigationlist-item-icon {
  color: #f8e9eb !important;
  font-size: 19px;
  opacity: 0.94;
}

.home-sidebar .page-navigation .oj-selected > a,
.home-sidebar .page-navigation .oj-selected > a .oj-navigationlist-item-icon {
  color: #fff !important;
}

.home-org-picker {
  display: grid;
  flex: 0 0 auto;
  gap: 6px;
  padding: 0 12px;
}

.home-org-picker oj-label {
  color: #eadde0;
  font-size: 12px;
  font-weight: 700;
}

.home-org-picker oj-select-single {
  max-width: 100%;
  width: 100%;
}

.home-main {
  container-type: inline-size;
  background: var(--app-color-page, #f4f1e8);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.home-mobile-logo {
  display: none;
}

.home-navigation-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.home-nav-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.home-topbar {
  align-items: center;
  background: #fffefa;
  border-bottom: 1px solid var(--app-color-border, #d9e3e1);
  box-shadow: 0 3px 16px rgba(30, 71, 68, 0.045);
  box-sizing: border-box;
  display: flex;
  flex: 0 0 64px;
  gap: 22px;
  justify-content: flex-start;
  min-height: 64px;
  padding: 0 24px;
}

.home-top-search {
  --oj-text-field-bg-color: rgba(32, 50, 54, .045);
  --oj-text-field-border-color: transparent;
  --oj-text-field-border-color-hover: rgba(32, 50, 54, .1);
  --oj-text-field-border-color-focus: var(--app-color-teal);
  --oj-text-field-text-color: var(--app-color-text);
  --oj-text-field-placeholder-color: #7c898a;
  --oj-text-field-border-radius: 12px;
  display: block;
  flex: 1 1 560px;
  max-width: 700px;
  min-width: 0;
  width: 100%;
}

.home-top-search::part(input) {
  color: var(--app-color-text);
}

.home-account {
  align-items: center;
  display: flex;
  max-width: min(40vw, 360px);
  margin-left: auto;
  white-space: nowrap;
}

.home-account oj-menu-button {
  --oj-button-borderless-chrome-text-color: #28383b;
  --oj-button-borderless-chrome-text-color-hover: var(--app-color-teal);
  font-weight: 650;
}

.home-avatar {
  align-items: center;
  background: var(--app-color-garnet, #5b1727);
  border: 1px solid rgba(91, 23, 39, 0.18);
  border-radius: 50%;
  box-sizing: border-box;
  color: #fff;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  line-height: 1;
  width: 34px;
}

.home-avatar-icon {
  color: #fff;
  font-size: 20px;
  line-height: 1;
}

.home-account oj-menu-button {
  max-width: 100%;
}

.home-content {
  background: var(--app-color-page, #f4f1e8);
  box-sizing: border-box;
  flex: 1;
  margin: 0;
  max-width: none;
  padding: 30px 26px;
  width: 100%;
}

.home-content h1 {
  font-size: 32px;
  margin: 0;
}

.page-navigation {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.home-nav-mount,
.home-nav-mount oj-navigation-list {
  margin-inline: 0;
  padding-inline: 0;
}

.home-nav-toggle {
  display: inline-flex;
}

.home-nav-backdrop {
  display: none;
}

.home-sidebar {
  transition: flex-basis 200ms ease, width 200ms ease, padding 200ms ease, border-width 200ms ease;
}

.home-sidebar.is-collapsed {
  flex-basis: 56px;
  min-width: 56px;
  overflow: hidden;
  width: 56px;
  padding: 0;
}

.home-sidebar.is-collapsed .home-brand {
  gap: 0;
  padding-inline: 8px;
}

.home-sidebar.is-collapsed .home-brand .brand-mark {
  height: 42px;
  margin-right: 6px;
  width: 42px;
}

.home-sidebar.is-collapsed .home-org-picker,
.home-sidebar.is-collapsed .home-sidebar-footer,
.home-sidebar.is-collapsed .brand-wordmark {
  display: none;
}

.home-nav-mount {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.home-nav-mount .page-navigation {
  flex: 1 1 auto;
  min-height: 0;
}

.home-sidebar-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  flex: 0 0 auto;
  margin: 0 10px 4px;
  padding: 18px 2px 8px;
}

.home-sidebar-caption {
  display: grid;
  gap: 4px;
  padding: 0 9px;
}

.home-sidebar-caption strong {
  color: #fff5f6;
  font-size: 14px;
  font-weight: 700;
}

.home-sidebar-caption span {
  color: #c5aeb2;
  font-size: 12px;
}

.home-content h1 {
  color: #17252a;
  font-family: inherit;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.home-nav-toggle {
  --oj-button-height: 44px;
  --oj-button-borderless-chrome-bg-color-hover: var(--app-color-teal-soft, #e8f2f0);
  --oj-button-borderless-chrome-text-color: var(--app-color-garnet, #581522);
  --oj-button-borderless-chrome-text-color-hover: var(--app-color-garnet, #581522);
  margin-right: 0;
  min-width: 44px;
}

@media (max-width: 760px) {
  .home-sidebar {
    bottom: 0;
    box-shadow: 14px 0 36px rgba(34, 13, 18, 0.32);
    height: 100dvh;
    left: 0;
    max-width: min(84vw, 320px);
    position: fixed;
    top: 0;
    transform: translateX(-105%);
    transition: transform 180ms ease-out;
    width: 320px;
    z-index: 1001;
  }
  .home-sidebar.is-open {
    transform: translateX(0);
  }
  .home-nav-backdrop {
    --oj-button-height: 100dvh;
    --oj-button-borderless-chrome-bg-color: rgba(20, 29, 44, .38);
    --oj-button-borderless-chrome-bg-color-hover: rgba(20, 29, 44, .38);
    --oj-button-borderless-chrome-text-color: transparent;
    --oj-button-borderless-chrome-text-color-hover: transparent;
    display: block;
    inset: 0;
    position: fixed;
    z-index: 1000;
    height: 100dvh;
    margin: 0;
    padding: 0;
    width: 100vw;
  }
  .home-nav-toggle {
    display: inline-flex;
    height: 44px;
    width: 44px;
  }
  .home-sidebar {
    transition: transform 180ms ease-out;
  }
  .home-sidebar.is-collapsed {
    flex-basis: clamp(264px, 21vw, 420px);
    min-width: auto;
    padding: 8px 0 22px 4px;
    width: 320px;
  }
  .home-topbar {
    gap: 10px;
    padding: 0 16px;
  }
  .home-top-search {
    flex-basis: 100px;
    min-width: 0;
  }
  .home-content {
    padding: 24px 18px;
  }
}
@media (max-width: 480px) {
  .home-topbar {
    min-height: 58px;
    padding: 0 10px;
  }
  .home-account {
    max-width: 42vw;
  }
  .home-top-search {
    flex: 1 1 auto;
  }
  .home-content {
    padding: 20px 14px;
  }
}
@media (max-width: 760px) {
  .home-mobile-logo {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: 0 0 40px;
  }
  .home-nav-toggle {
    flex: 0 0 44px;
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-sidebar {
    transition: none;
  }
}
.home-sidebar.is-collapsed .home-brand {
  margin: 0;
  padding-inline: 4px;
}

.home-sidebar.is-collapsed .brand-mark {
  flex: 0 0 42px;
}

.has-compact-navigation .home-topbar {
  padding-inline-start: 0;
}
.has-compact-navigation .home-navigation-brand {
  background: var(--app-gradient-garnet, #581522);
  background-size: 100% 100vh;
  justify-content: center;
  flex: 0 0 56px;
  min-height: 64px;
  align-self: stretch;
}
.has-compact-navigation .home-mobile-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: 0 0 40px;
  padding: 2px;
  box-sizing: border-box;
}
.has-compact-navigation .home-nav-toggle {
  --oj-button-borderless-chrome-bg-color: transparent;
  --oj-button-borderless-chrome-bg-color-hover: rgba(255, 255, 255, .12);
  --oj-button-borderless-chrome-text-color: #fff;
  --oj-button-borderless-chrome-text-color-hover: #fff;
  --oj-button-borderless-chrome-text-color-active: #fff;
}

.home-rail-toggle {
  --oj-button-height: 64px;
  height: 64px;
  flex: 0 0 64px;
  margin: 0;
  width: 56px;
  min-width: 56px;
}

.home-nav-collapse {
  --oj-button-borderless-chrome-text-color: var(--app-color-garnet, #581522);
  flex: 0 0 44px;
}

.home-nav-close {
  --oj-button-borderless-chrome-text-color: #fff;
  margin-left: auto;
}

@media (max-width: 760px) {
  .home-shell {
    padding-left: 56px;
  }
  .home-sidebar:not(.is-open) {
    transform: none;
    box-shadow: none;
    width: 56px;
    min-width: 56px;
    padding: 0;
    gap: 12px;
  }
  .home-sidebar:not(.is-open) :is(.home-org-picker, .home-sidebar-footer, .brand-wordmark) {
    display: none;
  }
  .home-sidebar:not(.is-open) .home-brand {
    margin: 0;
    padding: 0 4px 8px;
  }
  .home-sidebar:not(.is-open) .brand-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    margin: 0;
  }
  .home-sidebar.is-open {
    max-width: min(84vw, 320px);
  }
  .home-topbar {
    gap: 6px;
    padding-inline: 6px;
  }
  .home-top-search {
    flex: 1 1 0;
  }
  .home-account {
    flex: 0 0 82px;
    max-width: 82px;
  }
}
.beyondhome-page {
  padding: clamp(14px, 3vw, 32px);
  color: var(--app-color-text);
  box-sizing: border-box;
}

.beyondhome-heading, .beyondhome-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.beyondhome-heading h1 {
  margin: 0 0 10px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.beyondhome-heading p {
  max-width: 720px;
}

.beyondhome-eyebrow {
  color: var(--app-color-teal);
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
}

.beyondhome-layout {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 24px;
}

.beyondhome-card {
  min-width: 0;
  border: 1px solid var(--app-color-border);
  border-radius: 14px;
  background: var(--app-gradient-surface, #fff);
  padding: 24px;
  box-sizing: border-box;
}

.beyondhome-settings {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}

.beyondhome-settings h2 {
  margin: 0;
}

.beyondhome-modes, .beyondhome-downloads {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.beyondhome-preview-heading h2 {
  margin: 0;
}

.beyondhome-viewport {
  position: relative;
  min-height: 400px;
  height: clamp(400px, 58vh, 720px);
  background: #e9eee5;
  overflow: hidden;
  border-radius: 10px;
}

.beyondhome-viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.beyondhome-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: #526b5d;
}

.beyondhome-note {
  font-size: 0.85rem;
  opacity: 0.75;
}

.beyondhome-tools, .beyondhome-status {
  font-size: 0.9rem;
}

.beyondhome-error {
  color: #a3293a;
}

.beyondhome-reference {
  margin-bottom: 24px;
}

.beyondhome-reference-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.beyondhome-reference-heading h2 {
  font-size: 1.5rem;
  margin: 0 0 10px;
}

.beyondhome-reference-heading p {
  max-width: 760px;
}

.beyondhome-reference-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 28px;
}

.beyondhome-reference-grid oj-c-file-picker {
  margin-top: 16px;
}

.beyondhome-reference-preview {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  background: #f1f2ee;
}

.beyondhome-suggestion {
  font-weight: 600;
}

.beyondhome-settings h2 {
  font-size: 1.3rem;
}

@media (max-width: 850px) {
  .beyondhome-reference-grid {
    grid-template-columns: 1fr;
  }
}
@container (max-width:850px) {
  .beyondhome-layout {
    grid-template-columns: 1fr;
  }
  .beyondhome-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .beyondhome-settings h2, .beyondhome-settings p, .beyondhome-settings oj-c-button {
    grid-column: 1/-1;
  }
}
@media (max-width: 600px) {
  .beyondhome-layout, .beyondhome-settings {
    display: flex;
    flex-direction: column;
  }
  .beyondhome-card {
    padding: 16px;
  }
  .beyondhome-viewport {
    min-height: 340px;
    height: 420px;
  }
}
.beyondhome-imperial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mpeg-shell {
  min-height: 100%;
  padding: 24px;
  background: var(--app-color-page, #f4f1e8);
}

.mpeg-workspace {
  margin: 0 auto;
  max-width: 1120px;
}

.mpeg-topbar {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 24px;
}

.mpeg-topbar .eyebrow {
  margin: 0 0 8px;
}

.mpeg-topbar h1 {
  color: #102427;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1;
  margin: 0;
}

.mpeg-tool-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.mpeg-dropzone, .mpeg-panel, .mpeg-status-band, .mpeg-results, .mpeg-preview, .mpeg-log-output {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(16, 36, 39, 0.1);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(16, 36, 39, 0.08);
}

.mpeg-dropzone {
  align-content: center;
  display: grid;
  gap: 14px;
  justify-items: center;
  min-height: 300px;
  outline: 2px dashed rgba(18, 124, 113, 0.32);
  outline-offset: -14px;
  padding: 32px;
  text-align: center;
}

.mpeg-dropzone strong {
  color: #102427;
  font-size: 1.1rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.mpeg-preset-buttons {
  display: flex;
  flex-wrap: wrap;
}

.mpeg-button {
  background: #fff;
  border: 1px solid #6d7779;
  border-radius: 4px;
  color: #102427;
  cursor: pointer;
  font: inherit;
  min-height: 38px;
  padding: 0 14px;
}

.mpeg-button:hover:not(:disabled) {
  background: #eef5f3;
}

.mpeg-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.mpeg-button.is-selected, .mpeg-optimize-button {
  color: #fff;
}

.mpeg-file-picker {
  align-items: center;
  border: 2px dashed #6d8b89;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
}

.mpeg-file-picker input {
  max-width: 100%;
}

.mpeg-progress {
  accent-color: #146e6a;
  height: 10px;
  width: 100%;
}

.mpeg-dropzone span {
  color: #5d6d70;
}

.mpeg-panel {
  padding: 22px;
}

.mpeg-panel-title {
  margin-bottom: 18px;
}

.mpeg-settings-list {
  display: grid;
  gap: 12px;
  margin: 20px 0;
}

.mpeg-settings-list div {
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.mpeg-settings-list dt {
  color: #617579;
}

.mpeg-settings-list dd {
  color: #102427;
  font-weight: 800;
  margin: 0;
}

.mpeg-optimize-button {
  width: 100%;
}

.mpeg-status-band {
  align-items: center;
  color: #24383b;
  display: grid;
  font-weight: 700;
  gap: 18px;
  grid-template-columns: minmax(180px, 260px) 1fr;
  margin-top: 18px;
  padding: 16px;
}

.mpeg-results {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr) 180px;
  margin-top: 18px;
  padding: 16px;
}

.mpeg-metric {
  color: #51676a;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
}

.mpeg-metric strong {
  color: #102427;
}

.mpeg-download-link {
  align-items: center;
  background: #d5452c;
  border-radius: 4px;
  color: #fff;
  display: flex;
  font-weight: 700;
  justify-content: center;
  min-height: 42px;
  text-decoration: none;
}

.mpeg-download-link.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.mpeg-preview {
  background: #102427;
  display: block;
  margin-top: 18px;
  max-height: 520px;
  width: 100%;
}

.mpeg-log-output {
  color: #32464a;
  font-size: 0.8rem;
  margin: 18px 0 0;
  overflow: auto;
  padding: 16px;
  white-space: pre-wrap;
}

.mpeg-status-message {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.mpeg-status-message .oj-ux-ico-chart-dial-guage {
  color: #127c71;
  font-size: 1.25rem;
}

@media (max-width: 480px) {
  .mpeg-shell {
    padding: 16px;
  }
  .mpeg-tool-grid, .mpeg-status-band, .mpeg-results {
    grid-template-columns: 1fr;
  }
  .mpeg-dropzone {
    min-height: 240px;
  }
}
.demographics-page {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1120px;
  min-height: calc(100vh - 150px);
}

.demographics-header {
  align-items: center;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.demographics-header .eyebrow {
  margin: 0 0 5px;
}

.demographics-page h1 {
  color: #172033;
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.035em;
  margin: 0;
}

.demographics-local-badge {
  align-items: center;
  background: #edf7f0;
  border: 1px solid #cde7d3;
  border-radius: 999px;
  color: #24633a;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 650;
  gap: 8px;
  padding: 7px 11px;
}

.demographics-local-badge span {
  background: #36a05b;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.demographics-assistant {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #d9e0ec;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(28, 46, 80, 0.07);
  display: grid;
  flex: 1 1 auto;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  min-height: min(680px, 100vh - 245px);
  overflow: hidden;
  padding: clamp(16px, 3vw, 28px);
}

.demographics-response-stage {
  align-items: center;
  display: flex;
  justify-content: center;
  min-width: 0;
  padding: 16px;
}

.demographics-chat-history {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 4px 16px;
  scrollbar-gutter: stable;
  width: 100%;
}

.demographics-chat-dock {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.demographics-question-history {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.demographics-history-item,
.demographics-suggestion {
  display: block;
  text-align: left;
  width: 100%;
  --oj-button-border-radius: 9px;
  --oj-button-text-to-edge-padding: 12px;
  --oj-button-outlined-chrome-bg-color: #fff;
  --oj-button-outlined-chrome-border-color: #e0e6ef;
  --oj-button-outlined-chrome-text-color: #34445d;
  --oj-button-outlined-chrome-bg-color-hover: #f1f6ff;
  --oj-button-outlined-chrome-border-color-hover: #aac3ec;
  --oj-button-outlined-chrome-text-color-hover: #1f4b8c;
}

.demographics-history-item.is-active {
  --oj-button-outlined-chrome-bg-color: #f1f6ff;
  --oj-button-outlined-chrome-border-color: #aac3ec;
  --oj-button-outlined-chrome-text-color: #1f4b8c;
}

.demographics-history-item .demographics-button-label,
.demographics-suggestion .demographics-button-label {
  display: block;
  text-align: left;
  width: 100%;
}

.demographics-history-item .demographics-button-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demographics-chat-intro {
  align-items: center;
  color: #647187;
  display: flex;
  justify-content: center;
  max-width: 620px;
  min-height: 170px;
  text-align: center;
}

.demographics-chat-intro p {
  line-height: 1.6;
  margin: 0;
  max-width: 560px;
}

.demographics-assistant-message {
  color: #27354a;
  line-height: 1.65;
  margin: 0 auto;
  max-width: 760px;
  min-height: 44px;
  overflow-wrap: anywhere;
  width: 100%;
}

.demographics-answer-text {
  white-space: pre-wrap;
}

.demographics-streaming-placeholder {
  color: #59667d;
  font-size: 14px;
}

.demographics-error {
  background: #fff1f0;
  border: 1px solid #f2c6c2;
  border-radius: 8px;
  color: #a2261c;
  line-height: 1.45;
  padding: 11px 13px;
}

.demographics-suggestions {
  margin: auto 0 4px;
}

.demographics-suggestions-title {
  color: #59667d;
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 10px;
  text-align: center;
}

.demographics-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demographics-composer {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0 auto;
  width: 100%;
}

.demographics-composer oj-label {
  align-self: flex-start;
  color: #59667d;
  font-size: 12px;
  font-weight: 650;
}

.demographics-question {
  display: block;
  width: 100%;
  --oj-text-area-min-height: 56px;
}

.demographics-ask-button {
  --oj-button-height: 42px;
  --oj-button-border-radius: 8px;
  --oj-button-call-to-action-chrome-bg-color: var(--app-color-teal, #0f6265);
  --oj-button-call-to-action-chrome-bg-color-hover: var(--app-color-teal-strong, #08494d);
  --oj-button-call-to-action-chrome-text-color: #fff;
  display: inline-flex;
  min-width: 92px;
  min-height: 42px;
}

.demographics-privacy-note {
  color: #738096;
  font-size: 11px;
  line-height: 1.45;
  margin: 8px 0 0;
  text-align: left;
  width: 100%;
}

@media (max-width: 640px) {
  .demographics-page {
    min-height: calc(100vh - 115px);
  }
  .demographics-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .demographics-assistant {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 230px);
    padding: 12px;
  }
  .demographics-response-stage {
    flex: 1 1 auto;
    min-height: 230px;
    padding: 8px 2px 18px;
  }
  .demographics-chat-history {
    max-height: 34vh;
    padding-left: 2px;
    padding-right: 2px;
  }
  .demographics-chat-dock {
    flex: 0 0 auto;
  }
  .demographics-composer {
    align-items: stretch;
    margin-top: 10px;
  }
  .demographics-ask-button {
    align-self: flex-end;
  }
  .demographics-privacy-note {
    display: none;
  }
}
.image-edit-page {
  background: var(--app-gradient-page, #f3f6f5);
  min-height: 100%;
}

.image-edit-shell {
  margin: 0 auto;
  max-width: 1320px;
  padding: clamp(20px, 4vw, 46px);
}

.image-edit-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 28px;
  max-width: 1180px;
}

.image-edit-eyebrow {
  color: var(--app-color-teal, #0f6265);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.image-edit-header h1 {
  color: var(--app-color-text, #203236);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.image-edit-subtitle {
  color: #637579;
  margin: 10px 0 0;
}

.image-edit-connection {
  align-items: center;
  color: #765c23;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 9px;
}

.image-edit-connection.is-online {
  color: #19665d;
}

.image-edit-connection-dot {
  background: #c48a29;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.image-edit-connection.is-online .image-edit-connection-dot {
  background: #239276;
}

.image-edit-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  margin: 0 auto;
  max-width: 1180px;
}

.image-edit-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #dfe7e8;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(28, 58, 62, 0.07);
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.image-edit-input-card {
  align-content: start;
  display: grid;
}

.image-edit-mode-switch {
  margin-bottom: 18px;
  width: 100%;
}

.image-edit-upload {
  align-items: center;
  background: #f6f9f9;
  border: 1px dashed #8daead;
  border-radius: 10px;
  color: #647578;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 174px;
  overflow: hidden;
  padding: 18px;
  text-align: center;
}

.image-edit-upload:hover {
  background: var(--app-color-teal-soft, #e8f2f0);
  border-color: var(--app-color-teal, #0f6265);
}

.image-edit-upload oj-file-picker {
  display: block;
}

.image-edit-upload strong {
  color: #1c383a;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.image-edit-upload span:last-child {
  font-size: 0.82rem;
}

.image-edit-input-card oj-label {
  color: #21393c;
  font-size: 0.92rem;
  font-weight: 750;
  margin: 22px 0 8px;
}

.image-edit-prompt {
  width: 100%;
}

.image-edit-hint, .image-edit-private-note {
  color: #718184;
  font-size: 0.81rem;
  line-height: 1.5;
}

.image-edit-hint {
  margin: 8px 0 20px;
}

.image-edit-size-field {
  display: grid;
  margin: 0 0 18px;
}

.image-edit-size-field oj-label {
  margin: 0 0 8px;
}

.image-edit-size-field oj-select-single {
  width: 100%;
}

.image-edit-advanced-settings {
  border-top: 1px solid #e4e9e7;
  margin: 4px 0 18px;
  padding-top: 12px;
}

.image-edit-advanced-settings summary {
  color: #28565a;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.image-edit-advanced-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-edit-advanced-settings oj-input-number {
  width: 100%;
}

.image-edit-submit {
  width: 100%;
}

.image-edit-status {
  color: #286d66;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.image-edit-error {
  color: #9b3328;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.image-edit-preview-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.image-edit-preview-heading h2 {
  color: #1c3337;
  font-size: 1.05rem;
  margin: 0;
}

.image-edit-preview-heading oj-button {
  flex: 0 0 auto;
}

.image-edit-previews {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.image-edit-preview {
  margin: 0;
  min-width: 0;
}

.image-edit-image-frame {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: #e8eeee;
  background-image: linear-gradient(45deg, #dce4e4 25%, transparent 25%), linear-gradient(-45deg, #dce4e4 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dce4e4 75%), linear-gradient(-45deg, transparent 75%, #dce4e4 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  border: 1px solid #dfe7e8;
  border-radius: 8px;
  color: #758487;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.image-edit-image-frame.is-empty {
  background-color: #f0f4f4;
  background-image: none;
}

.image-edit-image-frame img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.image-edit-image-open {
  height: 100%;
  width: 100%;
}

.image-edit-image-open::part(button) {
  align-items: stretch;
  height: 100%;
  justify-content: stretch;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.image-edit-image-frame span {
  font-size: 0.86rem;
  padding: 18px;
  text-align: center;
}

.image-edit-preview figcaption {
  color: #516467;
  font-size: 0.83rem;
  font-weight: 700;
  margin-top: 9px;
}

.image-edit-private-note {
  margin: 22px 0 0;
}

.image-edit-library {
  margin: 26px auto 0;
  max-width: 1180px;
}

.image-edit-library-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.image-edit-library-heading h2 {
  color: #1c3337;
  font-size: 1.2rem;
  margin: 0;
}

.image-edit-library-heading p, .image-edit-library-message {
  color: #718184;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.image-edit-library-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.image-edit-library-item {
  background: #fff;
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
}

.image-edit-library-item > a {
  background: #edf1f1;
  display: block;
}

.image-edit-library-item img {
  aspect-ratio: 4/3;
  display: block;
  max-height: 138px;
  object-fit: contain;
  width: 100%;
}

.image-edit-library-meta {
  display: grid;
  gap: 5px;
  padding: 10px 12px 0;
}

.image-edit-library-meta strong {
  overflow-wrap: anywhere;
}

.image-edit-library-meta span {
  color: #718184;
  font-size: 0.75rem;
}

.image-edit-library-actions {
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr);
  padding: 4px 8px 8px;
}

.image-edit-library-actions oj-button {
  min-width: 0;
  width: 100%;
}

.saved-asset-delete::part(button) {
  color: #8a3228;
}

@media (max-width: 760px) {
  .image-edit-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .image-edit-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .image-edit-shell {
    padding: 16px;
  }
  .image-edit-previews {
    grid-template-columns: 1fr;
  }
}
.image-to-3d-page {
  background: var(--app-gradient-page, #f3f6f5);
  min-height: 100%;
}

.image-to-3d-shell {
  margin: 0 auto;
  max-width: 1440px;
  padding: clamp(20px, 4vw, 46px);
}

.image-to-3d-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 28px;
  max-width: 1280px;
}

.image-to-3d-eyebrow {
  color: var(--app-color-teal, #0f6265);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.image-to-3d-header h1 {
  color: var(--app-color-text, #203236);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.image-to-3d-subtitle {
  color: #637579;
  margin: 10px 0 0;
}

.image-to-3d-connection {
  align-items: center;
  color: #765c23;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 9px;
}

.image-to-3d-connection.is-online {
  color: #19665d;
}

.image-to-3d-dot {
  background: #c48a29;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.image-to-3d-connection.is-online .image-to-3d-dot {
  background: #239276;
}

.image-to-3d-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(280px, 0.68fr) minmax(0, 1.32fr);
  margin: 0 auto;
  max-width: 1280px;
}

.image-to-3d-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #dfe7e8;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(28, 58, 62, 0.07);
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.image-to-3d-controls {
  align-content: start;
  display: grid;
}

.image-to-3d-mode-switch {
  margin-bottom: 16px;
  width: 100%;
}

.image-to-3d-upload {
  align-items: center;
  background: #f6f9f9;
  border: 1px dashed #8daead;
  border-radius: 10px;
  color: #647578;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  min-height: 174px;
  overflow: hidden;
  padding: 18px;
  text-align: center;
}

.image-to-3d-upload oj-file-picker {
  display: block;
}

.image-to-3d-upload strong {
  color: #1c383a;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.image-to-3d-upload span {
  font-size: 0.82rem;
}

.image-to-3d-prompt {
  display: grid;
  gap: 8px;
}

.image-to-3d-prompt oj-label {
  color: #21393c;
  font-size: 0.92rem;
  font-weight: 750;
  margin-top: 8px;
}

.image-to-3d-prompt oj-text-area, .image-to-3d-prompt oj-select-single {
  width: 100%;
}

.image-to-3d-advanced-settings {
  border-top: 1px solid #e4e9e7;
  margin: 16px 0;
  padding-top: 12px;
}

.image-to-3d-advanced-settings summary {
  color: #28565a;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.image-to-3d-advanced-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.image-to-3d-advanced-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.image-to-3d-advanced-grid oj-select-single, .image-to-3d-advanced-grid oj-input-number {
  width: 100%;
}

.image-to-3d-advanced-grid p {
  color: #718184;
  font-size: 0.81rem;
  line-height: 1.5;
  margin: 0;
}

.image-to-3d-prompt p {
  color: #718184;
  font-size: 0.81rem;
  line-height: 1.5;
  margin: 4px 0 0;
}

.image-to-3d-source {
  margin: 18px 0 0;
}

.image-to-3d-source img {
  background: #edf1f1;
  border-radius: 8px;
  display: block;
  max-height: 230px;
  object-fit: contain;
  width: 100%;
}

.image-to-3d-source figcaption {
  color: #516467;
  font-size: 0.82rem;
  margin-top: 7px;
}

.image-to-3d-hint, .image-to-3d-footnote {
  color: #718184;
  font-size: 0.81rem;
  line-height: 1.5;
}

.image-to-3d-hint {
  margin: 18px 0;
}

.image-to-3d-submit {
  width: 100%;
}

.image-to-3d-status {
  color: #286d66;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.image-to-3d-error {
  color: #9b3328;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.image-to-3d-viewer-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.image-to-3d-viewer-heading h2 {
  color: #1c3337;
  font-size: 1.05rem;
  margin: 0;
}

.image-to-3d-viewer-heading p {
  color: #718184;
  font-size: 0.79rem;
  margin: 5px 0 0;
}

.image-to-3d-viewer-heading oj-button {
  flex: 0 0 auto;
}

.image-to-3d-canvas-wrap {
  background: radial-gradient(circle at 50% 42%, #fff, #edf1f2 75%);
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  height: min(68vh, 720px);
  min-height: 390px;
  overflow: hidden;
  position: relative;
}

.image-to-3d-canvas {
  display: block;
  height: 100%;
  outline: none;
  touch-action: none;
  width: 100%;
}

.image-to-3d-canvas-wrap.is-empty {
  background: #f2f5f5;
}

.image-to-3d-viewer-placeholder {
  align-items: center;
  color: #758487;
  display: flex;
  inset: 0;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  text-align: center;
}

.image-to-3d-footnote {
  margin: 16px 0 0;
}

.image-to-3d-library {
  margin: 26px auto 0;
  max-width: 1280px;
}

.image-to-3d-library-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.image-to-3d-library-heading h2 {
  color: #1c3337;
  font-size: 1.2rem;
  margin: 0;
}

.image-to-3d-library-heading p, .image-to-3d-library-message {
  color: #718184;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.image-to-3d-library-list {
  display: grid;
  gap: 10px;
}

.image-to-3d-library-item {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 16px;
}

.image-to-3d-library-item > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.image-to-3d-library-item strong {
  overflow-wrap: anywhere;
}

.image-to-3d-library-item span {
  color: #718184;
  font-size: 0.78rem;
}

.image-to-3d-library-actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.saved-asset-delete::part(button) {
  color: #8a3228;
}

@media (max-width: 820px) {
  .image-to-3d-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .image-to-3d-grid {
    grid-template-columns: 1fr;
  }
  .image-to-3d-advanced-grid {
    grid-template-columns: 1fr;
  }
  .image-to-3d-canvas-wrap {
    min-height: 340px;
  }
}
@media (max-width: 480px) {
  .image-to-3d-shell {
    padding: 16px;
  }
  .image-to-3d-canvas-wrap {
    height: 55vh;
    min-height: 280px;
  }
}
@media (max-width: 560px) {
  .image-to-3d-library-item {
    align-items: flex-start;
    flex-direction: column;
  }
  .image-to-3d-library-actions {
    flex-wrap: wrap;
  }
}
.face-swap-page {
  background: var(--app-gradient-page, #f3f6f5);
  min-height: 100%;
}

.face-swap-shell {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(20px, 4vw, 46px);
}

.face-swap-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 28px;
  max-width: 1240px;
}

.face-swap-eyebrow {
  color: var(--app-color-teal, #0f6265);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.face-swap-header h1 {
  color: var(--app-color-text, #203236);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.face-swap-subtitle {
  color: #637579;
  margin: 10px 0 0;
}

.face-swap-connection {
  align-items: center;
  color: #765c23;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 9px;
}

.face-swap-connection.is-online {
  color: #19665d;
}

.face-swap-connection-dot {
  background: #c48a29;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.face-swap-connection.is-online .face-swap-connection-dot {
  background: #239276;
}

.face-swap-layout {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
  margin: 0 auto;
  max-width: 1240px;
}

.face-swap-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #dfe7e8;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(28, 58, 62, 0.07);
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.face-swap-controls {
  align-content: start;
  display: grid;
  gap: 18px;
}

.face-swap-mode-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.face-swap-mode-switch oj-button {
  flex: 1 1 150px;
}

.face-swap-upload-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.face-swap-upload {
  align-content: start;
  background: #f6f9f9;
  border: 1px dashed #8daead;
  border-radius: 10px;
  display: grid;
  gap: 9px;
  justify-items: start;
  min-width: 0;
  padding: 14px;
}

.face-swap-upload h2 {
  color: #1c3337;
  font-size: 1rem;
  margin: 0;
}

.face-swap-upload p {
  color: #718184;
  font-size: 0.82rem;
  margin: 0;
  min-height: 2.4em;
}

.face-swap-upload strong {
  color: #1c383a;
  font-size: 0.82rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.face-swap-thumb {
  aspect-ratio: 4/3;
  background: #e8eeee;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

.face-swap-thumb img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.face-swap-thumb video {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.face-swap-options {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.face-swap-options > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.face-swap-options oj-select-single, .face-swap-options oj-input-number {
  width: 100%;
}

.face-swap-hint, .face-swap-result-heading p, .face-swap-library-heading p, .face-swap-library-message {
  color: #718184;
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

.face-swap-submit {
  width: 100%;
}

.face-swap-status {
  color: #286d66;
  font-size: 0.88rem;
  margin: 0;
}

.face-swap-error {
  color: #9b3328;
  font-size: 0.88rem;
  margin: 0;
}

.face-swap-result {
  align-content: start;
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr);
}

.face-swap-result-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.face-swap-result-heading h2, .face-swap-library-heading h2 {
  color: #1c3337;
  font-size: 1.15rem;
  margin: 0 0 5px;
}

.face-swap-result-frame {
  align-items: center;
  aspect-ratio: 1/1;
  background: #e8eeee;
  border: 1px solid #dfe7e8;
  border-radius: 8px;
  color: #758487;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.face-swap-result-frame.is-empty {
  background: #f0f4f4;
}

.face-swap-result-open {
  height: 100%;
  width: 100%;
}

.face-swap-result-open::part(button) {
  align-items: stretch;
  height: 100%;
  justify-content: stretch;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.face-swap-result-frame img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.face-swap-result-video {
  background: #101719;
  display: block;
  height: 100%;
  max-height: 72vh;
  object-fit: contain;
  width: 100%;
}

.face-swap-result-frame span {
  color: #758487;
  font-size: 0.86rem;
  padding: 18px;
  text-align: center;
}

.face-swap-library {
  margin: 26px auto 0;
  max-width: 1240px;
}

.face-swap-library-heading {
  margin-bottom: 14px;
}

.face-swap-library-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.face-swap-library-item {
  background: #fff;
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  min-width: 0;
  overflow: hidden;
}

.face-swap-library-item > a {
  background: #edf1f1;
  display: block;
}

.face-swap-library-item img {
  aspect-ratio: 4/3;
  display: block;
  max-height: 150px;
  object-fit: contain;
  width: 100%;
}

.face-swap-library-item > video {
  aspect-ratio: 4/3;
  background: #101719;
  display: block;
  height: 120px;
  max-height: 120px;
  object-fit: contain;
  width: 100%;
}

.face-swap-library-meta {
  display: grid;
  gap: 5px;
  padding: 10px 12px 0;
}

.face-swap-library-meta strong {
  overflow-wrap: anywhere;
}

.face-swap-library-meta span {
  color: #718184;
  font-size: 0.75rem;
}

.face-swap-library-actions {
  display: grid;
  gap: 4px;
  padding: 4px 8px 8px;
}

.face-swap-library-actions oj-button {
  width: 100%;
}

.face-swap-library-message {
  margin-top: 10px;
}

.face-swap-library-error {
  margin: 8px 0;
}

.saved-asset-delete::part(button) {
  color: #8a3228;
}

@media (max-width: 850px) {
  .face-swap-layout {
    grid-template-columns: 1fr;
  }
  .face-swap-result {
    grid-template-rows: auto minmax(220px, auto);
  }
}
@media (max-width: 560px) {
  .face-swap-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .face-swap-upload-grid, .face-swap-options {
    grid-template-columns: 1fr;
  }
  .face-swap-upload p {
    min-height: 0;
  }
  .face-swap-shell {
    padding: 16px;
  }
}
.wan-video-page {
  background: var(--app-gradient-page, #f3f6f5);
  min-height: 100%;
}

.wan-video-shell {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(20px, 4vw, 46px);
}

.wan-video-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 28px;
  max-width: 1200px;
}

.wan-video-eyebrow {
  color: var(--app-color-teal, #0f6265);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.wan-video-header h1 {
  color: var(--app-color-text, #203236);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.wan-video-subtitle {
  color: #637579;
  margin: 10px 0 0;
  max-width: 720px;
}

.wan-video-connection {
  align-items: center;
  color: #765c23;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 9px;
}

.wan-video-connection.is-online {
  color: #19665d;
}

.wan-video-dot {
  background: #c48a29;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.wan-video-connection.is-online .wan-video-dot {
  background: #239276;
}

.wan-video-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  margin: 0 auto;
  max-width: 1200px;
}

.wan-video-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #dfe7e8;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(28, 58, 62, 0.07);
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.wan-video-controls {
  align-content: start;
  display: grid;
}

.wan-video-mode-switch {
  margin-bottom: 18px;
  width: 100%;
}

.wan-video-upload {
  align-items: center;
  background: #f6f9f9;
  border: 1px dashed #8daead;
  border-radius: 10px;
  color: #647578;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  min-height: 155px;
  overflow: hidden;
  padding: 18px;
  text-align: center;
}

.wan-video-upload oj-file-picker {
  display: block;
}

.wan-video-upload strong {
  color: #1c383a;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.wan-video-upload span {
  font-size: 0.82rem;
}

.wan-video-source-preview {
  display: block;
  height: 190px;
  max-height: 32vh;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.wan-video-prompt-field {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.wan-video-prompt-field oj-label, .wan-video-settings oj-label {
  color: #21393c;
  font-size: 0.92rem;
  font-weight: 750;
}

.wan-video-prompt-field oj-text-area {
  width: 100%;
}

.wan-video-prompt-field p, .wan-video-hint, .wan-video-footnote {
  color: #718184;
  font-size: 0.81rem;
  line-height: 1.5;
  margin: 2px 0 0;
}

.wan-video-settings {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.wan-video-settings > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.wan-video-settings oj-select-single, .wan-video-settings oj-c-select-single {
  width: 100%;
}

.wan-video-advanced-settings {
  border-top: 1px solid #e4e9e7;
  margin: 16px 0;
  padding-top: 12px;
}

.wan-video-advanced-settings summary {
  color: #28565a;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.wan-video-advanced-grid {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wan-video-advanced-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.wan-video-advanced-grid oj-label {
  display: block;
  line-height: 1.35;
  min-height: 1.35em;
}

.wan-video-advanced-grid oj-select-single, .wan-video-advanced-grid oj-input-number {
  width: 100%;
}

.wan-video-hint {
  margin: 16px 0;
}

.wan-video-submit {
  width: 100%;
}

.wan-video-status {
  color: #286d66;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.wan-video-error {
  color: #9b3328;
  font-size: 0.88rem;
  margin: 12px 0 0;
}

.wan-video-preview-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.wan-video-preview-heading h2, .wan-video-library-heading h2 {
  color: #1c3337;
  font-size: 1.05rem;
  margin: 0;
}

.wan-video-preview-heading p {
  color: #718184;
  font-size: 0.8rem;
  margin: 5px 0 0;
  overflow-wrap: anywhere;
}

.wan-video-player {
  align-items: center;
  aspect-ratio: 16/9;
  background: #101819;
  border-radius: 9px;
  color: #b6c1c1;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.wan-video-player.is-empty {
  background: #eaf0f0;
  color: #718184;
}

.wan-video-player video {
  display: block;
  height: 100%;
  max-height: min(64vh, 720px);
  width: 100%;
}

.wan-video-player span {
  padding: 20px;
  text-align: center;
}

.wan-video-footnote {
  margin-top: 14px;
}

.wan-video-library {
  margin: 26px auto 0;
  max-width: 1200px;
}

.wan-video-library-heading {
  margin-bottom: 14px;
}

.wan-video-library-heading p, .wan-video-library-message {
  color: #718184;
  font-size: 0.85rem;
  margin: 6px 0 0;
}

.wan-video-list {
  background: transparent;
  border: 0;
}

.wan-video-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wan-video-library-item {
  background: #fff;
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 300px) minmax(0, 1fr) auto;
  margin: 0 0 12px;
  overflow: hidden;
  padding: 12px;
}

.wan-video-library-item video {
  align-self: center;
  background: #101819;
  border-radius: 7px;
  display: block;
  max-width: 100%;
  width: 100%;
}

.wan-video-library-no-preview {
  align-self: center;
  background: #eaf0f0;
  border-radius: 7px;
  color: #718184;
  display: block;
  font-size: 0.82rem;
  padding: 24px 16px;
  text-align: center;
}

.wan-video-library-meta {
  align-content: start;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wan-video-library-meta strong {
  overflow-wrap: anywhere;
}

.wan-video-library-meta span {
  color: #718184;
  font-size: 0.75rem;
}

.wan-video-library-meta p {
  color: #536568;
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  overflow-wrap: anywhere;
}

.wan-video-library-actions {
  align-content: start;
  display: grid;
  gap: 5px;
  min-width: 130px;
}

.wan-video-library-actions oj-button {
  width: 100%;
}

.saved-asset-delete::part(button) {
  color: #8a3228;
}

@media (max-width: 850px) {
  .wan-video-grid {
    grid-template-columns: 1fr;
  }
  .wan-video-library-item {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .wan-video-library-item video {
    grid-column: 1/-1;
    max-width: 640px;
  }
  .wan-video-library-actions {
    grid-column: 1/-1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .wan-video-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .wan-video-shell {
    padding: 16px;
  }
  .wan-video-settings {
    grid-template-columns: 1fr;
  }
  .wan-video-advanced-grid {
    grid-template-columns: 1fr;
  }
  .wan-video-preview-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .wan-video-library-item {
    grid-template-columns: 1fr;
  }
  .wan-video-library-item video, .wan-video-library-actions {
    grid-column: auto;
  }
  .wan-video-library-actions {
    grid-template-columns: 1fr;
  }
}
.music-stems-page {
  background: var(--app-gradient-page, #f3f6f5);
  min-height: 100%;
}

.music-stems-shell {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(20px, 4vw, 46px);
}

.music-stems-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 auto 28px;
  max-width: 1200px;
}

.music-stems-eyebrow {
  color: var(--app-color-teal, #0f6265);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.music-stems-header h1 {
  color: var(--app-color-text, #203236);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  margin: 0;
}

.music-stems-subtitle {
  color: #637579;
  margin: 10px 0 0;
  max-width: 720px;
}

.music-stems-connection {
  align-items: center;
  color: #765c23;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 9px;
}

.music-stems-connection.is-online {
  color: #19665d;
}

.music-stems-dot {
  background: #c48a29;
  border-radius: 50%;
  height: 9px;
  width: 9px;
}

.music-stems-connection.is-online .music-stems-dot {
  background: #239276;
}

.music-stems-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  margin: 0 auto;
  max-width: 1200px;
}

.music-stems-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid #dfe7e8;
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(28, 58, 62, 0.07);
  min-width: 0;
  padding: clamp(18px, 2.5vw, 28px);
}

.music-generation-card {
  margin: 0 auto 20px;
  max-width: 1200px;
}

.music-generation-form {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(130px, 0.5fr) auto;
}

.music-generation-form > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.music-generation-form oj-text-area, .music-generation-form oj-input-number {
  width: 100%;
}

.music-generation-form oj-label {
  color: #21393c;
  font-size: 0.9rem;
  font-weight: 750;
}

.music-generation-submit oj-button {
  width: 100%;
}

.music-generation-card .music-stems-hint {
  margin-bottom: 0;
}

.music-stems-controls {
  align-content: start;
  display: grid;
}

.music-stems-upload {
  align-items: center;
  background: #f6f9f9;
  border: 1px dashed #8daead;
  border-radius: 10px;
  color: #647578;
  display: flex;
  flex-direction: column;
  gap: 9px;
  justify-content: center;
  min-height: 165px;
  overflow: hidden;
  padding: 18px;
  text-align: center;
}

.music-stems-upload oj-c-file-picker {
  display: block;
}

.music-stems-upload strong {
  color: #1c383a;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.music-stems-upload span, .music-stems-settings p, .music-stems-hint, .music-stems-subtitle, .music-stems-section-heading p, .music-stems-library-message {
  font-size: 0.84rem;
}

.music-stems-settings {
  border-top: 1px solid #e4e9e7;
  margin: 20px 0 12px;
  padding-top: 12px;
}

.music-stems-settings summary {
  color: #28565a;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.music-stems-settings-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.music-stems-settings-grid > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.music-stems-settings-grid oj-input-number {
  width: 100%;
}

.music-stems-settings-grid oj-label {
  color: #21393c;
  font-size: 0.9rem;
  font-weight: 750;
}

.music-stems-settings p, .music-stems-hint, .music-stems-section-heading p, .music-stems-library-message {
  color: #718184;
  line-height: 1.5;
  margin: 2px 0 0;
}

.music-stems-hint {
  margin: 10px 0 16px;
}

.music-stems-submit {
  width: 100%;
}

.music-stems-status {
  color: #286d66;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 12px 0 0;
}

.music-stems-section-heading {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.music-stems-section-heading h2 {
  color: #1c3337;
  font-size: 1.05rem;
  margin: 0;
}

.music-stems-result-grid {
  display: grid;
  gap: 12px;
}

.music-stems-result-item {
  background: #f8faf9;
  border: 1px solid #e1e9e7;
  border-radius: 9px;
  display: grid;
  gap: 10px;
  padding: 13px;
}

.music-stems-result-item h3 {
  color: #1c383a;
  font-size: 0.95rem;
  margin: 0;
}

.music-stems-result-item p {
  color: #718184;
  font-size: 0.76rem;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.music-stem-audio {
  display: block;
  max-width: 100%;
  width: 100%;
}

.music-stems-empty {
  align-items: center;
  background: #eaf0f0;
  border-radius: 9px;
  color: #718184;
  display: flex;
  justify-content: center;
  min-height: 235px;
  padding: 20px;
  text-align: center;
}

.music-stems-library {
  margin: 28px auto 0;
  max-width: 1200px;
}

.music-stems-library > .music-stems-section-heading {
  margin-bottom: 12px;
}

.music-stems-list {
  background: transparent;
  border: 0;
}

.music-stems-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.music-stems-library-item {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe7e8;
  border-radius: 10px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr) auto;
  margin: 0 0 10px;
  padding: 12px;
}

.music-stems-library-meta {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.music-stems-library-meta strong {
  overflow-wrap: anywhere;
}

.music-stems-library-meta span, .music-stems-no-preview {
  color: #718184;
  font-size: 0.77rem;
}

.music-stems-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.music-stem-delete::part(button) {
  color: #8a3228;
}

.music-stems-no-preview {
  background: #eaf0f0;
  border-radius: 7px;
  padding: 12px;
}

@media (max-width: 900px) {
  .music-stems-grid {
    grid-template-columns: 1fr;
  }
  .music-stems-library-item {
    align-items: stretch;
    grid-template-columns: 1fr;
  }
  .music-stems-actions {
    justify-content: flex-start;
  }
  .music-generation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .music-stems-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .music-stems-shell {
    padding: 16px;
  }
  .music-stems-settings-grid {
    grid-template-columns: 1fr;
  }
  .music-generation-form {
    grid-template-columns: 1fr;
  }
}
.audio-studio-page {
  background: #0c1723;
  color: #f2f6f8;
  min-height: 100%;
}

.audio-studio-shell {
  margin: 0 auto;
  max-width: 1600px;
  padding: clamp(8px, 1vw, 14px);
}

.audio-studio-header {
  align-items: flex-end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 10px;
}

.audio-studio-header h1 {
  color: #f2f6f8;
  font-size: clamp(1.8rem, 3.3vw, 2.6rem);
  line-height: 1.08;
  margin: 0;
}

.audio-studio-header > div > p:last-child {
  color: #c2cfda;
  margin: 9px 0 0;
  max-width: 780px;
}

.audio-studio-eyebrow {
  color: #d88793;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin: 0 0 7px;
  text-transform: uppercase;
}

.audio-studio-badge {
  background: #23384b;
  border: 1px solid #50677a;
  border-radius: 999px;
  color: #f2f6f8;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
}

.music-studio-models {
  margin: 0;
}

.music-studio-models .music-stems-page {
  background: transparent;
  min-height: 0;
}

.music-studio-models .music-stems-header {
  align-items: center;
  margin: 0 0 8px;
  max-width: none;
}

.music-studio-models .music-stems-header h2, .music-studio-models .music-stems-section-heading h3 {
  color: #f2f6f8;
}

.music-studio-models .music-stems-eyebrow {
  color: #d88793;
  margin-bottom: 4px;
}

.music-studio-models .music-stems-subtitle, .music-studio-models .music-stems-section-heading p,
.music-studio-models .music-stems-hint, .music-studio-models .music-stems-upload span,
.music-studio-models .music-stems-settings p {
  color: #b8c8d4;
}

.music-studio-models .music-stems-grid {
  gap: 0;
  margin: 0;
  max-width: none;
}

.music-studio-models .music-stems-card {
  background: #172b3d;
  border: 1px solid #3b5267;
  border-radius: 0;
  box-shadow: none;
  padding: 12px;
}

.music-studio-models .music-generation-card {
  margin: 0;
  max-width: none;
}

.music-studio-models .music-generation-form oj-label, .music-studio-models .music-stems-settings-grid oj-label {
  color: #e1ebf0;
}

.music-studio-models .music-stems-upload {
  background: #21364a;
  border-color: #60778b;
  color: #f2f6f8;
  min-height: 100px;
  padding: 10px;
}

.music-studio-models .music-stems-upload strong {
  color: #f2f6f8;
}

.music-studio-models .music-stems-settings {
  border-color: #344b60;
  margin: 10px 0 8px;
  padding-top: 8px;
}

.music-studio-models .music-stems-settings summary {
  color: #dbe9ed;
  margin-bottom: 8px;
}

.music-studio-models .music-stems-result-item {
  background: #21364a;
  border-color: #3b5267;
  border-radius: 4px;
}

.music-studio-models .music-stems-result-item strong {
  color: #eff5f7;
}

.music-studio-models .music-stems-result-item p {
  color: #b8c8d4;
}

.music-studio-models .music-stems-section-heading {
  margin-bottom: 8px;
}

.music-studio-models .music-generation-submit {
  align-items: end;
}

.music-studio-models .music-generation-submit oj-button {
  width: auto;
}

.audio-studio-card {
  background: #172b3d;
  border: 1px solid #3b5267;
  border-radius: 0;
  box-shadow: none;
  color: #f2f6f8;
  min-width: 0;
  padding: clamp(12px, 1.2vw, 16px);
}

.audio-studio-source {
  border-top: 0;
  margin-bottom: 0;
}

.audio-studio-section-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 15px;
}

.audio-studio-section-heading h2 {
  color: #f2f6f8;
  font-size: 1.12rem;
  margin: 0;
}

.audio-studio-section-heading p {
  color: #b8c8d4;
  font-size: 0.86rem;
  margin: 5px 0 0;
}

.audio-studio-source-grid {
  align-items: end;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1fr);
}

.audio-studio-local-source, .audio-studio-saved-source {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.audio-studio-local-source > p {
  color: #b8c8d4;
  font-size: 0.8rem;
  margin: 0;
}

.audio-studio-local-selection {
  color: #b9e1e4 !important;
  font-weight: 700;
  min-height: 1.2em;
  overflow-wrap: anywhere;
}

.audio-studio-saved-source {
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.audio-studio-group-select {
  grid-column: 1;
}

.audio-studio-layout {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.audio-studio-mixer, .audio-studio-editor {
  min-width: 0;
}

.audio-studio-mixer {
  background: #172b3d;
  border-top: 0;
  color: #f2f6f8;
}

.audio-studio-mixer .audio-studio-section-heading h2 {
  color: #f2f6f8;
}

.audio-studio-mixer .audio-studio-section-heading p {
  color: #b8c8d4;
}

.audio-studio-mixer-actions, .audio-studio-editor-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audio-studio-timeline {
  background: #101b29;
  border: 1px solid #314254;
  border-radius: 9px;
  overflow-x: auto;
}

.audio-studio-timeline-ruler, .audio-studio-track-row {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(630px, 1fr);
  min-width: 840px;
}

.audio-studio-timeline-ruler {
  align-items: stretch;
  background: #182738;
  border-bottom: 1px solid #344b60;
  color: #e9eef3;
  min-height: 44px;
}

.audio-studio-timeline-label {
  align-items: center;
  border-right: 1px solid #344b60;
  color: #e9eef3;
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0 14px;
  text-transform: uppercase;
}

.audio-studio-timeline-scale {
  align-items: end;
  display: grid;
  grid-template-columns: repeat(21, minmax(32px, 1fr));
  padding: 0 0 7px;
}

.audio-studio-timeline-scale span {
  border-left: 1px solid #425970;
  color: #bbc9d5;
  font-size: 0.69rem;
  padding-left: 5px;
  white-space: nowrap;
}

.audio-studio-track-list {
  background: transparent;
  display: block;
}

.audio-studio-track-row {
  align-items: stretch;
  border-bottom: 1px solid #344356;
  color: #f8f4f2;
  min-height: 112px;
}

.audio-studio-track-panel {
  align-content: center;
  background: #1b2c3e;
  border-right: 1px solid #344b60;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}

.audio-studio-track-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.audio-studio-track-title strong {
  color: #f2f6f8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-studio-track-title span {
  color: #b5c6d2;
  font-size: 0.73rem;
}

.audio-studio-track-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: flex-start;
}

.audio-studio-track-controls oj-label {
  color: #d8e4e9;
  font-size: 0.72rem;
  font-weight: 700;
}

.audio-studio-level-slider {
  max-width: 130px;
  min-width: 90px;
  width: 100%;
}

.audio-studio-track-zoom {
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  min-width: 0;
}

.audio-studio-track-zoom oj-label {
  color: #d8e4e9;
  font-size: 0.68rem;
  font-weight: 700;
}

.audio-studio-track-zoom oj-slider {
  max-width: 190px;
  min-width: 110px;
  width: 100%;
}

.audio-studio-stem-button svg {
  height: 1.15rem;
  width: 1.15rem;
}

.audio-studio-timeline-stem-status {
  color: #a9d7cb;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 6px 2px 0;
}

.audio-studio-stems-popover {
  color: #26383a;
  display: grid;
  gap: 10px;
  max-width: min(390px, 100vw - 32px);
  padding: 4px;
  width: 350px;
}

.audio-studio-stems-popover h3 {
  font-size: 1rem;
  margin: 0;
}

.audio-studio-stems-popover > p {
  color: #59686a;
  font-size: 0.82rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.audio-studio-stems-popover-settings {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audio-studio-stems-popover-settings > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.audio-studio-stems-popover-hint {
  color: #718184 !important;
  font-size: 0.76rem !important;
}

.audio-studio-zoom-popover {
  color: #20383a;
  display: grid;
  gap: 13px;
  max-width: min(360px, 100vw - 32px);
  padding: 6px;
  width: 320px;
}

.audio-studio-zoom-popover h3 {
  color: #20383a;
  font-size: 1rem;
  margin: 0;
}

.audio-studio-zoom-control {
  display: grid;
  gap: 5px;
}

.audio-studio-zoom-control oj-label {
  color: #334e50;
  font-size: 0.82rem;
  font-weight: 700;
}

.audio-studio-zoom-control p {
  color: #687a7a;
  font-size: 0.75rem;
  margin: 0;
}

.audio-studio-track-timeline {
  align-items: center;
  background-color: #101b29;
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(5% - 1px), #2d4054 calc(5% - 1px), #2d4054 5%);
  display: flex;
  min-width: 0;
  overflow: hidden;
  padding: 17px 0;
}

.audio-studio-track-clip {
  align-items: center;
  background: linear-gradient(180deg, #1c4259 0%, #173246 100%);
  border: 1px solid #43738a;
  border-left: 3px solid #a83a4c;
  border-radius: 4px;
  display: flex;
  height: 76px;
  min-width: 35px;
  overflow: hidden;
  position: relative;
}

.audio-studio-clip-waveform {
  height: 100%;
  inset: 0;
  opacity: 0.92;
  position: absolute;
  width: 100%;
}

.audio-studio-clip-name {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px #071521;
  white-space: nowrap;
}

.audio-studio-empty {
  color: #b8c8d4;
  font-size: 0.9rem;
  padding: 18px 14px;
}

.audio-studio-mixer-transport {
  align-items: center;
  border-top: 1px solid #344b60;
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
}

.audio-studio-transport-count {
  color: #b8c8d4;
  font-size: 0.78rem;
  font-weight: 700;
}

.audio-studio-status {
  color: #b8c8d4;
  font-size: 0.86rem;
  margin: 12px 0 0;
}

.audio-studio-track-editor {
  background: #172b3d;
  border: 1px solid #52697d;
  border-top: 2px solid #a83a4c;
  color: #f2f6f8;
  grid-column: 1/-1;
  min-width: 0;
  padding: 16px;
}

.audio-studio-track-editor .audio-studio-section-heading h3 {
  color: #f2f6f8;
  font-size: 1rem;
  margin: 0;
}

.audio-studio-track-editor .audio-studio-section-heading p, .audio-studio-track-editor .audio-studio-editor-controls {
  color: #c2cfda;
}

.audio-studio-waveform {
  background: #0e1925;
  border: 1px solid #3b5268;
  border-radius: 9px;
  min-height: 142px;
  overflow: hidden;
  padding: 8px;
}

.audio-studio-editor-controls {
  align-items: center;
  border-bottom: 1px solid #3b5267;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.86rem;
  margin-top: 8px;
  padding-bottom: 10px;
}

.audio-studio-export {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(130px, 0.5fr) repeat(2, minmax(110px, 0.4fr)) auto minmax(120px, 1fr);
  margin-top: 10px;
}

.audio-studio-fade-control {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.audio-studio-fade-control oj-label, .audio-studio-track-editor oj-label {
  color: #e1ebf0;
  font-size: 0.76rem;
  font-weight: 700;
}

.audio-studio-format {
  min-width: 130px;
}

.audio-studio-export > span {
  color: #c2cfda;
  font-size: 0.84rem;
}

.audio-studio-progress {
  grid-column: 1/-1;
}

.audio-studio-download {
  color: #a9d7cb;
  font-weight: 700;
  grid-column: 1/-1;
  overflow-wrap: anywhere;
}

/* Keep each workspace area visually connected while separating its functions. */
.audio-studio-shell > .music-studio-models,
.audio-studio-shell > .audio-studio-source,
.audio-studio-shell > .audio-studio-layout {
  border-left: 1px solid #3b5267;
  border-right: 1px solid #3b5267;
}

.audio-studio-shell > .music-studio-models {
  border-top: 1px solid #3b5267;
  border-radius: 9px 9px 0 0;
}

.audio-studio-shell > .audio-studio-layout {
  border-bottom: 1px solid #3b5267;
  border-radius: 0 0 9px 9px;
}

.music-studio-models .music-generation-card {
  border-bottom: 0;
}

.music-studio-models .music-stems-controls {
  border-right: 0;
}

.music-studio-models .music-stems-results {
  border-left: 0;
}

.audio-studio-page oj-input-number,
.audio-studio-page oj-c-input-number,
.audio-studio-page oj-c-select-single,
.audio-studio-page oj-text-area,
.audio-studio-page oj-slider,
.audio-studio-page oj-c-file-picker {
  --oj-core-text-color-primary: #14191e;
  --oj-core-text-color-secondary: #39434d;
  --oj-core-bg-color-content: #d6d9dd;
  --oj-core-bg-color-hover: #c8cdd2;
  --oj-core-bg-color-active: #b8bec5;
  --oj-core-bg-color-selected: #c4c9ce;
  --oj-core-border-color-selected: #68737e;
  --oj-core-border-color-enabled: #737d87;
  --oj-core-neutral-contrast: #14191e;
  --oj-palette-brand-rgb-100: 214, 217, 221;
  --oj-palette-brand-rgb-110: 194, 199, 205;
  --oj-palette-brand-rgb-120: 174, 181, 188;
  --oj-core-brand-contrast: #14191e;
}

.audio-studio-page oj-button:not([chroming=callToAction]) {
  --oj-button-outlined-chrome-border-color: #8b949d;
  --oj-button-outlined-chrome-bg-color: #d6d9dd;
  --oj-button-outlined-chrome-bg-color-hover: #c8cdd2;
  --oj-button-outlined-chrome-bg-color-active: #b8bec5;
  --oj-button-outlined-chrome-bg-color-disabled: #d6d9dd;
  --oj-button-outlined-chrome-text-color: #14191e;
  --oj-button-outlined-chrome-text-color-hover: #14191e;
  --oj-button-outlined-chrome-text-color-active: #14191e;
  --oj-button-outlined-chrome-text-color-disabled: #42484e;
  --oj-button-borderless-chrome-bg-color: #d6d9dd;
  --oj-button-borderless-chrome-bg-color-hover: #c8cdd2;
  --oj-button-borderless-chrome-bg-color-active: #b8bec5;
  --oj-button-borderless-chrome-text-color: #14191e;
  --oj-button-borderless-chrome-text-color-hover: #14191e;
  --oj-button-borderless-chrome-text-color-active: #14191e;
  --oj-button-borderless-chrome-text-color-disabled: #42484e;
}

.audio-studio-page oj-c-button:not([chroming=callToAction]) {
  --oj-c-base-button-variants-outlined-base-background-color: #d6d9dd;
  --oj-c-base-button-variants-outlined-base-border-color: #8b949d;
  --oj-c-base-button-variants-outlined-base-color: #14191e;
  --oj-c-base-button-variants-outlined-disabled-background-color: #d6d9dd;
  --oj-c-base-button-variants-outlined-disabled-border-color: #b6bcc2;
  --oj-c-base-button-variants-outlined-disabled-color: #42484e;
  --oj-c-base-button-variants-outlined-hover-background-overlay-color: #c8cdd2;
  --oj-c-base-button-variants-outlined-active-background-overlay-color: #b8bec5;
  --oj-c-base-button-variants-borderless-base-background-color: #d6d9dd;
  --oj-c-base-button-variants-borderless-base-border-color: transparent;
  --oj-c-base-button-variants-borderless-base-color: #14191e;
  --oj-c-base-button-variants-borderless-disabled-background-color: #d6d9dd;
  --oj-c-base-button-variants-borderless-disabled-border-color: transparent;
  --oj-c-base-button-variants-borderless-disabled-color: #42484e;
  --oj-c-base-button-variants-borderless-hover-background-overlay-color: #c8cdd2;
  --oj-c-base-button-variants-borderless-active-background-overlay-color: #b8bec5;
}

.audio-studio-page oj-button, .audio-studio-page oj-c-button {
  border-radius: 5px;
}

.audio-studio-page oj-slider {
  --oj-slider-thumb-bg-color: #d6d9dd;
  --oj-slider-thumb-bg-color-hover: #c8cdd2;
  --oj-slider-thumb-bg-color-active: #b8bec5;
  --oj-slider-value-bg-color: #aeb5bc;
}

@media (max-width: 660px) {
  .audio-studio-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .audio-studio-source-grid, .audio-studio-saved-source, .audio-studio-export {
    grid-template-columns: 1fr;
  }
  .audio-studio-track-controls {
    justify-content: flex-start;
  }
  .audio-studio-mixer-transport {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .audio-studio-export > *, .audio-studio-progress, .audio-studio-download {
    grid-column: 1;
  }
}
.generated-media-drawer {
  box-sizing: border-box;
  width: min(38rem, 100vw);
  max-width: 100%;
  min-height: 100%;
  padding: 20px;
  background: var(--app-color-surface, #fff);
  color: var(--app-color-text);
}

.generated-media-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.generated-media-drawer-header h2 {
  font-size: 1.3rem;
  margin: 0;
}

.generated-media-row {
  display: grid;
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  width: 100%;
  box-sizing: border-box;
}

.generated-media-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.generated-media-meta small {
  display: block;
  color: var(--app-color-muted);
  margin-top: 4px;
}

.generated-media-meta p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.85rem;
}

.generated-media-preview {
  border-radius: 8px;
  background: #edf1f1;
  min-width: 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.75rem;
  text-align: center;
}

.generated-media-preview img, .generated-media-preview video {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  display: block;
}

.generated-media-preview audio {
  width: 100%;
  min-width: 0;
}

.generated-media-row generated-media-preview {
  min-width: 0;
}

@media (max-width: 480px) {
  .generated-media-drawer {
    padding: 16px;
  }
  .generated-media-row {
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
    gap: 10px;
  }
}
.live-conversation-page {
  padding: clamp(12px, 3vw, 32px);
  box-sizing: border-box;
  color: var(--app-color-text);
}

.live-conversation-heading {
  margin-bottom: 24px;
  max-width: 800px;
}

.live-conversation-eyebrow {
  color: var(--app-color-teal);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
}

.live-conversation-controls, .live-conversation-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid var(--app-color-border);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 24px);
  min-width: 0;
  box-sizing: border-box;
}

.live-conversation-controls {
  margin-bottom: 22px;
}

.live-conversation-buttons, .live-conversation-notes-heading {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.live-conversation-notes-heading {
  justify-content: space-between;
}

.live-conversation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 22px;
}

.live-conversation-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.live-conversation-card h3 {
  margin-top: 24px;
}

.live-conversation-hint {
  color: #5a6e73;
  font-size: 0.88rem;
}

.live-conversation-status {
  font-weight: 700;
}

.live-conversation-status.is-listening {
  color: #22714f;
}

.live-conversation-status.is-listening::before {
  content: "";
  display: inline-block;
  background: currentColor;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 8px;
}

.live-conversation-error {
  color: #9e2138;
}

.live-conversation-segment {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-block: 10px;
  min-width: 0;
}

.live-conversation-segment p {
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}

.live-conversation-time {
  font-variant-numeric: tabular-nums;
  color: #526b73;
  flex: 0 0 46px;
}

.live-conversation-level {
  max-width: 380px;
}

@container (max-width: 850px) {
  .live-conversation-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .live-conversation-buttons {
    flex-direction: column;
    align-items: stretch;
  }
}
.audio-fractal-page {
  padding: clamp(12px, 3vw, 32px);
  box-sizing: border-box;
  color: var(--app-color-text);
}

.audio-fractal-heading {
  margin-bottom: 24px;
  max-width: 900px;
}

.audio-fractal-eyebrow {
  color: var(--app-color-teal);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}

.audio-fractal-connection {
  color: #23674c;
  font-weight: 700;
}

.audio-fractal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 22px;
}

.audio-fractal-card {
  background: var(--app-gradient-surface, #fff);
  border: 1px solid var(--app-color-border);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 24px);
  min-width: 0;
  box-sizing: border-box;
}

.audio-fractal-card h2, .audio-fractal-library h2 {
  font-size: 1.3rem;
}

.audio-fractal-filename {
  display: block;
  margin-top: 12px;
  overflow-wrap: anywhere;
}

.audio-fractal-source, .audio-fractal-preview video {
  display: block;
  width: 100%;
  max-width: 100%;
}

.audio-fractal-preview video {
  background: #080713;
  border-radius: 10px;
  aspect-ratio: 16/9;
}

.audio-fractal-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.audio-fractal-settings > * {
  min-width: 0;
  max-width: 100%;
}

.audio-fractal-hint {
  font-size: 0.88rem;
  color: #526b73;
}

.audio-fractal-actions, .audio-fractal-library-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.audio-fractal-error {
  color: #9e2138;
}

.audio-fractal-live {
  margin-bottom: 24px;
}

.audio-fractal-live-inputs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.audio-fractal-live-inputs > oj-c-select-single {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

.audio-fractal-live-inputs > oj-c-input-number {
  flex: 0 1 210px;
  min-width: 0;
  max-width: 100%;
}

.audio-fractal-live canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 10px;
  background: #070610;
}

.audio-fractal-library {
  margin-top: 26px;
}

.audio-fractal-library-heading {
  justify-content: space-between;
}

.audio-fractal-movie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 0;
  min-width: 0;
}

.audio-fractal-movie > div:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

@container (max-width: 900px) {
  .audio-fractal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 500px) {
  .audio-fractal-settings {
    grid-template-columns: minmax(0, 1fr);
  }
  .audio-fractal-movie {
    align-items: flex-start;
    flex-direction: column;
  }
}
.app-file-dropzone {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.home-module-page {
  box-sizing: border-box;
}

.home-module-page :is(.image-edit-shell, .wan-video-shell, .image-to-3d-shell, .face-swap-shell, .music-stems-shell, .image-edit-card, .wan-video-card, .image-to-3d-card, .face-swap-card, .music-stems-card) {
  box-sizing: border-box;
}

.home-module-page {
  min-width: 0;
  max-width: 100%;
}
.home-module-page :is(oj-input-text, oj-text-area, oj-input-number, oj-select-single, oj-c-select-single, oj-c-input-text, oj-c-input-number, oj-c-text-area, generated-media-picker) {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 600px) {
  .home-module-page :is(.image-edit-shell, .wan-video-shell, .image-to-3d-shell, .face-swap-shell, .music-stems-shell) {
    padding: 16px 0;
    width: 100%;
  }
  .home-module-page :is(.image-edit-grid, .wan-video-grid, .image-to-3d-grid, .face-swap-grid, .music-stems-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-module-page :is(.image-edit-card, .wan-video-card, .image-to-3d-card, .face-swap-card, .music-stems-card) {
    min-width: 0;
    width: 100%;
    padding: 16px;
  }
  .home-module-page :is(.image-edit-card, .wan-video-card, .image-to-3d-card, .face-swap-card, .music-stems-card) > * {
    min-width: 0;
    max-width: 100%;
  }
}
@container (max-width: 900px) {
  .home-module-page :is(.image-edit-grid, .wan-video-grid, .image-to-3d-grid, .face-swap-layout, .music-stems-grid, .audio-studio-source-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container (max-width: 560px) {
  .home-module-page :is(.wan-video-settings, .wan-video-advanced-grid, .image-edit-advanced-grid, .image-edit-previews, .image-to-3d-advanced-grid, .face-swap-upload-grid, .face-swap-options, .music-generation-form, .music-stems-settings-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-module-page :is(.image-edit-header, .wan-video-header, .image-to-3d-header, .face-swap-header, .music-stems-header, .music-stems-section-heading) {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-module-page :is(.image-edit-preview-heading, .image-edit-library-heading) {
    flex-wrap: wrap;
    gap: 12px;
  }
}
:root {
  --app-color-teal: #245362;
  --app-color-teal-strong: #183f4b;
  --app-color-teal-soft: #e5eef0;
  --app-color-garnet: #641f2e;
  --app-color-garnet-hover: #853747;
  --app-color-page: #f4f1e8;
  --app-color-surface: #ffffff;
  --app-color-text: #203236;
  --app-color-muted: #65777a;
  --app-color-border: #d4e1de;
  --app-gradient-page: #f4f1e8;
  --app-gradient-surface: #fffefa;
  --app-gradient-garnet: linear-gradient(180deg, #55121f 0%, #3c1018 58%, #220d11 100%);
  --app-gradient-logo-tile: linear-gradient(145deg, #e8f0ed 0%, #fff7f2 100%);
  --oj-button-call-to-action-chrome-bg-color: var(--app-color-teal);
  --oj-button-call-to-action-chrome-bg-color-active: #063d40;
  --oj-button-call-to-action-chrome-bg-color-hover: var(--app-color-teal-strong);
  --oj-button-call-to-action-chrome-border-color: transparent;
  --oj-button-call-to-action-chrome-text-color: #fff;
  --oj-button-call-to-action-chrome-text-color-hover: #fff;
  --oj-button-height: 44px;
  --oj-button-border-radius: 10px;
  --oj-button-outlined-chrome-bg-color: #f4e8e9;
  --oj-button-outlined-chrome-bg-color-hover: #ecd7da;
  --oj-button-outlined-chrome-bg-color-active: #dfc0c5;
  --oj-button-outlined-chrome-border-color: #cfadb3;
  --oj-button-outlined-chrome-border-color-hover: var(--app-color-garnet-hover);
  --oj-button-outlined-chrome-border-color-active: var(--app-color-garnet);
  --oj-button-outlined-chrome-text-color: var(--app-color-garnet);
  --oj-button-outlined-chrome-text-color-hover: var(--app-color-garnet);
  --oj-button-outlined-chrome-text-color-active: var(--app-color-garnet);
  --oj-tab-bar-item-label-color: #65777a;
  --oj-tab-bar-item-label-color-hover: var(--app-color-teal-strong);
  --oj-tab-bar-item-border-color-active: var(--app-color-teal);
  --oj-tab-bar-item-label-color-selected: var(--app-color-garnet);
  --oj-tab-bar-item-border-color-selected: var(--app-color-teal);
}

oj-buttonset-one {
  --oj-button-outlined-chrome-bg-color-selected: var(--app-color-garnet);
  --oj-button-outlined-chrome-border-color-selected: var(--app-color-garnet);
  --oj-button-outlined-chrome-text-color-selected: #fff;
  --oj-button-outlined-chrome-bg-color-selected-hover: var(--app-color-garnet-hover);
  --oj-button-outlined-chrome-border-color-selected-hover: var(--app-color-garnet-hover);
  --oj-button-outlined-chrome-text-color-selected-hover: #fff;
  --oj-buttonset-outlined-chrome-internal-border-color: #b9c9ca;
  --oj-buttonset-outlined-chrome-internal-border-color-selected: var(--app-color-garnet);
}

oj-tab-bar {
  --oj-tab-bar-item-label-color: #65777a;
  --oj-tab-bar-item-label-color-hover: var(--app-color-teal-strong);
  --oj-tab-bar-item-border-color-active: var(--app-color-teal);
  --oj-tab-bar-item-label-color-selected: var(--app-color-garnet);
  --oj-tab-bar-item-border-color-selected: var(--app-color-teal);
}

html:not([dir=rtl]) .demo-oracle-icon {
  padding-right: 4px;
}

.demo-appheader-avatar {
  width: 24px;
  height: 24px;
}

.demo-appheader-avatar:before {
  content: url("images/avatar_24px.png");
}

html,
body,
#globalBody {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--app-gradient-page);
  background-attachment: fixed;
  color: var(--app-color-text);
  font-family: "Segoe UI", Arial, sans-serif;
}

.login-shell {
  align-items: center;
  background: var(--app-gradient-page);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  background: var(--app-gradient-surface);
  border: 1px solid var(--app-color-border);
  border-radius: 20px;
  box-shadow: 0 22px 58px rgba(24, 67, 66, 0.13), 0 4px 14px rgba(91, 23, 39, 0.045);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
  max-width: 430px;
  padding: 42px;
  width: 100%;
}

.signed-in-card {
  text-align: center;
}

.brand {
  font-weight: 300;
}

.brand-mark {
  align-items: center;
  background: transparent url("../images/BDLogo.png") center/contain no-repeat;
  color: transparent;
  display: flex;
  font-size: 22px;
  font-weight: 600;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  text-indent: -9999px;
  width: 44px;
}

.brand-wordmark {
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.signed-in-card .brand-mark {
  margin: 0 auto;
}

.password-reset-message {
  color: #2f6b42;
  line-height: 1.45;
  margin: 16px 0 0;
}

.turnstile-area {
  margin-top: 20px;
  min-height: 70px;
}

.turnstile-message {
  color: #59667d;
  font-size: 13px;
  line-height: 1.4;
  margin: 8px 0 0;
}

.eyebrow {
  color: var(--app-color-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  margin: 20px 0 8px;
  text-transform: uppercase;
}

.login-card h1 {
  font-size: 29px;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
}

.login-intro, .account-detail {
  color: #59667d;
  line-height: 1.55;
  margin: 12px 0 28px;
}

.account-label {
  font-weight: 600;
  margin: 14px 0 0;
}

.field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 7px;
}

.login-input {
  box-sizing: border-box;
  font: inherit;
  min-height: 44px;
  padding: 10px 12px;
  width: 100%;
}

.google-button, .primary-button, .secondary-button {
  display: block;
  margin-top: 12px;
  width: 100%;
}

.primary-button {
  margin-top: 24px;
}

.native-submit {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.divider {
  align-items: center;
  color: #7d8799;
  display: flex;
  font-size: 13px;
  gap: 12px;
  margin: 25px 0 4px;
}

.divider::before, .divider::after {
  background: #dfe4ed;
  content: "";
  flex: 1;
  height: 1px;
}

.guest-area {
  border-top: 1px solid #e3e7ee;
  color: #66738a;
  font-size: 14px;
  margin-top: 26px;
  padding-top: 18px;
  text-align: center;
}

.guest-area p {
  margin: 0 0 3px;
}

.login-error {
  background: #fff0f0;
  border-radius: 7px;
  color: #b51d1d;
  font-size: 14px;
  margin: 20px 0 0;
  padding: 10px 12px;
}

.admin-shell {
  background: var(--app-gradient-page);
  box-sizing: border-box;
  min-height: 100vh;
  padding: 24px 0;
}

.admin-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto 25px;
  max-width: none;
  padding-inline: 0;
}

.admin-header .eyebrow {
  margin: 0 0 5px;
}

.admin-header h1 {
  font-size: 30px;
  margin: 0;
}

.admin-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 210px minmax(0, 1fr);
  margin: 0;
  max-width: none;
}

.admin-nav, .admin-content {
  background: var(--app-gradient-surface);
  border: 1px solid var(--app-color-border);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(24, 67, 66, 0.075);
  padding: 20px;
}

.admin-content {
  min-width: 0;
  padding-inline: 8px;
}

.admin-nav oj-button {
  display: block;
  margin: 3px 0;
  width: 100%;
}

.admin-content h2 {
  margin-top: 0;
}

.admin-content h3 {
  margin: 34px 0 12px;
}

.admin-list {
  border-top: 1px solid #e1e6ef;
}

.admin-row {
  align-items: center;
  border-bottom: 1px solid #e1e6ef;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  min-height: 58px;
  padding: 9px 0;
}

.admin-row small {
  color: #66738a;
  display: block;
  font-size: 12px;
  margin-top: 4px;
  word-break: break-all;
}

.admin-note {
  color: #59667d;
  line-height: 1.5;
}

.site-traffic-heading {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.site-traffic-heading h2 {
  margin-bottom: 6px;
}

.site-traffic-heading .admin-note {
  margin-top: 0;
}

.site-traffic-controls {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.site-traffic-filter {
  display: grid;
  gap: 4px;
  min-width: 130px;
}

.site-traffic-filter oj-select-single {
  width: 150px;
}

.site-traffic-metrics {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin: 22px 0;
}

.site-traffic-metrics article {
  background: var(--app-color-tan, #f4f0e8);
  border: 1px solid var(--app-color-border);
  border-radius: 10px;
  padding: 14px;
}

.site-traffic-metrics span,
.site-traffic-metrics strong {
  display: block;
}

.site-traffic-metrics span {
  color: #59667d;
  font-size: 13px;
}

.site-traffic-metrics strong {
  font-size: 23px;
  margin-top: 6px;
}

.site-traffic-table {
  min-width: 0;
  width: 100%;
}

.site-traffic-table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

.site-traffic-proxy-panel {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, 1fr);
}

.site-traffic-proxy-panel h3 {
  margin-bottom: 5px;
}

.site-traffic-proxy-panel .admin-note {
  margin: 0;
}

.site-traffic-proxy-groups {
  align-content: center;
  display: grid;
  gap: 8px;
}

.site-traffic-proxy-cell {
  overflow-wrap: anywhere;
}

.site-traffic-proxy-alert {
  color: #a3221c;
  font-weight: 700;
}

.site-traffic-method-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.site-traffic-method {
  font-family: var(--oj-typography-body-font-family, monospace);
  font-weight: 700;
}

.site-traffic-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  margin-left: auto;
  padding: 2px 8px;
  text-align: right;
  white-space: nowrap;
}

.site-traffic-status-success {
  background: #e5f4e8;
  color: #176b32;
}

.site-traffic-status-error {
  background: #fde8e7;
  color: #a3221c;
}

.site-traffic-status-redirect {
  background: #fff1d5;
  color: #805600;
}

.site-traffic-status-neutral {
  background: var(--app-color-tan, #f4f0e8);
  color: var(--app-color-muted, #5b6268);
}

.site-traffic-path-cell {
  overflow-wrap: anywhere;
  white-space: normal;
}

.site-traffic-ip-cell,
.site-traffic-location-cell {
  overflow-wrap: anywhere;
  white-space: normal;
}

.site-traffic-user-agent-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-traffic-requests-heading {
  align-items: end;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-top: 24px;
}

.site-traffic-requests-heading h3 {
  margin-bottom: 4px;
}

.site-traffic-requests-heading .admin-note {
  margin: 0;
}

.site-traffic-request-search {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.site-traffic-grid-controls {
  align-items: end;
  display: grid;
  flex: 1 1 680px;
  gap: 10px;
  grid-template-columns: minmax(130px, 170px) minmax(140px, 180px) minmax(220px, 1fr);
  max-width: 860px;
  min-width: 0;
}

.site-traffic-grid-filter {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.site-traffic-ai-panel {
  margin: 24px 0 0;
}

.site-traffic-ai-heading {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.site-traffic-ai-heading h3 {
  margin: 0 0 4px;
}

.site-traffic-ai-heading .admin-note {
  margin: 0;
}

.site-traffic-ai-model {
  background: var(--app-color-teal-soft, #e3eff0);
  border-radius: 999px;
  color: var(--app-color-teal, #245b66);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  white-space: nowrap;
}

.site-traffic-ai-controls {
  align-items: end;
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.site-traffic-ai-question {
  display: grid;
  flex: 1;
  gap: 4px;
  min-width: 0;
}

.site-traffic-ai-answer {
  background: var(--app-color-tan, #f4f0e8);
  border-radius: 8px;
  margin-top: 14px;
  padding: 12px 14px;
}

.site-traffic-ai-answer > p:first-child {
  margin-top: 0;
}

.site-traffic-ai-answer ul {
  margin: 8px 0 14px;
  padding-left: 22px;
}

.site-traffic-ai-answer li {
  margin: 7px 0;
}

.site-traffic-ai-kind {
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}

.site-traffic-ai-kind-fact {
  background: #e5f4e8;
  color: #176b32;
}

.site-traffic-ai-kind-possible {
  background: #fff1d5;
  color: #805600;
}

.site-traffic-access-note {
  background: var(--app-color-tan, #f4f0e8);
  border-left: 3px solid var(--app-color-teal, #2b6472);
  margin: 10px 0;
  padding: 10px 12px;
}

.site-traffic-visuals {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0 24px;
}

.site-traffic-panel {
  background: #fffdfa;
  border: 1px solid var(--app-color-border);
  border-radius: 10px;
  min-width: 0;
  padding: 16px;
}

.site-traffic-panel h3 {
  margin: 0 0 10px;
}

.site-traffic-chart {
  display: block;
  height: 300px;
  width: 100%;
}

.site-traffic-path-chart {
  height: 340px;
}

.site-traffic-map-panel {
  grid-column: 1/-1;
}

.site-traffic-map-heading .admin-note,
.site-traffic-map-status {
  margin: 4px 0 10px;
}

.site-traffic-map {
  border: 1px solid var(--app-color-border);
  border-radius: 8px;
  height: min(56vh, 520px);
  min-height: 320px;
  overflow: hidden;
  width: 100%;
}

.site-traffic-map-attribution {
  font-size: 12px;
  margin: 8px 0 0;
}

@media (max-width: 900px) {
  .site-traffic-visuals {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-traffic-map-panel {
    grid-column: auto;
  }
}
@media (max-width: 720px) {
  .site-traffic-heading {
    flex-wrap: wrap;
  }
  .site-traffic-controls {
    justify-content: flex-start;
    width: 100%;
  }
  .site-traffic-requests-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .site-traffic-proxy-panel {
    grid-template-columns: 1fr;
  }
  .site-traffic-request-search {
    width: 100%;
  }
  .site-traffic-grid-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
    width: 100%;
  }
  .site-traffic-request-search {
    grid-column: 1/-1;
  }
  .site-traffic-ai-heading,
  .site-traffic-ai-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .site-traffic-ai-model {
    align-self: flex-start;
  }
}
.table-actions {
  display: flex;
  gap: 8px;
}

.table-actions button {
  background: transparent;
  border: 0;
  color: var(--app-color-teal);
  cursor: pointer;
  font: inherit;
  padding: 4px;
}

.table-actions button:last-child {
  color: #b51d1d;
}

.table-actions oj-button {
  --oj-button-outlined-chrome-bg-color: #f4e8e9;
  --oj-button-outlined-chrome-bg-color-hover: #ecd7da;
  --oj-button-outlined-chrome-border-color: #cfadb3;
  --oj-button-outlined-chrome-border-color-hover: var(--app-color-garnet-hover);
  --oj-button-outlined-chrome-text-color: var(--app-color-garnet);
  --oj-button-outlined-chrome-text-color-hover: var(--app-color-garnet);
}

.table-actions oj-button:last-child {
  --oj-button-outlined-chrome-bg-color: #fbeaea;
  --oj-button-outlined-chrome-bg-color-hover: #f4d5d5;
  --oj-button-outlined-chrome-border-color: #dfb7b7;
  --oj-button-outlined-chrome-border-color-hover: #b51d1d;
  --oj-button-outlined-chrome-text-color: #9f2828;
  --oj-button-outlined-chrome-text-color-hover: #861f1f;
}

.organization-management .login-input {
  margin-bottom: 12px;
  max-width: 460px;
}

.management-step {
  border-top: 1px solid #e1e6ef;
  margin-top: 26px;
  padding-top: 18px;
}

.management-step h3 {
  margin: 0 0 12px;
}

.management-step h4 {
  font-size: 15px;
  margin: 24px 0 6px;
}

.management-step oj-table {
  display: block;
  min-height: 100px;
}

.address-attribution {
  color: #66738a;
  font-size: 12px;
  margin: 8px 0;
}

.address-results {
  border: 1px solid #d9e0ec;
  border-radius: 7px;
  margin: 10px 0 16px;
  max-width: 640px;
  overflow: hidden;
}

.address-results button {
  background: #fff;
  border: 0;
  border-bottom: 1px solid #e1e6ef;
  cursor: pointer;
  display: block;
  font: inherit;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
}

.address-results button:hover {
  background: var(--app-color-teal-soft);
}

.address-results button:last-child {
  border-bottom: 0;
}

@media (max-width: 480px) {
  .login-card {
    padding: 32px 24px;
  }
  .admin-shell {
    padding: 0;
  }
  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-nav {
    display: flex;
    overflow-x: auto;
  }
  .admin-nav oj-button {
    min-width: max-content;
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
  .demo-appheader-avatar:before {
    content: url("images/avatar_24px_2x.png");
    -webkit-transform: translate(-25%, -25%) scale(0.5);
    transform: translate(-25%, -25%) scale(0.5);
  }
}