:root {
  color-scheme: light;
  --font-sans: "Manrope", "Segoe UI", Arial, sans-serif;
  font-family: var(--font-sans);
  --page-bg: #f5f7fa;
  --panel-bg: #ffffff;
  --surface: #eef2f6;
  --surface-strong: #dce4ed;
  --control-surface: #f7f9fc;
  --line: rgba(23, 32, 51, 0.09);
  --line-strong: rgba(23, 32, 51, 0.16);
  --ink: #172033;
  --muted: #536174;
  --muted-soft: #737f90;
  --accent: #22304a;
  --accent-soft: #3a4964;
  --switch-on-bg: #6d5dfc;
  --focus: rgba(205, 55, 45, 0.18);
  --shadow-lg: 0 18px 42px rgba(23, 32, 51, 0.055);
  --shadow-md: 0 10px 24px rgba(23, 32, 51, 0.04);
  --success-bg: #edf5ed;
  --success-text: #376246;
  --error-bg: #fff1ef;
  --error-text: #cd372d;
  --danger-bg: #fff1ef;
  --danger-text: #cd372d;
  --warm: #eef2f6;
  --warm-deep: #d4dde8;
  --blue: #e8eef5;
  --mint: #e1ede2;
  --ink-panel: #22304a;
  --brand-red: #cd372d;
  --brand-red-hover: #b92f27;
  --brand-red-active-bg: rgba(205, 55, 45, 0.10);
  --brand-red-soft-bg: rgba(205, 55, 45, 0.07);
  --brand-red-border: rgba(205, 55, 45, 0.28);
  --portal-accent: #315ddc;
  --portal-accent-hover: #234fd7;
  --portal-accent-active-bg: rgba(49, 93, 220, 0.12);
  --portal-accent-soft-bg: rgba(49, 93, 220, 0.08);
  --portal-accent-border: rgba(49, 93, 220, 0.30);
  --portal-accent-focus: rgba(49, 93, 220, 0.20);
  --portal-accent-rgb: 49, 93, 220;
  --primary-cta: #315ddc;
  --primary-cta-hover: #234fd7;
  --primary-cta-active: #1f46c4;
  --primary-cta-text: #ffffff;
  --primary-cta-secondary-bg: #ffffff;
  --primary-cta-secondary-hover-bg: rgba(49, 93, 220, 0.08);
  --primary-cta-secondary-border: #315ddc;
  --primary-cta-secondary-text: #315ddc;
  --ai-accent: var(--portal-accent);
  --ai-accent-hover: var(--portal-accent-hover);
  --ai-accent-active-bg: var(--portal-accent-active-bg);
  --ai-accent-soft-bg: var(--portal-accent-soft-bg);
  --ai-accent-border: var(--portal-accent-border);
  --ai-accent-focus: var(--portal-accent-focus);
  --brand-blue: #5e7594;
  --brand-slate: #56657a;
  --brand-tile: #eef2f6;
}

/* Use one script-appropriate family for the whole localized page, including Latin text and
   numerals, so mixed-language labels do not alternate between Manrope and a glyph fallback.
   Noto is preferred when installed; the following families are native platform fallbacks. */
html:lang(ko) {
  --font-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
}

html:lang(ja) {
  --font-sans: "Noto Sans JP", "Yu Gothic", Meiryo, "Segoe UI", sans-serif;
}

html:lang(zh-CN) {
  --font-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

html:lang(zh-TW) {
  --font-sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", "Segoe UI", sans-serif;
}

html:lang(ar) {
  --font-sans: "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #121316;
  --panel-bg: #1b1c20;
  --surface: #24252a;
  --surface-strong: #2d2e34;
  --control-surface: #24252a;
  --line: rgba(235, 237, 240, 0.055);
  --line-strong: rgba(235, 237, 240, 0.09);
  --ink: #eceef2;
  --muted: #a7abb3;
  --muted-soft: #858a94;
  --accent: #e1e4ea;
  --accent-soft: #b5bac4;
  --switch-on-bg: #7c6dff;
  --focus: rgba(240, 106, 97, 0.20);
  --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.16);
  --success-bg: #1d3024;
  --success-text: #9ee0b4;
  --error-bg: #381f20;
  --error-text: #f17e77;
  --danger-bg: #381f20;
  --danger-text: #f17e77;
  --warm: #24252a;
  --warm-deep: #2d2e34;
  --blue: #25272d;
  --mint: #202d27;
  --ink-panel: #1b1c20;
  --brand-red: #f06a61;
  --brand-red-hover: #ff7a70;
  --brand-red-active-bg: rgba(240, 106, 97, 0.14);
  --brand-red-soft-bg: rgba(240, 106, 97, 0.10);
  --brand-red-border: rgba(240, 106, 97, 0.28);
  --portal-accent: #7c9cff;
  --portal-accent-hover: #9bb4ff;
  --portal-accent-active-bg: rgba(124, 156, 255, 0.18);
  --portal-accent-soft-bg: rgba(124, 156, 255, 0.12);
  --portal-accent-border: rgba(124, 156, 255, 0.36);
  --portal-accent-focus: rgba(124, 156, 255, 0.24);
  --portal-accent-rgb: 124, 156, 255;
  --primary-cta: #6f8fef;
  --primary-cta-hover: #82a0ff;
  --primary-cta-active: #5f7dda;
  --primary-cta-text: #101318;
  --primary-cta-secondary-bg: #20232b;
  --primary-cta-secondary-hover-bg: #292d38;
  --primary-cta-secondary-border: #6f8fef;
  --primary-cta-secondary-text: #9bb4ff;
  --ai-accent: var(--portal-accent);
  --ai-accent-hover: var(--portal-accent-hover);
  --ai-accent-active-bg: var(--portal-accent-active-bg);
  --ai-accent-soft-bg: var(--portal-accent-soft-bg);
  --ai-accent-border: var(--portal-accent-border);
  --ai-accent-focus: var(--portal-accent-focus);
  --brand-blue: #aaaeba;
  --brand-slate: #a2a6af;
  --brand-tile: #24252a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--ink);
}


[hidden] {
  display: none !important;
}

html[data-cn-portal="true"] [data-cn-hidden] {
  display: none !important;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

.split-auth-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.split-auth {
  width: 100%;
  flex: 1 0 auto;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(520px, 0.98fr);
}

.register-auth-page {
  background:
    radial-gradient(circle at 14% 18%, rgba(205, 55, 45, 0.10), transparent 30%),
    radial-gradient(circle at 86% 10%, rgba(94, 117, 148, 0.16), transparent 28%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3f8 100%);
}

.split-auth--register {
  grid-template-columns: minmax(0, 1fr);
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto;
}

.split-auth--register .auth-form-side {
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  overscroll-behavior: auto;
  background: transparent;
}

.split-auth--register .auth-form-side__inner {
  max-width: 840px;
  margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) 34px max(64px, env(safe-area-inset-bottom));
}

.split-auth--register .auth-panel {
  border: 1px solid rgba(216, 224, 234, 0.86);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 70px rgba(23, 32, 51, 0.12);
}

.register-footer {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  color: #6f7a89;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.register-footer p {
  margin: 0;
}

.register-footer a {
  color: #30415d;
  font-weight: 800;
  text-decoration: none;
}

.register-footer a:hover {
  color: #cd372d;
}

.split-auth--register #account-email-step-note {
  margin: -2px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: rgba(247, 249, 252, 0.78);
}

.register-account-prompt,
.register-signin-prompt,
.register-signup-agreement {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}

.register-account-prompt,
.register-signin-prompt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.register-signup-agreement a {
  color: var(--ink);
  font-weight: 800;
  text-decoration: underline;
}

.register-signup-confirm__copy {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: rgba(247, 249, 252, 0.78);
  color: var(--muted);
}

.split-auth--register .auth-panel__inner {
  padding: clamp(28px, 4vw, 44px);
}

.split-auth--register #license-section {
  width: 100%;
  margin-top: 14px;
}

.split-auth--register #license-section .step-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: rgba(247, 249, 252, 0.78);
  justify-content: flex-start;
}

.split-auth--register #license-section .register-signed-in-note--with-action {
  justify-content: space-between;
  gap: 14px;
}

.split-auth--register #license-section .register-signed-in-note--with-action > span {
  min-width: 0;
}

.split-auth--register #license-section .register-signed-in-note--with-action .register-signout-link {
  flex: 0 0 auto;
  font-size: inherit;
  line-height: inherit;
}

.register-ai-promo {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(49, 93, 220, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 92% 10%, rgba(124, 156, 255, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(250, 248, 255, 0.98), rgba(241, 247, 255, 0.98));
}

.register-ai-promo__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.register-ai-promo__copy {
  min-width: 0;
}

.register-ai-promo__brand {
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--portal-accent);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.register-ai-promo__brand svg,
.register-ai-promo__cta svg,
.register-ai-promo__tool-icon svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.register-ai-promo__brand svg {
  width: 20px;
  height: 20px;
}

.register-ai-promo h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.register-ai-promo__description {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.register-ai-promo__cta {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(49, 93, 220, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.register-ai-promo__cta svg {
  width: 17px;
  height: 17px;
}

.register-ai-promo__cta:hover {
  border-color: var(--portal-accent);
  background: #fff;
  color: var(--portal-accent);
  transform: translateY(-1px);
}

.register-ai-promo__cta:focus-visible,
.register-ai-promo__tool:focus-visible {
  outline: 3px solid var(--portal-accent-focus);
  outline-offset: 2px;
}

.register-ai-promo__tools {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.register-ai-promo__tool {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(216, 224, 234, 0.86);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.register-ai-promo__tool:hover {
  border-color: var(--portal-accent-border);
  background: #fff;
  transform: translateY(-1px);
}

.register-ai-promo__tool-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.register-ai-promo__tool-icon svg {
  width: 22px;
  height: 22px;
}

.register-ai-promo__tool-copy {
  min-width: 0;
}

.register-ai-promo__tool-copy strong,
.register-ai-promo__tool-copy > span {
  display: block;
}

.register-ai-promo__tool-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.register-ai-promo__tool-copy > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

html[data-theme="dark"] .register-ai-promo {
  border-color: var(--portal-accent-border);
  background:
    radial-gradient(circle at 92% 10%, rgba(124, 156, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(39, 37, 62, 0.92), rgba(27, 43, 62, 0.92));
}

html[data-theme="dark"] .register-ai-promo__cta,
html[data-theme="dark"] .register-ai-promo__tool {
  border-color: var(--line-strong);
  background: rgba(36, 37, 42, 0.9);
}

html[data-theme="dark"] .register-ai-promo__cta:hover,
html[data-theme="dark"] .register-ai-promo__tool:hover {
  border-color: var(--portal-accent-border);
  background: var(--surface-strong);
}

@media (max-width: 680px) {
  .register-ai-promo {
    padding: 18px;
  }

  .register-ai-promo__header {
    align-items: stretch;
    flex-direction: column;
  }

  .register-ai-promo__cta {
    align-self: flex-start;
  }

  .register-ai-promo__tools {
    grid-template-columns: 1fr;
  }
}

.split-auth--register .dashboard-license-list {
  gap: 16px;
}

.split-auth--register .dashboard-license-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px;
  row-gap: 16px;
  align-items: center;
  padding: 24px 26px 24px 32px;
}

.split-auth--register .dashboard-license-item__title {
  grid-column: 1 / -1;
  margin: 0;
  flex-wrap: wrap;
  row-gap: 8px;
}

.split-auth--register .dashboard-license-item__meta {
  grid-column: 1;
  min-width: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(180px, 1.05fr) minmax(150px, 0.9fr) 64px;
  gap: 12px;
  align-items: center;
  white-space: normal;
  overflow: visible;
}

.split-auth--register .dashboard-license-item__field dd {
  margin-top: 6px;
}

.split-auth--register .dashboard-license-item__value--serial-display {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  word-break: normal;
}

.split-auth--register .dashboard-license-item__field--count,
.split-auth--register .dashboard-license-item__field--status {
  justify-self: end;
  width: 64px;
  text-align: right;
}

.split-auth--register .dashboard-license-item > .primary-auth-button--inline {
  grid-column: 2;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .split-auth--register .dashboard-license-item__meta {
    grid-template-columns: minmax(150px, 0.9fr) minmax(142px, 1fr) 64px;
  }
}

@media (max-width: 760px) {
  .split-auth--register .auth-form-side__inner {
    max-width: 100%;
  }

  .split-auth--register .dashboard-license-item {
    grid-template-columns: 1fr;
  }

  .split-auth--register .dashboard-license-item__meta,
  .split-auth--register .dashboard-license-item > .primary-auth-button--inline {
    grid-column: 1;
  }

  .split-auth--register .dashboard-license-item__meta {
    grid-template-columns: 1fr;
  }

  .split-auth--register .dashboard-license-item__field--count,
  .split-auth--register .dashboard-license-item__field--status {
    justify-self: start;
    width: auto;
    text-align: left;
  }

  .split-auth--register .dashboard-license-item__field--count dd,
  .split-auth--register .dashboard-license-item__field--status dd {
    justify-content: flex-start;
  }

  .split-auth--register .dashboard-license-item > .primary-auth-button--inline {
    width: 100%;
  }
}
.auth-showcase {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #f0f2f5;
  border-right: 1px solid rgba(196, 207, 221, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-showcase__image-shell {
  width: 100%;
  height: 100%;
}

.auth-showcase__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-showcase-home-link {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(23, 32, 51, 0.10);
  backdrop-filter: blur(12px);
}

.auth-showcase-home-link::before,
.auth-mobile-home-link a::before {
  content: "<";
  margin-right: 8px;
  font-weight: 800;
}

.auth-showcase-home-link:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}

.showcase-layer {
  position: relative;
  min-height: calc(100vh - 76px);
}

.showcase-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

.showcase-tag__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #54c97d;
}

.showcase-toolbar {
  position: absolute;
  left: 8%;
  top: 19%;
  width: clamp(340px, 58vw, 520px);
  min-height: 76px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 24px;
  background: var(--ink-panel);
  color: #edf1f5;
  box-shadow: 0 18px 42px rgba(31, 34, 71, 0.14);
}

.showcase-toolbar__pill {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.showcase-toolbar__pill--active {
  background: rgba(255, 255, 255, 0.14);
}

.showcase-canvas {
  position: absolute;
  left: 18%;
  top: 29%;
  width: clamp(380px, 54vw, 560px);
  min-height: 500px;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 218, 208, 0.85);
  box-shadow: var(--shadow-lg);
}

.showcase-canvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.showcase-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.showcase-status strong {
  color: var(--ink-panel);
  font-size: 20px;
  font-weight: 800;
}

.showcase-status__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #67d993;
}

.showcase-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 34px 28px 26px;
  background: #fff;
}

.showcase-card h2 {
  margin: 0 0 26px;
  color: var(--ink-panel);
  font-size: clamp(28px, 3vw, 46px);
  line-height: 0.94;
  letter-spacing: -0.05em;
}

.showcase-card__actions {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.showcase-chip {
  flex: 1;
  min-height: 54px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}

.showcase-chip--primary {
  background: #68cdb7;
  color: #fff;
}

.showcase-chip--secondary {
  border: 2px solid #6cdfc7;
  background: #fff;
  color: #58baaa;
}

.showcase-lines {
  display: grid;
  gap: 16px;
}

.showcase-lines span {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #eceff3;
}

.showcase-lines span:nth-child(1) {
  width: 84%;
}

.showcase-lines span:nth-child(2) {
  width: 72%;
}

.showcase-lines span:nth-child(3) {
  width: 65%;
}

.showcase-profile {
  position: absolute;
  right: 14%;
  top: 21%;
  width: clamp(180px, 26vw, 260px);
  aspect-ratio: 0.92;
  border-radius: 28px;
  background: #e9edf3;
  box-shadow: var(--shadow-lg);
}

.showcase-recorder {
  position: absolute;
  left: 8%;
  bottom: 7%;
  width: clamp(320px, 43vw, 460px);
  padding: 20px 20px 18px;
  border-radius: 24px;
  background: #2f3848;
  color: #fff;
  box-shadow: 0 18px 44px rgba(27, 29, 68, 0.16);
}

.showcase-recorder__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.showcase-logo {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.showcase-logo span {
  color: #6acbff;
}

.showcase-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.showcase-controls__item {
  min-height: 118px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #d9dcff;
}

.showcase-controls__item--active {
  background: rgba(236, 79, 152, 0.18);
  border-color: rgba(236, 79, 152, 0.34);
}

.showcase-settings {
  display: grid;
  gap: 12px;
}

.showcase-settings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #f2f3ff;
  font-size: 15px;
}

.showcase-meter {
  display: inline-flex;
  gap: 4px;
}

.showcase-meter span {
  width: 6px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.20);
}

.showcase-meter span:nth-child(-n+5) {
  background: #8dd66b;
}

.showcase-meter span:nth-child(6),
.showcase-meter span:nth-child(7) {
  background: #cfdb63;
}

.showcase-note {
  position: absolute;
  right: 18%;
  bottom: 26%;
  min-width: 118px;
  padding: 20px 18px;
  border-radius: 24px;
  background: #f5c84d;
  box-shadow: 0 10px 24px rgba(198, 168, 80, 0.14);
  color: #392f14;
  text-align: center;
  font-weight: 800;
  line-height: 1.05;
}

.showcase-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.9);
}

.auth-form-side__inner {
  width: 100%;
  max-width: 540px;
  padding: max(48px, env(safe-area-inset-top)) 46px max(48px, env(safe-area-inset-bottom));
  margin: auto 0;
}

.auth-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 34px;
}

.auth-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.auth-nav a {
  padding: 10px 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
}

.auth-nav a:hover {
  border-bottom-color: var(--brand-red);
  color: var(--brand-red);
}
  .auth-toolbar .auth-brand {
  margin-bottom: 0;
}

.locale-switcher {
  position: relative;
  display: inline-block;
}

.locale-switcher__trigger {
  min-width: 72px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-md);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.locale-switcher__chevron {
  width: 7px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

.locale-switcher__trigger[aria-expanded="true"] .locale-switcher__chevron {
  transform: translateY(2px) rotate(225deg);
}

.locale-switcher__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 174px;
  max-height: min(70vh, 380px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 80;
}

.locale-switcher__button {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.locale-switcher__button.is-active {
  background: var(--accent);
  color: #fff;
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 34px;
  text-decoration: none;
  color: var(--ink);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.08em;
}

.auth-brand span {
  font-weight: 500;
}

.auth-brand--portal {
  gap: 10px;
  font-size: 26px;
  letter-spacing: -0.04em;
}

.auth-brand--portal::before,
.dashboard-brand::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  background: url("/favicon.svg") center / contain no-repeat;
}

.auth-brand--portal::before {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(34, 48, 74, 0.12);
}

.auth-brand--portal span {
  font-weight: 700;
}

.auth-panel {
  width: 100%;
}

.auth-panel__inner {
  width: 100%;
}

.auth-eyebrow {
  margin: 0 0 12px;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-panel h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 56px);
  line-height: 0.96;
  letter-spacing: -0.06em;
}

.auth-panel h1.auth-title--compact {
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.auth-panel h1.auth-title--compact + .auth-copy {
  margin-top: 24px;
}

.auth-copy {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.auth-copy--top {
  margin-top: 0;
}

.auth-form {
  margin-top: 28px;
}

.field-block {
  margin-bottom: 16px;
}

.field-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.field-row > .field-block {
  min-width: 0;
}

.field-row--language-currency > .field-block--language {
  flex: 1 1 auto;
}

.field-row--language-currency > .field-block--currency {
  flex: 0 0 34%;
  max-width: 150px;
}

.field-label {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 700;
}

.auth-input {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(247, 243, 238, 0.55);
  color: var(--ink);
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.auth-input::placeholder {
  color: #a59f97;
}

.auth-input:focus {
  background: #fff;
  border-color: #c9beb0;
  box-shadow: 0 0 0 4px var(--focus);
}

.auth-input--locked {
  background: #f3efe8;
  color: #5e5851;
}

.auth-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #7f786f 50%),
    linear-gradient(135deg, #7f786f 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.step-note {
  margin: -4px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.step-note strong {
  color: var(--ink);
}

.field-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.field-note--emphasis {
  color: var(--ink);
  font-weight: 700;
}

.field-error {
  margin: 10px 0 0;
  color: var(--error-text);
  font-size: 14px;
  font-weight: 700;
  white-space: pre-line;
}

.primary-auth-button,
.provider-button,
.subtle-button {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

/* Buttons inside a dialog. The 56px above is sized for full-page auth forms and reads as oversized
   in a dialog, so every dialog steps down to one shared height. Add new dialogs to this selector
   list rather than repeating min-height next to their own rules: this height used to live in three
   scattered places and the profile/password modals were missed when it last changed. */
.portal-login-dialog__submit,
.portal-region-unavailable-dialog__action,
.ai-retention-dialog__cta,
.profile-modal__actions .subtle-button,
.profile-modal__actions .primary-auth-button {
  min-height: 48px;
}

.subtle-button--compact {
  margin-top: 12px;
  min-height: 44px;
  border-radius: 14px;
  font-size: 14px;
}

.license-email-verification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.license-email-verification > .subtle-button {
  width: auto;
  min-width: 120px;
  min-height: 38px;
  padding: 0 16px;
  margin-top: 0;
  border-radius: 12px;
}

.license-email-verification__hint {
  margin-top: 0;
  flex: 1 1 240px;
}

.license-email-verification__code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  flex: 1 0 100%;
  margin-top: 2px;
}

.license-email-verification__code .subtle-button {
  width: auto;
  min-width: 96px;
  margin-top: 0;
  padding: 0 16px;
}

.license-email-verification__input {
  min-height: 44px;
  border-radius: 14px;
  letter-spacing: 0.18em;
  text-align: center;
}

.license-email-verification__status[data-tone="success"] {
  flex: 1 0 100%;
  color: #2d6d4b;
  font-weight: 700;
}

.license-email-verification__status[data-tone="error"] {
  flex: 1 0 100%;
  color: var(--error-text);
  font-weight: 700;
}

.signup-email-verification {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.signup-email-verification > .subtle-button {
  margin-top: 0;
}

.signup-email-verification__code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.signup-email-verification__code .subtle-button {
  width: auto;
  min-width: 96px;
  margin-top: 0;
  padding: 0 16px;
}

.signup-email-verification__input {
  min-height: 44px;
  border-radius: 14px;
  letter-spacing: 0.18em;
  text-align: center;
}

.signup-email-verification__status {
  margin-top: 0;
}

.signup-email-verification__status[data-tone="success"] {
  color: #2d6d4b;
  font-weight: 700;
}

.signup-email-verification__status[data-tone="error"] {
  color: var(--error-text);
  font-weight: 700;
}

.signup-code-copy {
  margin: 0 0 12px;
  color: var(--muted);
}

.signup-verification-step .auth-divider,
.signup-verification-step .provider-stack,
.signup-verification-step .signup-agreement,
.signup-password-step .auth-divider,
.signup-password-step .provider-stack,
.signup-password-step .signup-agreement {
  display: none;
}

.signup-password-step.signup-password-link-step .auth-divider {
  display: block;
}

.signup-password-step.signup-password-link-step .provider-stack {
  display: grid;
}

.signup-code-digits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.signup-code-digit {
  width: 100%;
  min-width: 0;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font: 600 20px/1 Manrope, sans-serif;
  text-align: center;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.signup-code-digit:focus {
  border-color: var(--brand-red);
  background: #fff;
  box-shadow: 0 0 0 4px var(--focus);
}

.signup-code-resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.signup-code-resend__button {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 640px) {
  .signup-code-digits {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .signup-code-digit {
    height: 48px;
    font-size: 18px;
  }

  .signup-code-resend {
    align-items: flex-start;
    flex-direction: column;
  }
}

.primary-auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  margin-top: 10px;
  border: 0;
  background: #3f4d60;
  color: #fff;
  box-shadow: 0 12px 26px rgba(23, 32, 51, 0.11);
}

.primary-auth-button:disabled {
  cursor: wait;
  opacity: 0.76;
  transform: none;
}

.primary-auth-button.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: auth-button-spin 0.72s linear infinite;
}

@keyframes auth-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.primary-auth-button:hover:not(:disabled),
.provider-button:hover:not(:disabled),
.subtle-button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.auth-divider {
  margin: 22px 0;
  position: relative;
  text-align: center;
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 700;
}

.auth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--line);
}

.auth-divider span {
  position: relative;
  padding: 0 14px;
  background: #fff;
}

.provider-stack {
  display: grid;
  gap: 12px;
}

html.auth-email-only .provider-stack,
html.auth-email-only .auth-divider:not(#serial-divider) {
  display: none !important;
}

.provider-button {
  border: 1px solid #747775;
  background: #fff;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  font-family: Roboto, "Segoe UI", sans-serif;
  font-weight: 500;
}

.provider-button--google {
  color: #1f1f1f;
}

.provider-button--apple {
  color: #111;
}

.provider-button--microsoft {
  color: #1f1f1f;
}

.provider-button:disabled {
  cursor: not-allowed;
  color: var(--muted-soft);
  background: #f3f6fa;
}

.provider-button__icon {
  width: 21px;
  height: 21px;
  border-radius: 0;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  line-height: 1;
}

.provider-button__mark {
  display: block;
  width: 100%;
  height: 100%;
}

.provider-button__label {
  display: inline;
}

.provider-button__icon--google {
  width: 18px;
  height: 18px;
}

.provider-button__icon--apple {
  color: #111;
  width: 21px;
  height: 25px;
}

.provider-button__icon--microsoft {
  width: 21px;
  height: 21px;
}

.auth-links {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.auth-links p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.auth-links a {
  font-weight: 800;
  text-decoration: underline;
}

.auth-home-link {
  margin: 0;
}

.auth-home-link a {
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.auth-home-link a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.auth-mobile-home-link {
  display: none;
  margin: 28px 0 0;
  text-align: center;
}

.auth-mobile-home-link a {
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.auth-mobile-home-link a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.signup-agreement {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.text-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.text-link--small {
  font-size: 14px;
  white-space: nowrap;
}

.subtle-button {
  margin-top: 18px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.status-pill {
  margin-top: 18px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-pill[data-state="in"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.status-pill[data-state="out"] {
  display: none;
}

.result-box {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
  font-size: 14px;
}

.result-box[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.result-box[data-tone="error"] {
  background: var(--error-bg);
  color: var(--error-text);
}

.auth-panel__inner--action {
  max-width: 560px;
}

.action-status-card {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  border-radius: 24px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-md);
}

.action-status-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--surface);
  color: var(--muted);
}

.action-status-card__body {
  min-width: 0;
}

.action-status-card__body strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.action-status-card__body p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.action-status-card[data-state="success"] {
  border-color: rgba(36, 90, 54, 0.16);
  background: var(--success-bg);
}

.action-status-card[data-state="success"] .action-status-card__icon {
  background: rgba(36, 90, 54, 0.14);
  color: var(--success-text);
}

.action-status-card[data-state="error"] {
  border-color: rgba(194, 77, 55, 0.16);
  background: var(--error-bg);
}

.action-status-card[data-state="error"] .action-status-card__icon {
  background: rgba(194, 77, 55, 0.12);
  color: var(--error-text);
}

.action-reset-form {
  margin-top: 24px;
}

.action-actions {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.action-link-button {
  width: auto;
  min-width: 0;
  padding: 0 28px;
  box-sizing: border-box;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  white-space: nowrap;
}

.action-secondary-link {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.action-secondary-link:hover {
  color: var(--ink);
}

.dashboard-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--page-bg);
  overflow-x: clip;
}

.dashboard-page::before {
  display: none;
}

.portal-page:not([hidden]) {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 0;
}

.dashboard-shell {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 70px;
}

.portal-account-deletion-lock:not([hidden]) {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 84px;
}

.portal-account-deletion-lock__card {
  width: 100%;
  border: 1px solid rgba(205, 55, 45, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 80px rgba(29, 45, 66, 0.12);
  padding: 34px;
}

.portal-account-deletion-lock__card h1 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 32px;
  line-height: 1.18;
}

.portal-account-deletion-lock__card p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.portal-account-deletion-lock__meta {
  margin: 24px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbff;
}

.portal-account-deletion-lock__meta div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.portal-account-deletion-lock__meta dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.portal-account-deletion-lock__meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.portal-account-deletion-lock__actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 26px;
}

.portal-account-deletion-lock__status[data-tone="success"] {
  color: var(--success-text);
  font-weight: 800;
}

.portal-account-deletion-lock__status[data-tone="error"] {
  color: var(--danger-text);
  font-weight: 800;
}

.portal-account-deletion-locked .dashboard-nav,
.portal-account-deletion-locked .dashboard-menu-toggle,
.portal-account-deletion-locked #edit-profile-btn,
.portal-account-deletion-locked #change-password-btn {
  display: none !important;
}

.dashboard-topbar {
  position: relative;
  top: auto;
  z-index: 35;
  min-height: 68px;
  padding: 10px 12px 10px 24px;
  border: 1px solid rgba(216, 224, 234, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.055);
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dashboard-topbar__left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 34px;
}

.dashboard-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.dashboard-brand::before {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(34, 48, 74, 0.12);
}

.dashboard-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

.dashboard-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.dashboard-menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.dashboard-menu-toggle:hover {
  border-color: var(--line-strong);
  background: #fff;
}

.dashboard-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dashboard-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.dashboard-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.dashboard-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-topbar__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-welcome-credit-promo {
  min-width: 0;
  min-height: 40px;
  padding: 0 4px;
  border-radius: 10px;
  color: var(--accent);
  text-decoration: none;
  display: inline-grid;
  grid-template-columns: auto minmax(0, auto);
  grid-template-areas:
    "gift copy"
    ". cta";
  column-gap: 10px;
  row-gap: 1px;
  align-items: center;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.dashboard-welcome-credit-promo:hover {
  color: var(--portal-accent);
}

.dashboard-welcome-credit-promo:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.dashboard-welcome-credit-promo__gift {
  grid-area: gift;
  flex: 0 0 auto;
  font-size: 17px;
}

.dashboard-welcome-credit-promo__copy {
  grid-area: copy;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.dashboard-welcome-credit-promo__copy strong {
  color: inherit;
  font-weight: 750;
}

.dashboard-welcome-credit-promo__benefits {
  color: var(--muted);
  font-weight: 600;
}

.dashboard-welcome-credit-promo__separator {
  color: var(--muted);
}

.dashboard-welcome-credit-promo__cta {
  grid-area: cta;
  justify-self: start;
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--portal-accent);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 750;
}

.dashboard-welcome-credit-promo:hover .dashboard-welcome-credit-promo__cta {
  background: transparent;
  color: var(--portal-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dashboard-welcome-credit-promo--featured {
  position: relative;
  isolation: isolate;
  min-height: 50px;
  padding: 5px 6px 5px 9px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    color-mix(in srgb, var(--portal-accent) 7%, var(--panel-bg)),
    color-mix(in srgb, var(--portal-accent) 2%, var(--panel-bg)) 52%,
    color-mix(in srgb, var(--portal-accent) 5%, var(--panel-bg))
  );
  box-shadow: 0 1px 2px rgba(var(--portal-accent-rgb), 0.05);
  color: var(--ink);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "gift copy cta";
  column-gap: 10px;
  row-gap: 0;
}

.dashboard-welcome-credit-promo--featured::before {
  content: "";
  position: absolute;
  top: -85%;
  bottom: -85%;
  left: -26%;
  z-index: 0;
  width: 16%;
  background: linear-gradient(90deg, transparent, rgba(var(--portal-accent-rgb), 0.22), transparent);
  opacity: 0;
  pointer-events: none;
  transform: rotate(14deg);
}

html[data-theme="dark"] .dashboard-welcome-credit-promo--featured::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
}

.dashboard-welcome-credit-promo--featured > * {
  position: relative;
  z-index: 1;
}

.dashboard-welcome-credit-promo--featured:hover {
  border-color: color-mix(in srgb, var(--portal-accent) 34%, var(--line-strong));
  box-shadow: 0 4px 14px rgba(var(--portal-accent-rgb), 0.08);
  color: var(--ink);
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--portal-accent-soft-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--portal-accent) 16%, transparent);
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  transform-origin: 50% 100%;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift::before,
.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift::after {
  content: "✦";
  position: absolute;
  color: var(--portal-accent);
  font-size: 10px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift::before {
  top: -2px;
  right: -4px;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift::after {
  bottom: 0;
  left: -4px;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy {
  display: grid;
  align-items: center;
  gap: 1px;
  line-height: 1.25;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy strong {
  color: var(--ink);
  font-weight: 750;
  letter-spacing: -0.01em;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__benefits {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__separator {
  display: none;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__cta {
  justify-self: end;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 14%, transparent);
  border-radius: 8px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 700;
}

.dashboard-welcome-credit-promo--featured:hover .dashboard-welcome-credit-promo__cta {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-active-bg);
  color: var(--portal-accent-hover);
  text-decoration: none;
}

.dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__cta > [aria-hidden="true"] {
  transition: transform 0.18s ease;
}

.dashboard-welcome-credit-promo--featured:hover .dashboard-welcome-credit-promo__cta > [aria-hidden="true"] {
  transform: translateX(2px);
}

.dashboard-welcome-credit-promo--celebrate {
  animation: dashboard-welcome-credit-arrive 440ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.dashboard-welcome-credit-promo--celebrate::before {
  animation:
    dashboard-welcome-credit-shine 760ms 420ms ease-out both,
    dashboard-welcome-credit-shine-reminder 8s 4.5s ease-in-out infinite;
}

.dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift {
  animation:
    dashboard-welcome-credit-gift-bounce 640ms 160ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both,
    dashboard-welcome-credit-gift-reminder 8s 4.5s ease-in-out infinite;
}

.dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift::before {
  animation:
    dashboard-welcome-credit-spark 460ms 480ms ease-out both,
    dashboard-welcome-credit-spark-reminder 8s 4.7s ease-out infinite;
}

.dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift::after {
  animation:
    dashboard-welcome-credit-spark 460ms 580ms ease-out both,
    dashboard-welcome-credit-spark-reminder 8s 4.9s ease-out infinite;
}

@keyframes dashboard-welcome-credit-arrive {
  from {
    opacity: 0;
    translate: 0 -6px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes dashboard-welcome-credit-shine {
  0% {
    left: -26%;
    opacity: 0;
  }
  20% {
    opacity: 0.62;
  }
  100% {
    left: 114%;
    opacity: 0;
  }
}

@keyframes dashboard-welcome-credit-gift-bounce {
  0% { transform: translateY(0) scale(0.92) rotate(-4deg); }
  42% { transform: translateY(-3px) scale(1.06) rotate(3deg); }
  70% { transform: translateY(1px) scale(0.98) rotate(-1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}

@keyframes dashboard-welcome-credit-shine-reminder {
  0% { left: -26%; opacity: 0; }
  3% { opacity: 0; }
  7% { opacity: 0.46; }
  14%, 100% { left: 114%; opacity: 0; }
}

@keyframes dashboard-welcome-credit-gift-reminder {
  0%, 3%, 14%, 100% { transform: translateY(0) scale(1) rotate(0); }
  7% { transform: translateY(-2px) scale(1.04) rotate(2deg); }
  10% { transform: translateY(0.5px) scale(0.99) rotate(-0.5deg); }
}

@keyframes dashboard-welcome-credit-spark-reminder {
  0%, 4%, 14%, 100% { opacity: 0; transform: scale(0.35) rotate(0); }
  8% { opacity: 0.72; transform: scale(1) rotate(24deg); }
}

@keyframes dashboard-welcome-credit-spark {
  0% { opacity: 0; transform: scale(0.2) rotate(0); }
  45% { opacity: 0.82; transform: scale(1.1) rotate(20deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(52deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-welcome-credit-promo--celebrate,
  .dashboard-welcome-credit-promo--celebrate::before,
  .dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift,
  .dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift::before,
  .dashboard-welcome-credit-promo--celebrate .dashboard-welcome-credit-promo__gift::after {
    animation: none;
  }
}

.dashboard-support-link {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.dashboard-support-link:hover {
  background: var(--surface);
  color: var(--ink);
}

.dashboard-support-link__icon {
  width: 26px;
  height: 26px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  transform: translateY(-1px);
}

.dashboard-theme-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dashboard-support-link + .dashboard-theme-toggle {
  margin-left: -6px;
}

.dashboard-theme-toggle:hover {
  background: var(--surface);
  color: var(--ink);
}

.dashboard-theme-toggle__icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

.dashboard-theme-toggle__svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-theme-toggle__svg--moon {
  display: none;
}

html[data-theme="dark"] .dashboard-theme-toggle__svg--sun {
  display: none;
}

html[data-theme="dark"] .dashboard-theme-toggle__svg--moon {
  display: block;
}

html[data-theme="dark"] .dashboard-support-link__icon {
  filter: brightness(0) invert(1) opacity(0.86);
}

.dashboard-upgrade-link {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--primary-cta-secondary-border);
  border-radius: 10px;
  background: var(--primary-cta-secondary-bg);
  color: var(--primary-cta-secondary-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-upgrade-link:hover {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-secondary-hover-bg);
  color: var(--primary-cta-hover);
}

.dashboard-upgrade-link__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-page.portal-pricing-guest .dashboard-upgrade-link {
  display: none;
}

/* The badge doubles as the purchase entry point, so the standalone Buy
   Credits button leaves the top bar whenever the badge is visible. */
.portal-credit-badge-active .dashboard-upgrade-link {
  display: none;
}

/* Same color family as the Buy Credits button it replaces, but as a quiet
   tinted chip: a balance readout should not shout like a button. The full
   accent outline only returns on hover, as the press affordance. */
.dashboard-credit-badge {
  min-height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--portal-accent-soft-bg);
  color: var(--primary-cta-secondary-text);
  display: inline-flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
  text-decoration: none;
  font-size: 14px;
  /* 700, not the base 850: the Buy Credits button this matches renders at 700
     via the .dashboard-page control group override. */
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dashboard-credit-badge:hover {
  border-color: var(--primary-cta-secondary-border);
  background: var(--portal-accent-active-bg);
}

/* The chip is split into two targets: the balance opens /credits, the plus
   opens the purchase view. Both inherit the chip's quiet look; the plus gets
   its own scale affordance so the two destinations read as distinct. */
.dashboard-credit-badge__balance {
  display: inline-flex;
  min-height: 40px;
  padding: 0 8px 0 14px;
  align-items: center;
  align-self: stretch;
  flex: 1 1 auto;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.dashboard-credit-badge__icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-credit-badge__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  min-height: 40px;
  align-self: stretch;
  color: inherit;
  text-decoration: none;
}

.dashboard-credit-badge__plus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  transition: transform 140ms ease;
}

.dashboard-credit-badge__plus:hover .dashboard-credit-badge__plus-icon {
  transform: scale(1.15);
}

.dashboard-credit-badge__balance:focus-visible,
.dashboard-credit-badge__plus:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: -3px;
}

.dashboard-navlink {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
}

.dashboard-navlink:hover {
  color: var(--accent);
}

.dashboard-navlink--button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-soft);
}

.dashboard-navlink--button:hover {
  border-color: var(--line-strong);
  color: var(--accent);
}

.dashboard-login-link {
  flex: 0 0 auto;
  justify-content: center;
}

.dashboard-page.portal-pricing-guest .dashboard-nav,
.dashboard-page.portal-pricing-guest .dashboard-menu-toggle {
  display: none;
}

.account-menu {
  position: relative;
}

.account-button {
  min-height: 54px;
  padding: 8px 13px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.account-button:hover {
  border-color: var(--line-strong);
  background: #fbfcfe;
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.06);
  transform: translateY(-1px);
}

.account-button__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
}

.account-button__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.account-button__meta strong {
  font-size: 14px;
  font-weight: 800;
}

.account-button__meta span {
  max-width: 200px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-button__caret {
  color: var(--muted-soft);
  font-size: 12px;
}

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(280px, calc(100vw - 24px));
  padding: 14px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-lg);
  z-index: 40;
}

.account-dropdown__summary {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-dropdown__summary strong {
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown__summary span {
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown__credits {
  display: flex;
  flex-direction: column;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--control-surface);
  color: var(--ink);
  overflow: hidden;
}

/* Line 1: the credit-subscription plan name, or — without one — the
   subscribe call-to-action. Always present so the box itself sells the
   subscription. Links to the plans page. */
.account-dropdown__credits-plan {
  display: flex;
  align-items: center;
  gap: 5px;
  /* 13px + the 1px box border = the menu buttons' 14px inset. */
  padding: 10px 13px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.account-dropdown__credits-plan:hover {
  color: var(--portal-accent);
}

.account-dropdown__credits-plan--upsell {
  color: var(--portal-accent);
}

/* Non-subscribers get a filled subscribe button under the pitch line,
   mirroring the purchase card pattern users know from other AI tools. */
.account-dropdown__credits-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 13px 11px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}

.account-dropdown__credits-subscribe:hover {
  background: var(--primary-cta-hover);
}

/* Line 2: balance on the left, Buy Credits on the right; links to the
   credit-purchase view. */
.account-dropdown__credits-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 13px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.account-dropdown__credits-row:hover {
  background: var(--portal-accent-soft-bg);
}

.account-dropdown__credits-amount {
  display: inline-flex;
  align-items: center;
  /* Same icon size and gap as .menu-button below, so the amount text starts
     exactly where the menu labels do. */
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.account-dropdown__credits-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-dropdown__credits-cta {
  min-width: 0;
  color: var(--portal-accent);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* AI output-storage usage line + capacity bar under the credits row. Hidden by
   portal.js when the server reports no cap (creditStorageUsage() === null).
   At the warning threshold it becomes a link to subscription plans. */
.account-dropdown__storage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px 13px 11px;
  border-top: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease;
}

.account-dropdown__storage--actionable {
  position: relative;
  padding-right: 32px;
  cursor: pointer;
}

.account-dropdown__storage--actionable::after {
  content: "›";
  position: absolute;
  top: 5px;
  right: 13px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.account-dropdown__storage--actionable:hover,
.account-dropdown__storage--actionable:focus-visible {
  background: var(--portal-accent-soft-bg);
}

.account-dropdown__storage--actionable:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: -3px;
}

.account-dropdown__storage-text {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-dropdown__storage-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.account-dropdown__storage-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--portal-accent);
  transition: width 0.3s ease;
}

/* Stage colors: keep capacity copy neutral and reserve alert color for the small bar/chevron.
   This signals urgency without turning the whole account menu into a destructive-looking state. */
.account-dropdown__storage--warn .account-dropdown__storage-fill { background: #d99516; }
.account-dropdown__storage--warn.account-dropdown__storage--actionable::after { color: #c8870b; }
.account-dropdown__storage--danger .account-dropdown__storage-fill { background: #e26761; }
.account-dropdown__storage--danger.account-dropdown__storage--actionable::after { color: #d6534d; }

.menu-button {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  /* 14px, not the inherited 16px: the dropdown's name line and credits row
     both sit at 14px, and menu items should not outweigh them. */
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.menu-button__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.menu-button:hover {
  background: var(--surface);
}

.menu-button--danger {
  color: var(--error-text);
}

.dashboard-hero {
  position: relative;
  margin-top: 18px;
  min-height: 150px;
  padding: 30px 188px 30px 36px;
  border: 1px solid rgba(216, 224, 234, 0.95);
  border-radius: 26px;
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.dashboard-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 6px;
  border-radius: 0 999px 999px 0;
  background: var(--portal-accent);
}

.dashboard-hero::after {
  display: none;
}

.dashboard-hero__art {
  position: absolute;
  right: 58px;
  top: 50%;
  z-index: 0;
  width: min(16%, 150px);
  min-width: 130px;
  transform: translateY(-50%);
  pointer-events: none;
}

.dashboard-hero__art img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 12px rgba(23, 32, 51, 0.12));
}

.dashboard-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: var(--portal-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.dashboard-copy {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  color: var(--accent-soft);
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.dashboard-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(280px, 0.54fr);
  gap: 24px;
  align-items: start;
}

.dashboard-card {
  position: relative;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fbfcfe;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  background: transparent;
}

.dashboard-card > * {
  position: relative;
  z-index: 1;
}

.dashboard-card--primary {
  min-height: 100%;
}

.dashboard-grid > .dashboard-card {
  position: sticky;
  top: 24px;
  padding: 24px;
}

.dashboard-grid > .dashboard-card .dashboard-card__title {
  font-size: 24px;
}

.dashboard-grid > .dashboard-card .dashboard-card__copy {
  margin-top: 14px;
  font-size: 14px;
}

.dashboard-license-panel {
  display: grid;
  gap: 16px;
  align-content: start;
}

.dashboard-license-panel__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.dashboard-license-toolbar {
  display: flex;
  min-height: 104px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px;
  border: 1px dashed #bdc8d6;
  border-radius: 20px;
  background: #fbfcfe;
}

.dashboard-license-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-refresh-button {
  min-height: 34px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.dashboard-refresh-button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: #f8fafc;
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.055);
  transform: translateY(-1px);
}

.dashboard-refresh-button:disabled {
  cursor: default;
  opacity: 0.52;
}

.dashboard-refresh-button--empty {
  margin-top: 18px;
  min-width: 108px;
}

.dashboard-add-license-button {
  min-width: 118px;
  min-height: 42px;
  padding: 0 22px;
  border-color: var(--line-strong);
  background: #fff;
  color: var(--accent);
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.055);
}

.dashboard-add-license-button:hover:not(:disabled) {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  color: #fff;
}

.dashboard-buy-license-button {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  color: #fff;
}

.dashboard-buy-license-button:hover:not(:disabled) {
  border-color: var(--portal-accent-hover);
  background: var(--portal-accent-hover);
  color: #fff;
}

.dashboard-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-card__action {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 100%;
  margin-left: auto;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.dashboard-card__action:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: #f8fafc;
}

.dashboard-card__eyebrow {
  margin: 0 0 10px;
  color: var(--portal-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dashboard-card__title {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.dashboard-card__copy {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.dashboard-status-pill {
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-status-pill[data-state="ready"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.dashboard-status-pill[data-state="error"] {
  background: var(--error-bg);
  color: var(--error-text);
}

.dashboard-license-empty {
  min-height: 340px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.dashboard-license-empty[data-state="error"] {
  border-color: rgba(167, 46, 46, 0.18);
  background: #fff8f8;
}

.dashboard-license-empty[data-state="loading"] {
  min-height: 132px;
  padding: 28px 24px;
  border-color: #ccd7e4;
  background: rgba(238, 242, 246, 0.72);
  box-shadow: none;
}

.dashboard-license-empty__title {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
}

.dashboard-license-empty[data-state="loading"] .dashboard-license-empty__title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--accent-soft);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
}

.dashboard-license-empty[data-state="loading"] .dashboard-license-empty__title::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1.7px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.72;
  animation: credits-alert-spin 0.8s linear infinite;
}

.dashboard-license-empty[data-state="error"] .dashboard-license-empty__title {
  color: var(--error-text);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.dashboard-license-empty__copy {
  margin: 12px 0 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.dashboard-license-groups {
  display: grid;
  gap: 20px;
}

.dashboard-section-eyebrow,
.dashboard-license-groups__eyebrow {
  display: inline-flex;
  margin: 0 0 14px;
  min-height: 24px;
  align-items: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--portal-accent);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.dashboard-license-group {
  position: relative;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-md);
  overflow: visible;
}

.dashboard-license-group::before {
  display: none;
}

.dashboard-license-group::after {
  display: none;
}

.dashboard-license-group > * {
  position: relative;
  z-index: 1;
}

.dashboard-license-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.dashboard-license-group__tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.dashboard-license-group-refresh {
  min-width: 88px;
  min-height: 36px;
  border-color: var(--line-strong);
  border-radius: 8px;
}

.dashboard-license-group__title {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.05em;
}

.dashboard-license-count {
  min-width: 42px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.dashboard-license-list {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.dashboard-license-list__empty {
  margin: 0;
  padding: 28px 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.dashboard-license-list__empty-copy {
  margin: 0;
}

.dashboard-license-list__empty-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
}

.dashboard-license-item {
  position: relative;
  padding: 18px 18px 18px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.dashboard-license-item--expired {
  border-color: rgba(205, 55, 45, 0.28);
}

.dashboard-license-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 999px;
  background: var(--portal-accent);
  opacity: 0.82;
}

.dashboard-license-item:hover {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.065);
  transform: translateY(-1px);
}

.dashboard-license-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-license-item__title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-license-item__title-text {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-license-item__product {
  width: 24px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 5px 8px rgba(23, 32, 51, 0.12));
}

.dashboard-license-item__product-stack {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.dashboard-license-item__product-stack .dashboard-license-item__product + .dashboard-license-item__product {
  margin-left: -6px;
}

.dashboard-license-item--subscription::before {
  background: var(--accent);
}

.dashboard-license-item--subscription {
  overflow: visible;
}

.dashboard-license-audience-badge.dashboard-license-audience-badge--subscription {
  border-color: rgba(0, 119, 182, 0.24);
  background: #e8f7fb;
  color: #0077b6;
}

.dashboard-license-item__name {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.dashboard-license-remove-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(205, 55, 45, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--error-text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.dashboard-license-remove-button:hover {
  border-color: rgba(205, 55, 45, 0.32);
  background: var(--error-bg);
  transform: translateY(-1px);
}

.dashboard-license-remove-button:disabled {
  cursor: default;
  opacity: 0.5;
  transform: none;
}

.dashboard-license-audience-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
}

.dashboard-license-audience-badge--business {
  border-color: rgba(112, 74, 190, 0.22);
  background: #f4efff;
  color: #704abe;
}

.dashboard-license-market-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid rgba(42, 94, 178, 0.22);
  border-radius: 999px;
  background: #eef5ff;
  color: #2a5eb2;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1;
}

.dashboard-license-item__meta {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: #f8fafc;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: nowrap;
}

.dashboard-license-item__field {
  min-width: 0;
}

.dashboard-license-item__field dt {
  margin: 0;
  color: var(--muted-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dashboard-license-item__field dd {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  word-break: break-word;
}

.dashboard-license-item__field--copyable dd {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-license-item__field--with-badge dd {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-license-item__value {
  min-width: 0;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-license-item__field--serial .dashboard-license-item__value {
  color: #475569;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.dashboard-license-item__field--count dd {
  display: flex;
  justify-content: flex-end;
}

.dashboard-license-item__value--count {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-license-item__value--masked {
  margin: 0 -3px;
  padding: 0 3px;
  cursor: pointer;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  transition: color 140ms ease, background 140ms ease;
}

.dashboard-license-item__value--masked[data-revealed="false"] {
  color: #64748b;
  letter-spacing: 0;
}

.dashboard-license-item__value--masked:hover,
.dashboard-license-item__value--masked:focus-visible {
  background: rgba(34, 48, 74, 0.08);
  color: var(--ink);
  outline: none;
}

.dashboard-license-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dashboard-license-badge--expired {
  background: var(--error-bg);
  color: var(--error-text);
  border: 1px solid rgba(205, 55, 45, 0.16);
  font-weight: 900;
}

.dashboard-license-badge--expiration-date {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid rgba(154, 52, 18, 0.18);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.dashboard-license-badge--renew {
  background: rgba(214, 238, 226, 0.9);
  color: #245a36;
  border: 1px solid rgba(36, 90, 54, 0.16);
  white-space: nowrap;
}

.dashboard-license-badge--renew-inactive {
  background: #ececec;
  color: #747474;
  border-color: rgba(91, 91, 91, 0.18);
}

.dashboard-license-auto-renew-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.dashboard-license-auto-renew-button:hover {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--ink);
  transform: translateY(-1px);
}

.dashboard-license-auto-renew-button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.dashboard-license-auto-renew-button__icon {
  width: 14px;
  height: 14px;
  display: block;
}

.dashboard-license-item__meta > .dashboard-license-item__field:last-child {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
}

.dashboard-license-item__meta > .dashboard-license-item__field:first-child {
  flex: 1 1 0;
}

.dashboard-license-item__meta > .dashboard-license-item__field:nth-child(2) {
  flex: 0 0 320px;
}

.dashboard-license-item__meta--subscription {
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-license-item__meta--subscription > .dashboard-license-item__field:first-child,
.dashboard-license-item__meta--subscription > .dashboard-license-item__field:nth-child(2),
.dashboard-license-item__meta--subscription > .dashboard-license-item__field:last-child {
  margin-left: 0;
  text-align: left;
}

.dashboard-license-item__meta--subscription > .dashboard-license-item__field:first-child {
  flex: 0 0 250px;
}

.dashboard-license-item__meta--subscription > .dashboard-license-item__field:nth-child(2) {
  flex: 1 1 auto;
}

.dashboard-license-item__meta--subscription > .dashboard-license-item__field.dashboard-license-item__field--status {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

.dashboard-subscription-devices {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: #fbfcfe;
}

.dashboard-subscription-devices__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dashboard-subscription-devices__header h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.dashboard-subscription-devices__limit {
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-subscription-devices__list {
  display: grid;
  gap: 8px;
}

.dashboard-subscription-devices__empty {
  margin: 0;
  padding: 16px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.dashboard-subscription-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(216, 224, 234, 0.82);
  border-radius: 12px;
  background: #fff;
}

.dashboard-subscription-device__body { min-width: 0; }

.dashboard-subscription-device__title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-subscription-device__title strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.dashboard-subscription-device__status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.dashboard-subscription-device__status[data-state="running"] {
  border-color: rgba(36, 90, 54, 0.18);
  background: rgba(214, 238, 226, 0.9);
  color: #245a36;
}

.dashboard-subscription-device__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 8px 0 0;
}

.dashboard-subscription-device__field dt {
  margin: 0;
  color: var(--muted-soft);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-subscription-device__field dd {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

.dashboard-subscription-device__button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(205, 55, 45, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--error-text);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-subscription-device__button:hover:not(:disabled) {
  border-color: rgba(205, 55, 45, 0.32);
  background: var(--error-bg);
}

.dashboard-subscription-device__button:disabled {
  cursor: default;
  opacity: 0.56;
}

@media (max-width: 760px) {
  .dashboard-subscription-devices__header,
  .dashboard-subscription-device {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .dashboard-subscription-devices__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-subscription-device__button {
    width: 100%;
  }
}

.dashboard-license-item__extra {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: #fbfcfe;
  display: flex;
  align-items: center;
  gap: 18px;
}

.dashboard-license-item__extra .dashboard-license-item__field dd {
  color: var(--muted);
  font-weight: 500;
}

.dashboard-license-item__extra .dashboard-license-item__field {
  flex: 0 0 auto;
}

.dashboard-license-item__extra > .dashboard-license-item__field--status {
  margin-left: 22px;
}

.dashboard-license-item__field--status dd {
  color: var(--accent);
  font-weight: 800;
}

.dashboard-license-item__value--status {
  color: var(--accent);
  font-weight: 900;
}

.dashboard-license-item__actions {
  margin-left: auto;
  padding-top: 0;
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.dashboard-license-item__actions--subscription {
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-license-download-menu {
  position: relative;
  z-index: 30;
}

.dashboard-license-download-menu[open] {
  z-index: 80;
}

.dashboard-license-download-menu__button {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.dashboard-license-download-menu__button::-webkit-details-marker {
  display: none;
}

.dashboard-license-download-menu__list {
  position: absolute;
  top: auto;
  bottom: calc(100% + 8px);
  right: 0;
  z-index: 80;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(23, 32, 51, 0.16);
}

.dashboard-license-download-menu__item {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.dashboard-license-download-menu__item:hover,
.dashboard-license-download-menu__item:focus {
  background: #f3f6fa;
  color: var(--portal-accent);
  outline: none;
}

.dashboard-license-item > .dashboard-license-item__actions {
  margin-top: 12px;
}

.dashboard-license-item__extra .dashboard-license-item__actions + .dashboard-license-item__actions {
  margin-left: 0;
}

.dashboard-license-item__actions--standalone {
  margin-left: 0;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(216, 224, 234, 0.72);
  border-radius: 14px;
  background: #fbfcfe;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-license-upgrade-message {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
}

.dashboard-license-renew-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.dashboard-license-renew-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.16);
}

.dashboard-license-upgrade-button {
  background: var(--portal-accent);
}

.dashboard-license-download-button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--accent);
}

.dashboard-license-download-button:hover {
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.1);
}

.dashboard-copy-button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease, color 140ms ease, border-color 140ms ease;
}

.dashboard-copy-button__icon {
  width: 14px;
  height: 14px;
  display: block;
}

.dashboard-license-item__field--copyable:hover .dashboard-copy-button,
.dashboard-license-item__field--copyable:focus-within .dashboard-copy-button {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.dashboard-copy-button[data-state="done"] {
  color: var(--success-text);
  border-color: rgba(36, 90, 54, 0.22);
}

.dashboard-note {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fbfcfe;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.copy-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(23, 32, 51, 0.96);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.16);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  z-index: 1200;
}

.copy-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.account-license-summary {
  margin: 20px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.account-license-summary--main {
  margin: 0;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.account-license-summary__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.account-license-summary__header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  flex-direction: column;
}

.credits-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Sized down to sit beside the compact refresh button in the card header
   rather than at the full-page CTA height primary-auth-button ships with. */
.credits-summary-actions .credits-buy-button {
  width: auto;
  height: 38px;
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.credits-buy-button__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-license-summary__header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.account-license-summary__header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.account-license-summary__grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-license-summary--main .account-license-summary__grid {
  margin-top: 18px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.account-license-summary__item {
  appearance: none;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.account-license-summary--main .account-license-summary__item {
  padding: 14px;
  border-radius: 16px;
}

.account-license-summary__item:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: 0 8px 18px rgba(23, 32, 51, 0.055);
  transform: translateY(-1px);
}

.account-license-summary__item:focus-visible {
  outline: 3px solid var(--portal-accent-focus);
  outline-offset: 2px;
}

.account-license-summary__item.is-active {
  border-color: var(--portal-accent-border);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--portal-accent-border), 0 10px 24px rgba(23, 32, 51, 0.065);
}

.account-license-summary__item:disabled {
  cursor: default;
  opacity: 0.62;
  transform: none;
}

.account-license-summary__item span {
  display: block;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-license-summary__item strong {
  display: block;
  margin-top: 6px;
  color: var(--portal-accent);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.account-details {
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
}

.account-details__item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.account-details__separator {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

.account-details__item dt {
  margin: 0 0 6px;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.account-details__item dd {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  word-break: break-word;
}

.profile-modal {
  position: fixed;
  inset: 0;
  padding: 24px;
  background: rgba(23, 32, 51, 0.18);
  display: grid;
  place-items: center;
  z-index: 140;
}

.profile-modal__card {
  width: min(100%, 480px);
  padding: 28px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.profile-modal__card--wide {
  width: min(100%, 620px);
}

.profile-modal__card--buy {
  width: min(100%, 540px);
}

.profile-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.profile-modal__title {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.profile-modal__copy {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.profile-modal__card > form {
  margin-top: 16px;
}

.profile-modal__separator {
  height: 1px;
  margin: 4px 0 16px;
  background: var(--line);
}

.account-danger-zone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.account-danger-zone p {
  flex: 1 1 auto;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.account-danger-zone__status[data-tone="success"] {
  color: var(--success-text);
  font-weight: 800;
}

.account-danger-zone__status[data-tone="error"] {
  color: var(--danger-text);
  font-weight: 800;
}

.account-danger-zone__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ai-tools-catalog {
  display: grid;
  gap: 34px;
}

.ai-tools-catalog__header,
.ai-tools-section__header {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}

.ai-tools-catalog__header {
  justify-content: space-between;
}

.ai-tools-section__header {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px 30px;
}

.ai-tools-catalog__header p,
.ai-tools-section__header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.ai-tools-section__header p {
  margin: 0;
}

.ai-tools-section {
  display: grid;
  gap: 18px;
}

.ai-tools-section + .ai-tools-section {
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.ai-tools-section__header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.ai-tool-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr));
  justify-content: start;
  gap: 16px;
}

.ai-tool-card {
  width: 100%;
  min-width: 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.ai-tool-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ai-tool-card__top h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.ai-tool-card__model {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  word-break: break-word;
}

.ai-tool-card__copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.ai-tool-card__cost {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(35, 53, 76, 0.1);
  border-radius: 8px;
  background: #f7f9fc;
  color: #23354c;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.ai-tool-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.ai-tool-card__actions .subtle-button,
.ai-tool-card__actions .primary-auth-button {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.2;
}

.ai-tool-modal__card.profile-modal__card--wide {
  position: relative;
  width: min(100%, 780px);
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.ai-tool-modal__card.is-image-drop-active::before,
.ai-tool-modal__card.is-image-drop-active::after {
  pointer-events: none;
}

.ai-tool-modal__card.is-image-drop-active::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  border: 2px dashed var(--ai-accent-border);
  border-radius: 12px;
  background: rgba(246, 250, 254, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 18px 54px rgba(23, 32, 51, 0.18);
  backdrop-filter: blur(2px);
}

.ai-tool-modal__card.is-image-drop-active::after {
  content: attr(data-drop-label);
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  min-width: min(340px, calc(100% - 72px));
  padding: 20px 28px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(34, 101, 180, 0.22);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--portal-card-shadow-hover);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
  text-align: center;
}

.ai-tool-modal__card.is-image-drop-active {
  outline: 2px solid var(--ai-accent-border);
  outline-offset: 6px;
}

.ai-tool-modal .ai-tools-form {
  padding: 22px 0 0;
}

.ai-tool-modal__summary {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.ai-tool-modal__summary dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.ai-tool-modal__summary dt {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ai-tool-modal__summary dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  word-break: break-word;
}

.ai-tools-toggle {
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.ai-tools-toggle__label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-tools-toggle__switch-label {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ai-tools-audio-toggle {
  grid-column: 1 / -1;
  min-height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  cursor: default;
}

.ai-tools-audio-toggle:hover {
  background: transparent;
}

.ai-tools-toggle__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.ai-tools-toggle__switch {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  box-shadow: none;
  pointer-events: none;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.ai-tools-toggle__switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.18);
  transition: transform 140ms ease;
}

.ai-tools-toggle__input:checked + .ai-tools-toggle__switch {
  background: var(--switch-on-bg);
  box-shadow: 0 6px 14px rgba(109, 93, 252, 0.24);
}

.ai-tools-toggle__input:checked + .ai-tools-toggle__switch::before {
  transform: translateX(18px);
}

.ai-tools-toggle:focus-within {
  border-color: rgba(54, 116, 188, 0.62);
  box-shadow: 0 0 0 3px rgba(69, 128, 199, 0.16);
}

.ai-tools-audio-toggle:focus-within {
  box-shadow: none;
}

.ai-tools-toggle__input:focus-visible + .ai-tools-toggle__switch {
  box-shadow: 0 0 0 3px rgba(69, 128, 199, 0.18);
}

.ai-tools-toggle:has(.ai-tools-toggle__input:disabled) {
  cursor: default;
  opacity: 0.66;
}

.ai-tool-modal__result {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.ai-tools-layout,
.ai-jobs-layout {
  display: grid;
  gap: 24px;
}

.ai-tools-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  align-items: start;
}

.dashboard-page.ai-tools-page {
  --ai-tool-generation-panel-width: 480px;
  --ai-tool-workspace-gap: 24px;
}

.ai-tool-workspace {
  grid-template-columns: minmax(var(--ai-tool-generation-panel-width, 480px), var(--ai-tool-generation-panel-width, 480px)) minmax(0, 1fr);
  gap: var(--ai-tool-workspace-gap, 24px);
  align-items: stretch;
}

/* Keep the creation panel width independent from model kind or AI tool type. */
.ai-tools-page .ai-tool-workspace {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(var(--ai-tool-generation-panel-width), var(--ai-tool-generation-panel-width)) minmax(0, 1fr);
  gap: var(--ai-tool-workspace-gap);
}

.ai-tools-page .ai-tool-settings-panel,
.ai-tools-page .ai-video-results-panel {
  min-width: 0;
  width: 100%;
}

@media (min-width: 1121px) {
  .dashboard-page.ai-tool-detail-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    grid-template-columns: minmax(var(--ai-tool-generation-panel-width), var(--ai-tool-generation-panel-width)) minmax(0, 1fr);
  }
}

.ai-jobs-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.6fr);
  align-items: start;
}

.ai-tools-panel,
.ai-tools-result,
.ai-jobs-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: var(--shadow-md);
}

.ai-tools-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 28px;
  border-bottom: 1px solid var(--line);
}

.ai-tools-panel__header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.ai-tools-panel__header h3,
.ai-video-results-panel h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.ai-tool-settings-panel {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-video-mode-tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 18px 22px 0;
  padding: 4px;
  border: 1px solid rgba(86, 101, 122, 0.14);
  border-radius: 8px;
  background: var(--page-bg);
  box-shadow: none;
}

.ai-tool-mode-tabs--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-tool-mode-note {
  flex: 0 0 auto;
  margin: 8px 22px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--accent-soft);
}

.ai-tool-mode-note[hidden] {
  display: none;
}

.ai-video-mode-tab {
  min-width: 0;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ai-video-mode-tab:disabled {
  cursor: default;
  opacity: 0.58;
}

.ai-video-mode-tab:hover {
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}

.ai-video-mode-tab:disabled:hover {
  background: transparent;
  color: var(--accent-soft);
}

.ai-video-mode-tab:focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.34);
  outline-offset: 2px;
}

.ai-video-mode-tab[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  box-shadow:
    inset 0 0 0 1px rgba(86, 101, 122, 0.22),
    inset 0 -1px 0 rgba(86, 101, 122, 0.12);
}

.ai-tool-settings-panel .ai-tools-panel__header {
  padding: 22px;
  background: var(--surface);
}

.ai-tool-settings-panel .ai-tools-form {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.ai-video-form-scroll {
  --ai-video-form-padding-top: 18px;
  --ai-video-form-padding-x: 22px;
  --ai-video-form-padding-bottom: 16px;
  --ai-video-native-scrollbar-width: 10px;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  overflow-x: visible;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding:
    var(--ai-video-form-padding-top)
    max(0px, calc(var(--ai-video-form-padding-x) - var(--ai-video-native-scrollbar-width)))
    var(--ai-video-form-padding-bottom)
    var(--ai-video-form-padding-x);
  scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.ai-video-form-scroll::-webkit-scrollbar {
  width: 10px;
}

.ai-video-form-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ai-video-form-scroll::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.34);
}

.ai-video-form-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.52);
}

.ai-video-form-scrollbar {
  position: absolute;
  width: 10px;
  z-index: 18;
  border-radius: 999px;
  pointer-events: none;
  background: transparent;
}

.ai-video-form-scrollbar[hidden] {
  display: none;
}

.ai-video-form-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  min-height: 44px;
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.36);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ai-floating-popup-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
}

.ai-floating-popup-layer[hidden] {
  display: none;
}

.ai-floating-popup-layer > .ai-model-picker__menu,
.ai-floating-popup-layer > .ai-video-options-popover,
.ai-floating-popup-layer > .ai-voice-preset-menu,
.ai-floating-popup-layer > .ai-video-prompt-optimizing {
  position: absolute;
  inset: 0;
  z-index: 42;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  pointer-events: auto;
}

.ai-video-prompt-optimizing[hidden] {
  display: none;
}
.ai-video-prompt-editor > .ai-video-prompt-optimizing {
  position: absolute;
  top: 0;
  right: 0;
  bottom: var(--ai-video-prompt-toolbar-height);
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(1px);
}

.ai-video-prompt-editor > .ai-video-prompt-optimizing span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-video-prompt-editor.is-optimizing .ai-tools-textarea,
.ai-video-prompt-editor.is-optimizing .ai-video-prompt-toolbar {
  opacity: 0.44;
}

.ai-video-prompt-optimizing__spinner {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid rgba(103, 83, 241, 0.22);
  border-top-color: #6753f1;
  border-radius: 999px;
  animation: aiPromptOptimizeSpin 780ms linear infinite;
}

@keyframes aiPromptOptimizeSpin {
  to {
    transform: rotate(360deg);
  }
}

.ai-video-prompt-media-popover {
  pointer-events: auto;
}

.ai-model-picker__menu.is-floating,
.ai-video-options-popover.is-floating,
.ai-voice-preset-menu.is-floating,
.ai-video-prompt-media-popover.is-floating {
  position: fixed;
  right: auto;
  bottom: auto;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
}

.ai-floating-popup-layer > .ai-model-picker__menu.is-floating {
  display: block;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  padding: 10px;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  overscroll-behavior: contain;
}

.ai-floating-popup-layer > .ai-model-picker__menu.is-floating .ai-model-picker__section,
.ai-floating-popup-layer > .ai-model-picker__menu.is-floating .ai-model-option {
  width: 100%;
  box-sizing: border-box;
}

.ai-floating-popup-layer > .ai-video-options-popover.is-floating {
  display: block;
  align-items: initial;
  justify-content: initial;
  gap: 0;
  padding: 14px;
  background: #fff;
  color: var(--ink);
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}

.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-options-popover__content,
.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-options-group,
.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-options-choices,
.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-duration-slider {
  width: 100%;
  box-sizing: border-box;
}

.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-options-group {
  align-items: stretch;
}

.ai-floating-popup-layer > .ai-video-options-popover.is-floating .ai-video-options-group h4 {
  text-align: left;
}

.ai-floating-popup-layer > .ai-voice-preset-menu.is-floating {
  display: grid;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}

.ai-floating-popup-layer > .ai-voice-preset-menu.is-floating .ai-voice-preset-menu__voices,
.ai-floating-popup-layer > .ai-voice-preset-menu.is-floating .ai-voice-preset-option,
.ai-floating-popup-layer > .ai-voice-preset-menu.is-floating .ai-voice-preset-option__select {
  width: 100%;
  box-sizing: border-box;
}

.ai-tool-settings-panel .ai-tool-modal__summary {
  padding: 14px;
}

.ai-tool-settings-panel .ai-tool-modal__summary dl {
  grid-template-columns: 1fr;
  gap: 12px;
}

.ai-tool-settings-panel .ai-tools-form__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-tool-settings-panel .ai-tools-form > .field-block,
.ai-video-form-scroll > .field-block,
.ai-tool-settings-panel .ai-tools-form__grid > .field-block {
  margin-bottom: 10px;
}

.ai-video-control-source {
  display: none;
}

.ai-video-options-field {
  position: relative;
  z-index: 12;
  grid-column: 1 / -1;
}

.ai-video-options-note {
  grid-column: 1 / -1;
  margin: -2px 6px 0;
}

.ai-tools-extra-options {
  grid-column: 1 / -1;
  display: grid;
  gap: 11px;
  margin-bottom: 10px;
}

.ai-tools-extra-options[hidden] {
  display: none !important;
}

.ai-tools-extra-options > .ai-tool-option-help {
  margin: -3px 6px 0;
}

.ai-tools-extra-option-group {
  gap: 7px;
}

.ai-tools-extra-options .ai-video-options-choices {
  min-height: 38px;
}

.ai-tools-extra-options .ai-video-option-choice {
  min-height: 32px;
  padding-block: 6px;
}

.ai-tools-extra-options .ai-clarity-mode-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice {
  min-height: 42px;
  justify-content: flex-start;
  padding: 10px 12px;
  border-color: var(--line);
  background: var(--panel-bg);
  color: var(--brand-slate);
  font-size: 14px;
  font-weight: 760;
  text-align: left;
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.035);
}

.ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice:hover {
  border-color: rgba(54, 116, 188, 0.28);
  background: #f8fafc;
  color: var(--accent);
}

.ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice[aria-pressed="true"] {
  border-color: rgba(54, 116, 188, 0.34);
  background: #edf4ff;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(54, 116, 188, 0.08);
}

.ai-clarity-mode-description {
  margin: 2px 2px 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted);
}

.ai-clarity-mode-description[hidden] {
  display: none;
}

.ai-tools-extra-options .ai-video-setting-icon--quality {
  display: none;
}

.ai-tools-body-line-toggle {
  min-height: 30px;
  padding: 2px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: default;
}

.ai-tools-body-line-toggle .ai-tools-toggle__label {
  color: var(--ink);
  font-weight: 600;
}

.ai-video-options-group--inline-toggle {
  gap: 0;
}

.ai-tools-body-line-toggle--inline-label .ai-tools-toggle__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-tools-body-line-toggle:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.ai-video-option-choice:disabled {
  cursor: default;
  opacity: 0.58;
}

.ai-video-options-button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--brand-slate);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.ai-video-options-button:hover,
.ai-video-options-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: #fff;
}

.ai-video-options-button[aria-expanded="true"] {
  border-color: rgba(79, 98, 128, 0.46);
  box-shadow:
    0 0 0 3px rgba(79, 98, 128, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ai-video-options-button:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-video-options-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ai-video-options-button__summary {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
}

.ai-group-photo-background-button__summary {
  min-width: 0;
  display: block;
  overflow: hidden;
  color: var(--brand-slate);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-options-summary-item {
  min-width: 0;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--brand-slate);
  font-size: 14px;
  font-weight: 680;
  line-height: 1.2;
  white-space: nowrap;
}

.ai-video-options-summary-item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-video-options-summary-separator {
  width: 1px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--line);
}

.ai-video-options-button__chevron {
  position: relative;
  width: 16px;
  height: 16px;
}

.ai-video-options-button__chevron::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 140ms ease, top 140ms ease;
}

.ai-video-options-button[aria-expanded="true"] .ai-video-options-button__chevron::before {
  top: 7px;
  transform: rotate(225deg);
}

.ai-video-options-popover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 40;
  max-height: min(500px, calc(100vh - 160px));
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(79, 98, 128, 0.42);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 24px 64px rgba(23, 32, 51, 0.20),
    0 0 0 4px rgba(79, 98, 128, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  scrollbar-color: rgba(86, 101, 122, 0.32) transparent;
  scrollbar-width: thin;
}

.ai-video-options-popover:not([hidden]):not(.is-closing) {
  animation: aiVideoOptionsPopoverIn 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: center top;
}

.ai-video-options-popover.is-closing {
  pointer-events: none;
  animation: aiVideoOptionsPopoverOut 140ms cubic-bezier(0.4, 0, 1, 1) both;
  transform-origin: center top;
}

.ai-video-options-popover[data-placement="top"]:not([hidden]) {
  transform-origin: center bottom;
}

@keyframes aiVideoOptionsPopoverIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiVideoOptionsPopoverOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

.ai-video-options-popover::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.ai-video-options-popover::-webkit-scrollbar-track {
  background: transparent;
}

.ai-video-options-popover::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.34);
}

.ai-video-options-popover::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.52);
}

.ai-video-options-popover__content {
  display: grid;
  gap: 14px;
}

.ai-video-options-group {
  display: grid;
  gap: 7px;
}

.ai-video-options-group + .ai-video-options-group {
  margin-top: 6px;
}

.ai-video-options-group h4 {
  margin: 0;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.ai-video-options-choices {
  display: grid;
  grid-template-columns: repeat(var(--ai-video-option-count, 3), minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
}

.ai-group-photo-background-choices {
  grid-template-columns: minmax(0, 1fr);
}

.ai-group-photo-background-option {
  justify-content: flex-start;
  padding-inline: 12px;
  text-align: left;
}

.ai-video-duration-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
}

.ai-video-duration-slider__value {
  min-width: 3ch;
  color: var(--accent);
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  text-align: right;
}

.ai-video-duration-slider__range {
  width: 100%;
  height: 22px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.ai-video-duration-slider__range:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-video-duration-slider__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

.ai-video-duration-slider__range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2e3a57;
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.22);
  appearance: none;
  -webkit-appearance: none;
}

.ai-video-duration-slider__range::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

.ai-video-duration-slider__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.ai-video-duration-slider__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #2e3a57;
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.22);
}

.ai-body-adjustment-slider {
  grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
  padding: 2px 0 4px;
  border: 0;
  background: transparent;
}

.ai-body-adjustment-slider__value {
  min-width: 78px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.ai-body-adjustment-slider__hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-body-adjustment-slider__hint[hidden] {
  display: none;
}

.ai-body-adjustment-slider__range::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

.ai-body-adjustment-slider__range::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

.ai-body-adjustment-slider__range::-moz-range-progress {
  height: 3px;
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

.ai-voice-speed-slider {
  background: transparent;
}

.ai-voice-speed-slider__range {
  background: transparent;
}

.ai-voice-speed-slider__range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4777f4 0 var(--ai-duration-progress, 0%), rgba(94, 103, 116, 0.22) var(--ai-duration-progress, 0%) 100%);
}

.ai-voice-speed-slider__range::-moz-range-track {
  background: rgba(94, 103, 116, 0.22);
}

.ai-video-option-choice {
  min-width: 0;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.ai-video-option-choice:hover {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.48);
}

.ai-video-option-choice[aria-pressed="true"] {
  border-color: var(--line-strong);
  background: var(--panel-bg);
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.045);
}

.ai-video-option-choice__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-options-choices--aspect .ai-video-option-choice {
  min-height: 50px;
  display: grid;
  grid-template-rows: 20px 14px;
  align-content: center;
  justify-items: center;
  row-gap: 3px;
  padding: 8px 6px;
}

.ai-video-options-choices--aspect .ai-video-setting-icon--aspect {
  width: var(--ai-aspect-icon-width, 21px);
  height: var(--ai-aspect-icon-height, 12px);
  align-self: center;
}

.ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="tall"] {
  width: var(--ai-aspect-icon-width, 12px);
  height: var(--ai-aspect-icon-height, 21px);
}

.ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="square"] {
  width: var(--ai-aspect-icon-width, 17px);
  height: var(--ai-aspect-icon-height, 17px);
}

.ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="auto"] {
  width: 19px;
  height: 19px;
}

.ai-video-options-choices--aspect .ai-video-option-choice__text {
  min-width: 4.5ch;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.ai-video-setting-icon {
  position: relative;
  flex: 0 0 auto;
  color: currentColor;
}

.ai-video-setting-icon--duration {
  width: 20px;
  height: 20px;
  border: 1.7px solid currentColor;
  border-radius: 999px;
}

.ai-video-setting-icon--duration::before,
.ai-video-setting-icon--duration::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.6px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 100%;
}

.ai-video-setting-icon--duration::before {
  height: 5px;
  transform: translate(-50%, -100%);
}

.ai-video-setting-icon--duration::after {
  height: 6px;
  transform: translate(-50%, -100%) rotate(48deg);
}

.ai-video-setting-icon--resolution {
  min-width: 31px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.7px solid currentColor;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.ai-video-setting-icon--resolution[data-audio-stability] {
  width: 22px;
  min-width: 22px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: currentColor;
  font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

.ai-video-setting-icon--aspect,
.ai-video-setting-icon--image-size {
  width: var(--ai-aspect-icon-width, 24px);
  height: var(--ai-aspect-icon-height, 14px);
  display: inline-block;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}

.ai-video-setting-icon--aspect[data-aspect-shape="tall"],
.ai-video-setting-icon--image-size[data-aspect-shape="tall"] {
  width: var(--ai-aspect-icon-width, 14px);
  height: var(--ai-aspect-icon-height, 24px);
}

.ai-video-setting-icon--aspect[data-aspect-shape="square"],
.ai-video-setting-icon--image-size[data-aspect-shape="square"] {
  width: var(--ai-aspect-icon-width, 19px);
  height: var(--ai-aspect-icon-height, 19px);
}

.ai-video-setting-icon--aspect[data-aspect-shape="auto"],
.ai-video-setting-icon--image-size[data-aspect-shape="auto"] {
  width: 22px;
  height: 22px;
  border: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='10' height='10' rx='2.2'/%3E%3Crect x='8' y='4' width='15' height='15' rx='2.8'/%3E%3Cpath d='M14 8h5v5'/%3E%3Cpath d='M19 8l-7 7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='10' height='10' rx='2.2'/%3E%3Crect x='8' y='4' width='15' height='15' rx='2.8'/%3E%3Cpath d='M14 8h5v5'/%3E%3Cpath d='M19 8l-7 7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.ai-video-setting-icon--quality {
  width: 20px;
  height: 18px;
  display: inline-block;
  border: 1.7px solid currentColor;
  border-radius: 4px;
}

.ai-video-setting-icon--quality::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 4px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.ai-video-setting-icon--quality::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 100%, 34% 34%, 53% 62%, 78% 18%, 100% 100%);
  opacity: 0.78;
}

.ai-video-setting-icon--aspect[data-audio-gender],
.ai-video-setting-icon--quality[data-audio-voice] {
  width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.7px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.ai-video-setting-icon--quality[data-audio-voice]::before,
.ai-video-setting-icon--quality[data-audio-voice]::after {
  content: none;
}

.ai-video-setting-icon--imageCount[data-audio-emotion] {
  width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.7px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.ai-video-setting-icon--imageCount[data-audio-emotion]::before {
  content: none;
}

.ai-video-setting-icon--imageCount {
  min-width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 1.7px solid currentColor;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: 0;
}

.ai-video-setting-icon--imageCount::before {
  content: attr(data-count);
}


.ai-tool-settings-panel .ai-tools-textarea {
  height: 116px;
  min-height: 108px;
}

.ai-tool-group-photo-page .ai-tools-prompt-field {
  display: none;
}

.ai-tools-prompt-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-tools-prompt-toggle[hidden],
.ai-tools-prompt-body[hidden] {
  display: none;
}

.ai-tools-prompt-toggle {
  margin-left: auto;
}

.ai-tools-prompt-body {
  display: grid;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    transform 220ms ease;
}

.ai-tools-prompt-body.is-open {
  max-height: 420px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ai-tool-motion-control-page .ai-tools-prompt-body.is-open {
  margin-top: 8px;
}

.ai-tools-prompt-body.is-open:focus-within {
  overflow: visible;
}

.ai-video-prompt-editor {
  --ai-video-prompt-bg: var(--control-surface);
  --ai-video-prompt-toolbar-height: 34px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 128px;
  min-height: 118px;
  overflow: hidden;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ai-video-prompt-bg);
  box-shadow: inset 0 1px 0 rgba(23, 32, 51, 0.015);
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.ai-video-prompt-editor::-webkit-resizer {
  width: 18px;
  height: 18px;
  background-color: var(--ai-video-prompt-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M6 14l8-8M10 14l4-4' fill='none' stroke='%2356657a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.ai-video-prompt-editor .ai-tools-textarea {
  flex: 1 1 auto;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 18px 30px 10px 18px;
  border: 0;
  border-radius: 0;
  background: var(--ai-video-prompt-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  box-shadow: none;
  overflow: auto;
  resize: none;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(86, 101, 122, 0.38) var(--ai-video-prompt-bg);
  scrollbar-width: thin;
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-corner {
  background: var(--ai-video-prompt-bg);
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-resizer {
  display: none;
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-track {
  background: var(--ai-video-prompt-bg);
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 3px solid var(--ai-video-prompt-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.38);
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.54);
}

.ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.ai-video-prompt-editor .ai-tools-textarea::placeholder {
  color: var(--muted-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.82;
}

.ai-video-prompt-editor:hover {
  --ai-video-prompt-bg: #f3f6fa;
  border-color: var(--line-strong);
  background: var(--ai-video-prompt-bg);
}

.ai-video-prompt-editor:focus-within {
  --ai-video-prompt-bg: #fff;
  border-color: rgba(86, 101, 122, 0.34);
  background: var(--ai-video-prompt-bg);
  box-shadow: 0 0 0 3px rgba(94, 117, 148, 0.12);
}

.ai-video-prompt-editor .ai-tools-textarea:focus {
  outline: none;
  background: var(--ai-video-prompt-bg);
  box-shadow: none;
}

.ai-video-prompt-editor.is-over-limit {
  --ai-video-prompt-bg: #fff;
  border-color: #ff5f69;
  background: var(--ai-video-prompt-bg);
  box-shadow: 0 0 0 3px rgba(255, 95, 105, 0.14);
}

.ai-video-prompt-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 34px;
  padding: 2px 24px 8px 14px;
  background: var(--ai-video-prompt-bg);
  pointer-events: none;
}

.ai-video-prompt-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-video-prompt-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.ai-video-prompt-count.is-over-limit {
  color: #ef4444;
}

.ai-video-prompt-clear,
.ai-video-prompt-undo,
.ai-video-prompt-media-button,
.ai-video-prompt-voice-tag-button,
.ai-video-prompt-pause,
.ai-video-prompt-optimize {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.ai-video-prompt-media-button {
  color: #526174;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.ai-video-prompt-voice-tag-button,
.ai-video-prompt-pause,
.ai-video-prompt-optimize {
  width: auto;
  min-width: 0;
  gap: 6px;
  padding: 0 10px;
  color: #3d4c63;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ai-video-prompt-optimize {
  color: var(--accent-soft);
  font-weight: 700;
  transition: color 140ms ease, background-color 140ms ease;
}

.ai-video-prompt-media-button,
.ai-video-prompt-optimize {
  align-self: center;
  min-height: 26px;
}

.ai-video-prompt-media-button {
  line-height: 26px;
}

.ai-video-prompt-optimize__icon,
.ai-video-prompt-optimize__label {
  display: block;
}

.ai-video-prompt-optimize__label {
  line-height: 16px;
  transition: color 140ms ease;
}

.ai-video-prompt-optimize__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-video-prompt-pause__icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-radius: 999px;
  opacity: 0.82;
}

.ai-video-prompt-pause__icon::before,
.ai-video-prompt-pause__icon::after {
  content: "";
  position: absolute;
  top: 3px;
  width: 2px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

.ai-video-prompt-pause__icon::before {
  left: 4px;
}

.ai-video-prompt-pause__icon::after {
  right: 4px;
}

.ai-video-prompt-media-button:disabled,
.ai-video-prompt-voice-tag-button:disabled,
.ai-video-prompt-pause:disabled,
.ai-video-prompt-optimize:disabled,
.ai-video-prompt-undo:disabled {
  cursor: default;
  opacity: 0.46;
}

.ai-video-prompt-clear:hover,
.ai-video-prompt-clear:focus-visible,
.ai-video-prompt-undo:not(:disabled):hover,
.ai-video-prompt-undo:not(:disabled):focus-visible,
.ai-video-prompt-media-button:not(:disabled):hover,
.ai-video-prompt-media-button:not(:disabled):focus-visible,
.ai-video-prompt-voice-tag-button:not(:disabled):hover,
.ai-video-prompt-voice-tag-button:not(:disabled):focus-visible,
.ai-video-prompt-pause:not(:disabled):hover,
.ai-video-prompt-pause:not(:disabled):focus-visible {
  background: rgba(23, 32, 51, 0.06);
  color: var(--ink);
}

.ai-video-prompt-optimize:not(:disabled):hover,
.ai-video-prompt-optimize:not(:disabled):focus-visible {
  background: rgba(23, 32, 51, 0.06);
  color: #7c5cff;
}

.ai-video-prompt-optimize:not(:disabled):hover .ai-video-prompt-optimize__label,
.ai-video-prompt-optimize:not(:disabled):focus-visible .ai-video-prompt-optimize__label {
  background: linear-gradient(90deg, #4777f4 0%, #7c5cff 52%, #b44bd6 100%);
  background-size: 100% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ai-video-prompt-optimize:not(:disabled):hover .ai-video-prompt-optimize__icon path,
.ai-video-prompt-optimize:not(:disabled):focus-visible .ai-video-prompt-optimize__icon path {
  stroke: currentColor;
}

.ai-video-prompt-optimize:not(:disabled):focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.34);
  outline-offset: 2px;
}

.ai-video-prompt-undo svg,
.ai-video-prompt-clear svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-video-prompt-media-popover {
  position: absolute;
  z-index: 50;
  width: 206px;
  max-height: min(320px, calc(100vh - 96px));
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(79, 98, 128, 0.20);
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 18px 42px rgba(23, 32, 51, 0.16),
    0 0 0 4px rgba(79, 98, 128, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: var(--ink);
  pointer-events: auto;
  scrollbar-color: rgba(86, 101, 122, 0.32) transparent;
  scrollbar-width: thin;
}

.ai-video-prompt-media-popover[hidden] {
  display: none;
}

.ai-video-prompt-media-popover:not([hidden]) {
  animation: aiVideoOptionsPopoverIn 150ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: center top;
}

.ai-video-prompt-media-popover[data-placement="top"]:not([hidden]) {
  transform-origin: center bottom;
}

.ai-video-prompt-media-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-video-prompt-media-item {
  display: grid;
  width: 100%;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.14s ease;
}

.ai-video-prompt-media-item:hover,
.ai-video-prompt-media-item:focus-visible {
  background: rgba(62, 76, 99, 0.07);
  outline: none;
}

.ai-video-prompt-media-thumb {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(79, 98, 128, 0.16);
  border-radius: 7px;
  background: #eef3f8;
  color: #526174;
  font-size: 13px;
  font-weight: 800;
}

.ai-video-prompt-media-thumb img,
.ai-video-prompt-media-thumb video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-video-prompt-media-body {
  display: flex;
  min-width: 0;
  align-items: center;
}

.ai-video-prompt-media-token {
  overflow: hidden;
  color: #172033;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-prompt-media-add {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #526174;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}

.ai-video-prompt-media-empty {
  padding: 10px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.ai-video-prompt-voice-tag-popover {
  width: 300px;
}

.ai-video-prompt-voice-tag-section + .ai-video-prompt-voice-tag-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(79, 98, 128, 0.12);
}

.ai-video-prompt-voice-tag-title {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-video-prompt-voice-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-video-prompt-voice-tag-item {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(79, 98, 128, 0.16);
  border-radius: 999px;
  background: #f5f7fb;
  color: #172033;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 9px;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.ai-video-prompt-voice-tag-item:hover,
.ai-video-prompt-voice-tag-item:focus-visible {
  border-color: rgba(67, 107, 245, 0.35);
  background: rgba(67, 107, 245, 0.10);
  color: #3157d5;
  outline: none;
}

.ai-video-prompt-error {
  margin: 8px 0 0;
  color: #ef4444;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.ai-tools-negative-prompt-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.ai-tools-negative-prompt-block[hidden],
.ai-tools-negative-prompt-toggle[hidden],
.ai-tools-negative-prompt-body[hidden] {
  display: none;
}

.ai-tools-negative-prompt-toggle {
  margin: 0;
  cursor: default;
}

.ai-tools-negative-prompt-body {
  display: grid;
  gap: 8px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    transform 220ms ease;
}

.ai-tools-negative-prompt-body.is-open {
  max-height: 360px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ai-tools-negative-prompt-body.is-open:focus-within {
  overflow: visible;
}

.ai-tools-negative-prompt-editor {
  height: 118px;
  min-height: 104px;
}

.ai-tools-negative-prompt {
  min-height: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.ai-tools-negative-prompt-editor:focus-within {
  --ai-video-prompt-bg: #fff;
  border-color: rgba(86, 101, 122, 0.46);
  background: var(--ai-video-prompt-bg);
  box-shadow:
    0 0 0 3px rgba(94, 117, 148, 0.14),
    inset 0 0 0 1px rgba(86, 101, 122, 0.14);
}

.ai-tools-negative-prompt::placeholder {
  color: var(--muted-soft);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  .ai-video-form-scroll {
    scroll-behavior: auto;
  }

  .ai-video-options-popover:not([hidden]) {
    animation: none;
  }

  .ai-model-picker__menu:not([hidden]) {
    animation: none;
  }

  .ai-tools-prompt-body,
  .ai-tools-negative-prompt-body {
    transition: none;
  }
}

.ai-video-upload-section {
  position: relative;
  display: grid;
  gap: 8px;
}

.ai-video-upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-video-upload-heading,
.ai-video-upload-controls {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ai-video-upload-controls {
  margin-left: auto;
}

.ai-reference-media-actions {
  min-width: 0;
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.ai-video-upload-section.is-reference-media .ai-video-upload-controls {
  display: none;
}

.ai-reference-media-button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.ai-reference-media-button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--control-surface);
  color: var(--ink);
}

.ai-reference-media-button:disabled {
  cursor: default;
  opacity: 0.48;
}

.ai-reference-media-button:focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.26);
  outline-offset: 2px;
}

.ai-video-upload-title {
  margin: 0;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.ai-video-end-frame-toggle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.ai-video-end-frame-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-video-end-frame-button {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ai-video-end-frame-switch {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background 140ms ease, box-shadow 140ms ease;
}

.ai-video-end-frame-switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.18);
  transition: transform 140ms ease;
}

.ai-video-end-frame-toggle[aria-pressed="true"] .ai-video-end-frame-switch {
  background: var(--switch-on-bg);
  box-shadow: 0 6px 14px rgba(109, 93, 252, 0.24);
}

.ai-video-end-frame-toggle[aria-pressed="true"] .ai-video-end-frame-switch::before {
  transform: translateX(18px);
}

.ai-video-end-frame-button:focus-visible {
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-video-end-frame-button:disabled {
  cursor: default;
}

.ai-video-upload-history {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ai-video-upload-count {
  min-width: 30px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  text-align: right;
  overflow-wrap: anywhere;
}

.ai-tools-upload-feedback {
  margin: 12px 0 0;
  white-space: pre-wrap;
}

.ai-video-upload-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.ai-model-field {
  position: relative;
  z-index: 5;
}

.ai-model-field.is-open {
  z-index: 60;
}

.ai-tool-image-upscaler-page .ai-model-field,
.ai-tool-voice-generator-page .ai-model-field {
  display: none;
}

.ai-tool-voice-generator-page .ai-video-prompt-editor {
  height: 228px;
  min-height: 218px;
}

.ai-model-picker__button {
  width: 100%;
  min-height: 62px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ai-model-picker__button:hover,
.ai-model-picker__button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: #fff;
}

.ai-model-picker__button:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-model-picker__button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ai-model-field.is-loading .ai-model-picker__button {
  cursor: wait;
}

.ai-model-field.is-loading .ai-model-picker__mark,
.ai-model-picker__skeleton {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.16) 25%,
    rgba(148, 163, 184, 0.38) 50%,
    rgba(148, 163, 184, 0.16) 75%
  );
  background-size: 220% 100%;
  animation: ai-model-catalog-skeleton 1.2s ease-in-out infinite;
}

.ai-model-picker__skeleton {
  display: block;
  height: 10px;
  border-radius: 999px;
}

.ai-model-picker__skeleton--title {
  width: min(168px, 72%);
  height: 13px;
}

.ai-model-picker__skeleton--meta {
  width: min(112px, 48%);
}

@keyframes ai-model-catalog-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-model-field.is-loading .ai-model-picker__mark,
  .ai-model-picker__skeleton {
    animation: none;
  }
}

/* Catalog loading: hide the not-yet-resolved option layout so no stale/placeholder
   controls flash before the model catalog (and its active preset) is ready. No
   skeleton/spinner placeholder — one that swaps to the real form reads as a flicker,
   so the panel just stays empty while loading. */
.ai-tools-form.is-catalog-loading .ai-video-form-scroll > *:not(.ai-model-field),
.ai-tools-form.is-catalog-loading .ai-tools-actions {
  display: none !important;
}

.ai-model-picker__mark,
.ai-model-option__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.ai-model-picker__mark {
  grid-column: 1;
}

.ai-model-option__mark {
  width: 42px;
  height: 42px;
}

.ai-model-picker__mark img,
.ai-model-option__mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: inherit;
}

.ai-model-picker__body {
  grid-column: 2;
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ai-model-picker__mark[hidden] + .ai-model-picker__body {
  grid-column: 1 / 3;
}

.ai-model-picker__body strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-picker__body span {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-model-picker__badge,
.ai-model-option__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid rgba(59, 130, 246, 0.46);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.ai-model-option__badge--cheapest {
  border-color: rgba(22, 163, 74, 0.5);
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.ai-model-picker__badge {
  grid-column: 3;
  justify-self: start;
  max-width: 100%;
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-model-picker__chevron {
  grid-column: 4;
  justify-self: end;
  position: relative;
  width: 18px;
  height: 18px;
}

.ai-model-picker__chevron::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 140ms ease, top 140ms ease;
}

.ai-model-picker__button[aria-expanded="true"] .ai-model-picker__chevron::before {
  top: 8px;
  transform: rotate(225deg);
}

.ai-voice-preset-field {
  position: relative;
  z-index: 12;
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.ai-voice-preset-field.is-open,
.ai-voice-preset-field.has-open-combo {
  z-index: 62;
}

.ai-voice-preset-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ai-voice-preset-select {
  width: 100%;
  min-height: 40px;
  appearance: none;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--control-surface);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ai-voice-preset-select:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-voice-preset-select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ai-voice-preset-combo.ai-voice-library-filter {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 3px 4px;
  border-radius: 8px;
}

.ai-voice-preset-combo[hidden] {
  display: none;
}

.ai-voice-preset-combo .ai-voice-library-filter__button {
  width: 100%;
  min-height: 32px;
  padding: 0 7px 0 9px;
  font-size: 14px;
}

.ai-voice-preset-combo .ai-voice-library-filter__button:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

.ai-voice-preset-combo .ai-voice-preset-combo__menu {
  top: calc(100% + 6px);
  max-height: 280px;
}

.ai-voice-preset-button-wrap {
  position: relative;
  min-width: 0;
}

.ai-voice-preset-button {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 32px 18px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.ai-voice-preset-button:hover,
.ai-voice-preset-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: #fff;
}

.ai-voice-preset-button:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-voice-preset-button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.ai-voice-preset-button__mark,
.ai-voice-preset-option__mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #eef3ff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(71, 85, 115, 0.08);
}

.ai-voice-preset-button[data-voice-gender="female"] .ai-voice-preset-button__mark,
.ai-voice-preset-option[data-voice-gender="female"] .ai-voice-preset-option__mark {
  background-image: url("/img/ai-tools/voice-avatar-female.png");
}

.ai-voice-preset-button[data-voice-gender="male"] .ai-voice-preset-button__mark,
.ai-voice-preset-option[data-voice-gender="male"] .ai-voice-preset-option__mark {
  background-image: url("/img/ai-tools/voice-avatar-male.png");
}
.ai-voice-preset-button[data-voice-gender="neutral"] .ai-voice-preset-button__mark,
.ai-voice-preset-option[data-voice-gender="neutral"] .ai-voice-preset-option__mark {
  background-image: url("/img/ai-tools/voice-avatar-neutral.png");
}

.ai-voice-preset-button__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ai-voice-preset-button__body > strong,
.ai-voice-preset-button__body > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-preset-button__body > strong {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-voice-preset-button__name {
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--brand-slate);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-preset-button__body > strong.has-description .ai-voice-preset-button__name {
  max-width: 52%;
  flex-shrink: 0;
}

.ai-voice-preset-button__name-description {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-preset-button__body > span {
  display: none;
}

.ai-voice-preset-button__chevron {
  grid-column: 4;
  justify-self: end;
  position: relative;
  width: 18px;
  height: 18px;
}

.ai-voice-preset-button__chevron::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
}

.ai-voice-preset-button-wrap .ai-voice-preset-selected-preview {
  position: absolute;
  z-index: 2;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
}

.ai-voice-preset-selected-preview[hidden] {
  display: none;
}

.ai-voice-preset-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 35;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  box-sizing: border-box;
  max-height: min(360px, calc(100vh - 180px));
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 20px 44px rgba(23, 32, 51, 0.18);
  scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
  scrollbar-width: thin;
}

.ai-voice-preset-menu[hidden] {
  display: none;
}

.ai-voice-preset-menu__voices {
  min-height: 0;
  max-height: 100%;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
  scrollbar-width: thin;
}

.ai-voice-preset-option {
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
}

.ai-voice-preset-option__select {
  min-width: 0;
  min-height: 44px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-voice-preset-option__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ai-voice-preset-option strong,
.ai-voice-preset-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-preset-option strong {
  font-size: 15px;
  font-weight: 850;
  line-height: 1.18;
}

.ai-voice-preset-option span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ai-voice-preset-option__body span {
  color: color-mix(in srgb, var(--muted) 78%, transparent);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
}

.ai-voice-preset-option:hover,
.ai-voice-preset-option[aria-selected="true"] {
  border-color: rgba(71, 119, 244, 0.44);
  background: rgba(71, 119, 244, 0.1);
}

.ai-voice-preset-option.is-preview-unavailable {
  grid-template-columns: minmax(0, 1fr);
}

.ai-voice-preset-option__select:disabled {
  cursor: not-allowed;
}

.ai-voice-preset-option__preview {
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(86, 101, 122, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #43546c;
  cursor: pointer;
}

.ai-voice-preset-option__preview span {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.ai-voice-preset-option__preview.is-playing span {
  width: 9px;
  height: 12px;
  margin-left: 0;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.ai-voice-preset-option__preview.is-loading span {
  width: 14px;
  height: 14px;
  margin-left: 0;
  border: 2px solid rgba(67, 84, 108, 0.25);
  border-top-color: currentColor;
  border-radius: 999px;
  animation: aiVoicePreviewSpin 0.8s linear infinite;
}

.ai-voice-preset-option__preview:disabled {
  cursor: wait;
  opacity: 0.68;
}

.ai-voice-preset-option__preview:not(:disabled):hover,
.ai-voice-preset-option__preview:not(:disabled):focus-visible {
  border-color: rgba(71, 119, 244, 0.45);
  background: #fff;
  color: #2f66f6;
  outline: none;
}

.ai-voice-preset-menu__more {
  min-height: 42px;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgba(71, 119, 244, 0.28);
  border-radius: 8px;
  background: rgba(71, 119, 244, 0.08);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.ai-voice-preset-menu__more:not(:disabled):hover,
.ai-voice-preset-menu__more:not(:disabled):focus-visible {
  border-color: rgba(71, 119, 244, 0.48);
  background: rgba(71, 119, 244, 0.14);
  outline: none;
}

.ai-voice-preset-menu__more:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

body.has-voice-library-modal {
  overflow: hidden;
}

.ai-voice-library-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.56);
  backdrop-filter: blur(4px);
}

.ai-voice-library-modal[hidden] {
  display: none;
}

.ai-voice-library-dialog {
  width: min(1080px, 100%);
  height: min(960px, calc(100vh - 48px));
  min-height: min(600px, calc(100vh - 48px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(17, 24, 39, 0.28);
}

.ai-voice-library-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.ai-voice-library-header h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
}

.ai-voice-library-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ai-voice-library-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.ai-voice-library-close:hover,
.ai-voice-library-close:focus-visible {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
  outline: none;
}

.ai-voice-library-toolbar {
  display: grid;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-bg);
}

.ai-voice-library-search {
  position: relative;
  display: block;
}

.ai-voice-library-search::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--muted);
  border-radius: 999px;
  transform: translateY(-58%);
  pointer-events: none;
}

.ai-voice-library-search::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 26px;
  width: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.ai-voice-library-search input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  padding: 0 14px 0 43px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.ai-voice-library-search input:focus {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(71, 119, 244, 0.12);
  outline: none;
}

.ai-voice-library-search input::placeholder {
  color: var(--muted);
}

.ai-voice-library-languages {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 5px;
  scrollbar-color: rgba(86, 101, 122, 0.35) transparent;
  scrollbar-width: thin;
}

.ai-voice-library-languages button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--control-surface);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-voice-library-languages button:hover,
.ai-voice-library-languages button:focus-visible {
  border-color: var(--line-strong);
  color: var(--ink);
  outline: none;
}

.ai-voice-library-languages button[aria-pressed="true"] {
  border-color: rgba(71, 119, 244, 0.42);
  background: rgba(71, 119, 244, 0.12);
  color: var(--accent);
}

.ai-voice-library-select-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.ai-voice-library-filter {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 4px 5px 4px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-surface);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.ai-voice-library-filter:hover {
  border-color: var(--line-strong);
}

.ai-voice-library-filter:focus-within,
.ai-voice-library-filter.is-open {
  z-index: 25;
  border-color: rgba(71, 119, 244, 0.48);
  background: var(--panel-bg);
  box-shadow: 0 0 0 3px rgba(71, 119, 244, 0.11);
}

.ai-voice-library-filter__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-voice-library-filter__button {
  min-width: 0;
  min-height: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.ai-voice-library-filter__button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-filter__button:focus-visible {
  outline: none;
}

.ai-voice-library-filter__button i {
  position: relative;
  width: 16px;
  height: 16px;
}

.ai-voice-library-filter__button i::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg);
  transition: top 140ms ease, transform 140ms ease;
}

.ai-voice-library-filter__button[aria-expanded="true"] i::before {
  top: 7px;
  transform: rotate(225deg);
}

.ai-voice-library-filter__menu {
  position: absolute;
  top: calc(100% + 7px);
  left: -1px;
  right: -1px;
  z-index: 30;
  max-height: 248px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-bg);
  box-shadow: 0 18px 44px rgba(23, 32, 51, 0.2), 0 0 0 3px rgba(71, 119, 244, 0.06);
  scrollbar-color: rgba(86, 101, 122, 0.38) transparent;
  scrollbar-width: thin;
}

.ai-voice-library-filter__menu[hidden] {
  display: none;
}

.ai-voice-library-filter__option {
  position: relative;
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 7px 34px 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.ai-voice-library-filter__option:hover,
.ai-voice-library-filter__option:focus-visible {
  background: var(--surface);
  outline: none;
}

.ai-voice-library-filter__option[aria-selected="true"] {
  background: rgba(71, 119, 244, 0.12);
  color: var(--accent);
}

.ai-voice-library-filter__option[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 4px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
}

.ai-voice-library-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 24px 24px;
  scrollbar-color: rgba(86, 101, 122, 0.4) transparent;
  scrollbar-width: thin;
}

.ai-voice-library-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ai-voice-library-results-header strong {
  font-size: 14px;
  font-weight: 800;
}

.ai-voice-library-results-header span {
  position: relative;
  padding-left: 13px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.ai-voice-library-results-header span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #2aa775;
  transform: translateY(-50%);
}

.ai-voice-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-voice-library-card {
  position: relative;
  min-width: 0;
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--control-surface);
  color: var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.ai-voice-library-card:hover {
  border-color: var(--line-strong);
  background: var(--surface);
}

.ai-voice-library-card[data-selected="true"] {
  border-color: #4777f4;
  background: rgba(71, 119, 244, 0.15);
  box-shadow: inset 0 0 0 1px #4777f4, 0 0 0 3px rgba(71, 119, 244, 0.13), 0 10px 24px rgba(44, 83, 184, 0.13);
}

.ai-voice-library-card__selected-badge {
  position: absolute;
  top: 50%;
  right: 54px;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  background: #3168ea;
  color: #fff;
  box-shadow: 0 5px 12px rgba(41, 87, 205, 0.28);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%) scale(0.82);
  transition: opacity 120ms ease, transform 140ms ease;
  pointer-events: none;
}

.ai-voice-library-card[data-selected="true"] .ai-voice-library-card__selected-badge {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.ai-voice-library-card[data-selected="true"] .ai-voice-library-card__select {
  padding-right: 32px;
}

.ai-voice-library-card.is-preview-unavailable .ai-voice-library-card__selected-badge {
  right: 10px;
}

.ai-voice-library-card.is-preview-unavailable[data-selected="true"] .ai-voice-library-card__select {
  padding-right: 38px;
}

.ai-voice-library-card.is-preview-unavailable {
  grid-template-columns: minmax(0, 1fr);
}

.ai-voice-library-card__select {
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-voice-library-card__select:focus-visible {
  border-radius: 7px;
  outline: 2px solid rgba(71, 119, 244, 0.42);
  outline-offset: 2px;
}

.ai-voice-library-card__select .ai-voice-preset-option__mark {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
}

.ai-voice-library-card__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ai-voice-library-card__body > .ai-voice-library-card__name-line,
.ai-voice-library-card__body > span:not(.ai-voice-library-card__tags) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-card__name-line {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.ai-voice-library-card__name-line > strong {
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--brand-slate);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-card__name-line.has-description > strong {
  max-width: 52%;
  flex-shrink: 0;
}

.ai-voice-library-card__name-description {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-card__body > span:not(.ai-voice-library-card__tags):not(.ai-voice-library-card__name-line) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.ai-voice-library-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 19px;
}

.ai-voice-library-card__tags small {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.ai-voice-library-card[data-selected="true"] .ai-voice-library-card__tags small {
  background: rgba(71, 119, 244, 0.11);
  color: var(--accent);
}

.ai-voice-library-card[data-voice-gender="female"] .ai-voice-preset-option__mark,
.ai-voice-preset-option__mark[data-voice-gender="female"] {
  background-image: url("/img/ai-tools/voice-avatar-female.png");
}

.ai-voice-library-card[data-voice-gender="male"] .ai-voice-preset-option__mark,
.ai-voice-preset-option__mark[data-voice-gender="male"] {
  background-image: url("/img/ai-tools/voice-avatar-male.png");
}
.ai-voice-library-card[data-voice-gender="neutral"] .ai-voice-preset-option__mark,
.ai-voice-preset-option__mark[data-voice-gender="neutral"] {
  background-image: url("/img/ai-tools/voice-avatar-neutral.png");
}

.ai-voice-library-status {
  margin: 0 0 12px;
  padding: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  background: var(--control-surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.ai-voice-library-status[hidden] {
  display: none;
}

.ai-voice-library-load-more {
  min-width: 180px;
  min-height: 42px;
  display: block;
  margin: 18px auto 0;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.ai-voice-library-load-more:hover:not(:disabled),
.ai-voice-library-load-more:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
  outline: none;
}

.ai-voice-library-load-more:disabled {
  cursor: wait;
  opacity: 0.64;
}

.ai-voice-library-load-more[hidden] {
  display: none;
}

.ai-voice-library-empty {
  margin-top: 12px;
  padding: 44px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: 11px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.ai-voice-library-empty[hidden] {
  display: none;
}

.ai-voice-library-footer {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-bg);
}

.ai-voice-library-selected {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.ai-voice-library-selected > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ai-voice-library-selected strong,
.ai-voice-library-selected small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-selected strong {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
}

.ai-voice-library-selected__name {
  max-width: 100%;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--brand-slate);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-selected strong.has-description .ai-voice-library-selected__name {
  max-width: 52%;
  flex-shrink: 0;
}

.ai-voice-library-selected__description {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-voice-library-selected small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.ai-voice-library-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-voice-library-cancel,
.ai-voice-library-confirm {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 9px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.ai-voice-library-cancel {
  border: 1px solid var(--line);
  background: var(--control-surface);
  color: var(--ink);
}

.ai-voice-library-confirm {
  border: 1px solid #315ddc;
  background: #315ddc;
  color: #fff;
}

.ai-voice-library-cancel:hover,
.ai-voice-library-cancel:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
  outline: none;
}

.ai-voice-library-confirm:not(:disabled):hover,
.ai-voice-library-confirm:not(:disabled):focus-visible {
  border-color: #264fc4;
  background: #264fc4;
  outline: none;
}

.ai-voice-library-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

@media (max-width: 760px) {
  .ai-voice-library-modal {
    padding: 0;
  }

  .ai-voice-library-dialog {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .ai-voice-library-header,
  .ai-voice-library-toolbar,
  .ai-voice-library-content,
  .ai-voice-library-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ai-voice-library-header {
    padding-top: 16px;
    padding-bottom: 14px;
  }

  .ai-voice-library-header h2 {
    font-size: 19px;
  }

  .ai-voice-library-header p {
    font-size: 12px;
  }

  .ai-voice-library-toolbar {
    gap: 11px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .ai-voice-library-select-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-voice-library-content {
    padding-top: 14px;
    padding-bottom: 18px;
  }

  .ai-voice-library-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-voice-library-results-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .ai-voice-library-footer {
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .ai-voice-library-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  }
}

@keyframes aiVoicePreviewSpin {
  to {
    transform: rotate(360deg);
  }
}

.ai-model-picker__menu {
  --ai-model-menu-gap: 8px;
  --ai-model-menu-max-height: calc(100vh - 160px);
  --ai-model-menu-min-height: 0px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--ai-model-menu-gap));
  z-index: 30;
  min-height: var(--ai-model-menu-min-height);
  max-height: var(--ai-model-menu-max-height);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 20px 44px rgba(23, 32, 51, 0.18);
  scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
  scrollbar-width: thin;
}

.ai-model-picker__menu:not([hidden]):not(.is-closing) {
  animation: aiModelMenuIn 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transform-origin: center top;
}

.ai-model-picker__menu.is-closing {
  pointer-events: none;
  animation: aiModelMenuOut 140ms cubic-bezier(0.4, 0, 1, 1) both;
  transform-origin: center top;
}

.ai-model-picker__menu[data-placement="top"]:not([hidden]) {
  transform-origin: center bottom;
}

@keyframes aiModelMenuIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiModelMenuOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

.ai-model-picker__menu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.ai-model-picker__menu::-webkit-scrollbar-track {
  background: transparent;
}

.ai-model-picker__menu::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.42);
}

.ai-model-picker__menu::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.58);
}

.ai-model-picker__menu::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.ai-model-picker__menu::-webkit-scrollbar-corner {
  background: transparent;
}

.ai-model-picker__menu[hidden] {
  display: none;
}

.ai-model-picker__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.ai-model-picker__filters {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

.ai-model-picker__filter {
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ai-model-picker__filter + .ai-model-picker__filter {
  margin-left: -1px;
}

.ai-model-picker__filter:first-child {
  border-radius: 7px 0 0 7px;
}

.ai-model-picker__filter:last-child {
  border-radius: 0 7px 7px 0;
}

.ai-model-picker__filter:hover,
.ai-model-picker__filter:focus-visible {
  color: var(--ink);
  background: var(--surface-strong);
}

.ai-model-picker__filter:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.36);
  outline-offset: 2px;
}

.ai-model-picker__filter[aria-pressed="true"] {
  z-index: 2;
  border-color: rgba(59, 130, 246, 0.58);
  background: rgba(59, 130, 246, 0.13);
  color: var(--brand-blue);
}

.ai-model-picker__filter:disabled {
  cursor: default;
  opacity: 0.46;
}

.ai-model-picker__section + .ai-model-picker__section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ai-model-picker__section-title {
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-model-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-model-option + .ai-model-option {
  margin-top: 4px;
}

.ai-model-option:hover {
  border-color: var(--line);
  background: var(--surface);
}

.ai-model-option[aria-selected="true"] {
  border-color: rgba(94, 117, 148, 0.24);
  background: rgba(94, 117, 148, 0.10);
}

.ai-model-option__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ai-model-option__top {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ai-model-option__top strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-model-option__copy {
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.ai-model-option__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-model-option__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
}

.ai-model-option__check {
  justify-self: end;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(2px);
  transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
}

.ai-model-option__check svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-model-option[aria-selected="true"] .ai-model-option__check {
  opacity: 1;
  transform: translateX(0);
}

.ai-video-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.ai-motion-control-upload-flow {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
}

.ai-motion-control-upload-flow[hidden] {
  display: none;
}

.ai-motion-control-upload-slot {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--control-surface);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.ai-motion-control-upload-slot:hover,
.ai-motion-control-upload-slot:focus-within {
  border-color: var(--accent);
  background: var(--surface-strong);
}

.ai-motion-control-upload-slot__empty,
.ai-motion-control-upload-slot__preview {
  position: absolute;
  inset: 0;
}

.ai-motion-control-upload-slot__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 18px 12px;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
}

.ai-motion-control-upload-slot__empty[hidden],
.ai-motion-control-upload-slot__preview[hidden] {
  display: none;
}

.ai-motion-control-upload-slot__empty strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.3;
}

.ai-motion-control-upload-slot__empty > span:last-child {
  max-width: 180px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ai-motion-control-upload-slot__empty .ai-tools-file-picker__icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23566578' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: none;
}

.ai-motion-control-upload-slot__empty .ai-tools-file-picker__icon::before,
.ai-motion-control-upload-slot__empty .ai-tools-file-picker__icon::after {
  content: none;
  display: none;
}

.ai-motion-control-upload-slot.is-image-drop-active {
  border-color: rgba(112, 70, 255, 0.76);
  background: rgba(112, 70, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(112, 70, 255, 0.08);
}

.ai-motion-control-upload-slot.is-image-drop-active .ai-motion-control-upload-slot__empty {
  color: #6d3dff;
}

.ai-motion-control-upload-slot.is-image-drop-active .ai-motion-control-upload-slot__empty strong {
  color: #6d3dff;
}

.ai-motion-control-upload-slot.is-image-drop-active .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%236d3dff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
}

.ai-motion-control-upload-slot__preview {
  padding: 0;
}

.ai-motion-control-upload-preview-card.ai-video-upload-preview-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 13px;
}

.ai-motion-control-upload-preview-card .ai-video-upload-preview-kind,
.ai-motion-control-upload-preview-card .ai-video-upload-preview-name {
  display: none;
}

.ai-motion-control-upload-flow__arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.ai-motion-control-upload-flow__arrow svg {
  width: 48px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-video-upload-grid.has-motion-control-flow {
  gap: 0;
}

.ai-video-upload-section.is-motion-control-upload .ai-video-upload-grid > .ai-video-file-picker,
.ai-video-upload-section.is-motion-control-upload .ai-video-upload-grid > .ai-video-upload-arrow {
  display: none;
}

.ai-motion-control-face-reference {
  display: grid;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
}

.ai-motion-control-face-reference__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.ai-motion-control-face-reference__heading .field-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ai-motion-control-face-reference__optional {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.ai-motion-control-face-reference__help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ai-motion-control-face-reference__group {
  width: 100%;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
}

.ai-motion-control-face-reference__picker {
  position: relative;
  width: 140px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--control-surface);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.ai-motion-control-face-reference__picker:hover {
  border-color: var(--accent);
  background: var(--surface-strong);
}

#ai-motion-control-face-file:focus-visible + .ai-motion-control-face-reference__group .ai-motion-control-face-reference__picker {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ai-motion-control-face-reference__empty,
.ai-motion-control-face-reference__preview {
  position: absolute;
  inset: 0;
}

.ai-motion-control-face-reference__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  text-align: center;
}

.ai-motion-control-face-reference__empty .ai-tools-file-picker__icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23566578' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: none;
}

.ai-motion-control-face-reference__empty .ai-tools-file-picker__icon::before,
.ai-motion-control-face-reference__empty .ai-tools-file-picker__icon::after {
  content: none;
  display: none;
}

.ai-motion-control-face-reference__picker.is-image-drop-active {
  border-color: rgba(112, 70, 255, 0.76);
  background: rgba(112, 70, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(112, 70, 255, 0.08);
}

.ai-motion-control-face-reference__picker.is-image-drop-active .ai-motion-control-face-reference__empty {
  color: #6d3dff;
}

.ai-motion-control-face-reference__picker.is-image-drop-active .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%236d3dff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
}

.ai-motion-control-face-reference__preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-motion-control-face-reference__remove {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.ai-motion-control-face-reference__remove:hover,
.ai-motion-control-face-reference__remove:focus-visible {
  background: rgba(17, 24, 39, 0.94);
}

.ai-video-upload-grid.has-upload-previews {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  justify-content: stretch;
  gap: 8px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface);
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-upload-grid,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-grid {
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: 12px;
  min-height: 164px;
  padding: 18px;
  border-radius: 14px;
  background: var(--surface);
}

.ai-video-file-picker.ai-tools-file-picker {
  min-height: 164px;
  padding: 28px 20px;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: var(--control-surface);
  transition: border-color 140ms ease, background-color 140ms ease;
  transform: none;
}

.ai-video-file-picker.ai-tools-file-picker:hover {
  border-color: var(--line-strong);
  background: #edf2f7;
  box-shadow: none;
  transform: none;
}

.ai-video-upload-grid.has-upload-previews .ai-video-file-picker.ai-tools-file-picker {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: 18px 12px;
  background: transparent;
}

.ai-video-upload-grid.has-upload-previews .ai-video-file-picker.ai-tools-file-picker:hover {
  border-color: var(--line-strong);
  background: #edf2f7;
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.ai-tools-file-picker,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.ai-tools-file-picker {
  height: 128px;
  min-height: 0;
  padding: 22px 16px;
}

.ai-video-file-picker .ai-tools-file-picker__icon {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23566578' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30V7'/%3E%3Cpath d='M13 18 24 7l11 11'/%3E%3Cpath d='M8 28v10h32V28'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  box-shadow: none;
  color: var(--accent-soft);
}

.ai-video-file-picker .ai-tools-file-picker__icon::before,
.ai-video-file-picker .ai-tools-file-picker__icon::after {
  content: none;
  display: none;
}

.ai-video-file-picker .ai-tools-file-picker__icon::before {
  content: none;
}

.ai-video-file-picker .ai-tools-file-picker__icon::after {
  display: none;
}

.ai-video-upload-grid.has-upload-previews .ai-video-file-picker .ai-tools-file-picker__icon,
.ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker .ai-tools-file-picker__icon,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23566578' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 26px 26px;
}

.ai-video-file-picker .ai-tools-file-picker__body {
  justify-items: center;
  gap: 12px;
}

.ai-video-upload-single-title,
.ai-video-upload-frame-title {
  max-width: 620px;
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.ai-video-upload-grid.has-upload-previews .ai-video-upload-single-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.ai-video-upload-frame-title {
  display: none;
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-upload-single-title,
.ai-video-upload-section.is-end-frame-enabled .ai-video-upload-format,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-single-title,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-format {
  display: none;
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-upload-frame-title,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-frame-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.ai-video-upload-format {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ai-video-file-picker .ai-tools-file-picker__name {
  display: none;
}

.ai-video-file-picker .ai-tools-file-picker__name:empty {
  display: none;
}

.ai-video-file-picker.has-frame-preview.ai-tools-file-picker {
  height: 164px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  align-items: stretch;
  justify-content: stretch;
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.has-frame-preview.ai-tools-file-picker,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.has-frame-preview.ai-tools-file-picker {
  height: 128px;
  padding: 0;
}

.ai-video-file-picker.has-frame-preview.ai-tools-file-picker:hover {
  background: transparent;
}

.ai-video-frame-preview-card.ai-video-upload-preview-card {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  display: block;
  flex: 1 1 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.ai-video-file-picker.has-frame-preview .ai-tools-file-picker__icon,
.ai-video-file-picker.has-frame-preview .ai-tools-file-picker__body {
  display: none;
}

.ai-video-upload-preview-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}

.ai-video-upload-preview-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.ai-video-upload-preview-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #111827;
}

.ai-video-upload-preview-card--audio {
  display: grid;
  place-items: center;
  padding: 10px 10px 26px;
}

.ai-video-upload-preview-media {
  position: relative;
  width: min(98px, 74%);
  height: min(98px, 74%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-video-upload-preview-card--audio .ai-video-upload-preview-media::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(58px, 62%);
  height: min(58px, 62%);
  transform: translate(-50%, -50%);
  background: #238bb8;
  filter: drop-shadow(0 8px 18px rgba(35, 139, 184, 0.22));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='black'%3E%3Crect x='6' y='27' width='4' height='10' rx='2'/%3E%3Crect x='13' y='23' width='4' height='18' rx='2'/%3E%3Crect x='20' y='18' width='4' height='28' rx='2'/%3E%3Crect x='27' y='12' width='4' height='40' rx='2'/%3E%3Crect x='34' y='19' width='4' height='26' rx='2'/%3E%3Crect x='41' y='24' width='4' height='16' rx='2'/%3E%3Crect x='48' y='21' width='4' height='22' rx='2'/%3E%3Crect x='55' y='28' width='4' height='8' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='black'%3E%3Crect x='6' y='27' width='4' height='10' rx='2'/%3E%3Crect x='13' y='23' width='4' height='18' rx='2'/%3E%3Crect x='20' y='18' width='4' height='28' rx='2'/%3E%3Crect x='27' y='12' width='4' height='40' rx='2'/%3E%3Crect x='34' y='19' width='4' height='26' rx='2'/%3E%3Crect x='41' y='24' width='4' height='16' rx='2'/%3E%3Crect x='48' y='21' width='4' height='22' rx='2'/%3E%3Crect x='55' y='28' width='4' height='8' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.ai-video-upload-preview-media-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.ai-video-upload-preview-card--audio .ai-video-upload-preview-media-image {
  opacity: 0;
}

.ai-video-upload-preview-index {
  position: absolute;
  left: 6px;
  top: 6px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.74);
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
}

.ai-video-frame-preview-card .ai-video-upload-preview-index {
  display: none;
}

.ai-video-upload-preview-kind {
  position: absolute;
  left: 6px;
  bottom: 6px;
  max-width: calc(100% - 12px);
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(13, 20, 33, 0.76);
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
}

.ai-video-upload-preview-name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-upload-preview-card--video .ai-video-upload-preview-name {
  display: none;
}

.ai-video-upload-preview-card--audio .ai-video-upload-preview-name {
  left: 58px;
  right: 8px;
  color: var(--muted);
  text-align: right;
}

.ai-video-upload-preview-remove {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #ff5f69;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
  transition: opacity 120ms ease, transform 120ms ease, background 120ms ease;
}

.ai-video-upload-preview-card:hover .ai-video-upload-preview-remove,
.ai-video-upload-preview-card:focus-within .ai-video-upload-preview-remove {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.ai-video-upload-preview-remove:hover {
  background: #ed3f4d;
}

.ai-video-upload-preview-remove:focus-visible {
  outline: 2px solid rgba(255, 95, 105, 0.35);
  outline-offset: 2px;
}

.ai-video-upload-preview-card[data-media-preview] {
  cursor: pointer;
}

.ai-video-upload-preview-card[data-media-preview]:hover {
  border-color: rgba(31, 111, 235, 0.36);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.14);
}

.ai-video-upload-preview-card[data-media-preview]:focus-visible {
  outline: 2px solid rgba(31, 111, 235, 0.5);
  outline-offset: 3px;
}

.ai-media-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: block;
  padding: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.86);
  color: #ffffff;
}

.ai-media-preview-modal[hidden] {
  display: none;
}

.ai-media-preview-modal__card {
  position: relative;
  width: 100vw;
  height: 100vh;
  max-height: none;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: top left;
  will-change: transform, opacity;
}

.ai-media-preview-modal__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100vh;
}

.ai-media-preview-modal__header {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 92px;
  border: 0;
  pointer-events: none;
}

.ai-media-preview-modal__title-wrap {
  min-width: 0;
  max-width: min(760px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.36);
  text-align: center;
  pointer-events: none;
}

/* The detail side panel already shows the tool name and date — the centered
   header caption would be a duplicate. */
.ai-media-preview-modal.has-detail-panel .ai-media-preview-modal__title-wrap {
  display: none;
}

.ai-media-preview-modal__title {
  min-width: 0;
  max-width: min(50vw, 560px);
  margin: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-media-preview-modal__meta {
  flex: 0 0 auto;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.ai-media-preview-modal__actions {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}

.ai-media-preview-modal__actions > .ai-media-preview-modal__panel-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
}

.ai-media-preview-modal__info {
  position: relative;
  flex: 0 0 auto;
  pointer-events: auto;
}

.ai-media-preview-modal__info-button {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: help;
}

.ai-media-preview-modal__info-button[hidden] {
  display: none;
}

.ai-media-preview-modal__info-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__info-button:hover,
.ai-media-preview-modal__info-button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.ai-media-preview-modal__info-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: min(280px, calc(100vw - 32px));
  padding: 14px 16px;
  transform: translateY(-4px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(27, 29, 34, 0.96);
  color: #ffffff;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
  backdrop-filter: blur(14px);
}

.ai-media-preview-modal__info:hover .ai-media-preview-modal__info-popover,
.ai-media-preview-modal__info:focus-within .ai-media-preview-modal__info-popover {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.ai-media-preview-modal__info-title {
  display: block;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.ai-media-preview-modal__info-popover dl {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 7px 14px;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.ai-media-preview-modal__info-popover dt {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}

.ai-media-preview-modal__info-popover dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
}

.ai-media-preview-modal__download,
.ai-media-preview-modal__close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

.ai-media-preview-modal__download[hidden] {
  display: none;
}

.ai-media-preview-modal__download svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__close {
  padding: 0;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.ai-media-preview-modal__close--corner {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
}

.ai-media-preview-modal__download:hover,
.ai-media-preview-modal__download:focus-visible,
.ai-media-preview-modal__close:hover,
.ai-media-preview-modal__close:focus-visible {
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  outline: none;
}

.ai-media-preview-modal__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 48px;
  height: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.ai-media-preview-modal__nav[hidden] {
  display: none;
}

.ai-media-preview-modal__nav:hover,
.ai-media-preview-modal__nav:focus-visible {
  background: transparent;
  color: #ffffff;
  outline: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.64);
}

.ai-media-preview-modal__nav:disabled {
  opacity: 0.28;
  cursor: default;
}

.ai-media-preview-modal__nav--prev {
  left: 18px;
}

.ai-media-preview-modal__nav--next {
  right: 18px;
}

.ai-media-preview-modal__viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 72px 42px;
  overflow: hidden;
  background: transparent;
}

.ai-media-preview-modal__viewport img,
.ai-media-preview-modal__viewport video {
  max-width: 100%;
  max-height: calc(100vh - 112px);
  border-radius: 8px;
  object-fit: contain;
  background: #0f172a;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
}

.ai-media-preview-modal__viewport audio {
  width: min(680px, 100%);
}

.ai-media-preview-modal__compare {
  position: relative;
  max-width: 100%;
  max-height: calc(100vh - 112px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-media-preview-modal__compare-image {
  display: block;
  transition: opacity 120ms ease;
}

.ai-media-preview-modal__compare-image--original {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
}

.ai-media-preview-modal__compare.is-showing-original .ai-media-preview-modal__compare-image--original {
  opacity: 1;
}

.ai-media-preview-modal__compare-toggle {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 10px;
  background: rgba(23, 24, 28, 0.88);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.ai-media-preview-modal__compare-toggle[hidden] {
  display: none;
}

/* Uploaded files use a media-only preview. Detail actions and result
   comparison belong exclusively to generated-result previews. */
.ai-media-preview-modal.is-upload-preview .ai-media-preview-modal__compare-toggle,
.ai-media-preview-modal.is-upload-preview .ai-media-preview-modal__panel {
  display: none;
}

.ai-media-preview-modal__compare-button {
  min-width: 64px;
  height: 28px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.ai-media-preview-modal__compare-button:hover,
.ai-media-preview-modal__compare-button:focus-visible {
  color: #ffffff;
  outline: none;
}

.ai-media-preview-modal__compare-button.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.ai-media-preview-modal__audio {
  width: min(680px, calc(100vw - 48px));
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 42px 28px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  text-align: center;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
}

.ai-media-preview-modal__audio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ai-media-preview-modal__audio-name {
  max-width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-media-preview-modal__panel {
  flex: 0 0 380px;
  width: 380px;
  height: 100vh;
  overflow: hidden;
  background: #17181c;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-media-preview-modal__panel[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-scroll {
  height: 100%;
  display: grid;
  align-content: start;
  gap: 24px;
  padding: 24px 22px 28px;
  overflow-y: auto;
}

.ai-media-preview-modal__panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-media-preview-modal__panel-head-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ai-media-preview-modal__panel-head-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ai-media-preview-modal__export {
  position: relative;
  flex: 0 0 auto;
}

.ai-media-preview-modal__export[hidden],
.ai-media-preview-modal__export-menu[hidden] {
  display: none;
}

.ai-media-preview-modal__export-menu {
  position: absolute;
  z-index: 24;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 190px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 10px;
  background: #23252b;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.ai-media-preview-modal__export-option {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ai-media-preview-modal__export-option--mobile {
  color: #ffffff;
  font-weight: 700;
}

.ai-media-preview-modal__export-option svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__export-option:hover,
.ai-media-preview-modal__export-option:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  outline: none;
}

.ai-media-preview-modal__export-option:disabled {
  opacity: 0.42;
  cursor: default;
}

.ai-media-preview-modal__export-option:disabled:hover {
  background: transparent;
}

.ai-media-preview-modal__panel-icon-button {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  cursor: pointer;
}

.ai-media-preview-modal__panel-icon-button[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__panel-icon-button:hover,
.ai-media-preview-modal__panel-icon-button:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.ai-media-preview-modal__panel-delete:hover,
.ai-media-preview-modal__panel-delete:focus-visible {
  color: #ff6b74;
}

.ai-media-preview-modal__panel-thumb.is-active {
  background: transparent;
  color: #ffffff;
}

.ai-media-preview-modal__panel-thumb.is-active:hover,
.ai-media-preview-modal__panel-thumb.is-active:focus-visible {
  background: transparent;
}

.ai-media-preview-modal__panel-thumb svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.ai-media-preview-modal__panel-thumb-svg--down {
  transform: rotate(180deg);
}

.ai-media-preview-modal__panel-thumb-fill {
  display: none;
}

.ai-media-preview-modal__panel-thumb.is-active .ai-media-preview-modal__panel-thumb-outline {
  display: none;
}

.ai-media-preview-modal__panel-thumb.is-active .ai-media-preview-modal__panel-thumb-fill {
  display: block;
}

.ai-media-preview-modal__panel-icon-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.ai-media-preview-modal__panel-title {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.ai-media-preview-modal__panel-meta {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.3;
}

.ai-media-preview-modal__panel-section[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-label {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.ai-media-preview-modal__panel-label[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-prompt {
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.6;
  scrollbar-color: rgba(181, 186, 196, 0.38) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-media-preview-modal__panel-prompt::-webkit-scrollbar {
  width: 8px;
}

.ai-media-preview-modal__panel-prompt::-webkit-scrollbar-track,
.ai-media-preview-modal__panel-prompt::-webkit-scrollbar-corner {
  background: transparent;
}

.ai-media-preview-modal__panel-prompt::-webkit-scrollbar-thumb {
  min-height: 36px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(181, 186, 196, 0.38);
  background-clip: padding-box;
}

.ai-media-preview-modal__panel-prompt::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.56);
  background-clip: padding-box;
}

.ai-media-preview-modal__panel-prompt::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.ai-media-preview-modal__panel-prompt[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-prompt-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.ai-media-preview-modal__panel-copy {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
}

.ai-media-preview-modal__panel-copy[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__panel-copy:hover,
.ai-media-preview-modal__panel-copy:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.ai-media-preview-modal__panel-copy.is-copied {
  color: #4ade80;
}

.ai-media-preview-modal__panel-model {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-media-preview-modal__panel-model[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-reference-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-media-preview-modal__panel-reference {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.ai-media-preview-modal__panel-reference img,
.ai-media-preview-modal__panel-reference video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-media-preview-modal__panel-reference--video {
  position: relative;
  width: 64px;
  height: 64px;
  cursor: zoom-in;
}

.ai-media-preview-modal__panel-reference--video::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -7px 0 0 -4px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.ai-media-preview-modal__panel-reference--audio {
  position: relative;
}

.ai-media-preview-modal__panel-reference--audio audio {
  display: none;
}

.ai-media-preview-modal__panel-reference-audio-icon {
  display: inline-flex;
  color: rgba(255, 255, 255, 0.55);
}

.ai-media-preview-modal__panel-reference-audio-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-media-preview-modal__panel-reference-audio-toggle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ai-media-preview-modal__panel-reference--audio:hover .ai-media-preview-modal__panel-reference-audio-toggle,
.ai-media-preview-modal__panel-reference-audio-toggle:focus-visible,
.ai-media-preview-modal__panel-reference--audio-playing .ai-media-preview-modal__panel-reference-audio-toggle {
  opacity: 1;
}

.ai-media-preview-modal__panel-reference-audio-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.ai-media-preview-modal__panel-reference-audio-pause {
  display: none;
}

.ai-media-preview-modal__panel-reference--audio-playing .ai-media-preview-modal__panel-reference-audio-play {
  display: none;
}

.ai-media-preview-modal__panel-reference--audio-playing .ai-media-preview-modal__panel-reference-audio-pause {
  display: block;
}

.ai-media-preview-modal__panel-reference--expired {
  padding: 4px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 10px;
  line-height: 1.25;
  text-align: center;
}

.ai-media-preview-modal__panel-reference--pending {
  animation: ai-media-preview-reference-pending 1.4s ease-in-out infinite;
}

@keyframes ai-media-preview-reference-pending {
  0%, 100% { background: rgba(255, 255, 255, 0.06); }
  50% { background: rgba(255, 255, 255, 0.12); }
}

.ai-media-preview-modal__reference-hover {
  position: fixed;
  z-index: 10;
  padding: 6px;
  border-radius: 12px;
  background: #26272b;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
}

.ai-media-preview-modal__reference-hover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: var(--reference-hover-caret-x, 24px);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 2px;
  background: #26272b;
  transform: rotate(45deg);
}

.ai-media-preview-modal__reference-hover.is-above::before {
  top: auto;
  bottom: -5px;
}

.ai-media-preview-modal__reference-hover[hidden] {
  display: none;
}

.ai-media-preview-modal__reference-hover img {
  display: block;
  max-width: min(420px, 36vw, calc(100vw - 40px));
  max-height: 48vh;
  border-radius: 8px;
  object-fit: contain;
}

.ai-media-preview-modal__reference-hover video {
  display: block;
  width: auto;
  height: auto;
  max-width: min(420px, 36vw, calc(100vw - 40px));
  max-height: 48vh;
  aspect-ratio: auto;
  border-radius: 8px;
  background: #000;
  object-fit: contain;
}

.ai-media-preview-modal__reference-hover video[hidden],
.ai-media-preview-modal__reference-hover img[hidden] {
  display: none;
}

.ai-media-preview-modal__panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-media-preview-modal__panel-button {
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.25;
  cursor: pointer;
  transition: background 120ms ease;
}

.ai-media-preview-modal__panel-button:hover,
.ai-media-preview-modal__panel-button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

.ai-media-preview-modal__panel-button:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 900px) {
  .ai-media-preview-modal__card {
    flex-direction: column;
  }

  .ai-media-preview-modal__stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }

  .ai-media-preview-modal__viewport {
    height: 100%;
  }

.ai-media-preview-modal__viewport img,
.ai-media-preview-modal__viewport video {
    max-height: 100%;
  }

  .ai-media-preview-modal__panel {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 46vh;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ai-media-preview-modal__panel-scroll {
    max-height: 46vh;
    gap: 18px;
    padding: 18px 16px 22px;
  }
}

@media (max-width: 767px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-settings-panel {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 720px) {
  .ai-media-preview-modal__header {
    left: 12px;
    right: 12px;
    top: 12px;
    padding: 0 82px;
  }

  .ai-media-preview-modal__title-wrap {
    max-width: 100%;
    padding: 6px 8px;
  }

  .ai-media-preview-modal__title {
    max-width: min(54vw, 360px);
    font-size: 13px;
  }

  .ai-media-preview-modal__meta {
    font-size: 11px;
  }

  .ai-media-preview-modal__download,
  .ai-media-preview-modal__close {
    width: 36px;
    height: 36px;
  }

  .ai-media-preview-modal__download svg {
    width: 21px;
    height: 21px;
  }

  .ai-media-preview-modal__close {
    font-size: 32px;
  }

  .ai-media-preview-modal__nav {
    width: 42px;
    height: 56px;
    font-size: 34px;
  }

  .ai-media-preview-modal__nav--prev {
    left: 10px;
  }

  .ai-media-preview-modal__nav--next {
    right: 10px;
  }

  .ai-media-preview-modal__viewport {
    padding: 70px 14px 24px;
  }

  .ai-media-preview-modal__viewport img,
  .ai-media-preview-modal__viewport video {
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 100px);
  }
}

.ai-video-upload-arrow {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.ai-video-upload-section.is-end-frame-enabled .ai-video-upload-arrow,
.ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-arrow {
  display: flex;
}

/* Kiss/hug duo uploads combine two equal photos: no transform direction to show,
   so drop the arrow and its 42px grid column. */
.ai-video-upload-section.is-couple-upload .ai-video-upload-arrow {
  display: none;
}

.ai-video-upload-section.is-couple-upload .ai-video-upload-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-video-file-picker.is-image-drop-active {
  border-color: rgba(112, 70, 255, 0.76);
  background: rgba(112, 70, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(112, 70, 255, 0.08);
  transform: none;
}

.ai-video-file-picker.is-image-drop-active .ai-tools-file-picker__icon {
  color: #6d3dff;
}

.ai-video-file-picker.is-image-drop-active .ai-video-upload-single-title,
.ai-video-file-picker.is-image-drop-active .ai-video-upload-frame-title {
  color: #6d3dff;
}

.ai-video-file-picker.is-image-drop-active .ai-tools-file-picker__name,
.ai-video-file-picker.is-image-drop-active .ai-video-upload-format {
  color: var(--muted);
}

.ai-video-upload-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.ai-input-media-guide {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

.ai-input-media-guide[hidden] {
  display: none;
}

.ai-video-generate-images-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  padding: 2px 0;
  border-radius: 6px;
  color: var(--accent-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: color 140ms ease;
}

.ai-video-generate-images-link span {
  transition: color 140ms ease;
}

.ai-video-generate-images-link:hover {
  background: transparent;
  color: #7c5cff;
}

.ai-video-generate-images-link:hover span,
.ai-video-generate-images-link:focus-visible span {
  background: linear-gradient(90deg, #4777f4 0%, #7c5cff 52%, #b44bd6 100%);
  background-size: 100% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ai-video-generate-images-link:hover .ai-video-generate-images-icon path,
.ai-video-generate-images-link:focus-visible .ai-video-generate-images-icon path {
  stroke: currentColor;
}

.ai-video-generate-images-link:focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.34);
  outline-offset: 2px;
}

.ai-video-generate-images-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-tool-actions {
  flex: 0 0 auto;
  display: grid;
  padding: 12px 22px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel-bg);
  box-shadow: 0 -10px 24px rgba(23, 32, 51, 0.04);
}

.ai-tool-actions .primary-auth-button {
  width: 100%;
  min-height: 52px;
}

.ai-video-generate-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(105deg, #2563eb 0%, #6d5dfc 24%, #ec4899 50%, #14b8a6 76%, #2563eb 100%);
  background-size: 150% 150%, 260% 260%;
  background-position: 0 0, 0% 50%;
  color: #fff;
  box-shadow:
    0 8px 18px rgba(90, 58, 224, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.ai-video-generate-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(100deg, #ff7ad9 0%, #8957ff 45%, #1fb6ff 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 0;
}

.ai-video-generate-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  pointer-events: none;
  z-index: 0;
}

.ai-video-generate-button:not(:disabled):hover {
  box-shadow:
    0 10px 22px rgba(90, 58, 224, 0.24),
    0 0 0 1px rgba(124, 58, 237, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transform: translateY(-1px);
}

.ai-video-generate-button:not(:disabled):hover::before {
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .ai-video-generate-button,
  .ai-video-generate-button:not(:disabled) .ai-video-credit-icon {
    animation: none;
  }
}

.ai-video-generate-button:disabled {
  box-shadow: none;
  filter: saturate(0.74);
  transform: none;
}

.ai-video-generate-label {
  position: relative;
  z-index: 1;
  display: block;
  min-width: 0;
  text-align: center;
}

.ai-video-generate-cost-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  z-index: 1;
}

.ai-video-generate-cost-wrap[hidden] {
  display: none !important;
}

/* Unit-price hint (pre-input, dynamic-priced tools): quieter than a real quote. */
.ai-video-generate-cost-wrap.is-unit-cost-hint {
  font-size: 12px;
  font-weight: 600;
}

.ai-video-generate-cost-wrap.is-unit-cost-hint .ai-video-credit-icon {
  width: 15px;
  height: 15px;
}

/* Shown only while the signed-in balance is below the displayed cost; the
   actions row has no reserved space for it otherwise. */
.ai-credit-shortfall {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--danger-text);
  text-align: center;
}

.ai-credit-shortfall[hidden] {
  display: none !important;
}

.ai-credit-shortfall__link {
  color: var(--portal-accent);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-credit-shortfall__link:hover {
  color: var(--portal-accent-hover);
}

.ai-video-credit-icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  transition: transform 160ms ease;
}

.ai-video-generate-button:not(:disabled):hover .ai-video-credit-icon {
  transform: scale(1.04);
}

.ai-video-generate-cost {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-video-results-panel {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 640px;
  container-type: inline-size;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ai-video-results-panel .credits-history-card__header {
  align-items: flex-start;
}

.ai-video-results-panel .credits-history-card__header p:not(.dashboard-card__eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.ai-tools-result.ai-creation-history-panel {
  padding: 18px 20px 20px;
}

.ai-creation-history-panel h3 {
  margin-top: 0;
  font-size: 19px;
  line-height: 1.25;
}

.ai-result-view-column {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-story-workspace {
  --ai-tool-generation-panel-width: 0px;
}

.ai-story-topbar {
  position: relative;
  z-index: 20;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.ai-story-history {
  position: relative;
  z-index: 30;
  width: 100%;
}

.ai-story-history-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.ai-story-history-trigger,
.ai-story-history-new {
  min-height: 42px;
  border: 1px solid rgba(86, 101, 122, 0.14);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.ai-story-history-trigger {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
}

.ai-story-history-trigger span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-history-trigger strong {
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(71, 119, 244, 0.10);
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.ai-story-history-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--muted);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.ai-story-history-trigger:hover,
.ai-story-history-new:hover,
.ai-story-history.is-open .ai-story-history-trigger {
  border-color: rgba(86, 101, 122, 0.24);
  background: var(--panel-soft);
}

.ai-story-history-trigger:focus-visible,
.ai-story-history-new:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(71, 119, 244, 0.15);
  outline: none;
}

.ai-story-history-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: min(360px, calc(100vw - 48px));
  padding: 12px;
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow: 0 18px 42px rgba(23, 32, 51, 0.16);
}

.ai-story-history-popover[hidden] {
  display: none;
}

.ai-story-history-header {
  display: grid;
  gap: 5px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--line);
}

.ai-story-history-header strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.ai-story-history-header p,
.ai-story-history-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-story-history-list {
  max-height: 320px;
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: rgba(86, 101, 122, 0.38) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.ai-story-history-list::-webkit-scrollbar {
  width: 10px;
}

.ai-story-history-list::-webkit-scrollbar-track {
  background: transparent;
}

.ai-story-history-list::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.34);
}

.ai-story-history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.52);
}

.ai-story-history-list::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.ai-story-history-list::-webkit-scrollbar-corner {
  background: transparent;
}

.ai-story-history-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 0;
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
}

.ai-story-history-item,
.ai-story-history-delete {
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.ai-story-history-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  text-align: left;
}

.ai-story-history-item strong,
.ai-story-history-item span,
.ai-story-history-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-history-item strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-story-history-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.ai-story-history-item small {
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.ai-story-history-item:hover,
.ai-story-history-item:focus-visible,
.ai-story-history-item.is-active {
  border-color: rgba(86, 101, 122, 0.14);
  background: var(--panel-soft);
  outline: none;
}

.ai-story-history-delete {
  width: 32px;
  min-height: 32px;
  align-self: center;
  color: var(--muted-soft);
  font-size: 19px;
  line-height: 1;
}

.ai-story-history-delete:hover,
.ai-story-history-delete:focus-visible {
  border-color: rgba(214, 63, 63, 0.20);
  background: rgba(214, 63, 63, 0.08);
  color: #b83232;
  outline: none;
}

.ai-story-history-list__item:has(.ai-story-history-item:hover),
.ai-story-history-list__item:has(.ai-story-history-item:focus-visible),
.ai-story-history-list__item:has(.ai-story-history-item.is-active) {
  border-color: rgba(86, 101, 122, 0.14);
  background: var(--panel-soft);
}

.ai-story-history-list__item .ai-story-history-item:hover,
.ai-story-history-list__item .ai-story-history-item:focus-visible,
.ai-story-history-list__item .ai-story-history-item.is-active {
  border-color: transparent;
  background: transparent;
}

.ai-story-history-empty {
  padding: 12px 2px 2px;
}

.dashboard-page.ai-story-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-story-workspace--single {
  grid-template-columns: minmax(0, 1fr) !important;
}

.dashboard-page.ai-story-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-story-workspace--single > .ai-result-view-column {
  grid-column: 1 !important;
  width: 100%;
  max-width: none;
}

.ai-story-heading {
  margin: 0;
  padding: 0;
}

.ai-story-heading h1 {
  font-size: 24px;
}

.ai-tools-form.ai-story-input-panel {
  min-width: 0;
  width: 100%;
  max-width: none;
  display: grid;
  gap: 16px;
  padding: 0;
}

.ai-story-input-panel .ai-video-form-scroll {
  --ai-video-form-padding-top: 0;
  --ai-video-form-padding-x: 0;
  --ai-video-form-padding-bottom: 0;
  max-height: none;
  overflow: visible;
}

.ai-story-input-panel[hidden],
.ai-story-inline-heading[hidden],
.ai-story-summary-grid[hidden],
.ai-story-list-header[hidden],
.ai-story-scene-list[hidden],
.ai-story-wizard-actions[hidden],
.ai-story-result-actions[hidden] {
  display: none !important;
}

.ai-story-brief-editor {
  height: 172px;
  min-height: 146px;
}

.ai-story-upload-section .ai-video-upload-header {
  margin-bottom: 10px;
}

.ai-story-reference-grid.has-upload-previews {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
}

.ai-story-file-picker {
  min-height: 96px;
}

.ai-story-reference-list {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-story-reference-list[hidden] {
  display: none;
}

.ai-story-reference-list li {
  min-width: 0;
  display: block;
}

.ai-story-reference-card {
  padding: 0;
  color: inherit;
  cursor: default;
  font: inherit;
}

.ai-story-reference-card .ai-video-upload-preview-kind {
  max-width: calc(100% - 56px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-media-settings {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ai-story-media-control {
  position: relative;
  min-width: 0;
}

.ai-story-media-control.is-open {
  z-index: 220;
}

.ai-story-media-native {
  position: absolute;
  inset: auto auto 0 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.ai-story-media-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--brand-slate);
  font: inherit;
  font-size: 14px;
  font-weight: 680;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.ai-story-media-button--plain {
  grid-template-columns: minmax(0, 1fr) 18px;
}

.ai-story-media-button:hover,
.ai-story-media-button[aria-expanded="true"] {
  border-color: var(--line-strong);
  background: #fff;
}

.ai-story-media-button:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(71, 119, 244, 0.15);
  outline: none;
}

.ai-story-media-button__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-media-button__chevron {
  width: 9px;
  height: 9px;
  justify-self: end;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  opacity: 0.65;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.ai-story-media-button[aria-expanded="true"] .ai-story-media-button__chevron {
  opacity: 0.9;
  transform: translateY(2px) rotate(225deg);
}

.ai-story-media-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 220;
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(86, 101, 122, 0.14);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow:
    0 18px 40px rgba(21, 28, 44, 0.14),
    0 0 0 4px rgba(86, 101, 122, 0.04);
}

.ai-story-media-menu[hidden] {
  display: none;
}

.ai-story-media-option {
  min-height: 38px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--brand-slate);
  font: inherit;
  font-size: 13px;
  font-weight: 680;
  text-align: left;
  cursor: pointer;
}

.ai-story-media-option--plain {
  grid-template-columns: minmax(0, 1fr) 14px;
}

.ai-story-media-option > span:not(.ai-story-media-option__icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-media-option__icon {
  justify-self: center;
  opacity: 0.82;
}

.ai-story-media-option .ai-video-setting-icon--duration {
  width: 18px;
  height: 18px;
}

.ai-story-media-option .ai-video-setting-icon--aspect {
  width: 18px;
  height: 11px;
}

.ai-story-media-option .ai-video-setting-icon--aspect[data-aspect-shape="tall"] {
  width: 11px;
  height: 20px;
}

.ai-story-media-option .ai-video-setting-icon--aspect[data-aspect-shape="square"] {
  width: 16px;
  height: 16px;
}

.ai-story-media-option .ai-video-setting-icon--resolution {
  min-width: 27px;
  height: 18px;
  font-size: 8px;
}

.ai-story-media-option::after {
  content: "";
  width: 7px;
  height: 12px;
  justify-self: end;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg);
}

.ai-story-media-option:hover,
.ai-story-media-option:focus-visible,
.ai-story-media-option.is-active {
  border-color: rgba(86, 101, 122, 0.14);
  background: var(--panel-soft);
  outline: none;
}

.ai-story-media-option.is-active::after {
  border-color: currentColor;
}

.ai-tools-form__grid.ai-story-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ai-story-subtitle-toggle {
  min-height: 48px;
  align-self: end;
  padding: 0 2px;
}

.ai-story-feedback {
  min-width: 0;
  flex: 1 1 auto;
  padding: 9px 10px;
  border: 1px solid rgba(71, 119, 244, 0.22);
  border-radius: 8px;
  background: rgba(71, 119, 244, 0.07);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.ai-story-feedback.is-error {
  border-color: rgba(214, 63, 63, 0.28);
  background: rgba(214, 63, 63, 0.08);
  color: #b83232;
}

.ai-story-results-panel {
  min-height: 640px;
}

.ai-story-results-header {
  flex: 0 0 auto;
  padding-bottom: 16px;
}

.ai-story-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 20px 18px;
  padding: 6px;
  border: 1px solid rgba(86, 101, 122, 0.14);
  border-radius: 8px;
  background: var(--page-bg);
}

.ai-story-stepper {
  --ai-story-step-number-bg: rgba(71, 119, 244, 0.10);
  --ai-story-step-number-border: rgba(71, 119, 244, 0.24);
  --ai-story-step-underline: var(--accent);
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: end;
  gap: 50px;
  margin: 0 20px 18px;
  padding: 8px 4px 0;
  background: transparent;
}

.ai-story-tab {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
  text-align: left;
}

.ai-story-step {
  position: relative;
  min-width: 0;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 2px 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0;
  cursor: pointer;
  text-align: center;
  transition: color 0.16s ease, opacity 0.16s ease;
}

.ai-story-step span {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ai-story-step strong {
  min-width: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: nowrap;
  transition: font-weight 0.16s ease;
}

.ai-story-step::after {
  content: "";
  position: absolute;
  left: calc(50% + 3px);
  right: auto;
  bottom: 0;
  width: min(92px, calc(100% - 8px));
  height: 2px;
  border-radius: 999px;
  background: var(--ai-story-step-underline);
  opacity: 0;
  transform: translateX(-50%) scaleX(0.45);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.ai-story-step:not(:disabled):hover {
  color: var(--ink);
}

.ai-story-step:not(:disabled):hover span {
  color: var(--ink);
}

.ai-story-tab.is-active {
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(23, 32, 51, 0.08);
}

.ai-story-step.is-active {
  color: var(--ink);
}

.ai-story-step.is-active span {
  border-color: var(--ai-story-step-number-border);
  background: var(--ai-story-step-number-bg);
  color: var(--accent);
}

.ai-story-step.is-active strong {
  font-weight: 850;
}

.ai-story-step.is-active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.ai-story-step.is-complete {
  color: var(--accent-soft);
}

.ai-story-step:disabled {
  cursor: default;
  opacity: 0.58;
}

.ai-story-phase-header {
  padding-bottom: 12px;
  justify-content: center;
  text-align: center;
}

.ai-story-phase-header > div {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ai-story-phase-header h2 {
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.16;
  white-space: nowrap;
}

.ai-video-results-panel .ai-story-phase-header p:not(.dashboard-card__eyebrow) {
  justify-self: center;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.ai-story-review-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px 20px 20px;
  overflow: auto;
}

.ai-story-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ai-story-summary-grid > div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.ai-story-summary-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  text-transform: uppercase;
}

.ai-story-summary-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-list-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.ai-story-list-header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ai-story-list-header strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.ai-story-list-header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.ai-story-scene-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-story-scene {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.ai-story-scene--with-thumb {
  grid-template-columns: 34px minmax(118px, 156px) minmax(0, 1fr);
  align-items: start;
}

.ai-story-scene--side-actions {
  grid-template-columns: 34px minmax(118px, 156px) minmax(0, 1fr) 128px;
}

.ai-story-scene__index {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(71, 119, 244, 0.1);
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.ai-story-scene.is-ready .ai-story-scene__index {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.ai-story-scene.is-waiting .ai-story-scene__index {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

.ai-story-scene.is-issue .ai-story-scene__index {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.ai-story-scene__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(71, 119, 244, 0.08), rgba(22, 163, 74, 0.06));
  color: var(--accent-soft);
  font-size: 18px;
  font-weight: 850;
}

.ai-story-scene__thumb--button {
  padding: 0;
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ai-story-scene__thumb--button:hover {
  border-color: var(--accent-soft);
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.12);
  transform: translateY(-1px);
}

.ai-story-scene__thumb--button:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(71, 119, 244, 0.18);
  outline: none;
}

.ai-story-scene__thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-story-scene__body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ai-story-scene__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-story-scene__title-row strong {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-scene__title-row span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.ai-story-scene-status {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.ai-story-scene-status span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.ai-story-scene-status--icon-only {
  width: 30px;
  min-height: 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
}

.ai-story-scene-status--icon-only .ai-story-scene-status__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ai-story-timeline-scene .ai-story-scene-status {
  width: 30px;
  min-height: 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
}

.ai-story-timeline-scene .ai-story-scene-status .ai-story-scene-status__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ai-story-scene-status__icon {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 999px;
}

.ai-story-scene-status.is-ready {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.ai-story-scene-status--icon-only.is-ready {
  width: 30px;
  min-height: 30px;
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.1);
}

.ai-story-scene-status.is-ready .ai-story-scene-status__icon {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
}

.ai-story-scene-status.is-ready .ai-story-scene-status__icon::before {
  content: "";
  width: 9px;
  height: 5px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-left: 2.2px solid currentColor;
  border-bottom: 2.2px solid currentColor;
  transform: rotate(-45deg);
}

.ai-story-scene-status.is-waiting {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(217, 119, 6, 0.1);
  color: #b45309;
}

.ai-story-scene-status.is-waiting .ai-story-scene-status__icon::before,
.ai-story-scene-status.is-processing .ai-story-scene-status__icon::before {
  content: "";
  width: 1.5px;
  height: 5px;
  position: absolute;
  left: 5.75px;
  top: 2.5px;
  border-radius: 999px;
  background: currentColor;
}

.ai-story-scene-status.is-waiting .ai-story-scene-status__icon::after,
.ai-story-scene-status.is-processing .ai-story-scene-status__icon::after {
  content: "";
  width: 4px;
  height: 1.5px;
  position: absolute;
  left: 5.75px;
  top: 6px;
  border-radius: 999px;
  background: currentColor;
}

.ai-story-scene-status.is-processing {
  border-color: rgba(71, 119, 244, 0.2);
  background: rgba(71, 119, 244, 0.1);
  color: var(--accent-soft);
}

.ai-story-scene-status.is-issue {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.ai-story-scene-status.is-issue .ai-story-scene-status__icon {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
}

.ai-story-scene-status.is-issue .ai-story-scene-status__icon::before {
  content: "!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.ai-story-scene p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ai-story-scene__body > span:not(.ai-story-scene__index) {
  color: var(--muted-soft);
  font-size: 12px;
  line-height: 1.4;
}

.ai-story-scene__body small {
  color: var(--accent-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.ai-story-scene__side {
  min-width: 0;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 8px;
}

.ai-story-scene__side .ai-story-scene-actions {
  width: 118px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 0;
}

.ai-story-scene__side .ai-story-scene-action {
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
}

.ai-story-scene__side .ai-story-scene-action--with-credit {
  min-height: 44px;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px;
}

.ai-story-scene-action-label {
  min-width: 0;
  overflow: hidden;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-scene-action-credit {
  min-width: 0;
  color: var(--accent-soft);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.ai-story-scene-actions,
.ai-story-scene-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.ai-story-scene-action {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-bg);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
}

.ai-story-scene-action:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.ai-story-scene-action:focus-visible {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(71, 119, 244, 0.15);
  outline: none;
}

.ai-story-scene-action:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.ai-story-scene-action--primary {
  border-color: rgba(71, 119, 244, 0.4);
  background: rgba(71, 119, 244, 0.09);
  color: var(--accent);
}

.ai-story-scene-editor {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.ai-story-scene-editor label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.ai-story-scene-editor input,
.ai-story-scene-editor textarea {
  font-size: 13px;
}

.ai-story-scene-editor__textarea {
  min-height: 88px;
  resize: vertical;
}

.ai-story-scene-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
}

.ai-story-scene-dialog::backdrop {
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
}

.ai-story-scene-dialog__panel {
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: 0 28px 74px rgba(23, 32, 51, 0.28);
}

.ai-story-scene-dialog__header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.ai-story-scene-dialog__header h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-story-scene-dialog__close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.ai-story-scene-dialog__close:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink);
}

.ai-story-scene-editor--dialog {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: var(--panel-bg);
}

.ai-story-scene-editor--dialog .ai-story-scene-editor__textarea {
  min-height: 116px;
}

.ai-story-scene-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel-bg);
}

.ai-story-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-story-timeline-meta span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-story-timeline-meta .ai-story-status-chip.is-ready {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}

.ai-story-timeline-meta .ai-story-status-chip.is-waiting {
  border-color: rgba(217, 119, 6, 0.18);
  background: rgba(217, 119, 6, 0.08);
  color: #b45309;
}

.ai-story-timeline-meta .ai-story-status-chip.is-issue {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.ai-story-timeline-issues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-story-timeline-issues small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.ai-story-asset-media {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.ai-story-asset-media--compact {
  margin-top: 4px;
}

.ai-story-asset-media--scene-video video {
  display: block;
  width: min(100%, 420px);
  max-height: 236px;
  border-radius: 12px;
  background: #0b1020;
  object-fit: contain;
}

.ai-story-audio-player {
  --ai-story-audio-progress: 0%;
  width: min(100%, 420px);
  min-height: 36px;
  display: grid;
  grid-template-columns: 28px auto minmax(116px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(86, 101, 122, 0.12);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink-soft);
}

.ai-story-audio-player__media {
  display: none;
}

.ai-story-audio-player__button {
  width: 28px;
  height: 28px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.ai-story-audio-player__button:hover,
.ai-story-audio-player__button:focus-visible {
  background: rgba(71, 119, 244, 0.1);
  color: var(--accent-soft);
  outline: none;
}

.ai-story-audio-player__button:disabled {
  opacity: 0.42;
  cursor: default;
}

.ai-story-audio-player__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.ai-story-audio-player.is-playing .ai-story-audio-player__play::before {
  width: 9px;
  height: 11px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px 9px);
}

.ai-story-audio-player__time {
  min-width: 66px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.ai-story-audio-player__seek {
  --ai-story-audio-progress: 0%;
  min-width: 0;
  height: 18px;
  position: relative;
  display: flex;
  align-items: center;
}

.ai-story-audio-player__seek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ink-soft) 0 var(--ai-story-audio-progress), rgba(86, 101, 122, 0.22) var(--ai-story-audio-progress) 100%);
  pointer-events: none;
}

.ai-story-audio-player__range {
  width: 100%;
  min-width: 0;
  height: 16px;
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.ai-story-audio-player__range:disabled {
  opacity: 0.56;
  cursor: default;
}

.ai-story-audio-player__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.ai-story-audio-player__range::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
  margin-top: -3px;
  appearance: none;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.2);
}

.ai-story-audio-player__range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.ai-story-audio-player__range::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

.ai-story-audio-player__range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: 0 2px 8px rgba(23, 32, 51, 0.2);
}

.ai-story-audio-player.is-error {
  border-color: rgba(220, 38, 38, 0.22);
  background: rgba(220, 38, 38, 0.07);
}

.ai-story-audio-player--preview {
  width: min(560px, 100%);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.9);
}

.ai-story-audio-player--preview .ai-story-audio-player__button {
  color: #ffffff;
}

.ai-story-audio-player--preview .ai-story-audio-player__button:hover,
.ai-story-audio-player--preview .ai-story-audio-player__button:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.ai-story-audio-player--preview .ai-story-audio-player__time {
  color: rgba(255, 255, 255, 0.76);
}

.ai-story-audio-player--preview .ai-story-audio-player__seek::before {
  background: linear-gradient(90deg, #ffffff 0 var(--ai-story-audio-progress), rgba(255, 255, 255, 0.28) var(--ai-story-audio-progress) 100%);
}

.ai-story-audio-player--preview .ai-story-audio-player__range::-webkit-slider-thumb {
  border-color: rgba(15, 23, 42, 0.78);
  background: #ffffff;
}

.ai-story-audio-player--preview .ai-story-audio-player__range::-moz-range-thumb {
  border-color: rgba(15, 23, 42, 0.78);
  background: #ffffff;
}

.ai-story-asset-media__item {
  display: grid;
  gap: 8px;
}

.ai-story-asset-media img,
.ai-story-asset-media video {
  width: min(100%, 360px);
  max-height: 260px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-bg);
  object-fit: contain;
}

.ai-story-asset-media__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-story-asset-media__actions a {
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.ai-story-asset-preview-modal {
  z-index: 240;
}

.ai-story-asset-preview-modal .ai-media-preview-modal__viewport {
  align-items: center;
  padding-bottom: 56px;
}

.ai-story-asset-preview__content {
  width: min(1120px, calc(100vw - 144px));
  max-height: calc(100vh - 112px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  gap: 14px;
}

.ai-media-preview-modal__viewport .ai-story-asset-preview__image {
  max-width: 100%;
  max-height: calc(100vh - 190px);
}

.ai-story-asset-preview__placeholder {
  min-height: 220px;
  width: min(100%, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.ai-story-asset-preview__audio {
  width: min(680px, 100%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

.ai-story-asset-preview__audio span {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.ai-story-asset-preview__audio small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 750;
}

.ai-story-asset-preview__native-audio {
  width: 100%;
  min-width: 260px;
}

@media (max-width: 720px) {
  .ai-story-asset-preview__content {
    width: calc(100vw - 28px);
    max-height: calc(100vh - 92px);
  }

  .ai-media-preview-modal__viewport .ai-story-asset-preview__image {
    max-height: calc(100vh - 220px);
  }

  .ai-story-asset-preview__audio {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    border-radius: 14px;
  }

  .ai-story-asset-preview__audio span {
    text-align: center;
  }

  .ai-story-asset-preview__native-audio {
    min-width: 0;
  }
}

.ai-story-final-video__player {
  width: min(100%, 560px);
  max-height: 320px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0f172a;
}

.ai-story-final-video__download {
  width: max-content;
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.ai-story-wizard-dock {
  position: fixed;
  right: 0;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: var(--portal-sidebar-width, 0px);
  z-index: 160;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 0 var(--portal-admin-gutter, 24px);
  pointer-events: none;
}

.ai-story-wizard-dock > * {
  pointer-events: auto;
}

.ai-story-wizard-dock .ai-story-feedback {
  width: min(100%, 480px);
  box-shadow: 0 10px 28px rgba(23, 32, 51, 0.12);
}

.ai-story-feedback[hidden] {
  display: none !important;
}

.ai-story-wizard-actions {
  width: min(100%, 480px);
  display: grid;
  grid-template-columns: 42px minmax(170px, 1fr) 42px !important;
  grid-auto-columns: 42px;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(86, 101, 122, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 18px 42px rgba(23, 32, 51, 0.16),
    0 1px 0 rgba(255, 255, 255, 0.78) inset;
  backdrop-filter: blur(16px);
}

.ai-story-wizard-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ai-story-wizard-button--secondary {
  border: 1px solid var(--line);
  background: var(--control-surface);
  color: var(--brand-slate);
}

.ai-story-wizard-button--previous,
.ai-story-wizard-button--next {
  width: 42px;
  min-width: 42px;
  position: relative;
  padding: 0;
  font-size: 0;
}

.ai-story-wizard-button--previous span,
.ai-story-wizard-button--next span {
  display: none !important;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ai-story-wizard-button--previous::before,
.ai-story-wizard-button--next::before {
  content: "";
  width: 10px;
  height: 10px;
  box-sizing: border-box;
}

.ai-story-wizard-button--previous::before {
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.ai-story-wizard-button--next::before {
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.ai-story-wizard-actions > .ai-story-wizard-button--previous {
  grid-column: 1;
  grid-row: 1;
}

.ai-story-wizard-actions > .ai-video-generate-button {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.ai-story-wizard-actions > .ai-story-wizard-button--next {
  grid-column: 3;
  grid-row: 1;
}

.ai-story-wizard-button--secondary:hover:not(:disabled),
.ai-story-wizard-button--secondary:focus-visible {
  border-color: var(--line-strong);
  background: #fff;
  outline: none;
}

.ai-story-wizard-button--primary {
  min-width: 170px;
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.ai-story-wizard-button--primary .ai-video-generate-label,
.ai-story-wizard-button--primary .ai-video-generate-cost-wrap {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}

.ai-story-wizard-button--primary:focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.34);
  outline-offset: 3px;
}

.ai-story-wizard-button:disabled {
  cursor: default;
  opacity: 0.58;
  transform: none;
}

@media (max-width: 900px) {
  .ai-story-topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .ai-story-history {
    width: 100%;
  }

  .ai-story-history-popover {
    width: 100%;
  }

  .ai-story-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
  }

  .ai-story-step {
    min-height: 32px;
    padding: 0 2px 10px;
    gap: 4px;
  }

  .ai-story-step::after {
    width: min(70px, calc(100% - 8px));
    height: 2px;
  }

  .ai-story-step span {
    width: 20px;
    height: 20px;
    font-size: 12px;
  }

  .ai-story-step strong {
    font-size: 13px;
  }

  .ai-story-phase-header h2 {
    font-size: 22px;
    white-space: normal;
  }

  .ai-video-results-panel .ai-story-phase-header p:not(.dashboard-card__eyebrow) {
    font-size: 12px;
    line-height: 1.45;
  }

  .ai-story-summary-grid {
    grid-template-columns: 1fr;
  }

  .ai-story-media-settings {
    grid-template-columns: 1fr;
  }

  .ai-tools-form__grid.ai-story-options-grid {
    grid-template-columns: 1fr;
  }

  .ai-story-wizard-dock {
    left: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    padding: 0 12px;
  }

  .ai-story-wizard-dock .ai-story-feedback,
  .ai-story-wizard-actions {
    width: 100%;
  }

  .ai-story-wizard-actions {
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
    grid-auto-columns: 40px;
    padding: 6px;
  }

  .ai-story-wizard-button {
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ai-story-wizard-button--previous,
  .ai-story-wizard-button--next {
    width: 40px;
    min-width: 40px;
  }

  .ai-story-scene--with-thumb {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ai-story-scene--side-actions {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .ai-story-scene--with-thumb .ai-story-scene__thumb {
    grid-column: 2;
    max-width: 220px;
  }

  .ai-story-scene--with-thumb .ai-story-scene__body {
    grid-column: 1 / -1;
  }

  .ai-story-scene--side-actions .ai-story-scene__side {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .ai-story-scene--side-actions .ai-story-scene__side .ai-story-scene-actions {
    width: min(100%, 160px);
  }
}

.ai-creation-history-page-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ai-creation-history-page .ai-creation-history-shell {
  align-items: stretch;
}

.ai-creation-history-page .ai-creation-history-page-layout {
  max-width: none;
}

.ai-creation-history-page .ai-result-view-column {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.ai-creation-history-page .ai-result-view-actions {
  display: flex;
}

.ai-creation-history-page .ai-video-results-panel {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
}

.ai-creation-history-page .ai-video-result-stage {
  min-height: 0;
}

.ai-result-view-actions {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  width: 100%;
}

.ai-history-panel[hidden] {
  display: none;
}

.ai-creation-history-page .ai-history-tabs {
  flex: 0 0 auto;
}

.ai-history-tablist {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-result-view-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ai-storage-gauge {
  display: inline-flex;
  width: clamp(190px, 18vw, 236px);
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: default;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.ai-storage-gauge[hidden] {
  display: none;
}

.ai-storage-gauge.is-actionable {
  cursor: pointer;
}

.ai-storage-gauge.is-actionable:hover {
  border-color: transparent;
  background: rgba(54, 96, 227, 0.055);
  color: var(--ink);
}

.ai-storage-gauge.is-actionable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ai-storage-gauge__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-storage-gauge__body {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 5px;
}

.ai-storage-gauge__text,
.ai-storage-gauge__compact {
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-storage-gauge__compact {
  display: none;
}

.ai-storage-gauge__track {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.16);
}

.ai-storage-gauge__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms ease, background-color 160ms ease;
}

.ai-storage-gauge.is-warning {
  color: #b36b00;
}

.ai-storage-gauge.is-warning .ai-storage-gauge__fill {
  background: #f59e0b;
}

.ai-storage-gauge.is-danger {
  color: var(--muted);
}

.ai-storage-gauge.is-danger .ai-storage-gauge__icon {
  color: #d6534d;
}

.ai-storage-gauge.is-danger .ai-storage-gauge__fill {
  background: #e26761;
}

.ai-jobs-activity-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.ai-creation-history-page .ai-jobs-layout {
  height: 100%;
  min-height: 0;
  gap: 16px;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.7fr);
  align-items: stretch;
}

.ai-creation-history-page .ai-jobs-card,
.ai-creation-history-page .ai-jobs-detail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-creation-history-page .ai-jobs-table-wrap {
  min-height: 0;
  overflow: auto;
}

.ai-creation-history-page .ai-jobs-detail .ai-job-result-box {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.ai-result-view-button {
  min-width: 128px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.ai-result-view-button:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.ai-result-view-button.is-active {
  border-color: transparent;
  background: #ffffff;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(86, 101, 122, 0.22),
    inset 0 -1px 0 rgba(86, 101, 122, 0.12);
}

.ai-result-media-filter {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}

.ai-result-view-header .ai-result-media-filter {
  flex: 0 0 auto;
  align-self: flex-start;
}

.credits-history-card__header.ai-result-view-header--media-filter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title filter"
    "copy copy";
  column-gap: 18px;
  row-gap: 2px;
}

.ai-result-view-header--media-filter > div:first-child {
  display: contents;
}

.ai-result-view-header--media-filter h3 {
  grid-area: title;
  min-width: 0;
  white-space: nowrap;
}

.ai-result-view-header--media-filter .ai-result-view-copy {
  grid-area: copy;
  width: 100%;
  min-width: 0;
  min-height: 1.45em;
  margin-top: 0 !important;
  white-space: normal;
}

.ai-result-view-header--media-filter .ai-result-media-filter {
  margin-left: 0;
}

.ai-result-view-header__controls {
  grid-area: filter;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  transform: translateY(-3px);
}

@container (max-width: 360px) {
  .credits-history-card__header.ai-result-view-header--media-filter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "filter"
      "copy";
    column-gap: 0;
    row-gap: 8px;
  }

  .ai-result-view-header--media-filter .ai-result-view-header__controls {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
    transform: none;
  }
}

/* Thin vertical rule between the selection toggle and the media-filter group. */
.ai-result-view-header__separator {
  width: 1px;
  height: 16px;
  flex: 0 0 auto;
  align-self: center;
  background: var(--line-strong);
}

/* The rule belongs to the toggle — drop it when the toggle itself is hidden
   (asset/sample views hide the selection toggle from JS). */
.ai-creation-selection-toggle[hidden] + .ai-result-view-header__separator {
  display: none;
}

/* Icon button matching the media-filter icons it sits beside, including the
   same aria-label CSS tooltip. Selection mode ON = .is-active (set from JS). */
.ai-creation-selection-toggle {
  position: relative;
  display: inline-flex;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.ai-creation-selection-toggle[hidden] {
  display: none;
}

.ai-creation-selection-toggle::after {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% + 7px);
  padding: 5px 7px;
  border-radius: 5px;
  background: #20242d;
  color: #ffffff;
  content: attr(aria-label);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.ai-creation-selection-toggle:hover::after,
.ai-creation-selection-toggle:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ai-creation-selection-toggle__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ai-creation-selection-toggle:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.ai-creation-selection-toggle.is-active,
.ai-creation-selection-toggle[aria-pressed="true"] {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  color: #ffffff;
  box-shadow:
    0 0 0 3px rgba(var(--portal-accent-rgb), 0.18),
    0 4px 10px rgba(var(--portal-accent-rgb), 0.2);
}

.ai-creation-selection-toggle.is-active .ai-creation-selection-toggle__icon rect,
.ai-creation-selection-toggle[aria-pressed="true"] .ai-creation-selection-toggle__icon rect {
  fill: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .ai-creation-selection-toggle.is-active,
html[data-theme="dark"] .ai-creation-selection-toggle[aria-pressed="true"] {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  color: #111827;
  box-shadow:
    0 0 0 3px rgba(var(--portal-accent-rgb), 0.24),
    0 4px 12px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .ai-creation-selection-toggle.is-active .ai-creation-selection-toggle__icon rect,
html[data-theme="dark"] .ai-creation-selection-toggle[aria-pressed="true"] .ai-creation-selection-toggle__icon rect {
  fill: rgba(17, 24, 39, 0.12);
}

.ai-creation-selection-toggle:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 1px;
}

.ai-creation-selection-toggle:disabled {
  cursor: default;
  opacity: 0.5;
}

.ai-creation-selection-bar {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}

.ai-creation-selection-bar[hidden] {
  display: none;
}

.ai-creation-selection-bar__status {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.ai-creation-selection-bar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ai-creation-selection-bar__button {
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  /* Single-line, fixed line-height so all three actions render the same 32px
     regardless of label length or container stretch. */
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.ai-creation-selection-bar__button:hover:not(:disabled),
.ai-creation-selection-bar__button:focus-visible:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--surface-strong);
}

.ai-creation-selection-bar__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ai-creation-selection-bar__button--danger {
  border-color: rgba(205, 55, 45, 0.28);
  background: var(--danger-text);
  color: #ffffff;
}

.ai-creation-selection-bar__button--danger:hover:not(:disabled),
.ai-creation-selection-bar__button--danger:focus-visible:not(:disabled) {
  border-color: #aa332a;
  background: #aa332a;
}

.ai-creation-selection-bar__button:disabled {
  cursor: default;
  opacity: 0.5;
}

.ai-result-media-filter[hidden] {
  display: none;
}

.ai-result-media-filter__button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.ai-result-media-filter__button--icon {
  position: relative;
  display: inline-flex;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.ai-result-media-filter__button--icon::after {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(100% + 7px);
  padding: 5px 7px;
  border-radius: 5px;
  background: #20242d;
  color: #ffffff;
  content: attr(aria-label);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -2px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
}

.ai-result-media-filter__button--icon:hover::after,
.ai-result-media-filter__button--icon:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.ai-result-media-filter__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.ai-result-media-filter__button:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.ai-result-media-filter__button.is-active {
  border-color: transparent;
  background: #ffffff;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px rgba(86, 101, 122, 0.18),
    inset 0 -1px 0 rgba(86, 101, 122, 0.1);
}

.ai-result-media-filter__button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.ai-video-result-stage {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-creation-history-panel .ai-video-result-stage {
  --ai-creation-history-scroll-edge: 22px;
  --ai-creation-history-scrollbar-width: 0px;
  margin-inline-end: calc(-1 * var(--ai-creation-history-scroll-edge));
}

.ai-video-result-box {
  flex: 1 1 auto;
  min-height: 440px;
}

.ai-creation-history {
  flex: 1 1 auto;
  min-height: 440px;
  margin: 18px 0 0;
  padding-inline-start: 0;
  padding-inline-end: var(--ai-creation-history-scroll-edge);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

.ai-creation-history:not(.is-empty) {
  overflow-y: auto;
}

.ai-creation-history.has-scrollbar {
  padding-inline-end: max(0px, calc(var(--ai-creation-history-scroll-edge) - var(--ai-creation-history-scrollbar-width)));
}

.ai-creation-history::-webkit-scrollbar {
  width: 10px;
}

.ai-creation-history::-webkit-scrollbar-track {
  background: transparent;
}

.ai-creation-history::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid var(--panel-bg);
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.34);
}

.ai-creation-history::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.52);
}

.ai-creation-history.is-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline-end: 0;
}

.ai-sample-results {
  flex: 1 1 auto;
  min-height: 440px;
  margin: 18px 0 0;
  margin-inline-end: var(--ai-creation-history-scroll-edge, 0px);
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
}

.ai-tools-form.uses-persistent-form-scrollbar .ai-video-form-scroll {
  --ai-video-native-scrollbar-width: 0px;
}

.ai-sample-results::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.ai-sample-results:not(.is-empty) {
  display: flex;
  flex-direction: column;
}

.ai-sample-results:not(.is-empty) > .ai-sample-results__grid,
.ai-sample-results:not(.is-empty) > .ai-sample-results__carousel {
  margin-block: 24px 0;
}

.ai-sample-results__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-content: start;
}

.portal-page[data-portal-page="ai-video"] .ai-sample-results__grid {
  grid-template-columns: minmax(0, 1fr);
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results__grid {
  grid-template-columns: minmax(0, 1fr);
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results {
  margin-top: 10px;
}

.portal-page[data-portal-page="ai-video"] .ai-sample-results__carousel,
.portal-page[data-portal-page="ai-image"] .ai-sample-results__carousel {
  align-self: center;
  height: max-content;
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results__carousel {
  gap: 4px;
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results__controls {
  min-height: 28px;
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results__nav {
  width: 28px;
  height: 28px;
}

.portal-page[data-portal-page="ai-image"] .ai-sample-results__position {
  line-height: 28px;
}

/* Keep sample media and its controls in one centered, height-constrained group. */
@media (min-width: 1121px) {
  .ai-sample-results {
    overflow: hidden;
  }

  .portal-page[data-portal-page="ai-image"] .ai-sample-results__carousel {
    min-height: 0;
    grid-template-rows: auto auto;
  }

  .portal-page[data-portal-page="ai-image"] .ai-sample-results__carousel .ai-sample-results__grid {
    height: auto;
    min-height: 0;
    place-items: center;
    place-content: center;
  }

  .portal-page[data-portal-page="ai-image"] .ai-sample-result-card {
    height: auto;
    min-height: 0;
    place-items: center;
    place-content: center;
  }

  .portal-page[data-portal-page="ai-image"] .ai-sample-result-card__media {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    justify-self: center;
  }
}

.ai-sample-results__carousel {
  width: 100%;
  display: grid;
  gap: 12px;
}

.ai-sample-results__carousel .ai-sample-results__grid {
  width: 100%;
}

.ai-sample-results__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
}

.ai-sample-results__nav {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: 600 1.45rem/1 Arial, sans-serif;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.ai-sample-results__nav:hover,
.ai-sample-results__nav:focus-visible {
  background: var(--brand-tile);
  color: var(--ink);
}

.ai-sample-results__nav:focus-visible {
  outline: 2px solid rgba(94, 133, 255, 0.72);
  outline-offset: 1px;
}

.ai-sample-results__position {
  min-width: 92px;
  padding: 0 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 32px;
  text-align: center;
  pointer-events: none;
}

.ai-sample-results.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.ai-sample-results[hidden] {
  display: none;
}

.ai-sample-results__empty {
  min-height: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
  text-align: center;
}

.ai-sample-result-card {
  width: min(100%, var(--ai-sample-card-fit-width, 100%));
  min-width: 0;
  justify-self: center;
  display: grid;
  gap: 10px;
}

.ai-sample-result-card__view-toggle {
  width: min(100%, 260px);
  min-width: 0;
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--page-bg);
}

.ai-sample-result-card__view-button {
  min-width: 0;
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 720;
  cursor: pointer;
}

.ai-sample-result-card__view-button:hover {
  color: var(--ink);
}

.ai-sample-result-card__view-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.ai-sample-result-card__view-button.is-active {
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(28, 40, 58, 0.12);
}

.ai-sample-result-card__media {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-bg);
}

.ai-sample-result-card__media--video {
  aspect-ratio: var(--ai-sample-video-aspect-ratio, 16 / 9);
}

.ai-sample-result-card__media--image {
  aspect-ratio: var(--ai-sample-image-aspect-ratio, 16 / 9);
}

.ai-sample-result-card__media--next {
  appearance: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.ai-sample-result-card__media--next:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.portal-page[data-portal-page="ai-image"] .ai-sample-result-card__media {
  aspect-ratio: 1 / 1;
}

.ai-sample-result-card__media img,
.ai-sample-result-card__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--panel-bg);
}

.ai-sample-result-card__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ai-sample-result-card__body strong,
.ai-sample-result-card__body span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-sample-result-card__body strong {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 780;
}

.ai-sample-result-card__body span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 520;
}

.ai-creation-history__grid {
  --ai-creation-history-card-min: 190px;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ai-creation-history-card-min)), 1fr));
  gap: 14px;
  align-content: start;
  contain: layout paint;
}

.ai-creation-history__more {
  min-width: 132px;
  min-height: 38px;
  margin: 18px auto 0;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.ai-creation-history__more:hover,
.ai-creation-history__more:focus-visible {
  border-color: var(--line-strong);
  background: var(--surface);
}

.ai-creation-history__more:disabled {
  cursor: default;
  opacity: 0.62;
}

.ai-creation-history__empty {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
}

.ai-creation-history__empty[data-tone="error"] {
  background: transparent;
  color: var(--error-text);
}

.ai-creation-history-card {
  position: relative;
  min-width: 0;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  contain: layout paint style;
}

.ai-creation-history-card__preview {
  appearance: none;
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  cursor: pointer;
}

.ai-creation-history-card__preview:focus-visible {
  outline: 2px solid rgba(94, 117, 148, 0.46);
  outline-offset: 3px;
}

.ai-creation-history-card__select {
  position: absolute;
  z-index: 6;
  left: 9px;
  top: 9px;
  width: 30px;
  height: 30px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.48);
  color: transparent;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(12, 18, 30, 0.24);
  backdrop-filter: blur(8px);
}

.ai-creation-history.is-selecting .ai-creation-history-card__select {
  display: inline-flex;
}

.ai-creation-history-card__select svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-creation-history-card__select[aria-pressed="true"] {
  border-color: #ffffff;
  background: var(--portal-accent);
  color: #ffffff;
  box-shadow:
    0 0 0 2px var(--portal-accent),
    0 5px 14px rgba(var(--portal-accent-rgb), 0.24);
}

.ai-creation-history-card__select:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ai-creation-history.is-selecting .ai-creation-history-card[data-history-selectable="true"] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.ai-creation-history.is-drag-selecting,
.ai-creation-history.is-drag-selecting * {
  cursor: crosshair !important;
  user-select: none;
}

.ai-creation-history.is-selecting .ai-creation-history-card__preview {
  pointer-events: none;
}

.ai-creation-history.is-selecting .ai-creation-history-card__actions,
.ai-creation-history.is-selecting .ai-creation-history-card__reuse {
  opacity: 0;
  pointer-events: none;
}

.ai-creation-history-card.is-selected::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid var(--portal-accent);
  border-radius: 8px;
  background: rgba(var(--portal-accent-rgb), 0.055);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.ai-creation-history-card.is-selected .ai-creation-history-card__media {
  border-color: var(--portal-accent);
  box-shadow: none;
}

html[data-theme="dark"] .ai-creation-history-card.is-selected::after {
  background: rgba(var(--portal-accent-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(12, 18, 30, 0.52);
}

.ai-creation-history-card--pending {
  cursor: default;
}

.ai-creation-history-card--pending:hover,
.ai-creation-history-card--pending:focus-visible {
  transform: none;
}

.ai-creation-history-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  pointer-events: none;
}

.ai-creation-history-card__media--failed {
  background: var(--panel-bg);
}

/* Skeleton shimmer while card media loads — a themed surface tint with a
   soft sweep so loading cards never read as empty white boxes. The sweep is a
   transform-only ::before layer (compositor friendly, clipped by the media's
   overflow:hidden). */
.ai-creation-history-card__media--loading {
  --ai-skeleton-sheen: rgba(255, 255, 255, 0.75);
  background: var(--surface);
}

html[data-theme="dark"] .ai-creation-history-card__media--loading {
  --ai-skeleton-sheen: rgba(255, 255, 255, 0.06);
}

.ai-creation-history-card__media--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 32%, var(--ai-skeleton-sheen) 50%, transparent 68%);
  transform: translateX(-100%);
  animation: ai-creation-history-skeleton-sweep 1.5s ease-in-out infinite;
}

@keyframes ai-creation-history-skeleton-sweep {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-creation-history-card__media--loading::before {
    animation: none;
  }
}

.ai-creation-history-card__media--failed::after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  content: "Preview unavailable";
}

.ai-creation-history-card__media--pending {
  --ai-chip-accent: #7c3aed;
  --ai-chip-accent-soft: rgba(124, 58, 237, 0.14);
  --ai-chip-trace: rgba(124, 58, 237, 0.18);
  --ai-chip-trace-strong: rgba(124, 58, 237, 0.42);
  --ai-chip-packet: rgba(124, 58, 237, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 14px 50px;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 38%, rgba(124, 58, 237, 0.17), transparent 54%),
    radial-gradient(circle at 50% 52%, rgba(99, 102, 241, 0.09), transparent 56%),
    var(--panel-bg);
}

.ai-creation-history-card__media--pending::before,
.ai-creation-history-card__media--pending::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ai-creation-history-card__media--pending::before {
  inset: 12%;
  z-index: 0;
  opacity: 0.86;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--ai-chip-trace) 18% 19%, transparent 19% 81%, var(--ai-chip-trace) 81% 82%, transparent 82%),
    linear-gradient(0deg, transparent 0 21%, var(--ai-chip-trace) 21% 22%, transparent 22% 78%, var(--ai-chip-trace) 78% 79%, transparent 79%),
    linear-gradient(90deg, transparent 0 34%, var(--ai-chip-trace) 34% 35%, transparent 35% 65%, var(--ai-chip-trace) 65% 66%, transparent 66%),
    linear-gradient(0deg, transparent 0 35%, var(--ai-chip-trace) 35% 36%, transparent 36% 64%, var(--ai-chip-trace) 64% 65%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at 50% 43%, #000 0 34%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 43%, #000 0 34%, transparent 70%);
  animation: aiCreationHistoryCircuitGlow 2.8s ease-in-out infinite;
}

.ai-creation-history-card__media--pending::after {
  left: 16%;
  right: 16%;
  top: 41%;
  height: 18%;
  z-index: 0;
  background:
    radial-gradient(circle, var(--ai-chip-packet) 0 28%, transparent 30%) 0 50% / 34px 34px no-repeat,
    radial-gradient(circle, rgba(168, 85, 247, 0.58) 0 24%, transparent 28%) 100% 16% / 26px 26px no-repeat,
    radial-gradient(circle, rgba(99, 102, 241, 0.52) 0 24%, transparent 28%) 100% 84% / 22px 22px no-repeat,
    linear-gradient(90deg, transparent, var(--ai-chip-trace-strong), transparent) 50% 50% / 100% 1px no-repeat;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.28));
  opacity: 0;
  animation: aiCreationHistoryDataPacket 2.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ai-creation-history-card__loader {
  width: 58px;
  height: 58px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(124, 58, 237, 0.38);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)),
    var(--ai-chip-accent-soft);
  color: var(--ai-chip-accent);
  box-shadow:
    0 18px 40px rgba(124, 58, 237, 0.18),
    0 0 0 7px rgba(124, 58, 237, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
  animation: aiCreationHistoryChipGlow 2.4s ease-in-out infinite;
}

.ai-creation-history-card__loader::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(124, 58, 237, 0.42);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent) -110% 0 / 52% 100% no-repeat;
  opacity: 0.72;
  animation: aiCreationHistoryChipScan 1.9s ease-in-out infinite;
}

.ai-creation-history-card__loader::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 50% 21% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 50% 50% / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 50% 79% / 100% 2px no-repeat,
    linear-gradient(0deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 21% 50% / 2px 100% no-repeat,
    linear-gradient(0deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 50% 50% / 2px 100% no-repeat,
    linear-gradient(0deg, transparent 0 10%, var(--ai-chip-trace-strong) 10% 13%, transparent 13% 87%, var(--ai-chip-trace-strong) 87% 90%, transparent 90%) 79% 50% / 2px 100% no-repeat;
  opacity: 0.52;
}

.ai-creation-history-card__loader-mark {
  position: relative;
  z-index: 1;
  font-size: 0.84rem;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(124, 58, 237, 0.32);
}

.ai-creation-history-card__pending-text {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.ai-creation-history-card__pending-title {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 14px;
  z-index: 1;
  padding: 0 24px;
  color: rgba(124, 58, 237, 0.82);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-creation-history.is-selecting .ai-creation-history-card__pending-title {
  left: 44px;
  padding-left: 0;
}

.ai-creation-history-card__media--job-failed {
  background: linear-gradient(160deg, #fbfcfd, #f2f4f7);
}

.ai-creation-history-card__media--job-failed::after {
  content: none;
}

/* Circular warning mark above the failure text so the card reads as a state,
   not an empty box. Rendered as the flex child before the badge. */
.ai-creation-history-card__media--job-failed::before {
  content: "!";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(244, 63, 94, 0.09);
  color: var(--error-text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  animation: none;
  position: static;
  transform: none;
  box-shadow: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.ai-creation-history-card__media--job-failed .ai-creation-history-card__pending-title {
  color: var(--muted);
}

.ai-creation-history-card__failed-badge {
  position: relative;
  z-index: 1;
  color: var(--error-text);
  opacity: 0.85;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
}

.ai-creation-history-card__failed-text {
  position: relative;
  z-index: 1;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

@keyframes aiCreationHistoryChipGlow {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 18px 40px rgba(124, 58, 237, 0.16),
      0 0 0 7px rgba(124, 58, 237, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.64);
  }
  50% {
    transform: translateY(-2px);
    box-shadow:
      0 22px 46px rgba(124, 58, 237, 0.26),
      0 0 0 10px rgba(124, 58, 237, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }
}

@keyframes aiCreationHistoryChipScan {
  0%,
  100% {
    background-position: -110% 0;
    opacity: 0.5;
  }
  50% {
    background-position: 145% 0;
    opacity: 0.84;
  }
}

@keyframes aiCreationHistoryCircuitGlow {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.985);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.015);
  }
}

@keyframes aiCreationHistoryDataPacket {
  0% {
    opacity: 0;
    transform: translateX(-18px);
    background-position: 0 50%, 100% 16%, 100% 84%, 50% 50%;
  }
  18% {
    opacity: 0.9;
  }
  56% {
    opacity: 0.95;
    transform: translateX(18px);
    background-position: 50% 50%, 100% 16%, 100% 84%, 50% 50%;
  }
  100% {
    opacity: 0;
    transform: translateX(34px);
    background-position: 100% 50%, 0 16%, 0 84%, 50% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-creation-history-card__media--pending::before,
  .ai-creation-history-card__media--pending::after,
  .ai-creation-history-card__loader,
  .ai-creation-history-card__loader::before {
    animation: none;
  }

  .ai-creation-history-card__media--pending::after {
    opacity: 0.34;
    transform: none;
  }
}

.ai-creation-history-card__media img,
.ai-creation-history-card__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 1;
  transition: opacity 140ms ease;
}

.ai-creation-history-card__media--audio {
  background:
    radial-gradient(circle at 50% 46%, rgba(53, 200, 244, 0.17) 0%, rgba(77, 115, 255, 0.08) 34%, rgba(77, 115, 255, 0) 66%),
    linear-gradient(145deg, #f4f7ff 0%, #effcff 56%, #f8f5ff 100%);
}

.ai-creation-history-card__audio-cover {
  background: transparent;
}

.ai-creation-history-card__media--loading img,
.ai-creation-history-card__media--loading video,
.ai-creation-history-card__media--failed img,
.ai-creation-history-card__media--failed video {
  opacity: 0;
}

.ai-creation-history-card__footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  min-height: 58px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 28px 8px 8px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, rgba(12, 18, 30, 0), rgba(12, 18, 30, 0.72));
  color: #ffffff;
  pointer-events: none;
}

.ai-creation-history-card--audio .ai-creation-history-card__footer {
  min-height: 56px;
  padding-top: 20px;
  background: linear-gradient(180deg, rgba(17, 38, 70, 0), rgba(17, 38, 70, 0.12) 42%, rgba(17, 38, 70, 0.54));
}

/* Failed cards sit on a light rose surface, so the photo-oriented dark footer
   gradient read as a dirty smudge — fade into the card's own tone instead and
   flip the timestamp to ink. Old browsers without :has() keep the default. */
.ai-creation-history-card:has(.ai-creation-history-card__media--job-failed) .ai-creation-history-card__footer {
  background: linear-gradient(180deg, rgba(242, 244, 247, 0), rgba(238, 241, 245, 0.95));
  color: var(--ink);
}

.ai-creation-history-card:has(.ai-creation-history-card__media--job-failed) .ai-creation-history-card__info {
  color: var(--muted);
}

html[data-theme="dark"] .ai-creation-history-card:has(.ai-creation-history-card__media--job-failed) .ai-creation-history-card__footer {
  background: linear-gradient(180deg, rgba(27, 28, 32, 0), rgba(27, 28, 32, 0.82));
  color: #ffffff;
}

html[data-theme="dark"] .ai-creation-history-card:has(.ai-creation-history-card__media--job-failed) .ai-creation-history-card__info {
  color: rgba(255, 255, 255, 0.9);
}

.ai-creation-history-card__expiry-warning {
  position: absolute;
  right: 8px;
  top: 8px;
  left: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 16px);
  min-height: 24px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid var(--brand-red-border);
  border-radius: 999px;
  background: rgba(255, 241, 239, 0.92);
  color: var(--brand-red-hover);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(205, 55, 45, 0.16);
  backdrop-filter: blur(8px);
}

.ai-creation-history-card__info {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-creation-history-card__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

.ai-creation-history-card__footer--actions-only {
  justify-content: flex-end;
}

.ai-creation-history-card--pending .ai-creation-history-card__footer--actions-only {
  left: auto;
  right: 10px;
  top: 10px;
  bottom: auto;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}

.ai-creation-history-card__action {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.36);
  color: #ffffff;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.ai-creation-history-card__action:hover,
.ai-creation-history-card__action:focus-visible {
  border-color: rgba(255, 255, 255, 0.46);
  background: rgba(12, 18, 30, 0.66);
  outline: none;
  transform: translateY(-1px);
}

.ai-creation-history-card--pending .ai-creation-history-card__action {
  border-color: rgba(94, 117, 148, 0.16);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  box-shadow: 0 8px 18px rgba(31, 42, 58, 0.1);
  backdrop-filter: blur(10px);
}

.ai-creation-history-card--pending .ai-creation-history-card__action:hover,
.ai-creation-history-card--pending .ai-creation-history-card__action:focus-visible {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(255, 255, 255, 0.9);
  color: var(--danger-text);
}

.ai-creation-history-card__delete {
  padding: 0;
}

.ai-creation-history-card__delete:hover,
.ai-creation-history-card__delete:focus-visible {
  border-color: rgba(248, 113, 113, 0.62);
  color: #fecaca;
}

.ai-creation-history-card__delete:disabled {
  opacity: 0.52;
  cursor: progress;
  transform: none;
}

.ai-creation-history-card__reuse {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(37, 99, 235, 0.82);
  color: #ffffff;
  pointer-events: none;
  box-shadow:
    0 8px 18px rgba(37, 99, 235, 0.22),
    0 1px 5px rgba(12, 18, 30, 0.2);
  backdrop-filter: blur(10px);
  transform: translateY(-2px) scale(0.92);
  transition:
    opacity 120ms ease,
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.ai-creation-history-card:hover .ai-creation-history-card__reuse,
.ai-creation-history-card:focus-within .ai-creation-history-card__reuse {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ai-creation-history-card__reuse:hover,
.ai-creation-history-card__reuse:focus-visible {
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(29, 78, 216, 0.9);
  color: #ffffff;
  box-shadow:
    0 10px 22px rgba(37, 99, 235, 0.3),
    0 2px 7px rgba(12, 18, 30, 0.22);
}

.ai-creation-history-card__reuse[hidden] {
  display: none;
}

.ai-creation-history-card__action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-creation-history-card__body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.ai-creation-history-card__title,
.ai-creation-history-card__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-creation-history-card__title {
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.25;
}

.ai-creation-history-card__meta {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.ai-tools-form {
  display: grid;
  gap: 20px;
  padding: 28px;
}

.ai-tools-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ai-tools-textarea {
  min-height: 140px;
  padding: 16px 18px;
  resize: vertical;
  line-height: 1.55;
}

.ai-tools-file-picker {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ai-tools-file-picker:hover {
  border-color: var(--accent-soft);
  background: #fff;
  box-shadow: var(--portal-card-shadow);
  transform: translateY(-1px);
}

.ai-tools-file-input:focus-visible + .ai-tools-file-picker {
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
  outline: none;
}

.ai-tools-file-picker__icon {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.ai-tools-file-picker__icon::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 11px;
  width: 14px;
  height: 16px;
  border: 2px solid var(--accent);
  border-top-width: 0;
  border-radius: 0 0 3px 3px;
}

.ai-tools-file-picker__icon::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-top: 2px solid var(--accent);
  transform: rotate(45deg);
}

.ai-tools-file-picker__body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ai-tools-file-picker__title {
  font-size: 14px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-tools-file-picker__name {
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-tools-feedback[data-tone="success"],
.credits-alert[data-tone="success"] {
  border-color: rgba(18, 128, 92, 0.24);
  background: rgba(18, 128, 92, 0.12);
  color: var(--success-text);
}

.ai-tools-feedback[data-tone="error"] {
  background: var(--error-bg);
  color: var(--error-text);
}

.ai-tools-result,
.ai-jobs-detail {
  padding: 24px;
}

.ai-job-result-box {
  min-height: 260px;
  max-height: 560px;
  overflow: auto;
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 0.92rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-jobs-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 18px 0 0;
}

.ai-jobs-detail-section + .ai-jobs-detail-section {
  margin-top: 20px;
}

.ai-jobs-detail-section__title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-jobs-detail-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 10px;
}

.ai-jobs-detail-preview {
  min-width: 0;
  display: block;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.ai-jobs-detail-preview__view {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ai-jobs-detail-preview:hover,
.ai-jobs-detail-preview:focus-visible {
  border-color: var(--line-strong);
  outline: none;
}

.ai-jobs-detail-preview__view:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.ai-jobs-detail-preview__media {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(98, 118, 147, 0.12), rgba(98, 118, 147, 0.03));
}

.ai-jobs-detail-preview__media img,
.ai-jobs-detail-preview__media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-jobs-detail-preview__placeholder {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.ai-jobs-detail-preview__download {
  min-height: 34px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.86);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

.ai-jobs-detail-preview__download:hover,
.ai-jobs-detail-preview__download:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--accent);
  color: #fff;
  outline: none;
}

.ai-jobs-detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.ai-jobs-detail-meta__item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(96px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.ai-jobs-detail-meta__item:last-child {
  border-bottom: 0;
}

.ai-jobs-detail-meta dt {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-jobs-detail-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ai-jobs-detail-text,
.ai-jobs-detail-empty {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-jobs-detail-text[data-tone="error"] {
  border-color: rgba(194, 77, 55, 0.18);
  background: var(--error-bg);
  color: var(--error-text);
}

.ai-job-json-modal[hidden] {
  display: none;
}

.ai-job-json-modal__card.profile-modal__card--wide {
  width: min(100%, 760px);
}

.ai-job-json-modal__body {
  max-height: min(620px, calc(100vh - 230px));
  overflow: auto;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: 0.88rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-job-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

.ai-tools-feedback-actions {
  margin-top: 10px;
}

.ai-tools-feedback-action {
  font-family: inherit;
  cursor: pointer;
}

.ai-job-result-actions--detail-footer {
  margin: 0;
}

.ai-job-result-actions[hidden] {
  display: none;
}

.ai-job-result-action {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.ai-job-result-action:hover {
  border-color: rgba(94, 117, 148, 0.48);
  color: var(--accent);
}

.ai-job-result-action--primary {
  border-color: rgba(34, 48, 74, 0.18);
  background: var(--accent);
  color: #fff;
}

.ai-job-result-action--primary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: #fff;
}

.ai-jobs-card {
  min-width: 0;
}

.ai-jobs-table {
  table-layout: fixed;
  min-width: 0;
}

.ai-jobs-table th,
.ai-jobs-table td {
  min-width: 0;
  vertical-align: top;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-jobs-table th:nth-child(1),
.ai-jobs-table td:nth-child(1) {
  width: 28%;
}

.ai-jobs-table th:nth-child(2),
.ai-jobs-table td:nth-child(2) {
  width: 20%;
}

.ai-jobs-table th:nth-child(3),
.ai-jobs-table td:nth-child(3) {
  width: 16%;
}

.ai-jobs-table th:nth-child(4),
.ai-jobs-table td:nth-child(4) {
  width: 22%;
}

.ai-jobs-table th:nth-child(5),
.ai-jobs-table td:nth-child(5) {
  width: 14%;
}

.ai-jobs-row {
  cursor: pointer;
}

.ai-jobs-row:hover,
.ai-jobs-row:focus {
  background: var(--surface);
  outline: none;
}

.ai-jobs-row.is-active {
  background: var(--ai-accent-soft-bg);
  outline: none;
}

.credits-type-badge[data-type="completed"],
.credits-type-badge[data-type="succeeded"] {
  border-color: rgba(18, 128, 92, 0.24);
  background: rgba(18, 128, 92, 0.12);
  color: var(--success-text);
}

.credits-type-badge[data-type="failed"],
.credits-type-badge[data-type="cancelled"],
.credits-type-badge[data-type="canceled"] {
  background: var(--error-bg);
  color: var(--error-text);
}

.credits-type-badge[data-type="processing"],
.credits-type-badge[data-type="submitted"],
.credits-type-badge[data-type="uploading"],
.credits-type-badge[data-type="uploaded"] {
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.12);
  color: #b26a00;
}

@media (max-width: 1120px) {
  .ai-tools-layout:not(.ai-tool-workspace),
  .ai-jobs-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    grid-template-columns: minmax(var(--ai-tool-generation-panel-width), var(--ai-tool-generation-panel-width)) minmax(0, 1fr);
  }

  .ai-tool-settings-panel {
    position: static;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .ai-video-results-panel {
    min-height: 520px;
  }

  .ai-video-upload-grid.has-upload-previews {
    gap: 8px;
  }
}

@media (max-width: 767px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-settings-panel {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 720px) {
  .ai-tools-catalog__header,
  .ai-tools-section__header,
  .ai-tools-panel__header,
  .ai-tools-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-tools-form,
  .ai-tools-panel__header,
  .ai-tools-result,
  .ai-jobs-detail {
    padding: 20px;
  }

  .ai-jobs-detail-meta {
    grid-template-columns: 1fr;
  }


  .ai-creation-history-panel .ai-video-result-stage {
    --ai-creation-history-scroll-edge: 18px;
  }
  .ai-tool-settings-panel .ai-tools-panel__header {
    padding: 14px;
  }

  .ai-tool-detail-workspace--compact .ai-tool-workspace-heading {
    margin: 16px 14px 8px;
  }

  .ai-tool-detail-workspace--compact .ai-tool-workspace-heading h1 {
    font-size: 19px;
  }

  .ai-video-form-scroll {
    --ai-video-form-padding-top: 14px;
    --ai-video-form-padding-x: 14px;
    --ai-video-form-padding-bottom: 14px;
  }

  .ai-tool-actions {
    padding: 12px 14px 14px;
  }

  .ai-video-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 14px 14px 0;
  }

  .ai-tool-mode-tabs--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-video-mode-tab {
    min-height: 38px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1.15;
  }

  .ai-video-options-popover {
    max-height: min(520px, calc(100vh - 120px));
    padding: 12px;
  }

  .ai-video-options-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-page.ai-image-page .ai-video-options-choices--quality {
    grid-template-columns: repeat(var(--ai-video-option-count, 3), minmax(0, 1fr));
  }

  .ai-video-options-button__summary {
    justify-content: flex-start;
  }

  .ai-video-options-summary-item {
    font-size: 14px;
  }

  .ai-video-upload-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-video-upload-controls {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }

  .ai-reference-media-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .ai-reference-media-button {
    flex: 0 0 auto;
  }

  .ai-motion-control-upload-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .ai-motion-control-upload-slot {
    width: 100%;
    height: 128px;
    aspect-ratio: auto;
    justify-self: center;
  }

  .ai-motion-control-face-reference__group {
    padding: 14px;
  }

  .ai-motion-control-upload-flow__arrow {
    transform: rotate(90deg);
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-upload-grid,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-grid {
    grid-template-columns: 1fr;
  }

  .ai-video-upload-grid.has-upload-previews {
    gap: 8px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-upload-arrow,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-arrow {
    transform: rotate(90deg);
  }

  .ai-video-file-picker.ai-tools-file-picker {
    min-height: 164px;
    padding: 28px 20px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.ai-tools-file-picker {
    height: 128px;
    min-height: 0;
    padding: 22px 16px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.has-frame-preview.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.has-frame-preview.ai-tools-file-picker {
    padding: 0;
  }

  .ai-video-results-panel {
    min-height: 420px;
  }

  .ai-video-result-box {
    min-height: 300px;
  }

  .ai-tool-card-grid,
  .ai-tool-modal__summary dl,
  .ai-tools-form__grid,
  .ai-tool-settings-panel .ai-tools-form__grid {
    grid-template-columns: 1fr;
  }
}


@media (min-width: 1121px) {
  .ai-creation-history-page .ai-jobs-detail {
    position: sticky;
    top: calc(var(--portal-topbar-height, 64px) + var(--portal-admin-gutter, 20px));
    max-height: calc(100vh - var(--portal-topbar-height, 64px) - (var(--portal-admin-gutter, 20px) * 2));
    max-height: calc(100dvh - var(--portal-topbar-height, 64px) - (var(--portal-admin-gutter, 20px) * 2));
    overflow: hidden;
    z-index: 1;
  }

  .ai-creation-history-page .ai-jobs-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}
@media (max-width: 960px) {
  .dashboard-page .dashboard-shell.ai-tool-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .dashboard-page.ai-video-page,
  .dashboard-page.ai-image-page {
    --portal-admin-gutter: 10px;
  }

  .dashboard-page .dashboard-shell.ai-tool-shell {
    padding: 12px var(--portal-admin-gutter) 42px;
  }

  .dashboard-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    gap: 12px;
  }

  .ai-tool-settings-panel .ai-tools-form {
    gap: 0;
    padding: 0;
  }

  .ai-video-form-scroll {
    --ai-video-form-padding-top: 12px;
    --ai-video-form-padding-x: 12px;
    --ai-video-form-padding-bottom: 12px;
    gap: 10px;
  }

  .ai-tool-actions {
    padding: 10px 12px 12px;
  }

  .ai-tool-settings-panel .ai-tools-form > .field-block,
  .ai-video-form-scroll > .field-block,
  .ai-tool-settings-panel .ai-tools-form__grid > .field-block {
    margin-bottom: 8px;
  }

  .ai-video-mode-tabs {
    gap: 3px;
    margin: 12px 12px 0;
    padding: 3px;
  }

  .ai-video-mode-tab {
    min-height: 36px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
  }

  .ai-model-picker__button {
    min-height: 54px;
    grid-template-columns: 32px minmax(0, 1fr) auto 16px;
    gap: 8px;
    padding: 8px 9px;
  }

  .ai-model-picker__mark {
    width: 32px;
    height: 32px;
  }

  .ai-model-picker__body strong {
    font-size: 14px;
  }

  .ai-model-picker__body span {
    font-size: 12px;
  }

  .ai-model-picker__badge {
    min-height: 22px;
    padding: 0 6px;
    font-size: 11px;
  }

  .ai-model-picker__chevron {
    width: 16px;
    height: 16px;
  }

  .ai-model-picker__menu {
    --ai-model-menu-gap: 6px;
    --ai-model-menu-max-height: calc(100vh - 94px);
    padding: 8px;
  }

  .ai-model-picker__section-head {
    gap: 8px;
  }

  .ai-model-picker__filter {
    min-height: 23px;
    padding: 0 6px;
    font-size: 10px;
  }

  .ai-model-option {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    gap: 8px;
    padding: 9px;
  }

  .ai-model-option__mark {
    width: 34px;
    height: 34px;
  }

  .ai-model-option__body {
    gap: 4px;
  }

  .ai-model-option__top {
    gap: 6px;
  }

  .ai-model-option__top strong {
    font-size: 14px;
  }

  .ai-model-option__tags span {
    min-height: 22px;
    padding: 0 6px;
  }

  .ai-video-upload-header {
    gap: 8px;
  }

  .ai-video-upload-title {
    font-size: 13px;
  }

  .ai-video-upload-controls {
    gap: 8px;
  }

  .ai-video-end-frame-toggle {
    gap: 6px;
    font-size: 12px;
  }

  .ai-video-end-frame-button {
    width: 36px;
    height: 20px;
  }

  .ai-video-end-frame-switch::before {
    width: 16px;
    height: 16px;
  }

  .ai-video-end-frame-toggle[aria-pressed="true"] .ai-video-end-frame-switch::before {
    transform: translateX(16px);
  }

  .ai-tools-toggle__switch {
    width: 36px;
    height: 20px;
  }

  .ai-tools-toggle__switch::before {
    width: 16px;
    height: 16px;
  }

  .ai-tools-toggle__input:checked + .ai-tools-toggle__switch::before {
    transform: translateX(16px);
  }

  .ai-video-file-picker.ai-tools-file-picker {
    min-height: 132px;
    padding: 20px 14px;
  }

  .ai-video-file-picker .ai-tools-file-picker__icon {
    width: 28px;
    height: 28px;
    background-size: 24px 24px;
  }

  .ai-video-file-picker .ai-tools-file-picker__body {
    gap: 8px;
  }

  .ai-video-upload-single-title,
  .ai-video-upload-frame-title {
    font-size: 13px;
    line-height: 1.35;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-upload-grid,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-upload-grid {
    gap: 8px;
    min-height: 0;
    padding: 12px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.ai-tools-file-picker,
  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.has-frame-preview.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.has-frame-preview.ai-tools-file-picker {
    height: 112px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.ai-tools-file-picker {
    padding: 16px 12px;
  }

  .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker.has-frame-preview.ai-tools-file-picker,
  .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker.has-frame-preview.ai-tools-file-picker {
    padding: 0;
  }

  .ai-video-prompt-editor {
    --ai-video-prompt-toolbar-height: 30px;
    height: 118px;
    min-height: 108px;
  }

  .ai-tool-voice-generator-page .ai-video-prompt-editor {
    height: 218px;
    min-height: 208px;
  }

  .ai-tools-negative-prompt-editor {
    height: 108px;
    min-height: 96px;
  }

  .ai-video-prompt-editor .ai-tools-textarea {
    padding: 15px 26px 8px 15px;
  }

  .ai-video-prompt-toolbar {
    min-height: 30px;
    padding: 2px 22px 6px 12px;
  }

  .ai-video-prompt-optimize {
    padding: 0 8px;
  }

  .ai-video-options-button {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 14px;
    gap: 8px;
    padding: 7px 10px;
  }

  .ai-video-options-button__summary {
    gap: 6px;
  }

  .ai-video-options-summary-item {
    gap: 5px;
    font-size: 13px;
  }

  .ai-video-options-summary-separator {
    height: 18px;
  }

  .ai-video-setting-icon--duration {
    width: 18px;
    height: 18px;
  }

  .ai-video-setting-icon--resolution {
    min-width: 28px;
    height: 18px;
    font-size: 8px;
  }

  .ai-video-setting-icon--aspect,
  .ai-video-setting-icon--image-size {
    width: var(--ai-aspect-icon-width, 22px);
    height: var(--ai-aspect-icon-height, 13px);
  }

  .ai-video-setting-icon--aspect[data-aspect-shape="tall"],
  .ai-video-setting-icon--image-size[data-aspect-shape="tall"] {
    width: var(--ai-aspect-icon-width, 13px);
    height: var(--ai-aspect-icon-height, 22px);
  }

  .ai-video-setting-icon--aspect[data-aspect-shape="square"],
  .ai-video-setting-icon--image-size[data-aspect-shape="square"] {
    width: var(--ai-aspect-icon-width, 18px);
    height: var(--ai-aspect-icon-height, 18px);
  }

  .ai-video-setting-icon--aspect[data-aspect-shape="auto"],
  .ai-video-setting-icon--image-size[data-aspect-shape="auto"] {
    width: 20px;
    height: 20px;
  }

  .ai-video-setting-icon--quality {
    width: 18px;
    height: 16px;
  }

  .ai-video-options-popover {
    bottom: calc(100% + 8px);
    max-height: min(420px, calc(100vh - 92px));
    padding: 10px;
  }

  .ai-video-options-popover__content {
    gap: 12px;
  }

  .ai-video-options-choices {
    gap: 3px;
    padding: 3px;
  }

  .ai-video-option-choice {
    min-height: 36px;
    padding: 6px 7px;
    font-size: 12px;
  }

  .ai-video-options-choices--aspect .ai-video-option-choice {
    min-height: 46px;
    grid-template-rows: 19px 13px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .ai-video-options-choices--aspect .ai-video-setting-icon--aspect {
    width: var(--ai-aspect-icon-width, 20px);
    height: var(--ai-aspect-icon-height, 11px);
  }

  .ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="tall"] {
    width: var(--ai-aspect-icon-width, 11px);
    height: var(--ai-aspect-icon-height, 20px);
  }

  .ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="square"] {
    width: var(--ai-aspect-icon-width, 16px);
    height: var(--ai-aspect-icon-height, 16px);
  }

  .ai-video-options-choices--aspect .ai-video-setting-icon--aspect[data-aspect-shape="auto"] {
    width: 18px;
    height: 18px;
  }

  .ai-video-options-choices--aspect .ai-video-option-choice__text {
    height: 13px;
    font-size: 11.5px;
  }

  .ai-tool-actions .primary-auth-button {
    min-height: 48px;
  }

  .ai-video-generate-button {
    gap: 10px;
  }

  .ai-video-generate-cost-wrap {
    gap: 5px;
    font-size: 14px;
  }

  .ai-video-credit-icon {
    width: 18px;
    height: 18px;
  }

  .ai-video-results-panel {
    min-height: 0;
  }

  .ai-video-results-panel .credits-history-card__header p:not(.dashboard-card__eyebrow) {
    font-size: 13px;
  }

  .ai-result-view-actions {
    width: 100%;
    align-self: stretch;
  }

  .ai-history-tablist {
    width: 100%;
  }

  .ai-result-view-tools {
    width: 100%;
    margin-left: 0;
  }

  .ai-storage-gauge {
    width: auto;
    min-width: 92px;
    flex: 1 1 auto;
  }

  .ai-storage-gauge__text {
    display: none;
  }

  .ai-storage-gauge__compact {
    display: block;
  }

  .ai-result-view-button {
    min-width: 0;
    flex: 1 1 0;
  }

  .ai-result-media-filter {
    width: auto;
    margin-left: auto;
  }

  .ai-result-view-header__controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .ai-creation-selection-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-creation-selection-bar__actions {
    width: 100%;
  }

  .ai-creation-selection-bar__button {
    flex: 1 1 0;
  }

  .ai-result-view-header .ai-result-media-filter {
    align-self: flex-start;
  }

  .ai-result-view-header--media-filter .ai-result-view-copy {
    white-space: normal;
  }

  .ai-result-media-filter__button {
    flex: 0 0 auto;
  }

  .ai-video-result-box {
    min-height: 220px;
  }

  .ai-sample-results {
    min-height: 220px;
  }

  .ai-sample-results__grid {
    grid-template-columns: 1fr;
  }

  .ai-sample-results__nav {
    width: 30px;
    height: 30px;
    font-size: 1.35rem;
  }

  .ai-creation-history__grid {
    --ai-creation-history-card-min: 150px;
    gap: 12px;
  }

  .ai-jobs-detail-meta__item {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
  }

  .ai-creation-history-card__footer {
    min-height: 52px;
    padding: 24px 7px 7px;
  }

  .ai-creation-history-card__download {
    width: 28px;
    height: 28px;
  }
}

.primary-auth-button--danger {
  border-color: rgba(205, 55, 45, 0.28);
  background: var(--danger-text);
  color: #fff;
}

.primary-auth-button--danger:hover:not(:disabled) {
  background: #aa332a;
  border-color: #aa332a;
}

.link-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-button:hover:not(:disabled) {
  color: var(--text);
}

.link-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.link-button--danger {
  color: var(--danger-text);
}

.link-button--danger:hover:not(:disabled) {
  color: #aa332a;
}

.icon-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.profile-modal__actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.pricing-success-modal__card {
  width: min(100%, 440px);
}

.pricing-success-modal .profile-modal__title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.pricing-success-modal .profile-modal__copy {
  margin-top: 12px;
  white-space: pre-line;
}

.pricing-ai-terms-modal__card {
  width: min(100%, 540px);
}

.pricing-ai-terms-modal {
  background: rgba(23, 32, 51, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.pricing-ai-terms-modal .profile-modal__title {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.pricing-ai-terms-modal__key-points {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.65;
}

.pricing-ai-terms-modal__link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--portal-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pricing-ai-terms-modal__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.pricing-ai-terms-modal__consent input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--primary-cta);
}

.pricing-ai-terms-modal__consent-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.pricing-ai-terms-modal__required-badge {
  margin-top: 1px;
  padding: 4px 9px;
  border: 1px solid var(--primary-cta);
  border-radius: 999px;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  box-shadow: 0 2px 5px rgba(var(--portal-accent-rgb), 0.22);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

.pricing-ai-terms-modal__consent:has(input:checked) {
  border-color: rgba(49, 93, 220, 0.38);
  background: rgba(49, 93, 220, 0.06);
}

.pricing-ai-terms-modal__consent:focus-within {
  border-color: rgba(49, 93, 220, 0.48);
  box-shadow: 0 0 0 2px rgba(49, 93, 220, 0.14);
}

.pricing-ai-terms-modal .primary-auth-button:disabled {
  border-color: #aebbd3;
  background: #aebbd3;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.pricing-ai-terms-modal .primary-auth-button.is-loading:disabled {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  cursor: wait;
}

html[data-theme="dark"] .dashboard-page .pricing-ai-terms-modal {
  background: rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .dashboard-page .pricing-ai-terms-modal__consent:has(input:checked) {
  border-color: rgba(124, 156, 255, 0.42);
  background: rgba(124, 156, 255, 0.1);
}

html[data-theme="dark"] .dashboard-page .pricing-ai-terms-modal__consent:focus-within {
  border-color: rgba(124, 156, 255, 0.56);
  box-shadow: 0 0 0 2px rgba(124, 156, 255, 0.18);
}

html[data-theme="dark"] .dashboard-page .pricing-ai-terms-modal .primary-auth-button:disabled {
  border-color: #475269;
  background: #475269;
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .dashboard-page .pricing-ai-terms-modal .primary-auth-button.is-loading:disabled {
  border-color: var(--primary-cta);
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

.pricing-ai-terms-modal__error {
  margin: 10px 0 0;
  color: var(--error-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.profile-modal .auth-input {
  min-height: 44px;
  border-color: var(--line);
  background-color: #fbfcfe;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.profile-modal .auth-input::placeholder {
  color: var(--muted-soft);
}

.profile-modal .auth-input:hover:not(:disabled):not([readonly]) {
  border-color: var(--line-strong);
  background-color: #fff;
}

.profile-modal .auth-input:focus {
  border-color: var(--accent-soft);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(94, 117, 148, 0.16);
}

.profile-modal .auth-input--locked,
.profile-modal .auth-input[readonly] {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--muted);
}

.profile-modal .auth-select {
  background-color: #fbfcfe;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 2px),
    calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.profile-modal .auth-select.auth-select--host-locked {
  cursor: default;
  border-color: var(--line);
  background-color: var(--surface);
  background-image: none;
  padding-right: 18px;
  color: var(--ink);
  opacity: 1;
  -webkit-text-fill-color: var(--ink);
}

.buy-license-options {
  margin-top: 20px;
  display: grid;
  gap: 12px;
}

.buy-license-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcfe;
  color: var(--ink);
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.buy-license-option:hover,
.buy-license-option:focus-visible {
  border-color: var(--accent);
  background: #fff;
  transform: translateY(-1px);
  outline: none;
}

.buy-license-option img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.buy-license-option__bundle-icons {
  position: relative;
  width: 46px;
  height: 38px;
  flex: 0 0 46px;
  display: block;
}

.buy-license-option .buy-license-option__bundle-icons img {
  position: absolute;
  width: 29px;
  height: 29px;
  filter: drop-shadow(0 2px 3px rgba(23, 32, 51, 0.12));
}

.buy-license-option__bundle-icons img:first-child {
  top: 0;
  left: 0;
}

.buy-license-option__bundle-icons img:last-child {
  right: 0;
  bottom: 0;
}

.buy-license-option .buy-license-option__bundle-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.buy-license-option .buy-license-option__bundle-title {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.buy-license-option .buy-license-option__bundle-title > span {
  display: inline;
}

.buy-license-option span {
  display: grid;
  gap: 3px;
}

.buy-license-option strong {
  font-size: 16px;
  line-height: 1.2;
}

.buy-license-option small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-navlink--active {
  color: var(--portal-accent);
}

.dashboard-navlink--button.dashboard-navlink--active {
  border-color: var(--portal-accent-border);
  background: var(--control-surface);
}

/* Both billing tabs hang their content off this one offset, so the credit packages land on the same
   line as the plan cards when the toggle switches. The plan grid then reserves
   --pricing-ribbon-height above its cards, and the credit panel's note fills that same band. */
.pricing-page .dashboard-shell {
  --pricing-content-offset: 24px;
  width: min(1540px, calc(100% - 48px));
  padding-top: 0;
}

.pricing-hero {
  margin-top: 24px;
  padding: 18px 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 46px;
  text-align: center;
}

.pricing-title {
  position: relative;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 3vw, 36px);
  line-height: 1.12;
  font-weight: 800;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pricing-hero .dashboard-copy {
  max-width: 760px;
  white-space: normal;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.pricing-actions {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 500px) minmax(0, 1fr);
  align-items: end;
  justify-items: center;
  gap: 12px;
}

.pricing-billing-toggle {
  grid-column: 2;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--portal-accent-soft-bg) 52%, rgba(232, 238, 245, 0.92));
  box-shadow: 0 10px 24px rgba(23, 32, 51, 0.06);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.pricing-billing-toggle button {
  position: relative;
  min-height: 42px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--accent-soft);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* A balloon pointing down at the annual tab, floating clear of the toggle. Most plans save ~25% on
   annual, but KRW 1000 saves less (its monthly is the planned ₩9,900, below the FX-rule price), so
   the copy says "up to". Changing any annual price means revisiting pricing.annualDiscount.
   The bob keyframes re-declare translateX(-50%), so the base value survives reduced-motion. */
.pricing-billing-toggle__badge {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(180px, calc(100vw - 32px));
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--portal-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: none;
  animation: pricing-billing-badge-bob 2.2s ease-in-out infinite;
}

.pricing-billing-toggle__badge::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border: 4px solid transparent;
  border-top-color: var(--portal-accent);
}

@keyframes pricing-billing-badge-bob {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, -3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-billing-toggle__badge {
    animation: none;
  }
}

/* The accent lightens in dark mode, so white on it drops to 2.6:1. Dark ink on the same fill
   reads at 7.1:1. */
html[data-theme="dark"] .pricing-billing-toggle__badge {
  color: var(--primary-cta-text);
}

.pricing-billing-toggle button:hover {
  background: #f8fafc;
  color: var(--ink);
}

.pricing-billing-toggle button.is-active {
  background: #fff;
  color: var(--portal-accent);
  box-shadow:
    inset 0 0 0 1px var(--portal-accent-border),
    0 8px 18px rgba(var(--portal-accent-rgb), 0.12);
}

.pricing-currency-control {
  grid-column: 3;
  justify-self: end;
  width: 112px;
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.pricing-currency-control select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}

.pricing-portal-button {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.pricing-alert {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.pricing-alert[data-tone="success"] {
  border-color: rgba(36, 90, 54, 0.22);
  background: var(--success-bg);
  color: var(--success-text);
}

.pricing-alert[data-tone="error"] {
  border-color: rgba(205, 55, 45, 0.24);
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* The spec after a row ("1024x1024", "HD 720p 5s") is secondary text, not a subscript. <sub> is
   what the translated string carries, so pull it back onto the baseline instead of letting it hang
   below the sentence it qualifies. */
.pricing-plan__features--counted sub {
  vertical-align: baseline;
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.82em;
}

/* The row text keeps its own width and the info icon is pushed to the card edge, so the icons form
   one column instead of trailing each row at a different x. The ::before check stays absolute. */
.pricing-plan__features--counted li {
  display: flex;
  align-items: baseline;
}

/* Row detail, revealed on hover/focus like the credit rate it replaces. The bubble stays in the DOM
   so it is still announced; only its visibility is toggled. */
.pricing-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  cursor: help;
}

.pricing-info:hover,
.pricing-info:focus-visible {
  border-color: var(--portal-accent);
  color: var(--portal-accent);
}

/* Anchored to the icon's right edge, not centred on it: the icon sits at the card edge, so a
   centred bubble would hang outside the card.
   The card is overflow:hidden, so a bubble that leaves the card is clipped rather than scrolled
   into view. It therefore opens downward by default -- every row has list below it -- and only the
   last two rows, which have nothing below, flip upward. */
.pricing-info__bubble {
  position: absolute;
  top: calc(100% + 8px);
  right: -2px;
  z-index: 5;
  width: max-content;
  max-width: 230px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--panel-bg);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
}

.pricing-info:hover .pricing-info__bubble,
.pricing-info:focus-visible .pricing-info__bubble,
.pricing-info:focus-within .pricing-info__bubble {
  visibility: visible;
  opacity: 1;
}

/* The last two rows have no list below them, so a downward bubble would leave the card and be
   clipped. They open upward instead, where the rows above give it room. */
.pricing-plan__features--counted li:nth-last-child(-n + 2) .pricing-info__bubble {
  top: auto;
  bottom: calc(100% + 8px);
}

/* Facts that are identical for every plan live once under the grid, not as a repeated row in all
   three cards. The benefit line carries the retention promise; the note is fine print. */
.pricing-grid__benefit,
.pricing-grid__note {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  text-align: center;
}

.pricing-grid__benefit {
  margin-block: 0 12px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
}

.pricing-grid__note {
  margin-block: 0 64px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

/* The grid's own bottom margin exists to clear whatever follows it; these lines belong to the grid,
   so they sit close instead. Scoped under .pricing-page too, because a later
   `.pricing-page .pricing-grid` rule sets its own bottom margin and would otherwise win on source
   order at equal specificity. */
.pricing-grid:has(+ .pricing-grid__benefit),
.pricing-page .pricing-grid:has(+ .pricing-grid__benefit) {
  margin-bottom: 22px;
}

.pricing-grid {
  --featured-corner-radius: 8px;
  --pricing-sticky-offset: calc(var(--portal-topbar-height, 64px) + 16px);
  --pricing-ribbon-height: 40px;
  width: 100%;
  max-width: 1200px;
  margin: 26px auto 72px;
  padding: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(40px, auto) auto 1fr;
  grid-auto-flow: column;
  gap: 0;
  align-items: stretch;
  overflow: visible;
}

.pricing-plan {
  --plan-accent: #8794a7;
  --plan-tint: rgba(135, 148, 167, 0.09);
  position: relative;
  min-width: 0;
  padding: 0;
  display: contents;
}

.pricing-plan::before {
  content: "";
  display: none;
}

.pricing-plan:first-child .pricing-plan__header {
  border-top-left-radius: 8px;
}

.pricing-plan:first-child .pricing-plan__scroll {
  border-bottom-left-radius: 8px;
}

.pricing-plan:nth-child(2) {
  --plan-accent: var(--portal-accent);
  --plan-tint: var(--portal-accent-soft-bg);
}

.pricing-plan:last-child .pricing-plan__header {
  border-top-right-radius: 8px;
}

.pricing-plan:last-child .pricing-plan__scroll {
  border-bottom-right-radius: 8px;
}

.pricing-plan + .pricing-plan:not(.pricing-plan--recommended) .pricing-plan__ribbon,
.pricing-plan + .pricing-plan:not(.pricing-plan--recommended) .pricing-plan__header,
.pricing-plan + .pricing-plan:not(.pricing-plan--recommended) .pricing-plan__scroll {
  border-left-width: 0;
}

.pricing-plan--recommended {
  --plan-accent: var(--portal-accent);
  --plan-tint: var(--portal-accent-soft-bg);
  --plan-outline: var(--portal-accent);
}

.pricing-plan--recommended::after {
  content: "";
  display: none;
}

.pricing-plan--recommended .pricing-plan__ribbon--business {
  border-color: var(--plan-outline);
}

.pricing-plan--recommended .pricing-plan__header {
  border-top-width: 0;
  border-color: var(--plan-outline) var(--plan-outline) var(--line);
  border-radius: 0 !important;
}

.pricing-plan--recommended .pricing-plan__scroll {
  border-color: var(--plan-outline);
}

.pricing-plan--current .pricing-plan__header,
.pricing-plan--current .pricing-plan__scroll {
  border-color: var(--portal-accent-border);
}

.pricing-plan__ribbon {
  display: grid;
  position: sticky;
  left: 0;
  right: 0;
  top: var(--pricing-sticky-offset);
  z-index: 12;
  min-height: var(--pricing-ribbon-height);
  padding: 0 16px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 0;
  place-items: center;
  /* Keep scrolled feature rows from showing through the empty ribbon cells. */
  background: var(--page-bg);
  color: transparent;
  font-size: 14px;
  font-weight: 700;
  pointer-events: none;
}

.pricing-plan__ribbon--standard {
  display: grid;
  border: 1px solid var(--portal-accent);
  border-bottom: 0;
  background: var(--portal-accent);
  color: #fff;
  border-radius: var(--featured-corner-radius) 0 0 0;
}

.pricing-plan__ribbon--business {
  right: -1px;
  z-index: 13;
  border-radius: var(--featured-corner-radius) var(--featured-corner-radius) 0 0;
  background: var(--portal-accent-hover);
  color: #fff;
  pointer-events: auto;
}

.pricing-plan__ribbon--business::after {
  display: none;
}

.pricing-plan__header {
  position: sticky;
  top: calc(var(--pricing-sticky-offset) + var(--pricing-ribbon-height));
  z-index: 10;
  min-height: 278px;
  padding: 20px 24px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--plan-accent);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--plan-tint), rgba(255, 255, 255, 0) 72%),
    #fff;
  display: grid;
  align-content: start;
  gap: 12px;
}

.pricing-plan--recommended .pricing-plan__header {
  z-index: 11;
}

.pricing-plan__name {
  min-height: 24px;
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pricing-plan__price {
  margin: 0;
  min-height: 58px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  align-content: flex-start;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 2px;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 800;
  white-space: normal;
}

.pricing-plan__price strong {
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0;
}

.pricing-plan--recommended .pricing-plan__price strong {
  color: var(--portal-accent);
}

.pricing-plan__price [data-price-period] {
  color: var(--muted);
  font-weight: 500;
}

.pricing-plan__annual-compare {
  color: var(--muted-soft);
  font-size: 13px;
  font-weight: 500;
  text-decoration: line-through;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  white-space: nowrap;
}

.pricing-plan__price[data-annual-price-mode="true"] [data-price-period] {
  flex-basis: auto;
}

.pricing-plan__annual-billing {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.pricing-plan__annual-billing strong {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

.pricing-plan__annual-billing[hidden] {
  display: none;
}

.pricing-plan__annual-compare[hidden] {
  display: none;
}

.pricing-plan__summary {
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

/* Same figure-first weighting as the feature rows: the amounts ("3,000 Credits", "50 GB") stay
   bold via <strong>, the trailing labels ("/ Month", "Cloud Storage") read as quiet text. */
.pricing-plan__summary li {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pricing-plan__summary li strong {
  font-weight: 700;
}

.pricing-plan__rate {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.pricing-plan__section {
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.pricing-plan__section:last-child {
  border-bottom: 0;
}

.pricing-plan__scroll {
  min-height: 0;
  border: 1px solid var(--line);
  border-top: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.pricing-plan__section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.pricing-plan__section p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.pricing-plan__features {
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

/* Regular-weight row text so the <strong> figures ("3,000", "150") carry the emphasis — a bold
   sentence would drown its own number. Rows without a figure simply read as quiet labels. */
.pricing-plan__features li {
  position: relative;
  padding-left: 19px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.pricing-plan__features li strong {
  font-weight: 700;
}

.pricing-plan__features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--portal-accent);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
}

.pricing-plan__button {
  width: 100%;
  min-height: 52px;
  margin-top: 10px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--portal-accent);
  color: #fff;
  box-shadow: 0 8px 18px rgba(var(--portal-accent-rgb), 0.12);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.pricing-plan__button:hover {
  transform: translateY(-1px);
}

.pricing-plan__button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

.pricing-plan__button--current:disabled {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  box-shadow: none;
  cursor: default;
  opacity: 1;
}

.pricing-plan__button--outline {
  border-color: var(--portal-accent-border);
  background: #fff;
  color: var(--portal-accent);
  box-shadow: none;
}

.pricing-plan__button--secondary {
  border-color: #cfd6e2;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  color: var(--ink);
  box-shadow:
    0 12px 24px rgba(23, 32, 51, 0.10),
    inset 0 0 0 1px rgba(34, 48, 74, 0.03);
}

.pricing-plan__button--dark {
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(34, 48, 74, 0.12);
}

/* The recommended plan's CTA uses the purchase accent instead of the neutral one the other plans
   share, so it reads as the pick rather than as one of three identical buttons. Same token as the
   credit purchase button, which also matches this card's ribbon. */
.pricing-plan--recommended .pricing-plan__button--dark:not(:disabled) {
  background: var(--portal-accent);
  box-shadow: 0 8px 18px rgba(var(--portal-accent-rgb), 0.14);
}

.pricing-plan--recommended .pricing-plan__button--dark:not(:disabled):hover {
  background: var(--portal-accent-hover);
}

.pricing-plan--current {
  border-color: var(--portal-accent-border);
}

.credit-purchase-panel {
  width: 100%;
  max-width: 1200px;
  margin: 22px auto 72px;
  display: grid;
  gap: 20px;
}

.credit-purchase-panel[hidden] {
  display: none;
}

.credit-purchase-panel__copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.credit-purchase-panel__payment-type {
  padding: 4px 8px;
  border: 1px solid rgba(21, 128, 86, 0.20);
  border-radius: 999px;
  background: rgba(21, 128, 86, 0.08);
  color: #0b7a5f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Fine print under the buy button. Lighter than __copy so it reads as a caveat, not a headline.
   The panel's grid gap supplies the spacing above it. */
.credit-purchase-panel__note {
  margin: 0;
  max-width: 640px;
  margin-inline: auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

.credit-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1120px) {
  .credit-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.credit-package-card {
  --package-accent: var(--portal-accent);
  --package-accent-rgb: var(--portal-accent-rgb);
  --package-secondary: var(--portal-accent);
  --package-secondary-rgb: var(--portal-accent-rgb);
  --package-title-color: #253149;
  --package-rate-color: #778397;
  --package-price-color: #22304a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 142px;
  padding: 20px 18px 18px;
  border: 1px solid #dfe4ec;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 12px 24px rgba(23, 32, 51, 0.045);
  cursor: pointer;
  display: grid;
  gap: 8px;
  justify-items: start;
  text-align: left;
  font: inherit;
}

.credit-package-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(34, 48, 74, 0.16);
  pointer-events: none;
  z-index: 0;
}

.credit-package-card > * {
  position: relative;
  z-index: 1;
}

.credit-package-card:nth-child(1),
.credit-package-card:nth-child(2),
.credit-package-card:nth-child(3),
.credit-package-card:nth-child(4),
.credit-package-card:nth-child(5) {
  --package-accent: var(--portal-accent);
  --package-accent-rgb: var(--portal-accent-rgb);
  --package-secondary: var(--portal-accent);
  --package-secondary-rgb: var(--portal-accent-rgb);
}

.credit-package-card:hover {
  border-color: rgba(var(--package-accent-rgb), 0.30);
  box-shadow: 0 14px 28px rgba(23, 32, 51, 0.07);
  transform: translateY(-1px);
}

.credit-package-card.is-selected {
  border-color: var(--package-accent);
  background: var(--portal-accent-soft-bg);
  box-shadow: 0 16px 34px rgba(23, 32, 51, 0.10);
  transform: translateY(-1px);
}

.credit-package-card.is-selected::before {
  height: 2px;
  background: rgba(var(--package-accent-rgb), 0.72);
  box-shadow: none;
}

.credit-package-card.is-selected::after {
  display: none;
}

.credit-package-card--featured {
  grid-column: auto;
  padding-right: 128px;
}

.credit-package-card__badge {
  position: absolute;
  top: 14px;
  right: 18px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(var(--package-accent-rgb), 0.18);
  border-radius: 999px;
  background: var(--portal-accent);
  color: #fff;
  box-shadow: 0 8px 16px rgba(var(--package-accent-rgb), 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credit-package-card__badge::before {
  display: none;
}

.credit-package-card__title {
  color: var(--package-title-color);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.credit-package-card__rate {
  color: var(--package-rate-color);
  font-size: 13px;
  font-weight: 700;
}

.credit-package-card__price {
  color: var(--package-price-color);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.credit-purchase-selection-summary {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.credit-purchase-selection-summary strong {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.credit-purchase-selection-summary__separator {
  color: var(--line-strong);
}

.credit-purchase-buy-button {
  width: min(100%, 520px);
  margin-top: 0;
  margin-right: auto;
  margin-left: auto;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--portal-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(34, 48, 74, 0.18);
}

.credit-purchase-buy-button:hover {
  border-color: var(--portal-accent-hover);
  background: var(--portal-accent-hover);
  transform: translateY(-1px);
}

.credit-purchase-buy-button:disabled {
  cursor: wait;
  opacity: 0.7;
  transform: none;
}

/* Flatter portal style aligned with the pricing page. */
.dashboard-page .dashboard-shell {
  padding-top: 0;
}

.dashboard-page .dashboard-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100vw;
  min-height: 76px;
  margin-left: calc(50% - 50vw);
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  border-width: 0 0 1px;
  border-color: rgba(216, 224, 234, 0.58);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
  backdrop-filter: blur(7px) saturate(1.08);
}

.dashboard-page .dashboard-topbar__left {
  gap: 72px;
}

.dashboard-page .dashboard-brand {
  flex: 0 0 auto;
  font-size: 22px;
  letter-spacing: -0.04em;
}

.dashboard-page .dashboard-brand::before {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: none;
}

.dashboard-page .dashboard-nav {
  gap: 30px;
}

.dashboard-page .dashboard-nav .dashboard-navlink {
  min-height: 76px;
  border-bottom: 3px solid transparent;
  color: #4f5966;
}

.dashboard-page .dashboard-nav .dashboard-navlink--active {
  border-bottom-color: var(--portal-accent);
  color: var(--portal-accent);
}

.dashboard-page .dashboard-navlink--button,
.account-button,
.auth-input,
.auth-showcase-home-link,
.locale-switcher__trigger,
.locale-switcher__menu,
.locale-switcher__button,
.primary-auth-button,
.provider-button,
.subtle-button,
.dashboard-refresh-button,
.dashboard-card__action,
.dashboard-license-count,
.dashboard-status-pill,
.dashboard-copy-button,
.buy-license-option,
.menu-button,
.signup-code-digit {
  border-radius: 8px;
}

.auth-showcase-home-link,
.locale-switcher__trigger,
.locale-switcher__menu,
.auth-brand--portal::before {
  box-shadow: none;
}

.dashboard-page .dashboard-navlink--button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.account-button {
  min-height: 44px;
  padding: 6px 12px 6px 8px;
}

.account-button:hover,
.dashboard-refresh-button:hover:not(:disabled),
.dashboard-card__action:hover,
.dashboard-license-item:hover,
.account-license-summary__item:hover:not(:disabled),
.buy-license-option:hover,
.buy-license-option:focus-visible {
  box-shadow: none;
  transform: none;
}

.account-button__avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.account-dropdown {
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(23, 32, 51, 0.10);
}

.dashboard-hero {
  margin-top: 0;
  padding: 42px 188px 26px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-hero::before {
  display: none;
}

.dashboard-hero__art img {
  filter: drop-shadow(0 8px 10px rgba(23, 32, 51, 0.08));
}

.dashboard-card,
.dashboard-license-group,
.dashboard-license-empty,
.account-license-summary--main,
.profile-modal__card {
  border-radius: 8px;
  box-shadow: none;
}

.dashboard-card {
  background: #fff;
}

.dashboard-grid > .dashboard-card {
  top: 96px;
}

.dashboard-license-toolbar,
.dashboard-license-list__empty,
.dashboard-license-item,
.dashboard-license-empty,
.account-license-summary,
.account-license-summary__item {
  border-radius: 8px;
}

.account-license-summary:not(.account-license-summary--main) {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-license-group {
  padding: 24px;
}

.dashboard-license-item {
  padding-left: 18px;
}

.dashboard-license-item::before {
  display: none;
}

.account-license-summary__item.is-active {
  box-shadow: inset 0 0 0 1px var(--portal-accent-border);
}

.primary-auth-button,
.provider-button {
  box-shadow: none;
}

.split-auth--register .auth-panel {
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(23, 32, 51, 0.08);
}

.profile-modal__card {
  box-shadow: 0 18px 42px rgba(23, 32, 51, 0.16);
}

.settings-section + .settings-section {
  margin-top: 26px;
}

.settings-section__header {
  margin-bottom: 18px;
}

.settings-section__title {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.settings-divider {
  margin: 26px 0;
  height: 1px;
  background: var(--line);
}

.settings-note {
  margin-top: 0;
  margin-bottom: 18px;
}

.subtle-button--inline,
.primary-auth-button--inline {
  width: auto;
  min-width: 140px;
  padding: 0 22px;
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.profile-modal .primary-auth-button.primary-auth-button--danger {
  border: 1px solid #b8322a;
  background: #b8322a;
  color: #fff;
}

.profile-modal .primary-auth-button.primary-auth-button--danger:hover:not(:disabled) {
  border-color: #9f2c25;
  background: #9f2c25;
  color: #fff;
}

.profile-modal .primary-auth-button.primary-auth-button--danger:disabled {
  border-color: #b8322a;
  background: #b8322a;
  color: #fff;
  opacity: 0.72;
}

.renewal-summary {
  margin: 22px 0 0;
  display: grid;
  gap: 0;
}

.renewal-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.renewal-summary__row:first-child {
  border-top: 1px solid var(--line);
}

.renewal-summary dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.renewal-summary dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}

.renewal-summary__value--expired {
  color: var(--error-text);
}

.renewal-license-list {
  display: grid;
  gap: 10px;
  min-width: min(100%, 320px);
}

.renewal-license-list__item {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(237, 242, 247, 0.78);
  display: grid;
  gap: 4px;
}

.renewal-license-list__title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.renewal-license-list__item strong {
  font-size: 14px;
  line-height: 1.35;
}

.renewal-license-list__item > span {
  color: var(--accent-soft);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}

.renewal-status {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #ececec;
  color: #747474;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.renewal-status[data-state="active"] {
  background: rgba(196, 233, 218, 0.72);
  color: #245a36;
}

.renewal-status-control {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.renewal-switch {
  width: 46px;
  height: 26px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: #c9d1de;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.16s ease, opacity 0.16s ease;
}

.renewal-switch[aria-checked="true"] {
  background: #245a36;
}

.renewal-switch__thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(22, 31, 50, 0.22);
  transform: translateX(0);
  transition: transform 0.16s ease;
}

.renewal-switch[aria-checked="true"] .renewal-switch__thumb {
  transform: translateX(20px);
}

.renewal-switch:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.renewal-switch[data-updating="true"] {
  cursor: wait;
}

.renewal-feedback {
  margin-top: 16px;
}

.renewal-modal__toggle {
  padding: 0 18px;
}

.renewal-modal__toggle[data-action="disable"] {
  border-color: rgba(178, 66, 48, 0.3);
  background: #fff8f5;
  color: #8a2f21;
}

.renewal-modal__toggle[data-action="enable"] {
  border-color: rgba(36, 90, 54, 0.28);
  background: #f4fbf6;
  color: #245a36;
}

.renewal-modal__toggle:disabled {
  opacity: 0.62;
  cursor: wait;
}

.renewal-modal__link {
  padding: 0 18px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1100px) {
  .split-auth {
    grid-template-columns: 1fr;
  }

  .auth-showcase {
    display: none;
  }

  .auth-mobile-home-link {
    display: block;
  }

  .auth-form-side__inner {
    max-width: 620px;
  }
}

@media (max-width: 960px) {
  .auth-form-side__inner {
    padding: max(32px, env(safe-area-inset-top)) 22px max(40px, env(safe-area-inset-bottom));
  }

  .dashboard-shell {
    width: min(100%, calc(100% - 28px));
    margin: 0 auto;
    padding: 14px 0 44px;
  }

  .dashboard-topbar {
    top: auto;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-topbar__left {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .dashboard-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 6px;
  }

  .dashboard-topbar__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-navlink {
    width: auto;
  }

  .dashboard-navlink--button {
    width: auto;
    align-self: flex-start;
    justify-content: center;
  }

  .account-button {
    width: 100%;
    justify-content: center;
  }

  .pricing-page .dashboard-shell {
    width: min(1540px, calc(100% - 28px));
    margin: 0 auto;
    padding-top: 0;
  }

  .account-dropdown {
    left: 0;
    right: 0;
    width: auto;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pricing-hero {
    gap: 36px;
  }

  .pricing-title {
    max-width: 720px;
    font-size: clamp(28px, 5.4vw, 34px);
    white-space: normal;
  }

  .pricing-portal-button {
    margin-bottom: 0;
  }

  .pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-grid > .dashboard-card {
    position: relative;
    top: auto;
  }

  .dashboard-hero {
    margin-top: 18px;
    min-height: 132px;
    padding: 24px 104px 24px 30px;
    border-radius: 24px;
  }

  .dashboard-hero::before {
    top: 24px;
    bottom: 24px;
  }

  .dashboard-hero__art {
    right: 12px;
    width: 84px;
    min-width: 84px;
  }

  .dashboard-copy {
    white-space: normal;
  }

  .dashboard-license-panel__status {
    justify-content: flex-start;
  }

  .account-license-summary__top {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboard-license-actions {
    justify-content: flex-start;
  }

  .account-license-summary--main .account-license-summary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-license-empty {
    min-height: 260px;
    padding: 28px 22px;
  }

  .copy-toast {
    right: 14px;
    left: 14px;
    bottom: 14px;
  }

  .dashboard-license-group {
    padding: 20px;
    border-radius: 20px;
  }

  .dashboard-license-group__header {
    align-items: flex-start;
  }

  .dashboard-license-group__title {
    font-size: 22px;
  }

  .dashboard-license-item__header {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .dashboard-license-item__meta {
    flex-wrap: wrap;
    gap: 12px;
  }

  .dashboard-license-item__meta--subscription {
    flex-wrap: wrap;
  }

  .dashboard-license-item__field--copyable dd {
    flex-wrap: wrap;
  }

  .dashboard-copy-button {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dashboard-license-item__extra {
    flex-wrap: wrap;
    gap: 12px;
  }

  .dashboard-license-item__meta--subscription > .dashboard-license-item__field.dashboard-license-item__field--status,
  .dashboard-license-item__extra > .dashboard-license-item__field--status {
    margin-left: 0;
  }

  .dashboard-license-item__meta--subscription > .dashboard-license-item__field.dashboard-license-item__field--status {
    flex: 1 1 160px;
    text-align: left;
  }

  .dashboard-license-item__meta > .dashboard-license-item__field:last-child {
    margin-left: 0;
    text-align: left;
  }

  .profile-modal__actions {
    flex-direction: column-reverse;
  }

  .account-danger-zone {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-danger-zone__actions {
    justify-content: stretch;
  }

  .renewal-summary__row {
    flex-direction: column;
    gap: 6px;
  }

  .renewal-summary dd {
    text-align: left;
  }

  .auth-toolbar {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
  }

  .auth-brand {
    margin-bottom: 28px;
    font-size: 32px;
  }

  .auth-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 16px;
  }

  .auth-toolbar .auth-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(20px, 5.6vw, 26px);
  }

  .auth-toolbar .locale-switcher {
    flex: 0 0 auto;
  }

  .auth-toolbar .locale-switcher__menu {
    right: 0;
    left: auto;
    max-width: calc(100vw - 44px);
  }

  .auth-panel h1 {
    font-size: 40px;
  }

  .auth-links {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-settings-panel {
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 720px) {
  .dashboard-hero {
    padding: 26px 24px 26px 26px;
  }

  .dashboard-hero::after {
    display: none;
  }

  .dashboard-hero__art {
    display: none;
  }

  .account-license-summary--main {
    padding: 18px;
    border-radius: 20px;
  }

  .account-license-summary--main .account-license-summary__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-license-actions {
    width: 100%;
  }

  .dashboard-license-actions .dashboard-add-license-button {
    flex: 1 1 140px;
  }

  .pricing-hero {
    margin-top: 14px;
    padding: 14px 0 12px;
    gap: 28px;
  }

  .pricing-title {
    max-width: 560px;
    font-size: clamp(25px, 7.2vw, 30px);
    line-height: 1.16;
  }

  .pricing-billing-toggle {
    width: min(500px, 100%);
  }

  .pricing-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .pricing-billing-toggle,
  .pricing-currency-control {
    grid-column: auto;
  }

  .pricing-currency-control {
    justify-self: center;
    width: min(180px, 100%);
  }

  .pricing-grid {
    margin: 20px -14px 52px;
    max-width: none;
    padding: 44px 14px 10px;
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-plan {
    flex: 0 0 min(84vw, 330px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px !important;
    background: #fff;
    scroll-snap-align: start;
  }

  .pricing-plan__ribbon {
    display: none;
    position: static;
    top: auto;
    z-index: auto;
    min-height: 0;
    border: 0;
    padding: 0;
  }

  .pricing-plan__ribbon--business {
    display: grid;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px 8px 0 0;
  }

  .pricing-plan__scroll {
    border: 0;
    overflow: visible;
  }

  .credit-purchase-panel {
    max-width: none;
    margin: 20px 0 52px;
  }

  .credit-package-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .credit-package-card--featured {
    grid-column: auto;
    padding-right: 18px;
  }

  .credit-package-card__badge {
    position: static;
    justify-self: start;
    order: -1;
  }

  .pricing-plan + .pricing-plan {
    border-left: 1px solid var(--line);
  }

  .pricing-plan--recommended::after {
    top: -40px;
    border-radius: 8px;
  }

  .pricing-plan.pricing-plan--business {
    border-color: var(--accent);
    border-radius: 8px !important;
  }

  .pricing-plan__ribbon--standard,
  .pricing-plan__ribbon--business {
    right: 0;
    border-radius: 8px 8px 0 0;
  }

  .pricing-plan__ribbon--business::after {
    display: none;
  }

  .pricing-plan__header {
    position: static;
    top: auto;
    z-index: auto;
    min-height: auto;
    padding: 22px 20px 20px;
    border: 0;
    border-top: 3px solid var(--plan-accent);
    border-bottom: 1px solid var(--line);
    border-radius: 0 !important;
    gap: 12px;
  }

  .pricing-plan--recommended .pricing-plan__header {
    border-top: 0;
  }

  .pricing-plan__section {
    min-height: auto;
    padding: 20px;
  }

  .pricing-plan__button {
    min-height: 48px;
  }

  .pricing-plan {
    min-width: 0;
  }

}

.app-login-shell .auth-form-side__inner {
  max-width: 560px;
}

.app-login-panel .status-pill {
  margin: 0 0 22px;
}

.app-login-account-card {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--control-surface);
}

.app-login-account-card div {
  display: grid;
  gap: 4px;
}

.app-login-account-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.app-login-account-card strong {
  color: var(--ink);
  font-size: 15px;
  word-break: break-word;
}

.app-login-actions {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.secondary-auth-button {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--control-surface);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.secondary-auth-button:hover {
  border-color: var(--accent-soft);
  background: var(--surface);
}

@media (max-width: 960px) {
  .dashboard-page .dashboard-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 0;
    align-items: center;
    min-height: auto;
    padding: 10px 14px;
  }

  .dashboard-page .dashboard-topbar__left {
    display: contents;
  }

  .dashboard-page .dashboard-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 44px;
    font-size: 20px;
  }

  .dashboard-page .dashboard-menu-toggle {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    justify-self: end;
  }

  .dashboard-page .dashboard-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: none;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 34px rgba(23, 32, 51, 0.08);
    gap: 4px;
    overflow: visible;
  }

  .dashboard-page.portal-nav-open .dashboard-nav {
    display: grid;
  }

  .dashboard-page.portal-nav-open.portal-auth-actions-ready .dashboard-nav {
    border-bottom-color: transparent;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .dashboard-page .dashboard-nav .dashboard-navlink {
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .dashboard-page .dashboard-nav .dashboard-navlink--active {
    background: var(--portal-accent-soft-bg);
  }

  .dashboard-page .dashboard-topbar__actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    width: 100%;
    margin-left: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.94);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    justify-self: stretch;
  }

  .dashboard-page.portal-nav-open.portal-auth-actions-ready .dashboard-topbar__actions {
    display: grid;
  }

  .dashboard-page .dashboard-welcome-credit-promo {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background: var(--panel-bg);
    white-space: normal;
    flex-wrap: wrap;
  }

  .dashboard-page .dashboard-welcome-credit-promo__copy {
    flex: 1 1 220px;
    display: grid;
    gap: 2px;
  }

  .dashboard-page .dashboard-welcome-credit-promo__separator {
    display: none;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "gift copy"
      ". cta";
    padding: 7px 9px;
    column-gap: 10px;
    row-gap: 3px;
    border: 0;
    background: linear-gradient(
      110deg,
      color-mix(in srgb, var(--portal-accent) 7%, var(--panel-bg)),
      color-mix(in srgb, var(--portal-accent) 2%, var(--panel-bg)) 52%,
      color-mix(in srgb, var(--portal-accent) 5%, var(--panel-bg))
    );
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__cta {
    justify-self: start;
  }

  .dashboard-page .dashboard-topbar__controls {
    grid-column: 1 / -1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .dashboard-page .dashboard-login-link {
    width: 100%;
    min-height: 44px;
  }

  .dashboard-page .dashboard-upgrade-link {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }

  .dashboard-page .dashboard-credit-badge {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .dashboard-page .dashboard-support-link {
    width: 100%;
    min-height: 44px;
    margin-left: 0;
    border: 1px solid var(--line);
    background: var(--panel-bg);
  }

  .dashboard-page .dashboard-theme-toggle {
    width: 100%;
    min-height: 44px;
    margin-left: 0;
    border: 1px solid var(--line);
    background: var(--panel-bg);
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar__actions {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    width: auto;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    flex-direction: row;
    align-items: center;
    justify-self: end;
  }

  .dashboard-page.portal-pricing-guest .dashboard-welcome-credit-promo {
    display: none !important;
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar__controls {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .dashboard-page.portal-pricing-guest .dashboard-login-link {
    width: auto;
    min-height: 40px;
  }

  .dashboard-page.portal-pricing-guest .dashboard-support-link {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .dashboard-page.portal-pricing-guest .dashboard-theme-toggle {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .dashboard-page.portal-pricing-guest .dashboard-upgrade-link {
    display: none;
  }

  .dashboard-page .account-menu {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dashboard-page .account-button {
    width: 100%;
    max-width: none;
    min-height: 48px;
    border-radius: 8px;
    justify-content: flex-start;
  }

  .dashboard-page .account-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: none;
  }

  .dashboard-page .account-dropdown__credits-subscribe,
  .dashboard-page .menu-button {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .dashboard-page .dashboard-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dashboard-page .dashboard-menu-toggle {
    grid-column: 2;
  }

  .dashboard-page .dashboard-topbar__actions {
    grid-column: 1 / -1;
  }

  .dashboard-page .account-button {
    width: 100%;
  }
}

.dashboard-page .account-license-summary--main,
.dashboard-page .account-license-summary__item,
.dashboard-page .dashboard-license-empty,
.dashboard-page .dashboard-license-group,
.dashboard-page .dashboard-license-item,
.dashboard-page .dashboard-license-toolbar,
.dashboard-page .dashboard-license-list__empty {
  border-radius: 8px;
}

.dashboard-page .dashboard-license-empty {
  box-shadow: none;
}

.credits-page .dashboard-shell {
  width: min(1240px, calc(100% - 48px));
}

.dashboard-hero__art--credits img {
  filter: none;
}

.credits-layout {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.credits-layout > *,
.credits-summary-card,
.credits-history-card {
  min-width: 0;
  max-width: 100%;
}

.credits-summary-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.credits-summary-item {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  text-align: left;
}

.credits-summary-item--button {
  appearance: none;
  cursor: pointer;
  position: relative;
  width: 100%;
  padding-right: 40px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

.credits-summary-item--button:not(:disabled):hover {
  border-color: var(--portal-accent-border);
  background: #fff;
}

.credits-summary-item--button:disabled {
  cursor: default;
}

.credits-summary-item__chevron {
  position: absolute;
  top: 18px;
  right: 14px;
  width: 16px;
  height: 16px;
  color: var(--muted-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.credits-summary-item--button[aria-expanded="true"] .credits-summary-item__chevron {
  transform: rotate(180deg);
}

.credits-summary-item--button:not(:disabled):hover .credits-summary-item__chevron {
  color: var(--portal-accent);
}

/* A disabled toggle has no panel to open, so the affordance must disappear
   with it - a chevron on an inert card reads as a broken control. */
.credits-summary-item--button:disabled .credits-summary-item__chevron {
  display: none;
}

.credits-summary-item span {
  display: block;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credits-summary-item strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

/* Overrides the uppercase micro-label styling every other span in the card
   gets: the expiry hint is a sentence, not a heading. */
.dashboard-page .credits-summary-item .credits-summary-item__hint {
  margin-top: 6px;
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.credits-summary-item--primary strong {
  color: var(--portal-accent);
}

.credits-bonus-panel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 14px;
}

.credits-bonus-panel__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.credits-bonus-panel__head span {
  color: var(--muted);
  font-size: 12px;
}

.credits-bonus-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.credits-bonus-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 120px minmax(260px, 1.4fr);
  gap: 12px;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px;
}

.credits-bonus-item strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.credits-bonus-item__amount {
  color: var(--portal-accent);
  font-size: 14px;
  font-weight: 900;
}

.credits-bonus-item__period {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.credits-meta-grid {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.credits-meta-grid div {
  min-width: 0;
}

.credits-meta-grid dt {
  margin: 0 0 5px;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credits-meta-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.credits-history-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-md);
}

.credits-history-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.credits-history-card__count {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted-soft) 10%, var(--panel-bg));
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.credits-history-card__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.credits-history-card__header p:not(.dashboard-card__eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.credits-alert {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(238, 242, 246, 0.7);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.credits-alert[data-tone="loading"] {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: #ccd7e4;
  background: rgba(238, 242, 246, 0.78);
  color: #6a7789;
}

.credits-alert[data-tone="loading"]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.72;
  animation: credits-alert-spin 0.8s linear infinite;
}

.credits-alert[data-tone="error"] {
  border-color: rgba(205, 55, 45, 0.32);
  background: rgba(205, 55, 45, 0.08);
  color: var(--error-text);
}

@keyframes credits-alert-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .credits-alert[data-tone="loading"]::before,
  .dashboard-license-empty[data-state="loading"] .dashboard-license-empty__title::before,
  .credits-empty.is-loading strong::before {
    animation: none;
  }
}

.credits-table-wrap {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
  background: #fff;
}

.credits-history-card__footer {
  display: flex;
}

.credits-history-more {
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.credits-history-more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.credits-history-more:hover:not(:disabled) {
  background: var(--surface);
  color: var(--portal-accent);
}

.credits-history-more:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: -2px;
}

.credits-history-more:disabled {
  cursor: wait;
  opacity: 0.62;
}

.credits-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
}

.credits-table th,
.credits-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  white-space: nowrap;
}

.credits-table th {
  background: #f8fafc;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.credits-table tr:last-child td {
  border-bottom: 0;
}

.credits-table__number {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  text-align: right;
}

.credits-amount--positive {
  color: #1f7a4d;
}

.credits-amount--negative {
  color: var(--brand-red);
}

.credits-type-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--accent-soft);
  font-size: 12px;
  font-weight: 900;
}

.credits-type-badge[data-type="grant"] {
  border-color: rgba(31, 122, 77, 0.24);
  background: rgba(31, 122, 77, 0.08);
  color: #1f6f48;
}

.credits-type-badge[data-type="bonus"],
.credits-type-badge[data-type="bonus-consume"] {
  border-color: rgba(32, 126, 201, 0.24);
  background: rgba(32, 126, 201, 0.08);
  color: #1e6da8;
}

.credits-type-badge[data-type="purchased"] {
  border-color: rgba(138, 85, 224, 0.24);
  background: rgba(138, 85, 224, 0.08);
  color: #7548c7;
}

.credits-type-badge[data-type="consume"] {
  border-color: rgba(205, 55, 45, 0.22);
  background: rgba(205, 55, 45, 0.07);
  color: var(--brand-red);
}

.credits-type-badge[data-type="refund"] {
  border-color: rgba(31, 122, 77, 0.24);
  background: rgba(31, 122, 77, 0.08);
  color: #1f6f48;
}

.credits-type-badge[data-type="expire"] {
  border-color: rgba(205, 55, 45, 0.24);
  background: rgba(205, 55, 45, 0.08);
  color: var(--brand-red);
}

.credits-type-badge[data-type="forfeit"] {
  border-color: rgba(176, 92, 24, 0.26);
  background: rgba(176, 92, 24, 0.09);
  color: #a15419;
}

.credits-empty {
  margin-top: 18px;
  min-height: 180px;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: #f8fafc;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.credits-empty strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.credits-empty span {
  color: var(--muted);
  font-size: 14px;
}

.credits-empty.is-loading {
  border-style: solid;
  background: rgba(238, 242, 246, 0.72);
}

.credits-empty.is-loading strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--accent-soft);
  font-size: 16px;
  font-weight: 700;
}

.credits-empty.is-loading strong::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.72;
  animation: credits-alert-spin 0.8s linear infinite;
}

@media (max-width: 860px) {
  .credits-summary-grid,
  .credits-meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credits-bonus-item {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .credits-bonus-item__period {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .credits-page .dashboard-shell {
    width: min(100%, calc(100% - 28px));
  }

  .credits-summary-card .account-license-summary__top {
    flex-direction: row;
    align-items: flex-start;
  }

  .credits-refresh-button {
    flex: 0 0 auto;
  }

  .credits-summary-grid,
  .credits-meta-grid {
    grid-template-columns: 1fr;
  }

  .credits-bonus-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .credits-history-card__header {
    flex-direction: column;
  }
}

/* Admin app layout refresh */
.dashboard-page {
  --portal-topbar-height: 64px;
  --portal-sidebar-width: 260px;
  --portal-admin-gutter: clamp(24px, 2.4vw, 48px);
  --portal-license-max-width: 1180px;
  --portal-credits-max-width: 1180px;
  --portal-account-max-width: 900px;
  --portal-pricing-max-width: 1420px;
  --portal-content-max-width: var(--portal-license-max-width);
  --portal-card-title-font-size: 18px;
  --portal-card-title-font-weight: 750;
  --portal-card-border: rgba(23, 32, 51, 0.08);
  --portal-card-border-hover: rgba(23, 32, 51, 0.13);
  --portal-card-shadow: none;
  --portal-card-shadow-hover: none;
  --portal-sidebar-edge-width: 6px;
  --portal-sidebar-edge: linear-gradient(90deg, rgba(23, 32, 51, 0.014), rgba(23, 32, 51, 0));
  background: var(--page-bg);
}

.credits-page {
  --portal-content-max-width: var(--portal-credits-max-width);
}

.account-page {
  --portal-content-max-width: var(--portal-account-max-width);
}

.pricing-page {
  --portal-content-max-width: var(--portal-pricing-max-width);
}

.ai-tools-page,
.ai-jobs-page {
  --portal-content-max-width: 100%;
}

@media (min-width: 961px) {
  .dashboard-page.ai-video-page,
  .dashboard-page.ai-image-page {
    --portal-admin-gutter: 16px;
  }
}

.dashboard-page .dashboard-copy,
.dashboard-page .dashboard-card__copy,
.dashboard-page .profile-modal__copy {
  letter-spacing: 0;
}

.dashboard-page .dashboard-brand {
  font-weight: 700;
}

.dashboard-page .dashboard-navlink,
.dashboard-page .account-dropdown__summary strong {
  font-weight: 700;
}

.dashboard-page .dashboard-card,
.dashboard-page .dashboard-license-empty,
.dashboard-page .dashboard-license-group,
.dashboard-page .account-license-summary--main,
.dashboard-page .account-details,
.dashboard-page .account-settings-panel,
.dashboard-page .credits-history-card,
.dashboard-page .credits-summary-card,
.dashboard-page .credits-bonus-panel,
.dashboard-page .credits-bonus-item,
.dashboard-page .ai-tool-card,
.dashboard-page .ai-tools-panel,
.dashboard-page .ai-tools-result,
.dashboard-page .ai-jobs-detail,
.dashboard-page .pricing-plan,
.dashboard-page .pricing-alert,
.dashboard-page .profile-modal__card {
  border-color: var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.dashboard-page .dashboard-hero {
  min-height: auto;
  margin: 0 0 18px;
  padding: 18px 24px;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

.dashboard-page .dashboard-hero::before,
.dashboard-page .dashboard-hero__art {
  display: none;
}

.dashboard-page .dashboard-eyebrow {
  margin: 0 0 6px;
  color: var(--portal-accent);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-page .dashboard-copy {
  max-width: 920px;
  color: var(--accent-soft);
  font-size: 14px;
  line-height: 1.55;
  white-space: normal;
}

.dashboard-page .dashboard-license-hero,
.account-page .account-settings-hero,
.credits-page .credits-hero,
.ai-tools-page .ai-tools-hero,
.ai-jobs-page .ai-jobs-hero {
  min-height: 96px;
  margin-bottom: 10px;
  padding: 12px 0;
  border-radius: 0;
  background: var(--page-bg);
  display: grid;
  align-items: center;
  align-content: center;
  overflow: visible;
}

.dashboard-page .dashboard-license-hero,
.credits-page .credits-hero {
  grid-template-columns: minmax(0, 1fr) 176px;
  grid-template-rows: auto auto;
  column-gap: 40px;
}

.dashboard-page .dashboard-license-hero .dashboard-hero__art,
.credits-page .credits-hero .dashboard-hero__art {
  position: static;
  grid-column: 2;
  grid-row: 1 / 3;
  display: block;
  justify-self: end;
  align-self: center;
  width: 156px;
  margin-right: 30px;
  min-width: 0;
  transform: none;
}

.dashboard-page .dashboard-license-hero .dashboard-eyebrow,
.account-page .account-settings-hero .dashboard-eyebrow,
.credits-page .credits-hero .dashboard-eyebrow,
.ai-tools-page .ai-tools-hero .dashboard-eyebrow,
.ai-jobs-page .ai-jobs-hero .dashboard-eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.dashboard-page .dashboard-license-hero .dashboard-copy,
.account-page .account-settings-hero .dashboard-copy,
.credits-page .credits-hero .dashboard-copy,
.ai-tools-page .ai-tools-hero .dashboard-copy,
.ai-jobs-page .ai-jobs-hero .dashboard-copy {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 760px;
  font-size: 20px;
  line-height: 1.45;
}

.dashboard-page .dashboard-grid,
.credits-page .credits-layout {
  gap: 18px;
}

.dashboard-page:not(.account-page):not(.credits-page):not(.pricing-page) .dashboard-grid {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-page:not(.credits-page) .account-license-summary--main {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-page:not(.credits-page) .account-license-summary__top {
  align-items: center;
  margin-bottom: 12px;
}

.dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__grid {
  margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.dashboard-page .account-license-summary__item,
.credits-page .credits-summary-item {
  border-color: var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.dashboard-page .account-license-summary__header h3,
.dashboard-page .account-license-summary__item strong,
.credits-page .credits-summary-item strong,
.credits-page .credits-bonus-panel__head,
.credits-page .credits-history-card__header h2 {
  font-weight: 700;
}

.pricing-page .pricing-title,
.pricing-page .pricing-plan__price strong {
  font-weight: 800;
}

.pricing-page .pricing-plan__name,
.pricing-page .pricing-plan__section h3 {
  font-weight: 700;
}

.dashboard-page .account-license-summary__item:hover:not(:disabled),
.credits-page .credits-summary-item--button:not(:disabled):hover {
  border-color: var(--portal-card-border-hover);
  background: #fff;
  box-shadow: var(--portal-card-shadow-hover);
  transform: none;
}

.dashboard-page .account-license-summary__item.is-active {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  box-shadow: inset 4px 0 0 rgba(var(--portal-accent-rgb), 0.78);
}

.dashboard-page .dashboard-license-panel {
  gap: 16px;
}

.dashboard-page .dashboard-navlink {
  gap: 10px;
}

.dashboard-page .dashboard-navlink__label {
  min-width: 0;
}

.dashboard-page .dashboard-navlink__beta-badge {
  flex: 0 0 auto;
  margin-left: 2px;
  padding: 2px 6px;
  border: 1px solid var(--ai-accent-border);
  border-radius: 999px;
  background: var(--ai-accent-soft-bg);
  color: var(--ai-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

button.dashboard-navlink {
  font: inherit;
  cursor: pointer;
}


.dashboard-page .dashboard-nav__group {
  display: grid;
  gap: 6px;
}

.dashboard-page .dashboard-nav__submenu {
  position: relative;
  display: grid;
  gap: 4px;
  margin: -2px 0 6px 38px;
  padding-left: 14px;
}

.dashboard-page .dashboard-nav__submenu::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 1px;
  border-radius: 999px;
  background: var(--line);
}

.dashboard-page .dashboard-nav-sublink {
  position: relative;
  min-height: 34px;
  box-sizing: border-box;
  width: auto;
  margin-left: -4px;
  padding: 0 12px 0 16px;
  border-radius: 7px;
  color: var(--muted);
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.dashboard-page .dashboard-nav-sublink:hover {
  background: var(--surface);
  color: var(--ink);
}

.dashboard-page .dashboard-nav .dashboard-nav-sublink.dashboard-navlink--active {
  border-bottom-color: transparent;
  background: var(--portal-accent-soft-bg);
  color: var(--ai-accent);
  font-weight: 700;
}

.dashboard-page .dashboard-nav .dashboard-nav-sublink.dashboard-navlink--active:hover {
  background: var(--portal-accent-active-bg);
  color: var(--ai-accent-hover);
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink.dashboard-navlink--active {
  border-bottom-color: transparent;
  color: var(--ai-accent);
}

.dashboard-page .dashboard-nav > .dashboard-navlink,
.dashboard-page .dashboard-nav__group > .dashboard-navlink,
.dashboard-page .dashboard-nav__account > .dashboard-navlink {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink {
  font-weight: 700;
}
.ai-studio-page {
  --portal-content-max-width: 100%;
}

.ai-studio-shell {
  display: grid;
  gap: 22px;
}

.ai-studio-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.ai-studio-entry-card,
.ai-studio-tool-section,
.ai-image-empty {
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.ai-studio-entry-card {
  min-width: 0;
  min-height: 126px;
  padding: 18px;
  color: var(--ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
}

.ai-studio-entry-card:hover,
.ai-studio-tool-card:hover {
  border-color: var(--portal-card-border-hover);
  box-shadow: var(--portal-card-shadow-hover);
}

.ai-studio-entry-icon {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  color: #fff;
  display: grid;
  place-items: center;
}

.ai-studio-entry-card--video .ai-studio-entry-icon {
  background: #3b79f7;
}

.ai-studio-entry-card--image .ai-studio-entry-icon {
  background: #19a78e;
}

.ai-studio-entry-card--tools .ai-studio-entry-icon {
  background: #b449c9;
}

.ai-studio-entry-icon svg,
.ai-studio-entry-arrow {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-studio-entry-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ai-studio-entry-body strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
}

.ai-studio-entry-body span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.ai-studio-entry-arrow {
  color: var(--muted-soft);
}

.ai-studio-promo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ai-studio-promo-card {
  position: relative;
  min-height: 250px;
  border-radius: 8px;
  color: #fff;
  display: block;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 22px 48px rgba(22, 35, 57, 0.18);
}

.ai-studio-promo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 20, 42, 0.04) 0%, rgba(9, 20, 42, 0.2) 48%, rgba(9, 20, 42, 0.82) 100%),
    linear-gradient(90deg, rgba(9, 20, 42, 0.18), rgba(9, 20, 42, 0));
  z-index: 1;
}

.ai-studio-promo-card--video {
  background: linear-gradient(135deg, #234fd7 0%, #23c3b6 48%, #ef5b57 100%);
}

.ai-studio-promo-card--image {
  background: linear-gradient(135deg, #193e6f 0%, #54c0eb 46%, #ffba6b 100%);
}

.ai-studio-promo-card--tools {
  background: linear-gradient(135deg, #342166 0%, #b44cd6 48%, #f26d70 100%);
}

.ai-studio-promo-art {
  position: absolute;
  inset: 0;
  display: block;
}

.ai-studio-promo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.ai-studio-promo-art > span {
  position: absolute;
  display: block;
}

.ai-studio-promo-frame {
  left: 12%;
  top: 14%;
  width: 62%;
  height: 58%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 22px 42px rgba(16, 32, 63, 0.24);
}

.ai-studio-promo-play {
  left: 38%;
  top: 33%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 32px rgba(12, 28, 58, 0.26);
}

.ai-studio-promo-play::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 17px;
  border-left: 17px solid #274cdb;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.ai-studio-promo-track {
  left: 12%;
  right: 12%;
  bottom: 24%;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.ai-studio-promo-track::after {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.86);
}

.ai-studio-promo-portrait {
  left: 12%;
  bottom: 18%;
  width: 112px;
  height: 154px;
  border-radius: 48px 48px 24px 24px;
  background: linear-gradient(180deg, #f8d1ac 0 24%, #1d3154 24% 100%);
  box-shadow: 0 22px 42px rgba(21, 31, 55, 0.28);
}

.ai-studio-promo-panel {
  width: 42%;
  height: 42%;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 22px 42px rgba(18, 32, 58, 0.22);
}

.ai-studio-promo-panel--front {
  right: 13%;
  top: 18%;
}

.ai-studio-promo-panel--back {
  right: 25%;
  bottom: 20%;
}

.ai-studio-promo-tool-card {
  width: 34%;
  height: 38%;
  border: 2px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 36px rgba(18, 28, 58, 0.26);
}

.ai-studio-promo-tool-card--one {
  left: 11%;
  top: 18%;
}

.ai-studio-promo-tool-card--two {
  left: 34%;
  top: 32%;
}

.ai-studio-promo-tool-card--three {
  right: 12%;
  top: 14%;
}

.ai-studio-promo-content {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
  display: grid;
  gap: 6px;
}

.ai-studio-promo-content span {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.ai-studio-promo-content strong {
  max-width: 86%;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.08;
}

.ai-studio-promo-content small {
  max-width: 86%;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.ai-studio-tool-section {
  padding: 22px;
  display: grid;
  gap: 18px;
}

.ai-studio-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ai-studio-section-header h1,
.ai-studio-section-header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.ai-studio-section-link {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
}

.ai-studio-section-link:hover {
  border-color: var(--portal-card-border-hover);
  background: var(--control-surface);
}

.ai-studio-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}

.ai-studio-category-divider {
  grid-column: 1 / -1;
  order: 2;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--portal-card-border);
}

.ai-studio-tool-grid > [data-ai-product-category="effect"] {
  order: 1;
}

.ai-studio-tool-grid > [data-ai-product-category="tool"] {
  order: 3;
}

.ai-studio-tool-card {
  min-height: 268px;
  text-decoration: none;
}

.ai-studio-tool-card .ai-tools-gallery-card__visual {
  flex-basis: 156px;
}

.ai-image-empty {
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.ai-image-empty h2 {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}

.ai-image-empty p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1040px) {
  .ai-studio-entry-grid,
  .ai-studio-promo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ai-studio-entry-card {
    min-height: 112px;
    padding: 15px;
  }

  .ai-studio-promo-card {
    min-height: 218px;
  }

  .ai-studio-tool-section {
    padding: 16px;
  }

  .ai-studio-section-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-studio-promo-content strong,
  .ai-studio-promo-content small {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-studio-promo-video {
    animation: none;
  }
}

.ai-tools-gallery-page,
.ai-effects-gallery-page {
  --portal-content-max-width: 100%;
}

.ai-tools-gallery-shell {
  display: grid;
  gap: 18px;
}

.ai-tools-gallery {
  display: grid;
  gap: 18px;
}

.ai-tool-workspace-heading {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.ai-tool-workspace-heading[hidden] {
  display: none;
}

.ai-tool-workspace-heading .dashboard-card__eyebrow {
  margin: 0;
}

.ai-tool-workspace-heading h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}

.ai-tool-workspace-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-tool-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-soft);
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.ai-tool-back-link[hidden] {
  display: none;
}

.ai-tool-back-link:hover,
.ai-tool-back-link:focus-visible {
  color: var(--ink);
  border-color: rgba(71, 119, 244, .42);
  background: rgba(71, 119, 244, .08);
  outline: none;
}

.ai-tool-back-link svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.ai-tool-detail-workspace--compact .ai-tool-workspace-heading {
  gap: 0;
  margin: 22px 22px 8px;
}

.ai-tool-detail-workspace--compact .ai-tool-workspace-heading h1 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.ai-tool-workspace-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.ai-tools-gallery__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.ai-tools-gallery__header h1 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.ai-tools-gallery__header p {
  margin: 8px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.ai-tools-gallery__status {
  flex: 0 0 auto;
  max-width: 360px;
  padding: 10px 12px;
  border: 1px solid rgba(66, 133, 244, 0.18);
  border-radius: 8px;
  background: rgba(66, 133, 244, 0.08);
  color: #214f9b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.ai-tools-gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-tools-gallery-tab {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
}

.ai-tools-gallery-tab:hover {
  border-color: var(--portal-card-border-hover);
  color: var(--ink);
}

.ai-tools-gallery-tab[aria-selected="true"] {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-soft-bg);
  color: var(--ai-accent);
}

.ai-tools-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 18px;
  align-items: stretch;
}

.ai-tools-gallery-card {
  min-width: 0;
  min-height: 286px;
  padding: 0;
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--portal-card-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.ai-tools-gallery-card:hover {
  border-color: var(--portal-card-border-hover);
  box-shadow: var(--portal-card-shadow-hover);
}

.ai-tools-gallery-card:focus-visible {
  outline: 2px solid rgba(66, 133, 244, 0.42);
  outline-offset: 3px;
}

.ai-tools-gallery-card__visual {
  flex: 0 0 176px;
  width: 100%;
}

.ai-tools-gallery-card__body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.ai-tools-gallery-card__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ai-tools-gallery-card__title-row strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.ai-tools-gallery-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 6px;
  background: #1ecda5;
  color: #06362d;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.ai-tools-gallery-badge--hot {
  background: #f0a7ff;
  color: #461062;
}

.ai-tools-gallery-card__copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.ai-tools-gallery-visual {
  position: relative;
  display: block;
  overflow: hidden;
  background: #dce7f7;
}

.ai-tools-gallery-visual__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ai-tools-gallery-visual > span {
  position: absolute;
  display: block;
}

.ai-tools-gallery-visual__subject {
  left: 50%;
  bottom: 18px;
  width: 78px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 36px 36px 24px 24px;
  background: linear-gradient(180deg, #f4d3b3 0 26%, #3d78ff 26% 62%, #202d4a 62% 100%);
  box-shadow: 0 18px 34px rgba(19, 38, 78, 0.22);
}

.ai-tools-gallery-visual__tile {
  right: 18px;
  width: 58px;
  height: 58px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 10px 22px rgba(27, 49, 79, 0.18);
}

.ai-tools-gallery-visual__tile--top {
  top: 14px;
}

.ai-tools-gallery-visual__tile--bottom {
  top: 82px;
}

.ai-tools-gallery-visual__before,
.ai-tools-gallery-visual__after {
  top: 14px;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(10, 19, 32, 0.5);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ai-tools-gallery-visual__before {
  left: 16px;
}

.ai-tools-gallery-visual__after {
  right: 16px;
}

.ai-tools-gallery-visual__split {
  inset: 0 50% 0 auto;
  width: 1px;
  background: rgba(255, 255, 255, 0.82);
}

.ai-tools-gallery-visual__checker {
  inset: 0;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.52) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.52) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.52) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.52) 75%);
  background-color: #9fc2e8;
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
}

.ai-tools-gallery-visual__spark {
  right: 24px;
  top: 28px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.26);
}

.ai-tools-gallery-visual__object,
.ai-tools-gallery-visual__clean,
.ai-tools-gallery-visual__old,
.ai-tools-gallery-visual__new,
.ai-tools-gallery-visual__small,
.ai-tools-gallery-visual__large {
  border-radius: 8px;
  box-shadow: 0 14px 28px rgba(30, 49, 75, 0.18);
}

.ai-tools-gallery-visual__object,
.ai-tools-gallery-visual__clean {
  top: 38px;
  width: 78px;
  height: 88px;
}

.ai-tools-gallery-visual__object {
  left: 38px;
  background: linear-gradient(135deg, #83cdf5, #ffcc86);
}

.ai-tools-gallery-visual__clean {
  right: 38px;
  background: linear-gradient(135deg, #83cdf5, #d8f0ff);
}

.ai-tools-gallery-visual__arrow {
  left: 50%;
  top: 78px;
  width: 42px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(22, 37, 60, 0.48);
}

.ai-tools-gallery-visual__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-top: 2px solid rgba(22, 37, 60, 0.48);
  border-right: 2px solid rgba(22, 37, 60, 0.48);
  transform: rotate(45deg);
}

.ai-tools-gallery-visual__portrait,
.ai-tools-gallery-visual__face {
  left: 50%;
  bottom: 18px;
  width: 98px;
  height: 118px;
  transform: translateX(-50%);
  border-radius: 48px 48px 28px 28px;
  background: linear-gradient(180deg, #f6ceb9 0 36%, #ffffff 36% 100%);
  box-shadow: 0 18px 34px rgba(18, 37, 64, 0.2);
}

.ai-tools-gallery-visual__group-person {
  bottom: 18px;
  width: 78px;
  height: 112px;
  border-radius: 42px 42px 26px 26px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 18px 34px rgba(18, 37, 64, 0.18);
}

.ai-tools-gallery-visual__group-person::before,
.ai-tools-gallery-visual__group-person::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.ai-tools-gallery-visual__group-person::before {
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1c7aa;
}

.ai-tools-gallery-visual__group-person::after {
  bottom: 0;
  width: 74px;
  height: 64px;
  border-radius: 28px 28px 20px 20px;
  background: #263f66;
}

.ai-tools-gallery-visual__group-person--left {
  left: 28px;
  transform: scale(0.88);
}

.ai-tools-gallery-visual__group-person--left::after {
  background: #d85848;
}

.ai-tools-gallery-visual__group-person--center {
  left: 50%;
  transform: translateX(-50%) scale(1.08);
  z-index: 2;
}

.ai-tools-gallery-visual__group-person--right {
  right: 28px;
  transform: scale(0.88);
}

.ai-tools-gallery-visual__group-person--right::after {
  background: #2c7a74;
}

.ai-tools-gallery-visual__meter {
  left: 24px;
  top: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#ba67ff 0 86%, rgba(255, 255, 255, 0.55) 86% 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}

.ai-tools-gallery-visual__small {
  left: 38px;
  top: 56px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #9fe5ff, #eef8ff);
}

.ai-tools-gallery-visual__large {
  right: 32px;
  top: 34px;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #9fe5ff, #eef8ff);
}

.ai-tools-gallery-visual__old,
.ai-tools-gallery-visual__new {
  top: 28px;
  width: 92px;
  height: 112px;
}

.ai-tools-gallery-visual__old {
  left: 28px;
  background: linear-gradient(135deg, #7b6f63, #c6b49a);
  filter: saturate(0.45);
}

.ai-tools-gallery-visual__new {
  right: 28px;
  background: linear-gradient(135deg, #ffd5a8, #8fc8ff);
}

.ai-tools-gallery-visual__wave,
.ai-tools-gallery-visual__clean-wave {
  left: 28px;
  right: 28px;
  height: 34px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(255, 255, 255, 0.9) 4% 8%, transparent 8% 12%),
    linear-gradient(90deg, rgba(118, 84, 255, 0.84), rgba(32, 202, 219, 0.84));
  background-size: 28px 100%, 100% 100%;
}

.ai-tools-gallery-visual__wave {
  bottom: 30px;
}

.ai-tools-gallery-visual__clean-wave {
  top: 42px;
  opacity: 0.48;
}

.ai-tools-gallery-visual__play {
  left: 28px;
  top: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.66);
}

.ai-tools-gallery-visual__play::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 13px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid rgba(30, 48, 76, 0.74);
}

.ai-tools-gallery-visual__mask,
.ai-tools-gallery-visual__caption {
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(29, 40, 58, 0.62);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.ai-tools-gallery-visual__mask {
  top: 62px;
}

.ai-tools-gallery-visual__caption {
  bottom: 34px;
  background: rgba(255, 255, 255, 0.82);
  color: #2a4162;
}

.ai-tools-gallery-visual__timeline {
  left: 34px;
  right: 34px;
  bottom: 26px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.ai-tools-gallery-visual__mic {
  left: 50%;
  top: 34px;
  width: 52px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 28px 28px 18px 18px;
  background: linear-gradient(180deg, #fff, #9ee7ff);
  box-shadow: 0 16px 28px rgba(24, 41, 66, 0.18);
}

.ai-tools-gallery-visual__copy {
  right: 38px;
  bottom: 42px;
  width: 64px;
  height: 64px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
}

.ai-tools-gallery-visual__lang {
  top: 54px;
  width: 70px;
  height: 54px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.76);
  color: #263b59;
  font-size: 18px;
  font-weight: 850;
}

.ai-tools-gallery-visual__lang:first-child {
  left: 38px;
}

.ai-tools-gallery-visual__lang:last-child {
  right: 38px;
}

.ai-tools-gallery-visual--clothes {
  background: linear-gradient(135deg, #9cc6ec, #f7c768);
}

.ai-tools-gallery-visual--face-swap {
  background: linear-gradient(135deg, #c3b4f5, #7fd4e8);
}

.ai-tools-gallery-visual--kiss-video {
  background: linear-gradient(135deg, #f5b4c8, #b49cf0);
}

.ai-tools-gallery-visual--hug-video {
  background: linear-gradient(135deg, #f7c9a8, #f0a8b8);
}

.ai-tools-gallery-visual__effect-icon {
  width: 80px;
  height: 80px;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 6px 14px rgba(15, 23, 42, 0.2));
}

.ai-tools-gallery-visual--wedding-video {
  background: linear-gradient(135deg, #f6b8cf, #b59cf2);
}

html[data-theme="dark"] .ai-tools-gallery-visual__effect-icon {
  color: #f8fafc;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35));
}

.ai-tools-gallery-visual--bust {
  background: linear-gradient(135deg, #bde9ff, #8dd9c4);
}

.ai-tools-gallery-visual--muscle {
  background: linear-gradient(135deg, #c6e3ff 0 50%, #f4d6ae 50% 100%);
}

.ai-tools-gallery-visual--group-photo {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0) 48%),
    linear-gradient(135deg, #c7d8f1, #f2d1b6);
}

.ai-tools-gallery-visual--background {
  background: #cfe6ff;
}

.ai-tools-gallery-visual--object {
  background: linear-gradient(135deg, #c4ddff, #f6e2b8);
}

.ai-tools-gallery-visual--enhancer {
  background: linear-gradient(135deg, #e8c1ff, #9de4ff);
}

.ai-tools-gallery-visual--upscale {
  background: linear-gradient(135deg, #d8efff, #b8d3ff);
}

.ai-tools-gallery-visual--restore {
  background: linear-gradient(135deg, #c9b091, #8fbfee);
}

.ai-tools-gallery-visual--lipsync,
.ai-tools-gallery-visual--avatar {
  background: linear-gradient(135deg, #ffd2bd, #c6e9ff);
}

.ai-tools-gallery-visual--video-object {
  background: linear-gradient(135deg, #9edcf1, #fff0aa);
}

.ai-tools-gallery-visual--subtitle {
  background: linear-gradient(135deg, #cfe0ff, #c7f1ec);
}

.ai-tools-gallery-visual--noise,
.ai-tools-gallery-visual--voice,
.ai-tools-gallery-visual--clone {
  background: linear-gradient(135deg, #b8c5ff, #71dfd4);
}

.ai-tools-gallery-visual--translate {
  background: linear-gradient(135deg, #e1ecff, #fff0bd);
}

.ai-image-empty {
  max-width: 760px;
  padding: 28px;
}
.dashboard-page .dashboard-navlink__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-page .account-settings-shell {
  display: block;
}

.account-page {
  --account-settings-content-padding-x: clamp(20px, 2.4vw, 32px);
}

.account-page .account-settings-grid {
  width: min(100%, 900px);
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.account-page .account-settings-panel {
  min-width: 0;
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.account-page .account-settings-panel {
  min-width: 0;
  overflow: hidden;
}

.account-page .account-settings-panel__header {
  min-height: 74px;
  padding: 18px var(--account-settings-content-padding-x);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-page .account-settings-panel__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.account-page .account-settings-panel__actions .dashboard-card__action {
  margin-left: 0;
  text-decoration: none;
}

.account-page .account-settings-details {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.account-page .account-settings-details .account-details__item {
  min-height: 52px;
  padding: 5px var(--account-settings-content-padding-x);
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
}

.account-page .account-subscription-summary {
  padding: 18px var(--account-settings-content-padding-x) 20px;
}

.account-page .account-credits-summary {
  min-height: 60px;
  padding: 9px var(--account-settings-content-padding-x);
  display: grid;
  grid-template-columns: minmax(160px, 0.34fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.account-page .account-credits-summary__label {
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.account-page .account-credits-summary__content {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.account-page .account-credits-summary__value {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.account-page .account-subscription-summary__status {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.account-page .account-subscription-summary__status[data-tone="error"] {
  color: var(--danger-text);
}

.account-page .account-subscription-summary__status[hidden] + .account-subscription-summary__list {
  margin-top: 0;
}

.account-page .account-subscription-summary__list {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.account-page .account-subscription-item {
  min-width: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.account-page .account-subscription-item__body {
  min-width: 0;
}

.account-page .account-subscription-item__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.account-page .account-subscription-item__title {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.account-page .account-subscription-item__meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.account-page .account-subscription-item__status {
  min-height: 24px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.account-page .account-subscription-item__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.account-page .account-subscription-item__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-page .account-subscription-item__button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.account-page .account-subscription-item__button--change {
  border-color: var(--portal-accent-border);
  color: var(--portal-accent);
}

.account-page .account-subscription-item__button--change:hover,
.account-page .account-subscription-item__button--change:focus-visible {
  border-color: var(--portal-accent);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent-hover);
}

.account-page .account-subscription-item__button--cancel:hover,
.account-page .account-subscription-item__button--cancel:focus-visible {
  border-color: rgba(197, 72, 72, 0.36);
  background: rgba(197, 72, 72, 0.07);
  color: #a13d3d;
}

.account-page .account-subscription-item__button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.account-page .account-subscription-item[data-state="active"] .account-subscription-item__status {
  border-color: rgba(36, 90, 54, 0.22);
  background: rgba(214, 238, 226, 0.92);
  color: #245a36;
}

.dashboard-page .dashboard-license-panel__status {
  justify-content: flex-start;
}

.dashboard-page .dashboard-license-group {
  --dashboard-license-content-padding-x: clamp(20px, 2.4vw, 32px);
  padding: 0;
  overflow: hidden;
}

.dashboard-page .dashboard-license-groups__eyebrow {
  display: none;
}

.dashboard-page .dashboard-license-group__header {
  min-height: 62px;
  padding: 18px var(--dashboard-license-content-padding-x);
  border-bottom: 1px solid var(--line);
}

.dashboard-page .dashboard-license-group__title,
.account-page .account-settings-panel__header .dashboard-card__title,
.credits-page .account-license-summary__header h3,
.credits-page .credits-history-card__header h2 {
  font-size: var(--portal-card-title-font-size);
  font-weight: var(--portal-card-title-font-weight);
  line-height: 1.25;
  letter-spacing: 0;
}

.dashboard-page .dashboard-license-list {
  margin-top: 0;
  gap: 0;
}

.dashboard-page .dashboard-license-list__empty {
  margin: 0;
  padding-right: var(--dashboard-license-content-padding-x);
  padding-left: var(--dashboard-license-content-padding-x);
  border-width: 1px 0 0;
  border-style: solid;
  border-color: var(--line);
  border-radius: 0;
  background: #fbfcfe;
}

.dashboard-page .dashboard-license-item {
  padding: 18px var(--dashboard-license-content-padding-x);
  border-width: 1px 0 0;
  border-color: var(--line);
  border-radius: 0;
  background: #fff;
  overflow: visible;
}

.dashboard-page .dashboard-license-list .dashboard-license-item:first-child {
  border-top: 0;
}

.dashboard-page .dashboard-license-item:hover {
  border-color: var(--line);
  background: #fbfcfe;
  box-shadow: none;
  transform: none;
}

.dashboard-page .dashboard-license-item__name {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 0;
}

.dashboard-page .dashboard-license-item__meta,
.dashboard-page .dashboard-license-item__meta--subscription {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.35fr) minmax(80px, auto);
  gap: 16px 22px;
  align-items: start;
}

.dashboard-page .dashboard-license-item__meta--subscription {
  grid-template-columns: minmax(180px, 0.82fr) minmax(260px, 1.35fr) minmax(110px, auto);
}

.dashboard-page .dashboard-license-item__meta > .dashboard-license-item__field,
.dashboard-page .dashboard-license-item__meta > .dashboard-license-item__field:first-child,
.dashboard-page .dashboard-license-item__meta > .dashboard-license-item__field:nth-child(2),
.dashboard-page .dashboard-license-item__meta > .dashboard-license-item__field:last-child,
.dashboard-page .dashboard-license-item__meta--subscription > .dashboard-license-item__field:first-child,
.dashboard-page .dashboard-license-item__meta--subscription > .dashboard-license-item__field:nth-child(2),
.dashboard-page .dashboard-license-item__meta--subscription > .dashboard-license-item__field:last-child,
.dashboard-page .dashboard-license-item__meta--subscription > .dashboard-license-item__field.dashboard-license-item__field--status {
  min-width: 0;
  margin-left: 0;
  text-align: left;
  flex: initial;
}

.dashboard-page .dashboard-license-item__field--count {
  justify-self: end;
  text-align: right;
}

.dashboard-page .dashboard-license-item__field dt,
.dashboard-page .credits-meta-grid dt,
.dashboard-page .credits-summary-item span,
.dashboard-page .account-license-summary__item span {
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-page .dashboard-license-item__field dd,
.dashboard-page .credits-meta-grid dd {
  color: var(--accent-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.dashboard-page .account-details {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: grid;
  gap: 0;
  overflow: hidden;
}

.dashboard-page.account-page .account-settings-details {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.dashboard-page .account-details__item {
  min-height: 58px;
  padding: 13px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.dashboard-page .account-details__item:first-child {
  border-top: 0;
}

.dashboard-page .account-details__separator {
  display: none;
}

.dashboard-page .account-details__item dt {
  margin: 0;
  color: var(--muted-soft);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.dashboard-page .account-details__item dd {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}

.dashboard-page .dashboard-license-item__extra,
.dashboard-page .dashboard-subscription-devices {
  margin-top: 14px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.dashboard-page .dashboard-license-item__extra {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
}

.dashboard-page .dashboard-license-item__extra > .dashboard-license-item__actions + .dashboard-license-item__actions {
  margin-left: -14px;
}

.dashboard-page .dashboard-subscription-device {
  border-color: var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.dashboard-page .dashboard-refresh-button,
.dashboard-page .dashboard-card__action,
.dashboard-page .dashboard-license-renew-button,
.dashboard-page .dashboard-copy-button,
.dashboard-page .dashboard-upgrade-link,
.dashboard-page .account-button,
.dashboard-page .dashboard-navlink--button,
.dashboard-page .primary-auth-button,
.dashboard-page .subtle-button {
  border-radius: 8px;
  font-weight: 700;
}

.dashboard-page .menu-button {
  border-radius: 8px;
  font-weight: 500;
}

.dashboard-page .dashboard-upgrade-link {
  border-radius: 10px;
}

.dashboard-page .dashboard-refresh-button,
.dashboard-page .dashboard-card__action,
.dashboard-page .dashboard-license-download-button {
  border-color: var(--line-strong);
  background: #fff;
  color: var(--accent);
}

.dashboard-page .dashboard-buy-license-button,
.dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button),
.dashboard-page .primary-auth-button {
  background: var(--portal-accent);
  border-color: var(--portal-accent);
  color: #fff;
}

.dashboard-page .dashboard-buy-license-button:hover:not(:disabled),
.dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button):hover,
.dashboard-page .primary-auth-button:hover:not(:disabled) {
  background: var(--portal-accent-hover);
  border-color: var(--portal-accent-hover);
  color: #fff;
  box-shadow: none;
  transform: none;
}

.dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button) {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button):hover {
  border-color: var(--accent-soft);
  background: var(--accent-soft);
  color: #fff;
}

.credits-page .account-license-summary--main,
.credits-page .credits-summary-card,
.credits-page .credits-history-card {
  border: 1px solid var(--portal-card-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--portal-card-shadow);
}

.credits-page {
  --credits-content-padding-x: clamp(20px, 2.4vw, 32px);
}

.credits-page .credits-summary-card {
  padding: 20px var(--credits-content-padding-x);
}

.credits-page .credits-history-card {
  padding: 0;
  overflow: hidden;
}

.credits-page .credits-history-card__header {
  padding: 18px var(--credits-content-padding-x);
  border-bottom: 1px solid var(--line);
}

.credits-page .credits-alert {
  margin-right: var(--credits-content-padding-x);
  margin-left: var(--credits-content-padding-x);
}

.credits-page .credits-table-wrap {
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

.credits-page .credits-table th {
  background: var(--surface);
}

.credits-page .credits-table th:first-child,
.credits-page .credits-table td:first-child {
  padding-left: var(--credits-content-padding-x);
}

.credits-page .credits-table th:last-child,
.credits-page .credits-table td:last-child {
  padding-right: var(--credits-content-padding-x);
}

.credits-page .credits-empty {
  min-height: 132px;
  margin: 18px var(--credits-content-padding-x);
  padding: 28px 24px;
  border-radius: 8px;
}

.credits-page .credits-history-card__footer {
  position: relative;
  margin: 0;
}

.credits-page .credits-history-card__footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--credits-content-padding-x);
  left: var(--credits-content-padding-x);
  border-top: 1px solid var(--line);
  pointer-events: none;
}

/* No bottom padding: `.pricing-page .pricing-grid` owns the gap down to the cards. Setting it here
   too stacked two gaps between the same two things. */
.pricing-page .pricing-hero {
  margin-top: 0;
  padding: 20px 0 0;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
  gap: 45px;
  text-align: center;
}

.pricing-page .pricing-hero > div:first-child {
  justify-self: center;
  max-width: 920px;
}

.pricing-page .pricing-title {
  max-width: 920px;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(30px, 2.8vw, 36px);
  white-space: normal;
  letter-spacing: 0;
}

.pricing-page .pricing-actions {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: minmax(112px, 1fr) minmax(360px, 500px) minmax(112px, 1fr);
  justify-content: stretch;
  justify-items: center;
}

.pricing-page .pricing-billing-toggle {
  grid-column: 2;
  width: 100%;
}

.pricing-page .pricing-currency-control {
  grid-column: 3;
  justify-self: end;
  width: 112px;
}

.pricing-page .pricing-alert {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.pricing-page .pricing-grid {
  margin-top: var(--pricing-content-offset);
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.pricing-page .credit-purchase-panel {
  margin-top: var(--pricing-content-offset);
  max-width: 1200px;
}

@media (min-width: 961px) {
  .dashboard-page .dashboard-topbar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: var(--portal-sidebar-width);
    min-height: 100dvh;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background: var(--panel-bg);
    box-shadow: none;
    backdrop-filter: none;
    display: block;
    overflow: visible;
  }

  .dashboard-page .dashboard-topbar::before {
    display: none;
    content: none;
  }

  .dashboard-page .dashboard-topbar__left {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .dashboard-page .dashboard-brand {
    position: relative;
    width: 100%;
    min-height: var(--portal-topbar-height);
    padding-left: 28px;
    font-size: 16px;
    letter-spacing: 0;
  }

  .dashboard-page .dashboard-brand::after {
    display: none;
    content: none;
  }

  .dashboard-page .dashboard-brand::before {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    box-shadow: none;
  }

  .dashboard-page .dashboard-menu-toggle {
    display: none;
  }

  .dashboard-page .dashboard-nav {
    position: static;
    z-index: auto;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: 18px 16px;
    border-right: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    overflow-y: auto;
  }

  .dashboard-page .dashboard-nav__account {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 8px;
  }

  .dashboard-page .dashboard-nav .dashboard-navlink {
    width: 100%;
    min-height: 48px;
    padding: 0 14px 0 20px;
    border: 0;
    border-radius: 8px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
  }

  .dashboard-page .dashboard-nav__group > .dashboard-navlink {
    font-weight: 700;
  }

  .dashboard-page .dashboard-nav .dashboard-navlink:hover {
    background: var(--surface);
  }

  .dashboard-page .dashboard-nav .dashboard-navlink--signout:hover {
    color: var(--brand-red);
  }

  .dashboard-page .dashboard-nav .dashboard-navlink--active {
    background: var(--portal-accent-soft-bg);
    color: var(--portal-accent);
  }

  .dashboard-page .dashboard-topbar__actions {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    right: 0;
    left: var(--portal-sidebar-width);
    z-index: 95;
    min-height: var(--portal-topbar-height);
    margin-left: 0;
    padding: 0 24px;
    border-bottom: 1px solid var(--line);
    background: var(--page-bg);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
  }

  .dashboard-page .dashboard-welcome-credit-promo {
    position: absolute;
    top: 50%;
    left: 24px;
    max-width: calc(100% - 260px);
    transform: translateY(-50%);
  }

  .dashboard-page.portal-pricing-guest .dashboard-welcome-credit-promo {
    left: 50%;
    max-width: calc(100% - 430px);
    transform: translate(-50%, -50%);
  }

  .dashboard-page .dashboard-topbar__controls {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
  }

  /* The pricing cards intentionally stop 16px below the fixed top bar. Extend the opaque top-bar
     backdrop through that breathing room so card details cannot leak above the sticky headers. */
  .pricing-page .dashboard-topbar__actions {
    box-shadow: 0 16px 0 var(--page-bg);
  }

  .dashboard-page:not(.portal-pricing-guest)::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: var(--portal-sidebar-width);
    z-index: 99;
    width: var(--portal-sidebar-edge-width);
    pointer-events: none;
    background: var(--portal-sidebar-edge);
  }

  .dashboard-page .account-menu {
    flex: 0 0 auto;
  }

  .dashboard-page .account-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    display: inline-grid;
    place-items: center;
    gap: 0;
  }

  .dashboard-page .account-button:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .dashboard-page .account-button__avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }

  .dashboard-page .account-button:hover .account-button__avatar,
  .dashboard-page .account-button[aria-expanded="true"] .account-button__avatar {
    background: var(--ink);
    box-shadow: 0 0 0 4px rgba(34, 48, 74, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  }

  .dashboard-page .account-button__meta,
  .dashboard-page .account-button__caret {
    display: none;
  }

  .dashboard-page .dashboard-shell,
  .credits-page .dashboard-shell,
  .pricing-page .dashboard-shell {
    box-sizing: border-box;
    width: calc(100vw - var(--portal-sidebar-width));
    max-width: none;
    min-height: 100vh;
    margin: 0 0 0 var(--portal-sidebar-width);
    padding: calc(var(--portal-topbar-height) + 16px) var(--portal-admin-gutter) 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .portal-account-deletion-lock:not([hidden]) {
    box-sizing: border-box;
    width: calc(100vw - var(--portal-sidebar-width));
    max-width: none;
    margin: 0 0 0 var(--portal-sidebar-width);
    padding: calc(var(--portal-topbar-height) + 48px) var(--portal-admin-gutter) 84px;
  }

  .portal-account-deletion-lock__card {
    width: min(760px, 100%);
  }

  .dashboard-page .dashboard-shell > * {
    width: min(100%, var(--portal-content-max-width));
    max-width: var(--portal-content-max-width);
  }

  .dashboard-page.pricing-page .dashboard-shell > .pricing-grid,
  .dashboard-page.pricing-page .dashboard-shell > .credit-purchase-panel,
  .dashboard-page.pricing-page .dashboard-shell > .pricing-alert {
    width: min(100%, 1200px);
    max-width: 1200px;
  }

  .dashboard-page .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page .dashboard-grid > .dashboard-card {
    top: calc(var(--portal-topbar-height) + 18px);
  }

  .dashboard-page.portal-pricing-guest {
    --portal-sidebar-width: 0px;
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar {
    position: sticky;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100vw;
    min-height: var(--portal-topbar-height);
    margin-left: calc(50% - 50vw);
    padding: 0 32px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar::before {
    display: none;
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar__left {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .dashboard-page.portal-pricing-guest .dashboard-brand {
    width: auto;
    min-height: var(--portal-topbar-height);
    padding-left: 0;
  }

  .dashboard-page.portal-pricing-guest .dashboard-topbar__actions {
    position: static;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
  }

  .dashboard-page.portal-pricing-guest .dashboard-brand::after {
    display: none;
  }

  .dashboard-page.portal-pricing-guest .dashboard-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 30px;
    padding-left: 32px;
    padding-right: 32px;
  }

}

@media (min-width: 961px) and (max-width: 1260px) {
  .dashboard-page .dashboard-welcome-credit-promo__benefits,
  .dashboard-page .dashboard-welcome-credit-promo__separator {
    display: none;
  }
}

@media (min-width: 1500px) {
  .dashboard-page .dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .dashboard-page {
    --portal-admin-gutter: 20px;
  }

  .dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__top {
    flex-wrap: wrap;
  }

  .dashboard-page:not(.credits-page) .account-license-summary--main .dashboard-license-actions {
    margin-left: auto;
  }
}

@media (min-width: 961px) {
  .dashboard-page .dashboard-shell.ai-tool-shell,
  .dashboard-page .dashboard-shell.ai-creation-history-shell {
    padding-right: 16px;
    padding-left: 16px;
  }

  .dashboard-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    width: 100%;
    max-width: none;
    --ai-tool-workspace-gap: 16px;
    grid-template-columns: minmax(var(--ai-tool-generation-panel-width), var(--ai-tool-generation-panel-width)) minmax(0, 1fr);
    gap: var(--ai-tool-workspace-gap);
  }

  .dashboard-page .dashboard-shell.ai-tool-shell .ai-tool-settings-panel {
    width: var(--ai-tool-generation-panel-width);
    max-width: var(--ai-tool-generation-panel-width);
  }

  .dashboard-page .dashboard-shell.ai-creation-history-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 16px;
    overflow: hidden;
  }

  .dashboard-page .dashboard-shell.ai-creation-history-shell .ai-creation-history-page-layout {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
  }
}
@media (min-width: 1121px) {
  .dashboard-page .dashboard-shell.ai-tool-shell,
  .dashboard-page .dashboard-shell.ai-creation-history-shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-bottom: 16px;
    overflow: hidden;
  }

  .dashboard-page .dashboard-shell.ai-tool-shell .ai-tool-workspace {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    align-items: stretch;
  }

  .ai-result-view-column {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .ai-tool-settings-panel,
  .ai-video-results-panel {
    height: auto;
    min-height: 0;
    max-height: none;
    align-self: stretch;
    overflow: hidden;
  }

  .ai-video-results-panel {
    flex: 1 1 auto;
  }

  .ai-tool-settings-panel {
    position: relative;
    top: auto;
  }

  .ai-video-result-stage {
    flex: 1 1 0;
    min-height: 0;
  }

  .ai-creation-history,
  .ai-sample-results {
    flex: 1 1 0;
    min-height: 0;
  }

  .ai-video-result-box {
    min-height: 0;
    max-height: none;
  }
}

@media (min-width: 768px) and (max-width: 1120px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell .ai-tool-settings-panel {
    position: sticky;
    top: calc(var(--portal-topbar-height, 64px) + 16px);
    height: calc(100vh - var(--portal-topbar-height, 64px) - 32px);
    height: calc(100dvh - var(--portal-topbar-height, 64px) - 32px);
    max-height: calc(100vh - var(--portal-topbar-height, 64px) - 32px);
    max-height: calc(100dvh - var(--portal-topbar-height, 64px) - 32px);
    align-self: start;
  }
}

.ai-creation-history-page .dashboard-shell.ai-creation-history-shell {
  align-items: stretch;
}

.ai-creation-history-page .ai-creation-history-page-layout,
.ai-creation-history-page .ai-result-view-column,
.ai-creation-history-page .ai-video-results-panel {
  flex: 1 1 auto;
  height: 100%;
  width: 100%;
  max-width: none;
  min-height: 0;
}

.ai-creation-history-page .ai-video-result-stage,
.ai-creation-history-page .ai-creation-history {
  flex: 1 1 0;
  min-height: 0;
}

.ai-creation-history-page .ai-jobs-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.ai-creation-history-page .ai-jobs-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: fixed;
}

.ai-creation-history-page .ai-jobs-table th,
.ai-creation-history-page .ai-jobs-table td {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 961px) {
  .ai-creation-history-page .dashboard-shell.ai-creation-history-shell {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  .ai-creation-history-page .dashboard-shell.ai-creation-history-shell .ai-creation-history-page-layout,
  .ai-creation-history-page .ai-result-view-column,
  .ai-creation-history-page .ai-video-results-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .ai-creation-history-page .ai-jobs-layout {
    height: auto;
    min-height: 0;
    align-items: start;
    overflow: visible;
  }

  .ai-creation-history-page .ai-jobs-card,
  .ai-creation-history-page .ai-jobs-detail {
    height: auto;
    min-height: calc(100dvh - var(--portal-topbar-height, 64px) - 32px);
    align-self: start;
    overflow: visible;
  }

  .ai-creation-history-page .ai-jobs-detail {
    position: sticky;
    top: calc(var(--portal-topbar-height, 64px) + 16px);
    max-height: calc(100dvh - var(--portal-topbar-height, 64px) - 32px);
    overflow: hidden;
    z-index: 1;
  }

  .ai-creation-history-page .ai-jobs-table-wrap {
    flex: 0 0 auto;
    min-height: 0;
  }

  .ai-creation-history-page .ai-jobs-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .ai-creation-history-page .ai-jobs-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}

@media (max-width: 960px) {
  .dashboard-page {
    --portal-sidebar-width: 0px;
    --portal-admin-gutter: 14px;
    overflow-x: hidden;
  }

  .ai-creation-history-page .dashboard-shell.ai-creation-history-shell {
    min-height: 0;
    overflow: visible;
  }

  .ai-creation-history-page .ai-creation-history-page-layout,
  .ai-creation-history-page .ai-result-view-column,
  .ai-creation-history-page .ai-video-results-panel {
    height: auto;
  }

  .ai-creation-history-page .ai-video-result-stage {
    flex: 0 0 auto;
    margin-inline-end: 0;
    overflow: visible;
  }

  .ai-creation-history-page .ai-creation-history {
    flex: 0 0 auto;
    min-height: 220px;
    padding-inline-end: 0;
    overflow: visible;
  }

  .dashboard-page .dashboard-topbar {
    width: 100%;
    margin-left: 0;
    padding: 10px 14px;
  }

  .dashboard-page .dashboard-brand {
    width: auto;
    padding-left: 0;
    letter-spacing: 0;
  }

  .dashboard-page .dashboard-nav {
    position: static;
    width: 100%;
    max-height: none;
    overflow: visible;
  }

  .dashboard-page .dashboard-shell,
  .credits-page .dashboard-shell,
  .pricing-page .dashboard-shell {
    --pricing-content-offset: 22px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 20px var(--portal-admin-gutter) 54px;
  }

  .dashboard-page .dashboard-hero {
    margin-top: 0;
    padding: 18px;
    border-radius: 8px;
  }

  .dashboard-page .dashboard-license-hero,
  .account-page .account-settings-hero,
  .credits-page .credits-hero {
    grid-template-columns: minmax(0, 1fr) 136px;
    column-gap: 24px;
    min-height: 106px;
    padding: 18px 0;
    border-radius: 0;
    background: transparent;
  }

  .dashboard-page .dashboard-license-hero .dashboard-hero__art,
  .credits-page .credits-hero .dashboard-hero__art {
    width: 126px;
  }

  .dashboard-page .dashboard-license-hero .dashboard-copy,
  .account-page .account-settings-hero .dashboard-copy,
  .credits-page .credits-hero .dashboard-copy,
  .ai-tools-page .ai-tools-hero .dashboard-copy,
  .ai-jobs-page .ai-jobs-hero .dashboard-copy {
    font-size: 17px;
  }

  .account-page .account-settings-hero {
    border-radius: 0;
    background: transparent;
  }

  .dashboard-page .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .account-page .account-settings-grid {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-page .dashboard-license-item__meta,
  .dashboard-page .dashboard-license-item__meta--subscription {
    grid-template-columns: 1fr;
  }

  .dashboard-page .dashboard-license-item__field--count {
    justify-self: start;
    text-align: left;
  }

  .pricing-page .pricing-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pricing-page .pricing-actions {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .pricing-page .pricing-billing-toggle,
  .pricing-page .pricing-currency-control {
    grid-column: 1;
    width: min(100%, 500px);
    justify-self: center;
  }

  .pricing-page .pricing-title {
    max-width: 100%;
    font-size: 30px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .pricing-page .pricing-grid {
    margin: 22px 0 54px;
    max-width: none;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
  }

  .pricing-page .pricing-plan,
  .pricing-page .pricing-plan:first-child,
  .pricing-page .pricing-plan:last-child,
  .pricing-page .pricing-plan.pricing-plan--business {
    width: 100%;
    flex: initial;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px !important;
    background: #fff;
    scroll-snap-align: none;
  }

  .pricing-page .pricing-plan + .pricing-plan {
    border-left: 1px solid var(--line);
  }

  .pricing-page .pricing-plan__ribbon--standard,
  .pricing-page .pricing-plan__ribbon--business {
    position: static;
    right: auto;
    border-radius: 8px 8px 0 0;
  }

  .pricing-page .pricing-plan__ribbon {
    display: none;
    position: static;
    top: auto;
    z-index: auto;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .pricing-page .pricing-plan__ribbon--business {
    display: grid;
    min-height: 40px;
    padding: 0 16px;
  }

  .pricing-page .pricing-plan__header {
    position: static;
    top: auto;
    z-index: auto;
    min-height: auto;
    border: 0;
    border-top: 3px solid var(--plan-accent);
    border-bottom: 1px solid var(--line);
    border-radius: 0 !important;
  }

  .pricing-page .pricing-plan--recommended .pricing-plan__header {
    border-top: 0;
  }

  .pricing-page .pricing-plan__scroll {
    border: 0;
  }

  .pricing-page .pricing-plan--recommended::after {
    top: 0;
    border-radius: 8px;
  }

  .pricing-page .pricing-plan__ribbon--business::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__grid,
  .credits-page .credits-summary-grid,
  .credits-page .credits-meta-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-page .dashboard-license-group__header,
  .credits-page .credits-history-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-page .dashboard-hero {
    width: 100%;
    min-width: 0;
  }

  .dashboard-page .dashboard-copy,
  .pricing-page .pricing-title {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .dashboard-page .dashboard-copy {
    max-width: 330px;
    font-size: 14px;
  }

  .pricing-page .pricing-title {
    max-width: 330px;
    font-size: 26px;
    line-height: 1.18;
  }

  .pricing-page .pricing-plan {
    width: min(100%, 340px);
    margin-inline: auto;
  }

  .dashboard-page:not(.credits-page) .account-license-summary--main .account-license-summary__top {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-page .dashboard-license-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .dashboard-page .dashboard-license-actions .dashboard-add-license-button {
    width: 100%;
    flex: initial;
  }

  .dashboard-page .account-details__item {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 4px;
  }

  .account-page .account-settings-panel__header {
    align-items: stretch;
    flex-direction: column;
  }

  .account-page .account-settings-panel__actions {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .account-page .account-settings-panel__header .dashboard-card__action {
    width: 100%;
  }

  .account-page .account-settings-details .account-details__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .account-page .account-settings-details .account-details__item dd {
    overflow-wrap: anywhere;
  }

  .account-page .account-credits-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .account-page .account-credits-summary__content {
    gap: 12px;
  }

  .account-page .account-subscription-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .account-page .account-subscription-item__status {
    justify-self: start;
  }

  .account-page .account-subscription-item__actions {
    width: 100%;
    align-items: flex-start;
  }

  .account-page .account-subscription-item__buttons {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .account-page .account-subscription-item__button {
    flex: 1 1 140px;
  }

  .dashboard-page .dashboard-license-hero,
  .ai-tools-page .ai-tools-hero,
  .ai-jobs-page .ai-jobs-hero,
  .credits-page .credits-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page .dashboard-license-hero .dashboard-hero__art,
  .credits-page .credits-hero .dashboard-hero__art {
    display: none;
  }

  .dashboard-page .dashboard-license-hero .dashboard-copy,
  .account-page .account-settings-hero .dashboard-copy,
  .credits-page .credits-hero .dashboard-copy {
    font-size: 15px;
  }
}

@media (max-width: 960px) {
  .dashboard-page .dashboard-nav__account {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    display: grid;
    gap: 4px;
  }
}

@media (max-width: 960px) {
  html[data-theme="dark"] .dashboard-page .dashboard-topbar__actions {
    border-color: var(--line);
    background: var(--panel-bg);
  }

  html[data-theme="dark"] .dashboard-page .dashboard-support-link,
  html[data-theme="dark"] .dashboard-page .dashboard-theme-toggle {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
  }

  html[data-theme="dark"] .dashboard-page .dashboard-support-link:hover,
  html[data-theme="dark"] .dashboard-page .dashboard-theme-toggle:hover {
    border-color: var(--line-strong);
    background: var(--surface-strong);
  }
}

html[data-theme="dark"] .dashboard-page .dashboard-topbar,
html[data-theme="dark"] .dashboard-page .dashboard-nav,
html[data-theme="dark"] .dashboard-page .dashboard-card,
html[data-theme="dark"] .dashboard-page .dashboard-license-group,
html[data-theme="dark"] .dashboard-page .dashboard-license-item,
html[data-theme="dark"] .dashboard-page .dashboard-license-empty,
html[data-theme="dark"] .dashboard-page .account-license-summary__item,
html[data-theme="dark"] .dashboard-page .account-button,
html[data-theme="dark"] .dashboard-page .account-dropdown,
html[data-theme="dark"] .dashboard-page .account-details,
html[data-theme="dark"] .dashboard-page .account-settings-panel,
html[data-theme="dark"] .dashboard-page .credits-history-card,
html[data-theme="dark"] .dashboard-page .credits-summary-card,
html[data-theme="dark"] .dashboard-page .credits-summary-item,
html[data-theme="dark"] .dashboard-page .credits-bonus-panel,
html[data-theme="dark"] .dashboard-page .credits-bonus-item,
html[data-theme="dark"] .dashboard-page .pricing-plan,
html[data-theme="dark"] .dashboard-page .pricing-plan__scroll,
html[data-theme="dark"] .dashboard-page .pricing-alert,
html[data-theme="dark"] .dashboard-page .ai-tool-card,
html[data-theme="dark"] .dashboard-page .ai-tools-panel,
html[data-theme="dark"] .dashboard-page .ai-tools-result,
html[data-theme="dark"] .dashboard-page .ai-jobs-detail,
html[data-theme="dark"] .dashboard-page .profile-modal__card {
  border-color: var(--portal-card-border);
  background: var(--panel-bg);
  box-shadow: none;
}

@media (min-width: 961px) {
  html[data-theme="dark"] .dashboard-page .dashboard-topbar {
    background: var(--panel-bg);
  }

  html[data-theme="dark"] .dashboard-page .dashboard-topbar__actions {
    border-color: var(--line);
    background: var(--page-bg);
    box-shadow: none;
  }

  html[data-theme="dark"] .dashboard-page.pricing-page .dashboard-topbar__actions {
    box-shadow: 0 16px 0 var(--page-bg);
  }

  html[data-theme="dark"] .dashboard-page::after {
    display: none;
    content: none;
  }

  html[data-theme="dark"] .dashboard-page .account-button {
    background: transparent;
  }

  html[data-theme="dark"] .dashboard-page .account-button:hover .account-button__avatar,
  html[data-theme="dark"] .dashboard-page .account-button[aria-expanded="true"] .account-button__avatar {
    background: #33353c;
    box-shadow: 0 0 0 4px rgba(51, 53, 60, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
}

html[data-theme="dark"] .dashboard-page .dashboard-menu-toggle {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .dashboard-menu-toggle:hover {
  border-color: rgba(235, 237, 240, 0.115);
  background: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .dashboard-hero,
html[data-theme="dark"] .dashboard-page .dashboard-license-list__empty,
html[data-theme="dark"] .dashboard-page .dashboard-license-count,
html[data-theme="dark"] .dashboard-page .credits-empty,
html[data-theme="dark"] .dashboard-page .credits-table th,
html[data-theme="dark"] .dashboard-page .pricing-currency-control select,
html[data-theme="dark"] .dashboard-page .dashboard-navlink--button {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credits-empty.is-loading {
  border-color: rgba(235, 237, 240, 0.06);
  background: rgba(27, 28, 32, 0.88);
}

html[data-theme="dark"] .dashboard-page .credits-empty.is-loading strong {
  color: #b9bbc2;
}

html[data-theme="dark"] .dashboard-page .ai-tools-section + .ai-tools-section,
html[data-theme="dark"] .dashboard-page .ai-tool-modal__summary,
html[data-theme="dark"] .dashboard-page .ai-tools-toggle,
html[data-theme="dark"] .dashboard-page .ai-tool-modal__result {
  border-color: var(--line);
}

html[data-theme="dark"] .dashboard-page .ai-tool-card__model,
html[data-theme="dark"] .dashboard-page .ai-tool-card__cost,
html[data-theme="dark"] .dashboard-page .ai-tool-modal__summary,
html[data-theme="dark"] .dashboard-page .ai-tools-toggle,
html[data-theme="dark"] .dashboard-page .ai-tool-modal__result,
html[data-theme="dark"] .dashboard-page .ai-tool-settings-panel .ai-tools-panel__header {
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .ai-tools-audio-toggle {
  border-color: transparent;
  background: transparent;
  color: var(--accent-soft);
}

html[data-theme="dark"] .dashboard-page .ai-tools-body-line-toggle {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__button,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-select,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-button {
  border-color: rgba(235, 237, 240, 0.08);
  background-color: var(--control-surface);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-button__name,
html[data-theme="dark"] .dashboard-page .ai-voice-library-card__name-line > strong,
html[data-theme="dark"] .dashboard-page .ai-voice-library-selected__name {
  color: #a2a7b0;
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-button__name-description,
html[data-theme="dark"] .dashboard-page .ai-voice-library-card__name-description,
html[data-theme="dark"] .dashboard-page .ai-voice-library-selected__description {
  color: #7d838d;
}
html[data-theme="dark"] .dashboard-page .ai-video-mode-tabs {
  border-color: rgba(235, 237, 240, 0.055);
  background: var(--page-bg);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-video-mode-tab {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .ai-video-mode-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-video-mode-tab[aria-selected="true"] {
  background: #33353c;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.06);
}

html[data-theme="dark"] .dashboard-page .ai-result-view-button:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-result-view-button.is-active {
  border-color: transparent;
  background: #33353c;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.06);
}

html[data-theme="dark"] .dashboard-page .ai-storage-gauge {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-storage-gauge.is-actionable:hover {
  border-color: transparent;
  background: rgba(235, 237, 240, 0.055);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-storage-gauge__track {
  background: rgba(235, 237, 240, 0.13);
}

html[data-theme="dark"] .dashboard-page .ai-result-media-filter {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-result-media-filter__button:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-result-media-filter__button.is-active {
  border-color: transparent;
  background: #33353c;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.06);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__button:hover,
html[data-theme="dark"] .dashboard-page .ai-model-picker__button[aria-expanded="true"],
html[data-theme="dark"] .dashboard-page .ai-voice-preset-select:hover,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-button:hover,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-button[aria-expanded="true"] {
  border-color: rgba(235, 237, 240, 0.115);
  background-color: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-button {
  border-color: rgba(235, 237, 240, 0.075);
  background: var(--control-surface);
  color: var(--muted);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-video-form-scrollbar__thumb {
  background: rgba(181, 186, 196, 0.38);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}

@supports (-moz-appearance: none) {
  html[data-theme="dark"] .dashboard-page .ai-subtitle-form,
  html[data-theme="dark"] .dashboard-page .ai-subtitle-history__list,
  html[data-theme="dark"] .dashboard-page .ai-subtitle-cues {
    scrollbar-color: rgba(181, 186, 196, 0.38) transparent;
  }
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-form::-webkit-scrollbar-thumb,
html[data-theme="dark"] .dashboard-page .ai-subtitle-history__list::-webkit-scrollbar-thumb,
html[data-theme="dark"] .dashboard-page .ai-subtitle-cues::-webkit-scrollbar-thumb {
  background: rgba(181, 186, 196, 0.38);
  background-clip: padding-box;
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-form::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .dashboard-page .ai-subtitle-history__list::-webkit-scrollbar-thumb:hover,
html[data-theme="dark"] .dashboard-page .ai-subtitle-cues::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.56);
  background-clip: padding-box;
}

html[data-theme="dark"] .dashboard-page .ai-creation-history {
  scrollbar-color: rgba(181, 186, 196, 0.36) transparent;
}

html[data-theme="dark"] .dashboard-page .ai-creation-history::-webkit-scrollbar-thumb {
  border-color: var(--panel-bg);
  background: rgba(181, 186, 196, 0.36);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.54);
}

html[data-theme="dark"] .dashboard-page .ai-story-history-list {
  scrollbar-color: rgba(181, 186, 196, 0.36) transparent;
}

html[data-theme="dark"] .dashboard-page .ai-story-history-list::-webkit-scrollbar-thumb {
  border-color: var(--panel-bg);
  background: rgba(181, 186, 196, 0.36);
}

html[data-theme="dark"] .dashboard-page .ai-story-history-list::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.54);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-button:hover,
html[data-theme="dark"] .dashboard-page .ai-video-options-button[aria-expanded="true"] {
  border-color: rgba(235, 237, 240, 0.105);
  background: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-summary-separator {
  background: rgba(235, 237, 240, 0.045);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-popover {
  border-color: rgba(235, 237, 240, 0.105);
  background: #1b1c20;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    0 0 0 4px rgba(235, 237, 240, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-color: rgba(181, 186, 196, 0.32) transparent;
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-menu {
  border-color: rgba(235, 237, 240, 0.105);
  background: #1b1c20;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    0 0 0 4px rgba(235, 237, 240, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-option {
  border-color: rgba(235, 237, 240, 0.075);
  background: var(--control-surface);
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-option:hover,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-option[aria-selected="true"] {
  border-color: rgba(94, 117, 148, 0.55);
  background: rgba(94, 117, 148, 0.16);
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-option__preview {
  border-color: rgba(235, 237, 240, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #c7ccd6;
}

html[data-theme="dark"] .dashboard-page .ai-voice-preset-option__preview:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-voice-preset-option__preview:not(:disabled):focus-visible {
  border-color: rgba(94, 117, 148, 0.55);
  background: rgba(94, 117, 148, 0.18);
  color: #ffffff;
}

html[data-theme="dark"] .ai-voice-library-modal {
  background: rgba(0, 0, 0, 0.68);
}

html[data-theme="dark"] .ai-voice-library-dialog {
  border-color: rgba(235, 237, 240, 0.105);
  background: #1b1c20;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}

html[data-theme="dark"] .ai-voice-library-filter:focus-within,
html[data-theme="dark"] .ai-voice-library-filter.is-open {
  border-color: rgba(124, 156, 255, 0.5);
  background: #1b1c20;
  box-shadow: 0 0 0 3px rgba(124, 156, 255, 0.1);
}

html[data-theme="dark"] .ai-voice-library-filter__menu {
  border-color: rgba(235, 237, 240, 0.12);
  background: #1b1c20;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.46), 0 0 0 3px rgba(124, 156, 255, 0.05);
}

html[data-theme="dark"] .ai-voice-library-filter__option[aria-selected="true"] {
  background: rgba(124, 156, 255, 0.15);
  color: #9db4ff;
}

html[data-theme="dark"] .ai-voice-library-toolbar,
html[data-theme="dark"] .ai-voice-library-footer {
  background: #1b1c20;
}

html[data-theme="dark"] .ai-voice-library-card:hover {
  background: var(--surface-strong);
}

html[data-theme="dark"] .ai-voice-library-card[data-selected="true"] {
  border-color: rgba(124, 156, 255, 0.95);
  background: rgba(124, 156, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(124, 156, 255, 0.88), 0 0 0 3px rgba(124, 156, 255, 0.12), 0 12px 26px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .ai-voice-library-card__selected-badge {
  border-color: rgba(255, 255, 255, 0.72);
  background: #6f8fef;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .ai-voice-library-card__tags small {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .ai-voice-library-confirm {
  border-color: #6f8fef;
  background: #6f8fef;
  color: #fff;
}

html[data-theme="dark"] .ai-voice-library-confirm:not(:disabled):hover,
html[data-theme="dark"] .ai-voice-library-confirm:not(:disabled):focus-visible {
  border-color: #82a0ff;
  background: #82a0ff;
}

html[data-theme="dark"] .ai-voice-preset-menu__more {
  border-color: rgba(124, 156, 255, 0.3);
  background: rgba(124, 156, 255, 0.1);
  color: #9db4ff;
}

html[data-theme="dark"] .dashboard-page .ai-video-options-popover::-webkit-scrollbar-thumb {
  border-color: #1b1c20;
  background: rgba(181, 186, 196, 0.36);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-popover::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.54);
}

html[data-theme="dark"] .dashboard-page .ai-video-options-choices {
  border-color: rgba(235, 237, 240, 0.055);
  background: var(--control-surface);
}

html[data-theme="dark"] .dashboard-page .ai-video-duration-slider {
  border-color: rgba(235, 237, 240, 0.055);
  background: var(--control-surface);
}

html[data-theme="dark"] .dashboard-page .ai-video-duration-slider__range::-webkit-slider-thumb {
  border-color: #1b1c20;
  background: #eceef2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .dashboard-page .ai-video-duration-slider__range::-moz-range-thumb {
  border-color: #1b1c20;
  background: #eceef2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider__value {
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider__range {
  background: var(--panel-bg);
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider__range::-webkit-slider-container {
  background: var(--panel-bg);
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider__range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

html[data-theme="dark"] .dashboard-page .ai-body-adjustment-slider__range::-moz-range-track {
  background: linear-gradient(90deg, #4777f4, #b44bd6);
}

html[data-theme="dark"] .dashboard-page .ai-voice-speed-slider {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-voice-speed-slider__range {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-voice-speed-slider__range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #4777f4 0 var(--ai-duration-progress, 0%), rgba(235, 237, 240, 0.12) var(--ai-duration-progress, 0%) 100%);
}

html[data-theme="dark"] .dashboard-page .ai-voice-speed-slider__range::-moz-range-track {
  background: rgba(235, 237, 240, 0.12);
}

html[data-theme="dark"] .dashboard-page .ai-video-option-choice:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
}

html[data-theme="dark"] .dashboard-page .ai-video-option-choice[aria-pressed="true"] {
  border-color: rgba(235, 237, 240, 0.09);
  background: var(--surface-strong);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.04);
}

html[data-theme="dark"] .dashboard-page .ai-tools-extra-options .ai-clarity-mode-choices {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice {
  border-color: rgba(235, 237, 240, 0.075);
  background: var(--control-surface);
  color: var(--ink);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice:hover {
  border-color: rgba(139, 127, 255, 0.34);
  background: rgba(139, 127, 255, 0.1);
  color: var(--accent);
}

html[data-theme="dark"] .dashboard-page .ai-tools-extra-options .ai-clarity-mode-choices .ai-video-option-choice[aria-pressed="true"] {
  border-color: rgba(139, 127, 255, 0.48);
  background: rgba(139, 127, 255, 0.16);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(139, 127, 255, 0.1);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__menu {
  border-color: rgba(235, 237, 240, 0.09);
  background: #1b1c20;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
  scrollbar-color: rgba(181, 186, 196, 0.36) transparent;
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__menu::-webkit-scrollbar-thumb {
  border-color: #1b1c20;
  background: rgba(181, 186, 196, 0.36);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__menu::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.54);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__mark,
html[data-theme="dark"] .dashboard-page .ai-model-option__mark {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__mark[data-logo="bfl"] img,
html[data-theme="dark"] .dashboard-page .ai-model-option__mark[data-logo="bfl"] img,
html[data-theme="dark"] .dashboard-page .ai-model-picker__mark[data-logo="replicate-bfl"] img,
html[data-theme="dark"] .dashboard-page .ai-model-option__mark[data-logo="replicate-bfl"] img,
html[data-theme="dark"] .dashboard-page .ai-model-picker__mark[data-logo="replicate-openai"] img,
html[data-theme="dark"] .dashboard-page .ai-model-option__mark[data-logo="replicate-openai"] img,
html[data-theme="dark"] .dashboard-page .ai-model-picker__mark[data-logo="xai"] img,
html[data-theme="dark"] .dashboard-page .ai-model-option__mark[data-logo="xai"] img {
  filter: invert(1);
}
html[data-theme="dark"] .dashboard-page .ai-model-option:hover {
  border-color: rgba(235, 237, 240, 0.08);
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .ai-model-option[aria-selected="true"] {
  border-color: rgba(181, 186, 196, 0.14);
  background: rgba(181, 186, 196, 0.08);
}

html[data-theme="dark"] .dashboard-page .ai-model-option__check {
  color: #aeb6c3;
}

html[data-theme="dark"] .dashboard-page .ai-model-option__tags span {
  border-color: rgba(235, 237, 240, 0.085);
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .ai-tool-card__cost {
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .pricing-billing-toggle {
  border-color: rgba(235, 237, 240, 0.065);
  background: #17181c;
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .pricing-billing-toggle button {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .pricing-billing-toggle button:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .pricing-billing-toggle button.is-active {
  background: var(--portal-accent-active-bg);
  color: var(--portal-accent-hover);
  box-shadow: inset 0 0 0 1px var(--portal-accent-border);
}

html[data-theme="dark"] .dashboard-page .credit-package-card {
  --package-title-color: #f0f2f6;
  --package-rate-color: #aeb4bf;
  --package-price-color: #ffffff;
  border-color: rgba(235, 237, 240, 0.10);
  background: #1b1c20;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credit-purchase-buy-button {
  border-color: var(--line-strong);
  background: var(--panel-bg);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credit-package-card:hover {
  border-color: rgba(var(--package-accent-rgb), 0.36);
}

html[data-theme="dark"] .dashboard-page .credit-purchase-buy-button:hover {
  border-color: rgba(235, 237, 240, 0.32);
}

html[data-theme="dark"] .dashboard-page .credit-package-card.is-selected {
  border-color: var(--package-accent);
  background: var(--portal-accent-soft-bg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .dashboard-page .credit-package-card.is-selected::before {
  background: rgba(var(--package-accent-rgb), 0.74);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .credit-package-card.is-selected::after {
  border-color: rgba(var(--package-accent-rgb), 0.88);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .credit-package-card__badge {
  border-color: rgba(var(--package-accent-rgb), 0.38);
  background: rgba(27, 28, 32, 0.82);
  color: color-mix(in srgb, var(--package-accent) 58%, #fff 42%);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .credit-package-card__badge::before {
  box-shadow: 0 0 0 3px rgba(var(--package-accent-rgb), 0.10);
}

html[data-theme="dark"] .dashboard-page .credit-purchase-panel__payment-type {
  border-color: rgba(74, 222, 128, 0.22);
  background: rgba(74, 222, 128, 0.10);
  color: #7ddf9b;
}



html[data-theme="dark"] .dashboard-page .dashboard-license-item__actions--standalone {
  border-color: rgba(235, 237, 240, 0.06);
  background: #1b1c20;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-upgrade-message {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-hero,
html[data-theme="dark"] .account-page .account-settings-hero,
html[data-theme="dark"] .credits-page .credits-hero,
html[data-theme="dark"] .ai-tools-page .ai-tools-hero,
html[data-theme="dark"] .ai-jobs-page .ai-jobs-hero {
  border-color: transparent;
  background: var(--page-bg);
}

html[data-theme="dark"] .dashboard-page .dashboard-license-empty[data-state="loading"] {
  border-color: rgba(235, 237, 240, 0.06);
  background: rgba(27, 28, 32, 0.88);
}

html[data-theme="dark"] .dashboard-page .dashboard-license-empty[data-state="loading"] .dashboard-license-empty__title {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-item:hover,
html[data-theme="dark"] .dashboard-page .account-button:hover,
html[data-theme="dark"] .dashboard-page .account-license-summary__item:hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .credits-summary-item--button:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-navlink:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-navlink {
  color: var(--accent);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-navlink--active {
  color: var(--portal-accent);
}

html[data-theme="dark"] .dashboard-page .account-license-summary__item.is-active,
html[data-theme="dark"] .dashboard-page .pricing-plan--recommended {
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .pricing-plan--recommended {
  --plan-outline: var(--portal-accent);
}

html[data-theme="dark"] .dashboard-page .pricing-plan--recommended::after {
  box-shadow:
    0 0 0 1px var(--portal-accent-border),
    0 20px 38px rgba(0, 0, 0, 0.30);
}

html[data-theme="dark"] .dashboard-page .account-button__avatar {
  background: #33353c;
  color: #f0f1f3;
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.06);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__ribbon--standard {
  border-color: var(--portal-accent);
  background: var(--portal-accent);
  color: #121316;
}

/* Tinted, not a filled block. A saturated bar with near-black text is the heaviest thing on the
   dark page and pulls attention away from the CTA below it, which is the actual action. The border
   and label carry the accent instead; emphasis moves to the recommended card's filled button. The
   tint is only strong enough to read as a band rather than a gap -- keep it below the CTA's weight.
   Layer it over an opaque page background so scrolling content cannot show through the ribbon. */
html[data-theme="dark"] .dashboard-page .pricing-plan__ribbon--business {
  border-color: var(--portal-accent);
  border-right-color: var(--portal-accent);
  background:
    linear-gradient(var(--portal-accent-soft-bg), var(--portal-accent-soft-bg)),
    var(--page-bg);
  color: var(--portal-accent);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__ribbon--business::after {
  background: var(--portal-accent);
}

html[data-theme="dark"] .dashboard-page .dashboard-refresh-button,
html[data-theme="dark"] .dashboard-page .dashboard-card__action,
html[data-theme="dark"] .dashboard-page .dashboard-license-download-button,
html[data-theme="dark"] .dashboard-page .subtle-button,
html[data-theme="dark"] .dashboard-page .menu-button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button:hover,
html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button:focus-visible {
  background: #33353c;
  color: #fff;
  outline: none;
}

html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button--danger {
  color: #f2a29c;
}

html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button--danger:hover,
html[data-theme="dark"] .dashboard-page .account-dropdown .menu-button--danger:focus-visible {
  background: var(--danger-bg);
  color: #fff;
}

html[data-theme="dark"] .dashboard-page .dashboard-copy-button,
html[data-theme="dark"] .dashboard-page .dashboard-license-auto-renew-button {
  border-color: rgba(235, 237, 240, 0.085);
  background: #2b2c31;
  color: #b5beca;
}

html[data-theme="dark"] .dashboard-page .dashboard-copy-button:hover,
html[data-theme="dark"] .dashboard-page .dashboard-copy-button:focus-visible,
html[data-theme="dark"] .dashboard-page .dashboard-license-auto-renew-button:hover,
html[data-theme="dark"] .dashboard-page .dashboard-license-auto-renew-button:focus-visible {
  border-color: rgba(235, 237, 240, 0.12);
  background: #33353c;
  color: #f3f5f8;
  transform: none;
}

html[data-theme="dark"] .dashboard-page .dashboard-copy-button[data-state="done"] {
  border-color: rgba(117, 207, 151, 0.34);
  background: rgba(47, 116, 75, 0.28);
  color: #aee8bf;
}

html[data-theme="dark"] .dashboard-page .dashboard-buy-license-button,
html[data-theme="dark"] .dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button),
html[data-theme="dark"] .dashboard-page .primary-auth-button,
html[data-theme="dark"] .dashboard-page .dashboard-upgrade-link,
html[data-theme="dark"] .dashboard-page .pricing-plan__button,
html[data-theme="dark"] .dashboard-page .pricing-plan__button--dark {
  border-color: var(--primary-cta);
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

/* Only the recommended plan keeps the filled CTA. The rule above paints every plan button with the
   purchase accent, which left all three identical in dark and the recommendation carried by the
   ribbon alone. The alternatives become outlined rather than the recommended one getting brighter:
   dark `--accent` is a light foreground token and cannot be a button background, and two blues a
   shade apart would not read as a hierarchy anyway.
   They are outlined in the accent, not greyed: `--line-strong` is a divider value (9% alpha) and a
   button wearing it disappears into the card. These still have to look pressable -- they are the
   other two things for sale, not disabled controls. */
html[data-theme="dark"] .dashboard-page .pricing-plan:not(.pricing-plan--recommended) .pricing-plan__button--dark:not(:disabled) {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

/* Hover fills in, so the label has to leave the accent with it: an existing rule paints every plan
   button's hover background with --primary-cta-hover, and accent-on-accent drops the label to a
   1.05 contrast ratio -- invisible. Filling on hover is the right read anyway; it is the same
   gesture the recommended button already makes. */
html[data-theme="dark"] .dashboard-page .pricing-plan:not(.pricing-plan--recommended) .pricing-plan__button--dark:not(:disabled):hover {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-hover);
  color: var(--primary-cta-text);
}

html[data-theme="dark"] .dashboard-page .dashboard-buy-license-button:hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button):hover,
html[data-theme="dark"] .dashboard-page .primary-auth-button:hover:not(:disabled) {
  border-color: var(--portal-accent-hover);
  background: var(--portal-accent-hover);
  color: #121316;
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .dashboard-page .dashboard-buy-license-button,
html[data-theme="dark"] .dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button) {
  border-color: var(--primary-cta);
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

html[data-theme="dark"] .dashboard-page .dashboard-buy-license-button:hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .dashboard-license-renew-button:not(.dashboard-license-download-button):hover {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-hover);
  color: var(--primary-cta-text);
}

html[data-theme="dark"] .dashboard-page .dashboard-upgrade-link {
  border-color: var(--primary-cta-secondary-border);
  background: var(--primary-cta-secondary-bg);
  color: var(--primary-cta-secondary-text);
}

html[data-theme="dark"] .dashboard-page .dashboard-upgrade-link:hover {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-secondary-hover-bg);
  color: var(--primary-cta-hover);
}

.dashboard-page .primary-auth-button.ai-video-generate-button,
html[data-theme="dark"] .dashboard-page .primary-auth-button.ai-video-generate-button {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(105deg, #2563eb 0%, #6d5dfc 24%, #ec4899 50%, #14b8a6 76%, #2563eb 100%);
  background-size: 150% 150%, 260% 260%;
  background-position: 0 0, 0% 50%;
  color: #fff;
  box-shadow:
    0 8px 18px rgba(90, 58, 224, 0.18),
    0 0 0 1px rgba(124, 58, 237, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.dashboard-page .primary-auth-button.ai-video-generate-button:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .primary-auth-button.ai-video-generate-button:not(:disabled):hover {
  border-color: rgba(255, 255, 255, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(105deg, #2563eb 0%, #6d5dfc 24%, #ec4899 50%, #14b8a6 76%, #2563eb 100%);
  background-size: 150% 150%, 260% 260%;
  color: #fff;
  box-shadow:
    0 10px 22px rgba(90, 58, 224, 0.24),
    0 0 0 1px rgba(124, 58, 237, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transform: translateY(-1px);
}

.dashboard-page .primary-auth-button.ai-video-generate-button:disabled,
html[data-theme="dark"] .dashboard-page .primary-auth-button.ai-video-generate-button:disabled {
  box-shadow: none;
  filter: saturate(0.74);
  transform: none;
}

html[data-theme="dark"] .dashboard-page .dashboard-add-license-button:hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .dashboard-refresh-button:hover:not(:disabled) {
  border-color: rgba(235, 237, 240, 0.11);
  background: var(--surface-strong);
  color: var(--ink);
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .dashboard-page .pricing-plan__button--outline,
html[data-theme="dark"] .dashboard-page .pricing-plan__button--secondary {
  border-color: var(--portal-accent-border);
  background: var(--surface);
  color: var(--portal-accent-hover);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__button--current:disabled {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent-hover);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__button:not(.pricing-plan__button--current):not(.pricing-plan__button--outline),
html[data-theme="dark"] .dashboard-page .credit-purchase-buy-button {
  border-color: var(--primary-cta);
  background: var(--primary-cta);
  color: var(--primary-cta-text);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__button:not(.pricing-plan__button--current):not(.pricing-plan__button--outline):hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .credit-purchase-buy-button:hover:not(:disabled) {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-hover);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__button:not(.pricing-plan__button--current):not(.pricing-plan__button--outline):active:not(:disabled),
html[data-theme="dark"] .dashboard-page .credit-purchase-buy-button:active:not(:disabled) {
  border-color: var(--primary-cta-active);
  background: var(--primary-cta-active);
  color: var(--primary-cta-text);
  transform: translateY(0);
}

html[data-theme="dark"] .dashboard-page .auth-input,
html[data-theme="dark"] .dashboard-page .auth-select,
html[data-theme="dark"] .dashboard-page input,
html[data-theme="dark"] .dashboard-page select {
  border-color: var(--line);
  background-color: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-story-media-button {
  border-color: rgba(235, 237, 240, 0.075);
  background: var(--control-surface);
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .ai-story-media-option {
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .ai-story-media-button:hover,
html[data-theme="dark"] .dashboard-page .ai-story-media-button[aria-expanded="true"] {
  border-color: rgba(235, 237, 240, 0.115);
  background: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .ai-story-media-menu {
  border-color: rgba(235, 237, 240, 0.105);
  background: #1b1c20;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.44),
    0 0 0 4px rgba(235, 237, 240, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .dashboard-page .ai-story-media-option:hover,
html[data-theme="dark"] .dashboard-page .ai-story-media-option:focus-visible,
html[data-theme="dark"] .dashboard-page .ai-story-media-option.is-active {
  border-color: rgba(235, 237, 240, 0.075);
  background: var(--control-surface);
}

html[data-theme="dark"] .dashboard-page .ai-story-wizard-actions {
  border-color: rgba(235, 237, 240, 0.10);
  background: rgba(28, 30, 36, 0.94);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .dashboard-page .ai-story-wizard-button--secondary {
  border-color: rgba(235, 237, 240, 0.08);
  background: var(--control-surface);
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .ai-story-wizard-button--secondary:hover:not(:disabled),
html[data-theme="dark"] .dashboard-page .ai-story-wizard-button--secondary:focus-visible {
  border-color: rgba(235, 237, 240, 0.14);
  background: var(--surface-strong);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credits-table-wrap,
html[data-theme="dark"] .dashboard-page .credits-table,
html[data-theme="dark"] .dashboard-page .credits-table tbody,
html[data-theme="dark"] .dashboard-page .credits-table tr {
  background: var(--panel-bg);
}

html[data-theme="dark"] .dashboard-page .credits-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .dashboard-page .pricing-plan__header {
  background:
    linear-gradient(180deg, var(--plan-tint), rgba(255, 255, 255, 0) 72%),
    var(--panel-bg);
}

html[data-theme="dark"] .dashboard-page .credits-table td,
html[data-theme="dark"] .dashboard-page .account-details__item,
html[data-theme="dark"] .dashboard-page .account-settings-panel__header,
html[data-theme="dark"] .dashboard-page .dashboard-license-group__header,
html[data-theme="dark"] .dashboard-page .credits-history-card__header,
html[data-theme="dark"] .dashboard-page .pricing-plan__header,
html[data-theme="dark"] .dashboard-page .pricing-plan__section,
html[data-theme="dark"] .dashboard-page .pricing-plan__scroll,
html[data-theme="dark"] .dashboard-page .dashboard-license-item__extra,
html[data-theme="dark"] .dashboard-page .dashboard-subscription-devices {
  border-color: var(--line);
}

/* The blanket dark border rules above are more specific than the recommended plan's own outline, so
   in dark mode the featured card lost the accent and read as just another column. Repaint the three
   edges that close its box. The header's bottom edge stays neutral: it divides the header from the
   feature list rather than forming the outside of the card. */
html[data-theme="dark"] .dashboard-page .pricing-plan--recommended .pricing-plan__header {
  border-color: var(--plan-outline) var(--plan-outline) var(--line);
}

html[data-theme="dark"] .dashboard-page .pricing-plan--recommended .pricing-plan__scroll {
  border-color: var(--plan-outline);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .account-page .account-subscription-item {
  border-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] .account-page .account-subscription-item__status {
  border-color: var(--line-strong);
  background: rgba(235, 237, 240, 0.08);
  color: var(--muted);
}

html[data-theme="dark"] .account-page .account-subscription-item[data-state="active"] .account-subscription-item__status {
  border-color: rgba(117, 207, 151, 0.28);
  background: rgba(47, 116, 75, 0.24);
  color: #aee8bf;
}

html[data-theme="dark"] .account-page .account-subscription-item__button {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink-soft);
}

html[data-theme="dark"] .account-page .account-subscription-item__button--change {
  border-color: rgba(122, 153, 255, 0.38);
  color: #a9bcff;
}

html[data-theme="dark"] .account-page .account-subscription-item__button--change:hover,
html[data-theme="dark"] .account-page .account-subscription-item__button--change:focus-visible {
  border-color: rgba(122, 153, 255, 0.56);
  background: rgba(80, 113, 217, 0.16);
}

html[data-theme="dark"] .account-page .account-subscription-item__button--cancel:hover,
html[data-theme="dark"] .account-page .account-subscription-item__button--cancel:focus-visible {
  border-color: rgba(223, 118, 118, 0.42);
  background: rgba(197, 72, 72, 0.13);
  color: #efadad;
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__title strong {
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__field dt,
html[data-theme="dark"] .dashboard-page .dashboard-subscription-devices__limit {
  color: var(--muted-soft);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__field dd {
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__status {
  border-color: var(--line-strong);
  background: rgba(235, 237, 240, 0.08);
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__status[data-state="running"] {
  border-color: rgba(117, 207, 151, 0.28);
  background: rgba(47, 116, 75, 0.24);
  color: #aee8bf;
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__button {
  border-color: var(--brand-red-border);
  background: transparent;
  color: var(--brand-red-hover);
}

html[data-theme="dark"] .dashboard-page .dashboard-subscription-device__button:hover:not(:disabled) {
  border-color: rgba(240, 106, 97, 0.42);
  background: var(--brand-red-active-bg);
  color: #ffd1ce;
}

html[data-theme="dark"] .dashboard-page .credits-table td {
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credits-table th {
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credits-amount--positive {
  color: #7ddca3;
}

html[data-theme="dark"] .dashboard-page .credits-amount--negative {
  color: #ff8b84;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="grant"] {
  border-color: rgba(125, 220, 163, 0.28);
  background: rgba(47, 116, 75, 0.24);
  color: #aee8bf;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="bonus"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="bonus-consume"] {
  border-color: rgba(108, 182, 255, 0.28);
  background: rgba(50, 112, 174, 0.22);
  color: #a7d3ff;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="purchased"] {
  border-color: rgba(171, 132, 255, 0.3);
  background: rgba(112, 75, 180, 0.22);
  color: #cbb8ff;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="consume"] {
  border-color: rgba(255, 139, 132, 0.3);
  background: rgba(205, 55, 45, 0.16);
  color: #ffaaa5;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="refund"] {
  border-color: rgba(125, 220, 163, 0.28);
  background: rgba(47, 116, 75, 0.24);
  color: #aee8bf;
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-table,
html[data-theme="dark"] .ai-jobs-page .ai-jobs-table tbody,
html[data-theme="dark"] .ai-jobs-page .ai-jobs-table tr {
  background: var(--panel-bg);
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-table td {
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-row:hover,
html[data-theme="dark"] .ai-jobs-page .ai-jobs-row:focus {
  background: var(--surface);
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-row:hover td,
html[data-theme="dark"] .ai-jobs-page .ai-jobs-row:focus td {
  background: var(--surface);
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-row.is-active {
  background: var(--ai-accent-soft-bg);
}

html[data-theme="dark"] .ai-jobs-page .ai-jobs-row.is-active td {
  background: var(--ai-accent-soft-bg);
}

html[data-theme="dark"] .dashboard-page .ai-job-result-box {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-job-result-action {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-job-result-action:hover {
  border-color: rgba(235, 237, 240, 0.115);
  background: var(--surface-strong);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-job-result-action--primary {
  border-color: rgba(235, 237, 240, 0.085);
  background: #33353c;
  color: #fff;
}

html[data-theme="dark"] .dashboard-page .ai-job-result-action--primary:hover {
  border-color: rgba(235, 237, 240, 0.12);
  background: #33353c;
  color: #fff;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="completed"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="succeeded"] {
  border-color: rgba(125, 220, 163, 0.28);
  background: rgba(47, 116, 75, 0.24);
  color: #aee8bf;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="processing"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="submitted"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="uploading"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="uploaded"] {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(172, 99, 16, 0.18);
  color: #ffd08a;
}

html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="failed"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="cancelled"],
html[data-theme="dark"] .dashboard-page .credits-type-badge[data-type="canceled"] {
  border-color: rgba(255, 139, 132, 0.3);
  background: rgba(205, 55, 45, 0.16);
  color: #ffaaa5;
}

html[data-theme="dark"] .dashboard-page .profile-modal {
  background: rgba(2, 6, 14, 0.66);
}

html[data-theme="dark"] .dashboard-page .profile-modal .icon-button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .profile-modal .icon-button:hover {
  border-color: rgba(235, 237, 240, 0.115);
  background: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .buy-license-option {
  border-color: rgba(235, 237, 240, 0.08);
  background: #24252a;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .buy-license-option:hover,
html[data-theme="dark"] .dashboard-page .buy-license-option:focus-visible {
  border-color: var(--portal-accent-border);
  background: #2b2c31;
}

html[data-theme="dark"] .dashboard-page .profile-modal .auth-input,
html[data-theme="dark"] .dashboard-page .profile-modal .auth-select {
  border-color: rgba(235, 237, 240, 0.065);
  background-color: #24252a;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .dashboard-page .profile-modal .auth-input::placeholder {
  color: #858a94;
}

html[data-theme="dark"] .dashboard-page .profile-modal .auth-input:hover:not(:disabled):not([readonly]),
html[data-theme="dark"] .dashboard-page .profile-modal .auth-select:hover:not(:disabled):not([readonly]) {
  border-color: rgba(235, 237, 240, 0.11);
  background-color: #2b2c31;
}

html[data-theme="dark"] .dashboard-page .profile-modal .auth-input:focus,
html[data-theme="dark"] .dashboard-page .profile-modal .auth-select:focus {
  border-color: var(--portal-accent);
  background-color: #2b2c31;
  box-shadow: 0 0 0 4px var(--portal-accent-focus);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor {
  --ai-video-prompt-bg: #24252a;
  border-color: rgba(235, 237, 240, 0.06);
  background: var(--ai-video-prompt-bg);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor .ai-tools-textarea::placeholder {
  color: #8f949e;
  opacity: 0.8;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor .ai-tools-textarea {
  scrollbar-color: rgba(181, 186, 196, 0.34) var(--ai-video-prompt-bg);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-thumb {
  background: rgba(181, 186, 196, 0.34);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor .ai-tools-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(181, 186, 196, 0.50);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor::-webkit-resizer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M6 14l8-8M10 14l4-4' fill='none' stroke='%23b5bac4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor:hover {
  border-color: rgba(235, 237, 240, 0.10);
  background: var(--ai-video-prompt-bg);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor:focus-within {
  border-color: rgba(235, 237, 240, 0.13);
  background: var(--ai-video-prompt-bg);
  box-shadow: 0 0 0 3px rgba(235, 237, 240, 0.055);
}

html[data-theme="dark"] .dashboard-page .ai-tools-negative-prompt-editor:focus-within {
  border-color: rgba(235, 237, 240, 0.16);
  background: var(--ai-video-prompt-bg);
  box-shadow:
    0 0 0 3px rgba(235, 237, 240, 0.07),
    inset 0 0 0 1px rgba(235, 237, 240, 0.08);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor.is-over-limit {
  border-color: #ff7a70;
  background: var(--ai-video-prompt-bg);
  box-shadow: 0 0 0 3px rgba(240, 106, 97, 0.16);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-clear:hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-clear:focus-visible,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-undo:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-undo:not(:disabled):focus-visible,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-button:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-button:not(:disabled):focus-visible,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-button:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-button:not(:disabled):focus-visible,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-pause:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-pause:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-optimize:not(:disabled):hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-optimize:not(:disabled):focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #a78bfa;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-button,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-button,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-pause,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-undo {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-optimize {
  color: var(--accent-soft);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-optimizing {
  background: rgba(24, 25, 29, 0.76);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-editor > .ai-video-prompt-optimizing {
  background: rgba(18, 19, 23, 0.58);
  color: #f5f6fa;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-optimizing__spinner {
  border-color: rgba(139, 118, 255, 0.26);
  border-top-color: #8b76ff;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-popover {
  border-color: rgba(235, 237, 240, 0.10);
  background: #25262b;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(235, 237, 240, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-item:hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-item:focus-visible {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-thumb {
  border-color: rgba(235, 237, 240, 0.08);
  background: #30323a;
  color: #d5d8df;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-token {
  color: #f1f3f6;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-media-add {
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-section + .ai-video-prompt-voice-tag-section {
  border-top-color: rgba(235, 237, 240, 0.08);
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-item {
  border-color: rgba(235, 237, 240, 0.10);
  background: #30323a;
  color: #f1f3f6;
}

html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-item:hover,
html[data-theme="dark"] .dashboard-page .ai-video-prompt-voice-tag-item:focus-visible {
  border-color: rgba(114, 144, 255, 0.38);
  background: rgba(114, 144, 255, 0.14);
  color: #dfe6ff;
}

html[data-theme="dark"] .dashboard-page .ai-tool-modal__card.is-image-drop-active::before {
  border-color: var(--ai-accent-border);
  background: rgba(18, 19, 22, 0.78);
  box-shadow: inset 0 0 0 1px rgba(235, 237, 240, 0.08), 0 18px 54px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .dashboard-page .ai-tool-modal__card.is-image-drop-active::after {
  border-color: rgba(235, 237, 240, 0.09);
  background: #24252a;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-tool-modal__card.is-image-drop-active {
  outline-color: var(--ai-accent-border);
}

html[data-theme="dark"] .dashboard-page .ai-tools-file-picker {
  border-color: rgba(235, 237, 240, 0.09);
  background: linear-gradient(180deg, #2a2b30 0%, #24252a 100%);
}

html[data-theme="dark"] .dashboard-page .ai-tools-file-picker:hover {
  border-color: rgba(235, 237, 240, 0.13);
  background: #2b2c31;
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker.ai-tools-file-picker {
  border-color: rgba(235, 237, 240, 0.09);
  background: #24252a;
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker.ai-tools-file-picker:hover {
  border-color: rgba(235, 237, 240, 0.14);
  background: #2f3036;
  box-shadow: none;
  transform: none;
}

html[data-theme="dark"] .dashboard-page .ai-reference-media-button {
  border-color: rgba(235, 237, 240, 0.08);
  background: #24252a;
  color: var(--accent-soft);
}

html[data-theme="dark"] .dashboard-page .ai-reference-media-button:hover:not(:disabled) {
  border-color: rgba(235, 237, 240, 0.13);
  background: #2f3036;
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-grid.has-upload-previews .ai-video-file-picker.ai-tools-file-picker:hover {
  border-color: rgba(235, 237, 240, 0.14);
  background: #2f3036;
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker.is-image-drop-active {
  border-color: rgba(132, 83, 255, 0.82);
  background: rgba(96, 50, 185, 0.22);
  box-shadow: inset 0 0 0 1px rgba(132, 83, 255, 0.12);
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-upload-slot.is-image-drop-active {
  border-color: rgba(132, 83, 255, 0.82);
  background: rgba(96, 50, 185, 0.22);
  box-shadow: inset 0 0 0 1px rgba(132, 83, 255, 0.12);
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-upload-slot.is-image-drop-active .ai-motion-control-upload-slot__empty,
html[data-theme="dark"] .dashboard-page .ai-motion-control-upload-slot.is-image-drop-active .ai-motion-control-upload-slot__empty strong {
  color: #9b78ff;
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-upload-slot.is-image-drop-active .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%239b78ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-upload-slot__empty .ai-tools-file-picker__icon,
html[data-theme="dark"] .dashboard-page .ai-motion-control-face-reference__empty .ai-tools-file-picker__icon {
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23a7abb3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 26px 26px;
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-face-reference__picker.is-image-drop-active {
  border-color: rgba(132, 83, 255, 0.82);
  background: rgba(96, 50, 185, 0.22);
  box-shadow: inset 0 0 0 1px rgba(132, 83, 255, 0.12);
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-face-reference__picker.is-image-drop-active .ai-motion-control-face-reference__empty {
  color: #9b78ff;
}

html[data-theme="dark"] .dashboard-page .ai-motion-control-face-reference__picker.is-image-drop-active .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%239b78ff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker.is-image-drop-active .ai-tools-file-picker__icon {
  color: #9b78ff;
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker.is-image-drop-active .ai-video-upload-single-title,
html[data-theme="dark"] .dashboard-page .ai-video-file-picker.is-image-drop-active .ai-video-upload-frame-title {
  color: #9b78ff;
}

html[data-theme="dark"] .dashboard-page .ai-tools-file-picker__icon {
  border-color: rgba(235, 237, 240, 0.085);
  background: #33353c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .dashboard-page .ai-video-file-picker .ai-tools-file-picker__icon {
  border: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23a7abb3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 30V7'/%3E%3Cpath d='M13 18 24 7l11 11'/%3E%3Cpath d='M8 28v10h32V28'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 28px 28px;
  color: #a7abb3;
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-grid.has-upload-previews .ai-video-file-picker .ai-tools-file-picker__icon,
html[data-theme="dark"] .dashboard-page .ai-video-upload-section.is-end-frame-enabled .ai-video-file-picker .ai-tools-file-picker__icon,
html[data-theme="dark"] .dashboard-page .ai-video-upload-section.is-clothes-changer-upload .ai-video-file-picker .ai-tools-file-picker__icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23a7abb3' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M24 11v26'/%3E%3Cpath d='M11 24h26'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 26px 26px;
}

html[data-theme="dark"] .dashboard-page .ai-video-generate-images-link {
  color: var(--accent-soft);
}

html[data-theme="dark"] .dashboard-page .ai-video-generate-images-link:hover {
  background: transparent;
  color: #a78bfa;
}

html[data-theme="dark"] .dashboard-page .ai-tools-file-picker__name {
  color: #a7abb3;
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-preview-card {
  border-color: rgba(235, 237, 240, 0.08);
  background: #24252a;
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-preview-media-image {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-preview-card--audio .ai-video-upload-preview-media::before {
  background: #35c8f4;
  filter: drop-shadow(0 8px 18px rgba(53, 200, 244, 0.24));
}

html[data-theme="dark"] .dashboard-page .ai-video-upload-preview-name {
  color: var(--ink);
}

html[data-theme="dark"] .ai-video-upload-preview-card[data-media-preview]:hover {
  border-color: rgba(125, 164, 255, 0.52);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card__media--pending {
  --ai-chip-accent: #a78bfa;
  --ai-chip-accent-soft: rgba(167, 139, 250, 0.14);
  --ai-chip-trace: rgba(167, 139, 250, 0.22);
  --ai-chip-trace-strong: rgba(167, 139, 250, 0.5);
  --ai-chip-packet: rgba(167, 139, 250, 0.86);
  background:
    radial-gradient(circle at 50% 38%, rgba(167, 139, 250, 0.18), transparent 54%),
    radial-gradient(circle at 50% 52%, rgba(129, 140, 248, 0.13), transparent 56%),
    var(--panel-bg);
}

/* Failed job cards carry both --pending and --job-failed; keep the error tint
   (not the purple pending glow) in dark mode too. */
html[data-theme="dark"] .dashboard-page .ai-creation-history-card__media--job-failed,
html[data-theme="dark"] .ai-creation-history-card__media--job-failed {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.035), transparent 56%),
    var(--panel-bg);
}

html[data-theme="dark"] .ai-creation-history-card__media--job-failed::before {
  background: rgba(248, 113, 113, 0.14);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card__media--audio {
  background:
    radial-gradient(circle at 50% 46%, rgba(53, 200, 244, 0.15) 0%, rgba(124, 156, 255, 0.08) 36%, rgba(124, 156, 255, 0) 66%),
    linear-gradient(145deg, rgba(124, 156, 255, 0.06), rgba(53, 200, 244, 0.04) 56%, rgba(167, 139, 250, 0.05)),
    var(--panel-bg);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card--audio .ai-creation-history-card__footer {
  background: linear-gradient(180deg, rgba(4, 10, 20, 0), rgba(4, 10, 20, 0.1) 46%, rgba(4, 10, 20, 0.42));
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card__loader {
  background:
    linear-gradient(135deg, rgba(38, 41, 48, 0.94), rgba(25, 29, 37, 0.8)),
    var(--ai-chip-accent-soft);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.32),
    0 0 0 7px rgba(167, 139, 250, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card--pending .ai-creation-history-card__action {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(32, 35, 43, 0.72);
  color: #c5cedb;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card--pending .ai-creation-history-card__action:hover,
html[data-theme="dark"] .dashboard-page .ai-creation-history-card--pending .ai-creation-history-card__action:focus-visible {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(46, 50, 60, 0.9);
  color: #fecaca;
}

html[data-theme="dark"] .ai-media-preview-modal {
  background: rgba(0, 0, 0, 0.88);
}

html[data-theme="dark"] .ai-media-preview-modal__title-wrap {
  background: rgba(12, 16, 24, 0.5);
}

html[data-theme="dark"] .ai-media-preview-modal__close {
  background: transparent;
  color: #ffffff;
}

html[data-theme="dark"] .ai-media-preview-modal__close:hover,
html[data-theme="dark"] .ai-media-preview-modal__close:focus-visible {
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="dark"] .ai-media-preview-modal__nav {
  background: transparent;
}

html[data-theme="dark"] .ai-media-preview-modal__nav:hover,
html[data-theme="dark"] .ai-media-preview-modal__nav:focus-visible {
  background: transparent;
}

html[data-theme="dark"] .dashboard-page .dashboard-hero__art,
html[data-theme="dark"] .credits-page .dashboard-hero__art {
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.24));
}

html[data-theme="dark"] .dashboard-page .dashboard-license-hero .dashboard-hero__art img,
html[data-theme="dark"] .credits-page .credits-hero .dashboard-hero__art img {
  filter: brightness(1.06) saturate(1.04) contrast(1.02);
  opacity: 1;
}


html[data-theme="dark"] .dashboard-page .dashboard-nav-sublink:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav__submenu::before {
  background: #33353c;
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-nav-sublink.dashboard-navlink--active {
  background: var(--portal-accent-soft-bg);
  color: var(--ai-accent-hover);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-nav-sublink.dashboard-navlink--active:hover {
  background: var(--portal-accent-active-bg);
}

html[data-theme="dark"] .dashboard-page .ai-creation-history-card__expiry-warning {
  border-color: var(--brand-red-border);
  background: rgba(56, 31, 32, 0.88);
  color: #ffb1aa;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .dashboard-page .ai-model-picker__badge,
html[data-theme="dark"] .dashboard-page .ai-model-option__badge {
  border-color: rgba(96, 165, 250, 0.5);
  background: rgba(96, 165, 250, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .dashboard-page .ai-model-option__badge--cheapest {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.14);
  color: #bbf7d0;
}

html[data-theme="dark"] .dashboard-page {
  --portal-card-border: rgba(235, 237, 240, 0.055);
  --portal-card-border-hover: rgba(235, 237, 240, 0.095);
}

html[data-theme="dark"] .dashboard-page .ai-studio-entry-card,
html[data-theme="dark"] .dashboard-page .ai-studio-tool-section,
html[data-theme="dark"] .dashboard-page .ai-image-empty {
  border-color: var(--portal-card-border);
  background: var(--panel-bg);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-studio-entry-card:hover,
html[data-theme="dark"] .dashboard-page .ai-studio-tool-card:hover {
  border-color: var(--portal-card-border-hover);
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .ai-studio-section-link {
  border-color: var(--portal-card-border);
  background: rgba(27, 28, 32, 0.76);
  color: #8fb9ff;
}

html[data-theme="dark"] .dashboard-page .ai-studio-section-link:hover {
  border-color: var(--portal-card-border-hover);
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery__header h1,
html[data-theme="dark"] .dashboard-page .ai-tools-gallery-card__title-row strong {
  color: var(--ink);
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery__header p,
html[data-theme="dark"] .dashboard-page .ai-tools-gallery-card__copy {
  color: var(--muted);
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery-tab,
html[data-theme="dark"] .dashboard-page .ai-tools-gallery-card {
  border-color: var(--portal-card-border);
  background: var(--panel-bg);
  box-shadow: none;
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery-tab:hover,
html[data-theme="dark"] .dashboard-page .ai-tools-gallery-card:hover {
  border-color: var(--portal-card-border-hover);
  background: var(--surface);
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery-tab[aria-selected="true"] {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-active-bg);
  color: var(--ai-accent-hover);
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery__status {
  border-color: rgba(126, 162, 255, 0.24);
  background: rgba(65, 94, 180, 0.18);
  color: #b9c8ff;
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery-badge {
  background: rgba(45, 216, 178, 0.18);
  color: #79e7d1;
}

html[data-theme="dark"] .dashboard-page .ai-tools-gallery-badge--hot {
  background: rgba(207, 116, 255, 0.2);
  color: #efc1ff;
}

html[data-theme="dark"] .dashboard-page .credits-alert[data-tone="loading"] {
  border-color: rgba(235, 237, 240, 0.085);
  background: rgba(27, 28, 32, 0.86);
  color: #b5bac4;
}

html[data-theme="dark"] .dashboard-page .credits-alert[data-tone="error"] {
  border-color: rgba(255, 139, 130, 0.32);
  background: rgba(113, 38, 44, 0.24);
  color: #ffaaa3;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-audience-badge,
html[data-theme="dark"] .dashboard-page .dashboard-license-market-badge,
html[data-theme="dark"] .dashboard-page .dashboard-license-item__value--count {
  border-color: rgba(235, 237, 240, 0.09);
  background: #2d2e34;
  color: #eceef2;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-audience-badge--business {
  border-color: rgba(180, 150, 255, 0.38);
  background: rgba(112, 74, 190, 0.24);
  color: #d8c8ff;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-badge--renew {
  border-color: rgba(117, 207, 151, 0.34);
  background: rgba(47, 116, 75, 0.28);
  color: #aee8bf;
}

html[data-theme="dark"] .dashboard-page .dashboard-license-badge--expired {
  border-color: rgba(255, 139, 130, 0.34);
  background: rgba(113, 38, 44, 0.32);
  color: #ffaaa3;
}
/* End admin app layout refresh */
/* AI tool detail pages: keep generator fixed and results beside it. */
@media (min-width: 768px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace {
    display: grid;
    grid-template-columns: var(--ai-tool-generation-panel-width, 480px) minmax(0, 1fr);
    gap: var(--ai-tool-workspace-gap, 16px);
    align-items: stretch;
    width: 100%;
    max-width: none;
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-tool-settings-panel {
    grid-column: 1;
    min-width: 0;
    width: var(--ai-tool-generation-panel-width, 480px);
    max-width: var(--ai-tool-generation-panel-width, 480px);
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column > .ai-video-results-panel {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-tool-settings-panel,
  .dashboard-page.ai-tools-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .dashboard-page.ai-tools-page .ai-tool-settings-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .dashboard-page.ai-tools-page .ai-tool-settings-panel .ai-tools-form,
  .dashboard-page.ai-tools-page .ai-video-form-scroll {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
  }

  .dashboard-page.ai-tools-page .ai-video-form-scroll {
    padding-right: var(--ai-video-form-padding-x);
    overscroll-behavior: auto;
    scrollbar-gutter: auto;
  }

  .dashboard-page.ai-tools-page .ai-video-form-scrollbar {
    display: none !important;
  }
}

/* AI tool workspaces: structure-based generator/history layout. */
.dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace {
  --ai-tool-generation-panel-width: 480px;
  --ai-tool-workspace-gap: 16px;
}

@media (min-width: 768px) {
  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace {
    display: grid;
    grid-template-columns: var(--ai-tool-generation-panel-width) minmax(0, 1fr);
    column-gap: var(--ai-tool-workspace-gap);
    row-gap: var(--ai-tool-workspace-gap);
    align-items: stretch;
    width: 100%;
    max-width: none;
  }

  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-tool-settings-panel {
    grid-column: 1;
    min-width: 0;
    width: var(--ai-tool-generation-panel-width);
    max-width: var(--ai-tool-generation-panel-width);
  }

  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column {
    grid-column: 2;
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column > .ai-video-results-panel {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-tool-settings-panel,
  .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-tool-workspace > .ai-result-view-column {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }
}

/* Activity Log date filters */
.ai-creation-history-page .ai-jobs-card {
  overflow: visible;
}

.ai-jobs-header-actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.ai-jobs-header-actions > .dashboard-refresh-button {
  height: 38px;
  min-height: 38px;
}

.ai-jobs-filter-bar {
  display: flex;
  align-items: center;
  height: 38px;
  margin: 0;
  position: relative;
  z-index: 3;
}

.ai-jobs-date-range-filter {
  position: relative;
  width: min(100%, 292px);
}

.ai-jobs-date-range-button {
  height: 38px;
  min-height: 38px;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
  padding: 0 11px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.ai-jobs-date-range-button:hover,
.ai-jobs-date-range-filter.is-open .ai-jobs-date-range-button {
  border-color: rgba(86, 101, 122, 0.32);
  background: var(--panel-bg);
}

.ai-jobs-date-range-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ai-accent-focus);
}

.ai-jobs-date-range-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.ai-jobs-refresh-button {
  height: 38px;
  min-height: 38px;
  width: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--muted);
  padding: 0;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.ai-jobs-refresh-button:hover:not(:disabled) {
  border-color: rgba(86, 101, 122, 0.32);
  background: var(--panel-bg);
  color: var(--ink);
}

.ai-jobs-refresh-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ai-accent-focus);
}

.ai-jobs-refresh-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.ai-jobs-refresh-icon {
  display: block;
  color: inherit;
}

.ai-jobs-refresh-icon path,
.ai-jobs-refresh-icon polyline {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.ai-jobs-more-sentinel {
  min-height: 1px;
  width: 100%;
}

.ai-jobs-date-range-icon {
  color: var(--muted);
}

.ai-jobs-date-range-icon rect,
.ai-jobs-date-range-icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

.ai-jobs-date-range-summary {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-jobs-date-range-chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 140ms ease;
}

.ai-jobs-date-range-filter.is-open .ai-jobs-date-range-chevron {
  transform: translateY(2px) rotate(225deg);
}

.ai-jobs-date-range-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: min(92vw, 320px);
  padding: 12px 14px 14px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: var(--panel-bg);
  box-shadow:
    0 16px 34px rgba(23, 32, 51, 0.12),
    0 1px 0 rgba(23, 32, 51, 0.04);
}

.ai-jobs-date-range-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.ai-jobs-date-field {
  position: relative;
  min-width: 0;
  display: block;
}

.ai-jobs-date-range-separator {
  color: var(--muted-soft);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.ai-jobs-date-pick-button {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 7px;
  background: var(--control-surface);
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.ai-jobs-date-pick-button:hover {
  border-color: rgba(86, 101, 122, 0.26);
  background: #ffffff;
}

.ai-jobs-date-pick-button:focus-visible {
  outline: none;
  border-color: var(--ai-accent-border);
  box-shadow: 0 0 0 3px var(--ai-accent-focus);
}

.ai-jobs-date-pick-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.ai-jobs-date-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.ai-jobs-date-range-menu.has-invalid-range .ai-jobs-date-pick-button {
  border-color: rgba(205, 55, 45, 0.44);
}

.ai-jobs-date-update-button {
  min-height: 38px;
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(23, 32, 51, 0.10);
  border-radius: 8px;
  background: #eef2f6;
  color: #7b8797;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: default;
}

.ai-jobs-date-update-button:not(:disabled) {
  border-color: var(--ai-accent);
  background: var(--ai-accent);
  color: #ffffff;
  cursor: pointer;
}

.ai-jobs-date-update-button:not(:disabled):hover {
  background: var(--ai-accent-hover);
}

.ai-jobs-quick-dates {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(23, 32, 51, 0.08);
}

.ai-jobs-quick-dates-label {
  margin-bottom: 8px;
  color: var(--muted-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.ai-jobs-quick-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-jobs-quick-date-button {
  min-height: 26px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 3px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.1;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.ai-jobs-quick-date-button:hover {
  border-color: rgba(86, 101, 122, 0.24);
  background: var(--control-surface);
  color: var(--ink);
}

.ai-jobs-quick-date-button.is-active {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-soft-bg);
  color: var(--ai-accent);
}

.ai-jobs-quick-date-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

html[data-theme="dark"] .ai-jobs-date-range-button:hover,
html[data-theme="dark"] .ai-jobs-date-range-filter.is-open .ai-jobs-date-range-button {
  border-color: rgba(235, 237, 240, 0.14);
  background: var(--surface);
}

html[data-theme="dark"] .ai-jobs-refresh-button:hover:not(:disabled) {
  border-color: rgba(235, 237, 240, 0.14);
  background: var(--surface);
}

html[data-theme="dark"] .ai-jobs-date-range-menu {
  background: var(--panel-bg);
  border-color: rgba(235, 237, 240, 0.10);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .ai-jobs-date-pick-button,
html[data-theme="dark"] .ai-jobs-quick-date-button {
  border-color: rgba(235, 237, 240, 0.10);
  background: var(--surface);
}

html[data-theme="dark"] .ai-jobs-date-pick-button:hover,
html[data-theme="dark"] .ai-jobs-quick-date-button:hover {
  border-color: rgba(235, 237, 240, 0.16);
  background: var(--surface-strong);
}

html[data-theme="dark"] .ai-jobs-quick-date-button.is-active {
  border-color: var(--ai-accent-border);
  background: var(--ai-accent-active-bg);
  color: var(--ai-accent-hover);
}

html[data-theme="dark"] .ai-jobs-date-update-button {
  border-color: rgba(235, 237, 240, 0.08);
  background: var(--surface);
  color: var(--muted-soft);
}

html[data-theme="dark"] .ai-jobs-date-update-button:not(:disabled) {
  border-color: var(--ai-accent);
  background: var(--ai-accent);
  color: #121316;
}

html[data-theme="dark"] .ai-jobs-date-update-button:not(:disabled):hover {
  border-color: var(--ai-accent-hover);
  background: var(--ai-accent-hover);
}

html[data-theme="dark"] .ai-jobs-quick-date-button {
  background: var(--surface);
}

@media (max-width: 720px) {
  .ai-jobs-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .ai-jobs-filter-bar {
    width: 100%;
  }

  .ai-jobs-date-range-filter {
    width: 100%;
  }

  .ai-jobs-date-range-menu {
    left: 0;
    right: 0;
    width: 100%;
  }
}

.ai-voice-preset-toolbar.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.ai-voice-gender-toggle {
  --ai-video-option-count: 3;
}

.ai-voice-gender-toggle[hidden] {
  display: none;
}

/* AI Story uses browser-level page scrolling, matching dashboard pages like Credits. */
.dashboard-page.ai-story-page .dashboard-shell.ai-tool-shell {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(140px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

.dashboard-page.ai-story-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-story-workspace--single {
  height: auto !important;
  min-height: 0;
  align-items: start;
  justify-items: center;
  overflow: visible !important;
}

.dashboard-page.ai-story-page .dashboard-shell.ai-tool-shell > .ai-tools-layout.ai-story-workspace--single > .ai-result-view-column {
  width: min(100%, 1100px) !important;
  max-width: 1100px !important;
  height: auto !important;
  min-height: 0;
  margin-inline: auto;
  gap: 12px;
  overflow: visible !important;
}

.dashboard-page.ai-story-page .ai-story-results-panel {
  width: 100%;
  max-width: 1100px;
  height: auto !important;
  min-height: 640px;
  align-self: start;
  flex: 0 0 auto;
  overflow: visible !important;
}

.dashboard-page.ai-story-page .ai-story-stepper {
  width: 100%;
  margin: 0;
  padding-right: 28px;
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-stepper {
  --ai-story-step-number-bg: rgba(71, 119, 244, 0.24);
  --ai-story-step-number-border: rgba(143, 165, 255, 0.42);
  --ai-story-step-underline: #8fa5ff;
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-step.is-active span {
  color: #e8edff;
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-step.is-active::after {
  box-shadow: 0 0 7px rgba(143, 165, 255, 0.12);
}

.dashboard-page.ai-story-page .ai-story-review-body {
  flex: 0 0 auto;
  overflow: visible !important;
}

html[data-theme="dark"] .dashboard-page.ai-story-page {
  --ai-story-issue-bg: rgba(112, 72, 68, 0.16);
  --ai-story-issue-bg-strong: rgba(112, 72, 68, 0.22);
  --ai-story-issue-border: rgba(196, 142, 135, 0.18);
  --ai-story-issue-text: #c8968f;
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-scene.is-issue .ai-story-scene__index {
  background: var(--ai-story-issue-bg-strong);
  color: var(--ai-story-issue-text);
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-scene-status.is-issue,
html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-timeline-meta .ai-story-status-chip.is-issue {
  border-color: var(--ai-story-issue-border);
  background: var(--ai-story-issue-bg);
  color: var(--ai-story-issue-text);
}

html[data-theme="dark"] .dashboard-page.ai-story-page .ai-story-timeline-issues small {
  background: var(--ai-story-issue-bg);
  color: var(--ai-story-issue-text);
}

.auth-keep-signed-in {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.auth-keep-signed-in input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.portal-login-dialog .auth-keep-signed-in {
  font-size: 13px;
}


/* Server-resolved regional availability notice. The AI Studio overview stays
   visible for context while the modal blocks every interaction behind it. */
html.portal-region-dialog-open {
  overflow: hidden;
}

.portal-region-unavailable-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.portal-region-unavailable-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.portal-region-unavailable-dialog__panel {
  padding: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--panel-bg);
  box-shadow: 0 24px 64px rgba(23, 32, 51, 0.22);
  text-align: center;
}

.portal-region-unavailable-dialog__icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid var(--portal-accent-border);
  border-radius: 18px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.portal-region-unavailable-dialog__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.portal-region-unavailable-dialog .dashboard-card__eyebrow {
  margin: 0 0 8px;
  color: var(--portal-accent);
}

.portal-region-unavailable-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.portal-region-unavailable-dialog__panel > p:not(.dashboard-card__eyebrow) {
  margin: 12px 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.portal-region-unavailable-dialog__action {
  max-width: 100%;
}

html[data-theme="dark"] .portal-region-unavailable-dialog::backdrop {
  background: rgba(0, 0, 0, 0.64);
}

html[data-theme="dark"] .portal-region-unavailable-dialog__panel {
  box-shadow: none;
}

@media (max-width: 520px) {
  .portal-region-unavailable-dialog__panel {
    padding: 28px 22px 24px;
  }

  .portal-region-unavailable-dialog__action {
    width: 100%;
    min-width: 0;
  }
}

/* Guest-preview sign-in dialog (test environment only) */
/* Sits inline after the retention copy. Sized in em so it stays a step below whatever the
   surrounding sentence uses, and toned down from .text-link's 800 weight, which reads as a
   heading next to body copy. */
.ai-retention-upsell-link {
  /* The markup's collapsible whitespace separates this from the sentence on
     the same line. Unlike a margin, it disappears when the link wraps, so the
     next line stays aligned with the description. */
  margin-left: 0;
  color: var(--portal-accent);
  font-size: 0.92em;
  font-weight: 600;
  white-space: nowrap;
}

.ai-retention-upsell-link:hover {
  color: var(--portal-accent-hover);
}

.ai-retention-dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
}

.ai-retention-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(2px);
}

.ai-retention-dialog__panel {
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: 0 28px 74px rgba(23, 32, 51, 0.28);
}

.ai-retention-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 26px 8px;
}

.ai-retention-dialog__header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-retention-dialog__close {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.ai-retention-dialog__close:hover {
  background: rgba(86, 101, 122, 0.1);
}

.ai-retention-dialog__body {
  padding: 0 26px 24px;
}

.ai-retention-dialog__body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* .primary-auth-button is sized for full-page auth forms; 56px reads as oversized in a dialog, so
   it drops to the dialog button height like the sign-in dialog's submit. Only the underline and
   height are touched: the class is inline-flex and centres its own label, and overriding display
   would strip that centring and leave the text at the top of the box. */
.ai-retention-dialog__cta {
  text-decoration: none;
}

/* Manual face-box dialog: shown when on-device face detection misses, so the user can
   frame the face by hand instead of hitting a dead end. */
.ai-face-crop-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
}

.ai-face-crop-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(2px);
}

.ai-face-crop-dialog__panel {
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: 0 28px 74px rgba(23, 32, 51, 0.28);
  overflow: hidden;
}

.ai-face-crop-dialog__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 22px 6px;
}

.ai-face-crop-dialog__title {
  margin: 0;
  flex: 1 1 auto;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.ai-face-crop-dialog__step {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.ai-face-crop-dialog__close {
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.ai-face-crop-dialog__close:hover {
  background: rgba(86, 101, 122, 0.1);
}

.ai-face-crop-dialog__body {
  padding: 0 22px 20px;
}

.ai-face-crop-dialog__hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}

.ai-face-crop-dialog__stage {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.ai-face-crop-dialog__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52vh;
  -webkit-user-drag: none;
}

/* The dim + elliptical hole is a separate SVG overlay (see __mask), not a spread shadow
   on the box — a giant elliptical shadow repaints too slowly to keep up with the drag. */
.ai-face-crop-dialog__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ai-face-crop-dialog__box {
  position: absolute;
  box-sizing: border-box;
  /* Ellipse: a face reads better inside an oval than a rectangle. This outline lines up
     with the SVG hole (both derive from the same box rect). */
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  cursor: move;
}

.ai-face-crop-dialog__handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 50%;
}

.ai-face-crop-dialog__handle[data-face-crop-handle="nw"] {
  top: -8px;
  left: -8px;
  cursor: nwse-resize;
}

.ai-face-crop-dialog__handle[data-face-crop-handle="ne"] {
  top: -8px;
  right: -8px;
  cursor: nesw-resize;
}

.ai-face-crop-dialog__handle[data-face-crop-handle="sw"] {
  bottom: -8px;
  left: -8px;
  cursor: nesw-resize;
}

.ai-face-crop-dialog__handle[data-face-crop-handle="se"] {
  bottom: -8px;
  right: -8px;
  cursor: nwse-resize;
}

.ai-face-crop-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.ai-face-crop-dialog__cancel,
.ai-face-crop-dialog__confirm {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}

.ai-face-crop-dialog__cancel {
  border: 1px solid rgba(86, 101, 122, 0.28);
  background: none;
  color: var(--ink);
}

.ai-face-crop-dialog__cancel:hover {
  background: rgba(86, 101, 122, 0.1);
}

.ai-face-crop-dialog__confirm {
  border: 0;
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

.ai-face-crop-dialog__confirm:hover {
  background: var(--primary-cta-hover);
}

.ai-content-share-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--text-primary, #161922);
}

.ai-mobile-transfer-dialog {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
}

.ai-mobile-transfer-dialog::backdrop {
  background: rgba(5, 8, 15, 0.72);
  backdrop-filter: blur(7px);
}

.ai-mobile-transfer-dialog__panel {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-bg);
  box-shadow: 0 24px 70px rgba(12, 18, 32, 0.24);
}

.ai-mobile-transfer-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.ai-mobile-transfer-dialog__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.ai-mobile-transfer-dialog__x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
}

.ai-mobile-transfer-dialog__x:hover,
.ai-mobile-transfer-dialog__x:focus-visible {
  background: var(--surface-strong);
  color: var(--ink);
  outline: none;
}

.ai-mobile-transfer-dialog__copy {
  margin: 15px 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.ai-mobile-transfer-dialog__qr-stage {
  width: min(296px, 100%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #ffffff;
  color: #5c6472;
  text-align: center;
}

.ai-mobile-transfer-dialog__qr-stage p {
  margin: 0;
  padding: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.ai-mobile-transfer-dialog__qr-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.ai-mobile-transfer-dialog__qr-stage img[hidden],
.ai-mobile-transfer-dialog__qr-stage p[hidden] {
  display: none;
}

.ai-mobile-transfer-dialog__countdown,
.ai-mobile-transfer-dialog__feedback {
  min-height: 20px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.ai-mobile-transfer-dialog__feedback {
  color: var(--brand-red);
}

.ai-mobile-transfer-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.ai-mobile-transfer-dialog__actions button {
  min-height: 46px;
  padding-inline: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-mobile-transfer-dialog__actions button:hover,
.ai-mobile-transfer-dialog__actions button:focus-visible {
  background: var(--surface-strong);
  outline: none;
}

.ai-mobile-transfer-dialog__actions button.portal-button--primary {
  border-color: var(--primary-cta);
  background: var(--primary-cta);
  color: var(--primary-cta-text);
}

.ai-mobile-transfer-dialog__actions button.portal-button--primary:hover,
.ai-mobile-transfer-dialog__actions button.portal-button--primary:focus-visible {
  border-color: var(--primary-cta-hover);
  background: var(--primary-cta-hover);
}

.ai-mobile-transfer-dialog__actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

html[data-theme="dark"] .ai-mobile-transfer-dialog__panel {
  border-color: var(--line-strong);
  background: var(--panel-bg);
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .ai-mobile-transfer-dialog__x:hover,
html[data-theme="dark"] .ai-mobile-transfer-dialog__x:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}

html[data-theme="dark"] .ai-mobile-transfer-dialog__actions button:not(.portal-button--primary) {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

@media (max-width: 520px) {
  .ai-mobile-transfer-dialog__panel {
    padding: 22px 18px 18px;
  }

  .ai-mobile-transfer-dialog__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.ai-content-share-dialog::backdrop {
  background: rgba(8, 10, 16, 0.68);
  backdrop-filter: blur(4px);
}

.ai-content-share-dialog__panel {
  padding: 24px;
  border: 1px solid var(--line, #dfe3eb);
  border-radius: 18px;
  background: var(--surface, #fff);
  box-shadow: 0 24px 70px rgba(8, 12, 24, 0.28);
}

.ai-content-share-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ai-content-share-dialog__header h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
}

.ai-content-share-dialog__x {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.ai-content-share-dialog__x:hover {
  background: var(--surface-muted, #f0f2f6);
}

.ai-content-share-dialog__notice {
  margin: 14px 0 18px;
  color: var(--text-secondary, #60697a);
  font-size: 14px;
  line-height: 1.55;
}

.ai-content-share-dialog__password {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
}

.ai-content-share-dialog__password[hidden] {
  display: none;
}

.ai-content-share-dialog__password input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #a7afbd;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
}

.ai-content-share-dialog__password input:focus-visible {
  border-color: #5577ff;
  outline: 2px solid rgba(85, 119, 255, 0.32);
  outline-offset: 1px;
}

.ai-content-share-dialog__password small {
  color: var(--text-secondary, #60697a);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.ai-content-share-dialog__password-status {
  margin: 0;
  color: var(--text-secondary, #60697a);
  font-size: 13px;
  line-height: 1.45;
}

.ai-content-share-dialog__link {
  margin-top: 14px;
}

.ai-content-share-dialog__link input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, #dfe3eb);
  border-radius: 10px;
  background: var(--surface-muted, #f7f8fa);
  color: inherit;
  font: inherit;
  font-size: 14px;
}

.ai-content-share-dialog__feedback {
  min-height: 21px;
  margin: 10px 0 0;
  color: var(--text-secondary, #60697a);
  font-size: 13px;
}

.ai-content-share-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.ai-content-share-dialog__actions button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line, #dfe3eb);
  border-radius: 10px;
  background: var(--surface, #fff);
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ai-content-share-dialog__actions button[data-content-share-create],
.ai-content-share-dialog__actions button[data-content-share-copy] {
  border-color: #5577ff;
  background: #5577ff;
  color: #fff;
}

.ai-content-share-dialog__actions button:disabled {
  cursor: wait;
  opacity: 0.58;
}

html[data-theme="dark"] .ai-content-share-dialog {
  color: #f2f4f8;
}

html[data-theme="dark"] .ai-content-share-dialog__panel,
html[data-theme="dark"] .ai-content-share-dialog__actions button {
  border-color: #343b4b;
  background: #171b24;
}

html[data-theme="dark"] .ai-content-share-dialog__x:hover,
html[data-theme="dark"] .ai-content-share-dialog__x:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

html[data-theme="dark"] .ai-content-share-dialog__link input {
  border-color: #343b4b;
  background: #10131a;
}

html[data-theme="dark"] .ai-content-share-dialog__notice,
html[data-theme="dark"] .ai-content-share-dialog__feedback {
  color: #aeb6c8;
}

html[data-theme="dark"] .ai-content-share-dialog__password input {
  border-color: #596276;
  background: #10131a;
}

html[data-theme="dark"] .ai-content-share-dialog__password small {
  color: #aeb6c8;
}

html[data-theme="dark"] .ai-content-share-dialog__password-status {
  color: #aeb6c8;
}

html[data-theme="dark"] .ai-content-share-dialog__actions button[data-content-share-create],
html[data-theme="dark"] .ai-content-share-dialog__actions button[data-content-share-copy] {
  border-color: #6a86ff;
  background: #5577ff;
}

@media (max-width: 560px) {
  .ai-content-share-dialog__panel {
    padding: 20px;
  }

  .ai-content-share-dialog__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.portal-login-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
}

.portal-login-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(2px);
}

html[data-theme="dark"] .portal-login-dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.portal-login-dialog__panel {
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: 0 28px 74px rgba(23, 32, 51, 0.28);
}

.portal-login-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 26px 14px;
}

.portal-login-dialog__header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  line-height: 1.25;
}

.portal-login-dialog__close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
}

.portal-login-dialog__close:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink);
}

.portal-login-dialog__body {
  overflow: auto;
  padding: 0 26px 24px;
}

.portal-login-dialog__copy {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.portal-login-dialog__providers {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.portal-login-dialog__provider {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-bg);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.portal-login-dialog__provider:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.portal-login-dialog__provider:disabled {
  opacity: 0.55;
  cursor: default;
}

.portal-login-dialog__provider-icon {
  display: inline-flex;
}

.portal-login-dialog__provider .provider-button__mark {
  width: 20px;
  height: 20px;
}

.portal-login-dialog .auth-divider {
  margin: 12px 0;
}

.portal-login-dialog .auth-divider span {
  background: var(--panel-bg);
}

.portal-login-dialog .auth-input {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border-color: var(--line);
  background-color: var(--control-surface);
  color: var(--ink);
  box-shadow: none;
}

.portal-login-dialog .auth-input::placeholder {
  color: var(--muted-soft);
}

.portal-login-dialog .auth-input:hover:not(:disabled):not([readonly]) {
  border-color: var(--line-strong);
  background-color: var(--surface);
}

.portal-login-dialog .auth-input:focus {
  border-color: var(--portal-accent);
  background-color: var(--panel-bg);
  box-shadow: 0 0 0 4px var(--portal-accent-focus);
}

html[data-theme="dark"] .portal-login-dialog .auth-input:focus {
  background-color: var(--surface-strong);
}

.portal-login-dialog__form {
  display: grid;
  gap: 8px;
}

.portal-login-dialog__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.portal-login-dialog__forgot {
  font-size: 13px;
  font-weight: 400;
}

.portal-login-dialog__submit {
  margin-top: 10px;
}

.portal-login-dialog__signup {
  margin: 14px 0 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.portal-login-dialog__signup a {
  color: var(--portal-accent);
}

.portal-login-dialog__signup a:hover {
  color: var(--portal-accent-hover);
}

.portal-login-dialog__result {
  margin-top: 12px;
}

/* Pre-checkout storage downgrade warning (pricing.js confirmStorageOverLimit): the target plan
   stores less than the account already uses, so the user confirms knowingly before paying. */
.pricing-storage-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
}

.pricing-storage-dialog::backdrop {
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(2px);
}

.pricing-storage-dialog__body {
  padding: 22px 24px;
  border: 1px solid rgba(86, 101, 122, 0.16);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: 0 28px 74px rgba(23, 32, 51, 0.28);
}

.pricing-storage-dialog__body h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.pricing-storage-dialog__body p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.pricing-storage-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.pricing-storage-dialog__cancel,
.pricing-storage-dialog__continue {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.pricing-storage-dialog__cancel {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}

.pricing-storage-dialog__continue {
  border: 1px solid transparent;
  background: var(--portal-accent);
  color: #fff;
}
/* AI Subtitle Generator */
.ai-subtitle-shell {
  width: 100%;
  max-width: none;
}

.ai-subtitle-workspace {
  --ai-tool-generation-panel-width: 480px;
  --ai-tool-workspace-gap: 16px;
  height: calc(100vh - 112px);
  height: calc(100dvh - 112px);
  min-height: calc(100vh - 112px);
}

.ai-subtitle-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
}

.ai-subtitle-settings {
  align-self: stretch;
  overflow: hidden;
}

.ai-subtitle-heading {
  flex: 0 0 auto;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
}

.ai-subtitle-heading .ai-tool-workspace-title-row {
  margin: 0;
}

.ai-subtitle-heading h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ai-subtitle-heading > p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.ai-subtitle-page-tabs {
  margin: 16px 0 0;
}

.ai-subtitle-form {
  --ai-subtitle-form-padding-x: 22px;
  --ai-subtitle-form-scrollbar-width: 10px;
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 18px;
  padding:
    20px
    max(0px, calc(var(--ai-subtitle-form-padding-x) - var(--ai-subtitle-form-scrollbar-width)))
    22px
    var(--ai-subtitle-form-padding-x);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ai-subtitle-form .field-block {
  margin: 0;
}

.ai-subtitle-form .field-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.ai-subtitle-dropzone {
  display: flex;
  min-height: 178px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: var(--control-surface);
  color: var(--muted);
  text-align: center;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ai-subtitle-dropzone:hover,
.ai-subtitle-dropzone.is-dragover {
  border-color: var(--portal-accent);
  background: var(--portal-accent-soft-bg);
}

.ai-subtitle-dropzone:focus-within {
  outline: 3px solid var(--portal-accent-focus);
  outline-offset: 2px;
}

.ai-subtitle-dropzone strong {
  color: var(--ink);
  font-size: 14px;
}

.ai-subtitle-dropzone > span:last-child {
  font-size: 12px;
}

.ai-subtitle-dropzone__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 3px;
  border-radius: 12px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-dropzone__icon svg {
  width: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-subtitle-file-summary {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--control-surface);
}

.ai-subtitle-file-summary video {
  display: block;
  width: 100%;
  max-height: 210px;
  background: #08090b;
  object-fit: contain;
}

.ai-subtitle-file-summary__body {
  display: grid;
  gap: 3px;
  padding: 12px 44px 12px 14px;
}

.ai-subtitle-file-summary__body strong,
.ai-subtitle-file-summary__body span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-subtitle-file-summary__body strong {
  font-size: 13px;
}

.ai-subtitle-file-summary__body span {
  color: var(--muted);
  font-size: 12px;
}

.ai-subtitle-icon-button {
  position: absolute;
  right: 10px;
  bottom: 15px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.ai-subtitle-icon-button:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.ai-subtitle-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ai-subtitle-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.ai-subtitle-toggle > span:first-child {
  display: grid;
  gap: 3px;
}

.ai-subtitle-toggle strong {
  font-size: 13px;
}

.ai-subtitle-toggle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ai-subtitle-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-subtitle-toggle__switch {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-strong);
  transition: background 150ms ease;
}

.ai-subtitle-toggle__switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 150ms ease;
  box-shadow: 0 1px 4px rgba(23, 32, 51, 0.22);
}

.ai-subtitle-toggle input:checked + .ai-subtitle-toggle__switch {
  background: var(--switch-on-bg);
}

.ai-subtitle-toggle input:checked + .ai-subtitle-toggle__switch::after {
  transform: translateX(16px);
}

.ai-subtitle-toggle input:focus-visible + .ai-subtitle-toggle__switch {
  outline: 3px solid var(--portal-accent-focus);
  outline-offset: 2px;
}

.ai-subtitle-privacy-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--portal-accent-soft-bg);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-subtitle-privacy-note svg {
  width: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--portal-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-subtitle-progress {
  display: grid;
  gap: 7px;
}

.ai-subtitle-progress__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.ai-subtitle-progress__row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ai-subtitle-progress__track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-strong);
}

.ai-subtitle-progress__track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--portal-accent);
  transition: width 180ms ease;
}

.ai-subtitle-feedback {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-subtitle-feedback[data-tone="error"] {
  background: var(--error-bg);
  color: var(--error-text);
}

.ai-subtitle-feedback[data-tone="success"] {
  background: var(--success-bg);
  color: var(--success-text);
}

.ai-subtitle-generate.primary-auth-button {
  width: 100%;
  min-height: 52px;
  margin-top: auto;
}

.ai-subtitle-history {
  --ai-subtitle-history-padding-x: 22px;
  --ai-subtitle-history-native-scrollbar-width: 10px;
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 0 22px var(--ai-subtitle-history-padding-x);
}

.ai-subtitle-history[hidden] {
  display: none;
}

.ai-subtitle-history__header {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  margin-right: var(--ai-subtitle-history-padding-x);
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.ai-subtitle-history__header h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.ai-subtitle-history__header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ai-subtitle-history__retention .ai-retention-upsell-link {
  font-size: 1em;
}

.ai-subtitle-history__refresh {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.ai-subtitle-history__refresh .ai-jobs-refresh-icon {
  width: 14px;
  height: 14px;
}

.ai-subtitle-history__more {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--control-surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.ai-subtitle-history__more:hover:not(:disabled) {
  border-color: var(--portal-accent-border);
  color: var(--portal-accent);
}

.ai-subtitle-history__more:disabled {
  cursor: wait;
  opacity: 0.55;
}

.ai-subtitle-history__status {
  flex: 0 0 auto;
  min-height: 22px;
  margin-right: var(--ai-subtitle-history-padding-x);
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ai-subtitle-history__status[data-tone="error"] {
  color: var(--error-text);
}

.ai-subtitle-history__list {
  display: grid;
  min-height: 0;
  flex: 1 1 0;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding-right: max(0px, calc(var(--ai-subtitle-history-padding-x) - var(--ai-subtitle-history-native-scrollbar-width)));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ai-subtitle-history-item {
  position: relative;
  display: grid;
  min-height: 68px;
  grid-template-columns: minmax(0, 1fr) 26px 38px;
  gap: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--control-surface);
  box-shadow: none;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.ai-subtitle-history-item:hover:not(.is-selected),
.ai-subtitle-history-item:focus-within:not(.is-selected) {
  border-color: var(--portal-accent-border);
  background: var(--control-surface);
}

.ai-subtitle-history-item:focus-within:not(.is-selected) {
  box-shadow: 0 0 0 2px var(--portal-accent-soft-bg);
}

.ai-subtitle-history-item.is-selected {
  border-color: var(--portal-accent);
  background: var(--portal-accent-soft-bg);
  box-shadow: inset 0 0 0 1px var(--portal-accent);
}

.ai-subtitle-history-item.is-selected:focus-within {
  box-shadow: inset 0 0 0 1px var(--portal-accent), 0 0 0 2px var(--portal-accent-border);
}

.ai-subtitle-history-item.is-selected::before {
  position: absolute;
  z-index: 1;
  width: 4px;
  background: var(--portal-accent);
  content: "";
  inset: 0 auto 0 0;
  pointer-events: none;
}

.ai-subtitle-history-item__open {
  display: flex;
  min-width: 0;
  min-height: 68px;
  align-items: center;
  padding: 11px 6px 11px 13px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ai-subtitle-history-item__copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.ai-subtitle-history-item__copy strong,
.ai-subtitle-history-item__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-subtitle-history-item__meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-subtitle-history-item__date {
  flex: 0 1 auto;
}

.ai-subtitle-history-item__copy .ai-subtitle-history-item__details {
  flex: 0 1 auto;
  margin-left: auto;
  text-align: right;
}

.ai-subtitle-history-item__copy strong {
  font-size: 13px;
  font-weight: 650;
}

.ai-subtitle-history-item__copy small {
  color: var(--muted);
  font-size: 11px;
}

.ai-subtitle-history-item.is-selected .ai-subtitle-history-item__open {
  padding-left: 17px;
}

.ai-subtitle-history-item__selected-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: var(--portal-accent);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.78);
  transition: opacity 140ms ease, transform 140ms ease;
  visibility: hidden;
}

.ai-subtitle-history-item.is-selected .ai-subtitle-history-item__selected-mark {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.ai-subtitle-history-item__selected-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.ai-subtitle-history-item__delete {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, opacity 140ms ease;
}

.ai-subtitle-history-item__delete:hover:not(:disabled) {
  color: var(--error-text);
  opacity: 0.72;
}

.ai-subtitle-history-item__delete svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-subtitle-history-item.has-media-panel {
  align-self: start;
  grid-template-rows: auto max-content;
}

.ai-subtitle-history-item__media {
  display: grid;
  min-width: 0;
  grid-column: 1 / -1;
  gap: 8px;
  margin: -1px 10px 10px 17px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ai-subtitle-history-item__media-prompt,
.ai-subtitle-history-item__media-footer {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-subtitle-history-item__media-prompt > small {
  min-width: 0;
  flex: 1 1 140px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  text-align: right;
}

.ai-subtitle-history-item__media-action {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--portal-accent-border);
  border-radius: 7px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.ai-subtitle-history-item__media-action:hover:not(:disabled) {
  border-color: var(--portal-accent);
  background: color-mix(in srgb, var(--portal-accent) 13%, var(--surface));
}

.ai-subtitle-history-item__media-action:disabled {
  cursor: wait;
  opacity: 0.6;
}

.ai-subtitle-history-item__media-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ai-subtitle-history-item__media-player {
  display: block;
  width: 100%;
  height: 190px;
  min-height: 190px;
  max-height: 190px;
  border-radius: 8px;
  background: #08090b;
  object-fit: contain;
}

.ai-subtitle-history-item__media-player[data-media-kind="audio"] {
  height: 54px;
  min-height: 54px;
  max-height: 54px;
  background: var(--control-surface);
}

.ai-subtitle-history-item__media-info {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ai-subtitle-history-item__media-info strong,
.ai-subtitle-history-item__media-info small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-subtitle-history-item__media-info strong {
  color: var(--ink);
  font-size: 11px;
}

.ai-subtitle-history-item__media-info small {
  color: var(--muted);
  font-size: 10px;
}

.ai-subtitle-history-item__media-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.ai-subtitle-history-item__media-remove {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ai-subtitle-history-item__media-remove:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.ai-subtitle-history-item__media-remove svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.ai-subtitle-history-item__media-error {
  margin: 0;
  color: var(--error-text);
  font-size: 10px;
  line-height: 1.4;
}

.ai-subtitle-history__more {
  flex: 0 0 auto;
  width: auto;
  margin: 12px var(--ai-subtitle-history-padding-x) 0 0;
}

.ai-subtitle-results {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.ai-subtitle-results__header {
  flex: 0 0 auto;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.ai-subtitle-results__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 14px;
}

.ai-subtitle-translate {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-subtitle-translate .ai-subtitle-select {
  width: 120px;
  min-height: 40px;
}

.ai-subtitle-select,
.ai-subtitle-select option {
  font-weight: 500;
}

.ai-tool-voice-generator-page .ai-voice-preset-select,
.ai-tool-voice-generator-page .ai-voice-preset-select option {
  font-weight: 500;
}

.ai-subtitle-translate__button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid var(--portal-accent-border);
  border-radius: 8px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.ai-subtitle-translate__button:hover:not(:disabled) {
  background: var(--surface-strong);
}

.ai-subtitle-translate__button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.ai-subtitle-translate__button svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-subtitle-translate__cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  padding-left: 7px;
  border-left: 1px solid currentColor;
  line-height: 1;
}

.ai-subtitle-translate__credit-icon {
  width: 13px !important;
  height: 13px;
}

.ai-subtitle-translate__button small {
  font-size: 10px;
  font-weight: 800;
}

.ai-subtitle-results__header h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 750;
}

.ai-subtitle-results__header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}


.ai-subtitle-find-toggle {
  display: grid;
  width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ai-subtitle-find-toggle:hover,
.ai-subtitle-find-toggle[aria-expanded="true"] {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-find-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.ai-subtitle-find-toggle[hidden],
.ai-subtitle-find-replace[hidden] {
  display: none;
}

.ai-subtitle-downloads {
  display: flex;
  flex: 0 0 auto;
  position: relative;
  margin-left: 2px;
  padding-left: 14px;
}

.ai-subtitle-downloads::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 1px;
  background: var(--line);
  content: "";
}

.ai-subtitle-downloads__group {
  display: inline-flex;
  overflow: hidden;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}

.ai-subtitle-downloads__icon {
  display: grid;
  width: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--muted);
}

.ai-subtitle-downloads__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ai-subtitle-downloads__group > button {
  display: inline-flex;
  min-width: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtitle-downloads__group > button:hover,
.ai-subtitle-downloads__group > button[aria-expanded="true"] {
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-download-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  min-width: 180px;
  max-height: 260px;
  gap: 2px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.ai-subtitle-download-menu button {
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.ai-subtitle-download-menu button:hover,
.ai-subtitle-download-menu button:focus-visible {
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  outline: none;
}

.ai-subtitle-save {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.ai-subtitle-save__status {
  overflow: hidden;
  max-width: 180px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-subtitle-save__status[data-tone="dirty"] {
  color: var(--portal-accent);
}

.ai-subtitle-save__status[data-tone="error"] {
  color: var(--danger);
}

.ai-subtitle-save__button {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border: 1px solid var(--portal-accent-border);
  border-radius: 8px;
  background: var(--portal-accent);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtitle-save__button:hover:not(:disabled) {
  filter: brightness(1.04);
}

.ai-subtitle-save__button:disabled {
  cursor: default;
  opacity: 0.52;
}

.ai-subtitle-save__button svg {
  width: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-subtitle-empty {
  display: flex;
  width: 100%;
  max-width: 540px;
  flex: 1;
  align-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.ai-subtitle-empty__icon {
  display: grid;
  width: 62px;
  height: 48px;
  place-items: center;
  margin-bottom: 18px;
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  color: var(--portal-accent);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.ai-subtitle-empty strong {
  color: var(--ink);
  font-size: 16px;
}

.ai-subtitle-empty p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.ai-subtitle-empty__history {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.ai-subtitle-empty__history svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.ai-subtitle-empty__history:hover {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-empty__history:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 2px;
}

.ai-subtitle-processing {
  display: flex;
  width: 100%;
  max-width: 560px;
  flex: 1;
  align-self: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  color: var(--muted);
  text-align: center;
  transform: translateY(clamp(-72px, -6vh, -40px));
}

.ai-subtitle-processing[hidden] {
  display: none;
}

.ai-subtitle-processing[data-mode="history"] > p,
.ai-subtitle-processing[data-mode="history"] .ai-subtitle-processing__progress {
  display: none;
}

.ai-subtitle-processing__visual {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--portal-accent-soft-bg);
}

.ai-subtitle-processing__visual::before,
.ai-subtitle-processing__visual::after {
  position: absolute;
  border: 1px solid var(--portal-accent-border);
  border-radius: 50%;
  content: "";
  inset: 0;
  animation: ai-subtitle-processing-pulse 2s ease-out infinite;
}

.ai-subtitle-processing__visual::after {
  animation-delay: 1s;
}

.ai-subtitle-processing__wave {
  display: flex;
  height: 30px;
  align-items: center;
  gap: 4px;
}

.ai-subtitle-processing__wave span {
  width: 4px;
  height: 9px;
  border-radius: 999px;
  background: var(--portal-accent);
  animation: ai-subtitle-processing-bar 1s ease-in-out infinite;
}

.ai-subtitle-processing__wave span:nth-child(2),
.ai-subtitle-processing__wave span:nth-child(4) {
  animation-delay: 160ms;
}

.ai-subtitle-processing__wave span:nth-child(3) {
  animation-delay: 320ms;
}

.ai-subtitle-processing > strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
}

.ai-subtitle-processing > p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.ai-subtitle-processing__progress {
  display: grid;
  width: min(100%, 270px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.ai-subtitle-processing__track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.ai-subtitle-processing__track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--portal-accent);
  transition: width 240ms ease;
}

.ai-subtitle-processing__progress > strong {
  min-width: 36px;
  color: var(--ink);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@keyframes ai-subtitle-processing-bar {
  0%, 100% { height: 9px; opacity: 0.55; }
  50% { height: 28px; opacity: 1; }
}

@keyframes ai-subtitle-processing-pulse {
  0% { opacity: 0.55; transform: scale(0.82); }
  75%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .ai-subtitle-processing__visual::before,
  .ai-subtitle-processing__visual::after,
  .ai-subtitle-processing__wave span {
    animation: none;
  }

  .ai-subtitle-processing__track > span {
    transition: none;
  }
}

.ai-subtitle-result-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}


.ai-subtitle-find-replace {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  padding: 14px 24px 12px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 24%, var(--line));
  background: color-mix(in srgb, var(--portal-accent) 7%, var(--panel-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ai-subtitle-find-replace__field {
  display: flex;
  min-width: 190px;
  flex: 1 1 240px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 22%, var(--line-strong));
  border-radius: 8px;
  background: var(--panel-bg);
}

.ai-subtitle-find-replace__field:focus-within {
  border-color: var(--portal-accent-border);
  box-shadow: 0 0 0 3px var(--portal-accent-focus);
}

.ai-subtitle-find-replace__field > span {
  flex: 0 0 auto;
  padding-left: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  background: var(--panel-bg);
}

.ai-subtitle-find-replace__field input {
  min-width: 0;
  min-height: 36px;
  flex: 1 1 auto;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: var(--panel-bg) !important;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.ai-subtitle-find-replace__controls {
  display: flex;
  min-width: 100%;
  align-items: center;
  gap: 8px;
}

.ai-subtitle-find-replace__case {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.ai-subtitle-find-replace__case input {
  accent-color: var(--portal-accent);
}

.ai-subtitle-find-replace__status {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-subtitle-find-replace__navigation {
  display: inline-flex;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--control-surface);
}

.ai-subtitle-find-replace__navigation button,
.ai-subtitle-find-replace__close {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.ai-subtitle-find-replace__navigation button + button {
  border-left: 1px solid var(--line);
}

.ai-subtitle-find-replace__navigation button:hover:not(:disabled),
.ai-subtitle-find-replace__close:hover {
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-find-replace__navigation button:disabled {
  cursor: default;
  opacity: 0.36;
}

.ai-subtitle-find-replace__navigation svg,
.ai-subtitle-find-replace__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.ai-subtitle-find-replace__all {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--portal-accent-border);
  border-radius: 7px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.ai-subtitle-find-replace__all:disabled {
  border-color: var(--line);
  background: var(--control-surface);
  color: var(--muted);
  cursor: default;
  opacity: 0.62;
}

.ai-subtitle-find-replace__close {
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
}


html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace {
  border-top: 1px solid rgba(117, 144, 255, 0.38);
  border-right: 1px solid rgba(117, 144, 255, 0.3);
  border-bottom-color: rgba(117, 144, 255, 0.3);
  border-left: 1px solid rgba(117, 144, 255, 0.3);
  background: color-mix(in srgb, var(--portal-accent) 10%, #20232b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__field,
html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__navigation {
  border-color: rgba(235, 237, 240, 0.2);
  background: #191b21;
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__field > span {
  background: #191b21;
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__field input {
  background: #191b21 !important;
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__field > span,
html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__case,
html[data-theme="dark"] .dashboard-page .ai-subtitle-find-replace__status {
  color: #c8ccd5;
}

.ai-subtitle-result-meta {
  flex: 0 0 auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.ai-subtitle-track-tabs {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ai-subtitle-track-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-subtitle-translated-tracks {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-subtitle-track-tabs [data-subtitle-track] {
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtitle-track-tabs [data-subtitle-track]:hover,
.ai-subtitle-track-tabs [data-subtitle-track].is-active {
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-subtitle-track-tabs__translated {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.ai-subtitle-track-tabs__translated:hover,
.ai-subtitle-track-tabs__translated:has([data-subtitle-track].is-active) {
  background: var(--portal-accent-soft-bg);
}

.ai-subtitle-track-tabs__translated [data-subtitle-track] {
  padding-right: 10px;
  border-radius: 6px;
}

.ai-subtitle-track-tabs__translated [data-subtitle-track]:hover,
.ai-subtitle-track-tabs__translated [data-subtitle-track].is-active {
  background: transparent;
}

.ai-subtitle-track-tabs__translated [data-subtitle-track]:focus-visible {
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ai-subtitle-track-tabs__remove:focus-visible {
  background: var(--line);
  outline: none;
}

.ai-subtitle-track-tabs__remove {
  display: grid;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}

.ai-subtitle-track-tabs__remove svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.ai-subtitle-track-tabs__translated:has([data-subtitle-track].is-active) .ai-subtitle-track-tabs__remove {
  color: var(--portal-accent);
}

.ai-subtitle-track-tabs__remove:hover:not(:disabled) {
  background: var(--line);
  transform: scale(0.88);
}

.ai-subtitle-track-tabs__remove:disabled {
  cursor: default;
  opacity: 0.45;
}

.ai-subtitle-review-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--control-surface) 74%, transparent);
}

.ai-subtitle-review-toolbar[hidden] {
  display: none;
}

.ai-subtitle-review-toolbar__summary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.ai-subtitle-review-toolbar__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.ai-subtitle-review-toolbar__level {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ai-subtitle-review-toolbar__level > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.ai-subtitle-review-toolbar__level-select {
  width: 112px;
  min-height: 34px;
  padding-right: 30px;
  font-size: 12px;
  font-weight: 700;
}

.ai-subtitle-review-toolbar__filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 9px;
  background: var(--control-surface);
}

.ai-subtitle-review-toolbar__filters button {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtitle-review-toolbar__filters button:hover,
.ai-subtitle-review-toolbar__filters button:focus-visible {
  color: var(--ink);
  background: var(--surface);
}

.ai-subtitle-review-toolbar__filters button:focus-visible {
  outline: 2px solid var(--portal-accent);
  outline-offset: 1px;
}

.ai-subtitle-review-toolbar__filters button.is-active {
  color: var(--portal-accent);
  background: var(--portal-accent-soft-bg);
}

.ai-subtitle-cues {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ai-subtitle-virtual-spacer {
  width: 1px;
  min-height: 0;
  grid-column: 1 / -1;
  pointer-events: none;
}

.ai-subtitle-form,
.ai-subtitle-cues {
  scrollbar-gutter: stable;
}

.ai-subtitle-history__list {
  scrollbar-gutter: stable;
}

@supports (-moz-appearance: none) {
  .ai-subtitle-form,
  .ai-subtitle-history__list,
  .ai-subtitle-cues {
    scrollbar-color: rgba(86, 101, 122, 0.42) transparent;
    scrollbar-width: thin;
  }
}

.ai-subtitle-form::-webkit-scrollbar,
.ai-subtitle-history__list::-webkit-scrollbar,
.ai-subtitle-cues::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.ai-subtitle-form::-webkit-scrollbar-track,
.ai-subtitle-history__list::-webkit-scrollbar-track,
.ai-subtitle-cues::-webkit-scrollbar-track {
  background: transparent;
}

.ai-subtitle-form::-webkit-scrollbar-thumb,
.ai-subtitle-history__list::-webkit-scrollbar-thumb,
.ai-subtitle-cues::-webkit-scrollbar-thumb {
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(86, 101, 122, 0.42);
  background-clip: padding-box;
}

.ai-subtitle-form::-webkit-scrollbar-thumb:hover,
.ai-subtitle-history__list::-webkit-scrollbar-thumb:hover,
.ai-subtitle-cues::-webkit-scrollbar-thumb:hover {
  background: rgba(86, 101, 122, 0.58);
  background-clip: padding-box;
}

.ai-subtitle-form::-webkit-scrollbar-button,
.ai-subtitle-history__list::-webkit-scrollbar-button,
.ai-subtitle-cues::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.ai-subtitle-form::-webkit-scrollbar-corner,
.ai-subtitle-history__list::-webkit-scrollbar-corner,
.ai-subtitle-cues::-webkit-scrollbar-corner {
  background: transparent;
}

.ai-subtitle-cue {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms ease;
}

.ai-subtitle-cue.is-active {
  background: color-mix(in srgb, var(--portal-accent) 11%, var(--panel-bg));
  box-shadow: inset 0 0 0 2px var(--portal-accent-border);
}

.ai-subtitle-cue.is-review-needs-review {
  box-shadow: inset 3px 0 0 #d99a24;
}

.ai-subtitle-cue.is-active.is-review-needs-review {
  box-shadow: inset 3px 0 0 #d99a24, inset 0 0 0 2px var(--portal-accent-border);
}

.ai-subtitle-cue__review {
  display: grid;
  gap: 7px;
  margin-bottom: 2px;
}

.ai-subtitle-cue__review-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.ai-subtitle-cue__review-badge {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  margin-left: auto;
  padding: 0;
  border: 1px solid rgba(217, 154, 36, 0.34);
  border-radius: 50%;
  color: #875b08;
  background: rgba(217, 154, 36, 0.16);
  appearance: none;
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: help;
}

.ai-subtitle-cue__review-badge.is-confirmed,
.ai-subtitle-cue__review-badge.is-corrected {
  width: auto;
  height: auto;
  min-height: 24px;
  flex-basis: auto;
  padding: 3px 7px;
  border-color: rgba(27, 150, 105, 0.28);
  border-radius: 999px;
  color: #137251;
  background: rgba(27, 150, 105, 0.14);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.ai-subtitle-cue__review-badge.is-confirmed:hover,
.ai-subtitle-cue__review-badge.is-corrected:hover {
  border-color: rgba(27, 150, 105, 0.48);
  background: rgba(27, 150, 105, 0.22);
  transform: translateY(-1px);
}

.ai-subtitle-cue__review-badge.is-confirmed:focus-visible,
.ai-subtitle-cue__review-badge.is-corrected:focus-visible {
  outline: 2px solid var(--portal-accent-focus);
  outline-offset: 2px;
}


.ai-subtitle-cue__review-confirm {
  flex: 0 0 auto;
  margin-left: 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-surface);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.ai-subtitle-cue__review-confirm:hover,
.ai-subtitle-cue__review-confirm:focus-visible {
  border-color: var(--portal-accent-border);
  color: var(--portal-accent);
}

.ai-subtitle-cue__review-confirm:focus-visible {
  outline: 2px solid var(--portal-accent-focus);
  outline-offset: 1px;
}


html[data-theme="dark"] .dashboard-page .ai-subtitle-cue.is-review-needs-review {
  box-shadow: inset 3px 0 0 #efb53e;
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue.is-active {
  background: color-mix(in srgb, var(--portal-accent) 17%, var(--panel-bg));
  box-shadow: inset 0 0 0 2px var(--portal-accent-border);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue.is-active.is-review-needs-review {
  box-shadow: inset 3px 0 0 #efb53e, inset 0 0 0 2px var(--portal-accent-border);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-badge,
html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__text mark.is-review-word {
  color: #ffd37a;
  background: rgba(217, 154, 36, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 211, 122, 0.24);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-badge.is-confirmed,
html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-badge.is-corrected {
  color: #8fe0ba;
  background: rgba(27, 150, 105, 0.22);
  box-shadow: inset 0 0 0 1px rgba(143, 224, 186, 0.22);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-badge.is-confirmed:hover,
html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-badge.is-corrected:hover {
  background: rgba(27, 150, 105, 0.32);
}


html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__review-confirm {
  border-color: rgba(235, 237, 240, 0.14);
}

.ai-subtitle-review-empty {
  padding: 42px 24px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.ai-subtitle-cue__time {
  align-self: start;
  padding: 6px 8px;
  border: 0;
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ai-subtitle-cue__time:hover {
  color: var(--portal-accent);
}

.ai-subtitle-cue__time:disabled {
  cursor: default;
  color: var(--muted);
}

.ai-subtitle-cue.is-active .ai-subtitle-cue__time,
.ai-subtitle-cue.is-active .ai-subtitle-cue__time:disabled {
  background: var(--portal-accent);
  color: #fff;
}

.ai-subtitle-cue__content {
  display: grid;
  gap: 6px;
}

.ai-subtitle-cue__content.has-review {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
}

.ai-subtitle-cue__content.has-review .ai-subtitle-cue__caption-row {
  grid-column: 1;
  grid-row: 1;
}

.ai-subtitle-cue__content.has-review .ai-subtitle-cue__review {
  grid-column: 2;
  grid-row: 1;
  margin-bottom: 0;
}

.ai-subtitle-cue__caption-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}

.ai-subtitle-cue__speaker-badge {
  --speaker-badge-color: #4263eb;
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--speaker-badge-color) 38%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--speaker-badge-color) 12%, transparent);
  color: color-mix(in srgb, var(--speaker-badge-color) 78%, #172033);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  cursor: text;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.ai-subtitle-cue__speaker-badge:hover {
  background: color-mix(in srgb, var(--speaker-badge-color) 19%, transparent);
  transform: translateY(-1px);
}

.ai-subtitle-cue__speaker-badge:focus-visible {
  outline: 3px solid var(--portal-accent-focus);
  outline-offset: 1px;
}

.ai-subtitle-cue__speaker-badge[hidden] {
  display: none;
}

.ai-subtitle-cue__speaker-badge[data-speaker-color="0"] { --speaker-badge-color: #4263eb; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="1"] { --speaker-badge-color: #7950f2; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="2"] { --speaker-badge-color: #c2255c; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="3"] { --speaker-badge-color: #e8590c; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="4"] { --speaker-badge-color: #0f766e; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="5"] { --speaker-badge-color: #2b8a3e; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="6"] { --speaker-badge-color: #087f8c; }
.ai-subtitle-cue__speaker-badge[data-speaker-color="7"] { --speaker-badge-color: #9c6a03; }

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__speaker-badge {
  border-color: color-mix(in srgb, var(--speaker-badge-color) 52%, #2b2f39);
  background: color-mix(in srgb, var(--speaker-badge-color) 20%, #1b1e25);
  color: color-mix(in srgb, var(--speaker-badge-color) 56%, #fff);
}

html[data-theme="dark"] .dashboard-page .ai-subtitle-cue__speaker-badge:hover {
  background: color-mix(in srgb, var(--speaker-badge-color) 28%, #1b1e25);
}

.ai-subtitle-cue__speaker-input {
  width: min(180px, 40%);
  min-width: 96px;
  min-height: 28px;
  flex: 0 1 180px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--control-surface);
  color: var(--portal-accent);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

.ai-subtitle-cue__speaker-input:hover {
  border-color: var(--portal-accent-border);
}

.ai-subtitle-cue__speaker-input:focus {
  border-color: var(--portal-accent-border);
  outline: 3px solid var(--portal-accent-focus);
}

.ai-subtitle-cue__text {
  display: block;
  width: auto;
  min-width: 0;
  min-height: 28px;
  flex: 1 1 auto;
  padding: 2px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}

.ai-subtitle-cue__text:hover {
  border-color: var(--line);
  background: var(--control-surface);
}

.ai-subtitle-cue__text:focus-visible {
  border-color: var(--portal-accent-border);
  outline: 3px solid var(--portal-accent-focus);
  background: var(--control-surface);
}

.ai-subtitle-cue__text mark.is-review-word {
  padding: 1px 3px;
  border-radius: 4px;
  color: #875b08;
  background: rgba(217, 154, 36, 0.15);
  font-weight: 700;
}


.ai-subtitle-cue__text mark.is-find-match {
  padding: 1px 2px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--portal-accent) 18%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--portal-accent) 70%, transparent);
  color: inherit;
  font-weight: inherit;
}

.ai-subtitle-cue__text mark.is-current-find-match {
  background: color-mix(in srgb, var(--portal-accent) 34%, transparent);
  box-shadow: inset 0 0 0 1px var(--portal-accent);
}

.ai-subtitle-cue__text[hidden],
.ai-subtitle-cue textarea[hidden] {
  display: none;
}

.ai-subtitle-cue textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  padding: 2px 10px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
}

.ai-subtitle-cue textarea:hover {
  border-color: var(--line);
  background: var(--control-surface);
}

.ai-subtitle-cue textarea:focus {
  border-color: var(--portal-accent-border);
  outline: 3px solid var(--portal-accent-focus);
  background: var(--control-surface);
}

.ai-tools-gallery-visual--subtitles {
  background: #d9d0c4;
}

@media (max-width: 767px) {
  .ai-subtitle-processing {
    transform: translateY(-24px);
  }

  .ai-subtitle-workspace {
    height: auto;
    min-height: 0;
  }

  .ai-subtitle-settings {
    position: static;
    max-height: none;
  }

  .ai-subtitle-results {
    height: min(720px, calc(100dvh - 32px));
    min-height: 520px;
  }
}

@media (max-width: 680px) {
  .ai-subtitle-workspace {
    gap: 12px;
  }

  .ai-subtitle-panel {
    border-radius: 8px;
  }

  .ai-subtitle-heading,
  .ai-subtitle-form,
  .ai-subtitle-history,
  .ai-subtitle-results__header,
  .ai-subtitle-result-meta,
  .ai-subtitle-review-toolbar,
  .ai-subtitle-find-replace,
  .ai-subtitle-cue {
    padding-right: 18px;
    padding-left: 18px;
  }

  .ai-subtitle-history {
    --ai-subtitle-history-padding-x: 18px;
    padding-right: 0;
  }

  .ai-subtitle-field-grid {
    grid-template-columns: 1fr;
  }

  .ai-subtitle-results__actions,
  .ai-subtitle-translate {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ai-subtitle-results__actions {
    gap: 10px;
  }

  .ai-subtitle-find-toggle {
    flex: 0 0 40px;
  }

  .ai-subtitle-find-replace__field,
  .ai-subtitle-find-replace__controls {
    width: 100%;
  }

  .ai-subtitle-find-replace__controls {
    flex-wrap: wrap;
  }

  .ai-subtitle-find-replace__status {
    order: -1;
    width: 100%;
    flex-basis: 100%;
  }

  .ai-subtitle-downloads {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  .ai-subtitle-downloads::before {
    display: none;
  }

  .ai-subtitle-save {
    width: 100%;
    margin-left: 0;
  }

  .ai-subtitle-save__status {
    max-width: none;
    flex: 1;
  }

  .ai-subtitle-translate .ai-subtitle-select {
    width: min(127px, 100%);
  }

  .ai-subtitle-review-toolbar,
  .ai-subtitle-cue__review-head {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ai-subtitle-review-toolbar__controls,
  .ai-subtitle-review-toolbar__level,
  .ai-subtitle-review-toolbar__filters {
    width: 100%;
  }

  .ai-subtitle-review-toolbar__level {
    justify-content: space-between;
  }

  .ai-subtitle-review-toolbar__level-select {
    width: 128px;
    flex: 0 0 128px;
  }

  .ai-subtitle-review-toolbar__filters {
    flex: 1 1 auto;
  }

  .ai-subtitle-review-toolbar__filters button {
    flex: 1 1 auto;
  }

  .ai-subtitle-cue {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ai-subtitle-cue__content.has-review {
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-subtitle-cue__content.has-review .ai-subtitle-cue__review {
    grid-column: 1;
    grid-row: 2;
    margin-top: 2px;
  }

  .ai-subtitle-cue__review-confirm {
    margin-left: 0;
  }

  .ai-subtitle-cue__time {
    justify-self: start;
  }
}

/* AI Subtitle Generator: responsive workspace hardening */
@media (max-width: 1120px) {
  #portal-page-ai-subtitle-generator .dashboard-shell.ai-tool-shell > .ai-subtitle-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    align-items: start;
    align-content: start;
  }

  #portal-page-ai-subtitle-generator .dashboard-shell.ai-tool-shell > .ai-subtitle-workspace > .ai-subtitle-settings,
  #portal-page-ai-subtitle-generator .dashboard-shell.ai-tool-shell > .ai-subtitle-workspace > .ai-subtitle-result-column {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .ai-subtitle-settings {
    max-height: none;
    align-self: start;
  }

  .ai-subtitle-form {
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .ai-subtitle-history {
    flex: 0 0 auto;
  }

  .ai-subtitle-history__list {
    max-height: min(560px, 58dvh);
    flex: 0 1 auto;
    -webkit-overflow-scrolling: touch;
  }

  .ai-subtitle-results {
    height: min(760px, calc(100dvh - 32px));
    min-height: 560px;
    scroll-margin-top: calc(var(--portal-topbar-height, 64px) + 12px);
  }
}

@media (max-width: 680px) {
  .ai-subtitle-heading {
    padding: 18px 16px 16px;
  }

  .ai-subtitle-heading h1 {
    font-size: 22px;
  }

  .ai-subtitle-form {
    --ai-subtitle-form-padding-x: 16px;
    gap: 16px;
    padding: 16px;
  }

  .ai-subtitle-history {
    --ai-subtitle-history-padding-x: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .ai-subtitle-results__header,
  .ai-subtitle-result-meta,
  .ai-subtitle-review-toolbar,
  .ai-subtitle-find-replace,
  .ai-subtitle-track-tabs,
  .ai-subtitle-cue {
    padding-right: 16px;
    padding-left: 16px;
  }

  .ai-subtitle-dropzone {
    min-height: 142px;
    padding: 20px 16px;
  }

  .ai-subtitle-page-tabs button,
  .ai-subtitle-history__refresh,
  .ai-subtitle-history-item__delete,
  .ai-subtitle-history-item__media-action,
  .ai-subtitle-history-item__media-remove,
  .ai-subtitle-find-replace__navigation button,
  .ai-subtitle-find-replace__close,
  .ai-subtitle-find-replace__all {
    min-height: 44px;
  }

  .ai-subtitle-history__refresh,
  .ai-subtitle-history-item__delete,
  .ai-subtitle-history-item__media-remove,
  .ai-subtitle-find-replace__navigation button,
  .ai-subtitle-find-replace__close {
    width: 44px;
    height: 44px;
  }

  .ai-subtitle-history-item {
    min-height: 76px;
    grid-template-columns: minmax(0, 1fr) 26px 44px;
  }

  .ai-subtitle-history-item__open {
    min-height: 76px;
  }

  .ai-subtitle-results__actions {
    width: calc(100% + 32px);
    flex-wrap: nowrap;
    gap: 8px;
    margin-right: -16px;
    margin-left: -16px;
    padding: 0 16px 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ai-subtitle-results__actions::-webkit-scrollbar {
    display: none;
  }

  .ai-subtitle-results__actions > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .ai-subtitle-translate,
  .ai-subtitle-downloads,
  .ai-subtitle-save {
    width: auto;
    flex-wrap: nowrap;
    margin-left: 0;
  }

  .ai-subtitle-downloads {
    padding-left: 0;
  }

  .ai-subtitle-save__status {
    max-width: 150px;
  }

  .ai-subtitle-find-replace__field {
    min-width: 0;
  }

  .ai-subtitle-find-replace__field input {
    min-height: 44px;
  }

  .ai-subtitle-select,
  .ai-subtitle-find-replace__field input,
  .ai-subtitle-cue__speaker-input,
  .ai-subtitle-cue textarea {
    font-size: 16px;
  }

  .ai-subtitle-review-toolbar__filters button,
  .ai-subtitle-cue__review-confirm {
    min-height: 40px;
  }

  .ai-subtitle-cues {
    -webkit-overflow-scrolling: touch;
  }

  .ai-subtitle-cue {
    gap: 6px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .ai-subtitle-cue__time {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  .ai-subtitle-cue__speaker-badge {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .ai-subtitle-cue__text {
    min-height: 44px;
    padding: 6px 8px;
  }

  .ai-subtitle-cue__content,
  .ai-subtitle-cue__caption-row {
    min-width: 0;
  }

  .ai-subtitle-cue__content.has-review .ai-subtitle-cue__review {
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .ai-subtitle-cue__review-head {
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .ai-subtitle-cue__review-badge {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  .ai-subtitle-history-item__meta,
  .ai-subtitle-history-item__media-prompt,
  .ai-subtitle-history-item__media-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .ai-subtitle-history-item__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .ai-subtitle-history-item__copy .ai-subtitle-history-item__details,
  .ai-subtitle-history-item__media-prompt > small {
    margin-left: 0;
    text-align: left;
  }

  .ai-subtitle-history-item__media-action {
    width: 100%;
  }

  .ai-subtitle-review-toolbar__filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ai-subtitle-review-toolbar__filters button {
    flex: 1 0 auto;
  }
}

/* Shared referral card treatment for My Bandicam and Bandicam AI Studio. */
.dashboard-page .dashboard-nav .dashboard-nav-referral {
  --referral-accent: #7c3aed;
  display: flex;
  align-items: center;
  min-height: 62px;
  margin: 14px 0 8px;
  padding: 11px 9px;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--referral-accent) 14%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--referral-accent) 8%);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 160ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--referral-accent) 36%, var(--line));
  background: color-mix(in srgb, var(--panel-bg) 87%, var(--referral-accent) 13%);
  box-shadow: 0 8px 22px rgba(23, 19, 47, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:focus-visible {
  outline: 2px solid var(--referral-accent);
  outline-offset: 2px;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__icon {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, #9569ff 0%, #6f55ee 100%);
  color: #fff;
  box-shadow: 0 5px 14px rgba(111, 85, 238, 0.24);
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy strong,
.dashboard-page .dashboard-nav .dashboard-nav-referral__copy span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__arrow {
  display: grid;
  place-items: center;
  width: 14px;
  min-width: 14px;
  height: 22px;
  color: var(--muted);
  opacity: 0.58;
  transition: color 140ms ease, opacity 140ms ease, transform 160ms ease;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:hover .dashboard-nav-referral__arrow {
  color: var(--referral-accent);
  opacity: 1;
  transform: translateX(2px);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-nav-referral {
  --referral-accent: #a78bfa;
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--referral-accent) 12%);
}
/* "Invite Friends" card on the credits page — matches the credit-summary card
   family (token-driven so light/dark themes both work). */
.credits-referral-lead {
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.credits-referral-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-top: 12px;
}
.credits-referral-link {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  outline: 0;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.credits-referral-link:focus {
  box-shadow: 0 0 0 4px var(--focus);
}
.credits-referral-copy {
  margin-top: 0;
  white-space: nowrap;
}
.credits-referral-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  color: var(--muted-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* Desktop side rail: pin the invite card to the bottom, directly above the
   account section (user request 2026-08-15). The adjacent-sibling override
   hands the account section's auto margin to the card while the card is
   visible; a hidden card (signed out / flag off) restores the original layout. */
@media (min-width: 961px) {
  .dashboard-page .dashboard-nav .dashboard-nav-referral {
    margin-top: auto;
  }
  .dashboard-page .dashboard-nav .dashboard-nav-referral:not([hidden]) + .dashboard-nav__account {
    margin-top: 8px;
  }
}


/* AI Story visual-reference review and approval gate. */
.ai-story-reference-review {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 32%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--portal-accent) 9%, var(--panel-bg)), var(--panel-bg));
  box-shadow: 0 12px 30px rgba(24, 30, 54, 0.06);
}

.ai-story-reference-review.is-ready {
  border-color: color-mix(in srgb, #22a06b 52%, var(--line));
}

.ai-story-reference-review.is-issue {
  border-color: color-mix(in srgb, #d64545 52%, var(--line));
}

.ai-story-reference-review__media {
  display: grid;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.ai-story-reference-review__media button {
  width: 100%;
  min-height: 150px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.ai-story-reference-review__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ai-story-reference-review__placeholder {
  display: grid;
  min-height: 150px;
  place-items: center;
  color: var(--portal-accent);
  font-size: 42px;
  background: radial-gradient(circle, color-mix(in srgb, var(--portal-accent) 16%, transparent), transparent 68%);
}

.ai-story-reference-review__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.ai-story-reference-review__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.ai-story-reference-review__heading strong {
  color: var(--ink);
  font-size: 16px;
  font-weight: 850;
}

.ai-story-reference-review__mode {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
  font-size: 11px;
  font-weight: 800;
}

.ai-story-reference-review__body p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.ai-story-reference-style {
  display: grid;
  width: min(100%, 520px);
  gap: 8px;
}

.ai-story-reference-style label {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.ai-story-reference-style select,
.ai-story-reference-style__custom {
  width: 100%;
  min-height: 40px;
  font-size: 13px;
}

.ai-story-reference-style__custom {
  resize: vertical;
  line-height: 1.45;
}

.ai-story-reference-review__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.ai-story-reference-dialog {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.ai-story-reference-dialog::backdrop {
  background: rgba(10, 14, 28, 0.72);
  backdrop-filter: blur(4px);
}

.ai-story-reference-dialog__panel {
  display: grid;
  max-height: calc(100vh - 32px);
  grid-template-rows: auto minmax(0, 1fr);
}

.ai-story-reference-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.ai-story-reference-dialog__header button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}

.ai-story-reference-dialog__panel img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 104px);
  object-fit: contain;
  background: #111522;
}

@media (max-width: 640px) {
  .ai-story-reference-review {
    grid-template-columns: 1fr;
  }

  .ai-story-reference-review__media,
  .ai-story-reference-review__media button,
  .ai-story-reference-review__placeholder {
    min-height: 220px;
  }
}


.ai-story-scene-action--animate {
  border-color: color-mix(in srgb, var(--portal-accent) 32%, var(--line));
  background: color-mix(in srgb, var(--portal-accent) 8%, var(--surface));
  color: var(--portal-accent);
}

/* Bandicam AI site overrides. public_ai/styles-ai.css is generated from
   public/styles.css plus this file, so the live sites do not share CSS files. */
:root {
  --portal-accent: #7c3aed;
  --portal-accent-hover: #6d28d9;
  --portal-accent-rgb: 124, 58, 237;
  --primary-cta: #7c3aed;
  --primary-cta-hover: #6d28d9;
  --primary-cta-active: #5b21b6;
}

html[data-theme="dark"] {
  --portal-accent: #a78bfa;
  --portal-accent-hover: #8b5cf6;
  --portal-accent-rgb: 167, 139, 250;
  --primary-cta: #8b5cf6;
  --primary-cta-hover: #7c3aed;
  --primary-cta-active: #6d28d9;
}

.dashboard-brand {
  color: var(--portal-accent);
}

.auth-brand--ai::before {
  display: none;
}

.auth-brand__ai-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

.auth-brand__ai-logo--dark {
  display: none;
}

html[data-theme="dark"] .auth-brand__ai-logo--light {
  display: none;
}

html[data-theme="dark"] .auth-brand__ai-logo--dark {
  display: block;
}

html[data-portal-site="ai"] #password-reset-btn {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

html[data-portal-site="ai"] #password-reset-btn:hover {
  color: var(--ink);
}

.dashboard-brand--ai::before {
  display: none;
}

.dashboard-brand__ai-logo {
  display: block;
  width: 200px;
  max-width: 100%;
  height: auto;
}

.dashboard-brand__ai-logo--dark {
  display: none;
}

html[data-theme="dark"] .dashboard-brand__ai-logo--light {
  display: none;
}

html[data-theme="dark"] .dashboard-brand__ai-logo--dark {
  display: block;
}

.dashboard-page .dashboard-nav__group {
  gap: 4px;
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink {
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;
  margin-left: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  gap: 12px;
  justify-content: flex-start;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink .dashboard-navlink__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  stroke-width: 1.8;
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink:hover {
  background: var(--surface);
  color: var(--ink);
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink.dashboard-navlink--active {
  background: var(--portal-accent-soft-bg);
  color: var(--ai-accent);
  font-weight: 700;
}

.dashboard-page .dashboard-nav__group > .dashboard-navlink.dashboard-navlink--active:hover {
  background: var(--portal-accent-active-bg);
  color: var(--ai-accent-hover);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav__group > .dashboard-navlink:hover {
  background: var(--surface-strong);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav__group > .dashboard-navlink.dashboard-navlink--active {
  background: var(--portal-accent-soft-bg);
  color: var(--ai-accent-hover);
}

.dashboard-page .dashboard-nav__submenu {
  gap: 2px;
  margin: 0 0 6px;
  padding-left: 0;
}

.dashboard-page .dashboard-nav__submenu::before {
  display: none;
}

.dashboard-page .ai-nav-separator {
  width: calc(100% - 20px);
  height: 1px;
  margin: 6px 0;
  justify-self: center;
  background: var(--line);
  opacity: 0.8;
  pointer-events: none;
}

.dashboard-page .dashboard-nav-sublink {
  min-height: 40px;
  width: 100%;
  margin-left: 0;
  padding: 0 12px;
  border-radius: 8px;
  gap: 12px;
  font-size: 15px;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
  overflow-wrap: normal;
}

.dashboard-page .dashboard-nav-sublink__icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-sidebar-collapse {
  display: none;
}

.ai-sidebar-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 250;
  max-width: min(240px, calc(100vw - 24px));
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: #111827;
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.24);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-4px, -50%);
  transition: opacity 120ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

.ai-sidebar-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: #111827;
  transform: translateY(-50%) rotate(45deg);
}

.ai-sidebar-tooltip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

.ai-language-menu__current {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ai-account-menu__external {
  margin-left: auto;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: grid;
  place-items: center;
  color: var(--muted);
  opacity: 0.78;
}

.ai-account-menu__external svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-language-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
}

.ai-language-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(4, 7, 14, 0.66);
  cursor: default;
}

.ai-language-modal__dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: min(760px, calc(100dvh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.ai-language-modal__dialog:focus {
  outline: none;
}

.ai-language-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 16px;
}

.ai-language-modal__header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ai-language-modal__close {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.ai-language-modal__close:hover {
  background: var(--surface);
  color: var(--ink);
}

.ai-language-modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.ai-language-modal__grid {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 4px 24px 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--portal-accent-rgb), 0.36) transparent;
}

.ai-language-modal__option {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.ai-language-modal__option:hover {
  background: var(--surface-strong);
}

.ai-language-modal__option.is-active {
  border-color: var(--portal-accent-border);
  background: var(--portal-accent-soft-bg);
  color: var(--portal-accent);
}

.ai-language-modal__check {
  opacity: 0;
  font-size: 17px;
  font-weight: 800;
}

.ai-language-modal__option.is-active .ai-language-modal__check {
  opacity: 1;
}

body.ai-language-modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .ai-language-modal {
    padding: 14px;
  }

  .ai-language-modal__dialog {
    max-height: calc(100dvh - 28px);
  }

  .ai-language-modal__grid {
    grid-template-columns: 1fr;
    padding-right: 18px;
    padding-left: 18px;
  }
}

.dashboard-page.ai-tools-page .ai-result-view-actions {
  min-height: 42px;
  padding: 0 12px;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dashboard-page.ai-tools-page .ai-result-view-actions::-webkit-scrollbar {
  display: none;
}

.dashboard-page.ai-tools-page .ai-result-view-button {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: none;
  transition: color 150ms ease;
}

.dashboard-page.ai-tools-page .ai-result-view-button::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: var(--portal-accent);
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: center;
  transition: opacity 150ms ease, transform 180ms ease;
}

.dashboard-page.ai-tools-page .ai-result-view-button:hover,
html[data-theme="dark"] .dashboard-page.ai-tools-page .ai-result-view-button:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.dashboard-page.ai-tools-page .ai-result-view-button.is-active,
html[data-theme="dark"] .dashboard-page.ai-tools-page .ai-result-view-button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  box-shadow: none;
}

.dashboard-page.ai-tools-page .ai-result-view-button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.dashboard-page.ai-tools-page .ai-result-view-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .dashboard-page.ai-tools-page .ai-result-view-actions {
    gap: 16px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .dashboard-page.ai-tools-page .ai-result-view-button {
    min-height: 40px;
    font-size: 13px;
  }
}

.dashboard-page.ai-jobs-page .ai-history-tabs {
  min-height: 42px;
  padding: 0 12px;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0;
}

.dashboard-page.ai-jobs-page .ai-history-tablist {
  min-width: 0;
  align-self: stretch;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dashboard-page.ai-jobs-page .ai-history-tablist::-webkit-scrollbar {
  display: none;
}

.dashboard-page.ai-jobs-page .ai-result-view-button {
  position: relative;
  min-width: 0;
  min-height: 42px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: none;
  transition: color 150ms ease;
}

.dashboard-page.ai-jobs-page .ai-result-view-button::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 4px;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: var(--portal-accent);
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: center;
  transition: opacity 150ms ease, transform 180ms ease;
}

.dashboard-page.ai-jobs-page .ai-result-view-button:hover,
html[data-theme="dark"] .dashboard-page.ai-jobs-page .ai-result-view-button:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.dashboard-page.ai-jobs-page .ai-result-view-button.is-active,
html[data-theme="dark"] .dashboard-page.ai-jobs-page .ai-result-view-button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  box-shadow: none;
}

.dashboard-page.ai-jobs-page .ai-result-view-button.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.dashboard-page.ai-jobs-page .ai-result-view-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .dashboard-page.ai-jobs-page .ai-history-tabs {
    padding-right: 6px;
    padding-left: 6px;
  }

  .dashboard-page.ai-jobs-page .ai-history-tablist {
    gap: 16px;
  }

  .dashboard-page.ai-jobs-page .ai-result-view-button {
    min-height: 40px;
    font-size: 13px;
  }
}

.dashboard-page.ai-studio-page .ai-studio-entry-card--subtitle .ai-studio-entry-icon {
  background: #0f8fb8;
}

.dashboard-page.ai-studio-page .ai-studio-entry-card--creations .ai-studio-entry-icon {
  background: #65758b;
}

@keyframes ai-welcome-credit-message-primary {
  0%, 43% {
    opacity: 1;
    transform: translateY(0);
  }
  50%, 93% {
    opacity: 0;
    transform: translateY(-3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-welcome-credit-message-secondary {
  0%, 43% {
    opacity: 0;
    transform: translateY(3px);
  }
  50%, 93% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* Keep the guest top bar focused on the free-start and sign-in actions. */
.dashboard-page:not(.portal-account-ready) .dashboard-upgrade-link {
  display: none !important;
}

@media (min-width: 961px) {
  .dashboard-page {
    --portal-topbar-height: 48px;
  }

  .dashboard-page .dashboard-shell {
    padding-top: calc(var(--portal-topbar-height) + 8px);
  }

  .dashboard-page.ai-studio-page .dashboard-shell,
  .dashboard-page.ai-effects-gallery-page .dashboard-shell,
  .dashboard-page.ai-tools-gallery-page .dashboard-shell,
  .dashboard-page.pricing-page .dashboard-shell,
  .dashboard-page.credits-page .dashboard-shell {
    padding-top: calc(var(--portal-topbar-height) + 24px);
  }

  .dashboard-page .dashboard-topbar__actions {
    border-bottom-color: transparent;
    transition: border-bottom-color 140ms ease;
  }

  .dashboard-page .dashboard-topbar__actions {
    padding-right: 18px;
    padding-left: 18px;
    gap: 14px;
  }

  /* Let the welcome offer sit directly on the top-bar background. */
  .dashboard-page .dashboard-welcome-credit-promo--featured,
  html[data-theme="dark"] .dashboard-page .dashboard-welcome-credit-promo--featured {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured:hover,
  html[data-theme="dark"] .dashboard-page .dashboard-welcome-credit-promo--featured:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: fit-content;
    max-width: min(440px, 100%);
    min-height: 34px;
    flex: 0 1 auto;
    margin-left: auto;
    padding: 0;
    transform: none;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    grid-template-areas: "gift copy cta";
    column-gap: 8px;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__gift {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy {
    position: relative;
    display: grid;
    width: max-content;
    max-width: 100%;
    height: 18px;
    min-width: 0;
    overflow: hidden;
    align-items: center;
    line-height: 18px;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy strong,
  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__benefits {
    display: block;
    grid-area: 1 / 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 18px;
    letter-spacing: -0.01em;
    will-change: opacity, transform;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy strong {
    animation: ai-welcome-credit-message-primary 8s ease-in-out infinite;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__benefits {
    animation: ai-welcome-credit-message-secondary 8s ease-in-out infinite;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__cta {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
  }

  .dashboard-page .dashboard-topbar__controls {
    gap: 10px;
  }

  .dashboard-page .dashboard-support-link,
  .dashboard-page .dashboard-theme-toggle {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .dashboard-page .dashboard-support-link__icon,
  .dashboard-page .dashboard-theme-toggle__icon {
    width: 20px;
    height: 20px;
  }

  .dashboard-page .dashboard-theme-toggle__svg {
    width: 18px;
    height: 18px;
  }

  .dashboard-page .dashboard-support-link + .dashboard-theme-toggle {
    margin-left: -4px;
  }

  .dashboard-page .dashboard-upgrade-link,
  .dashboard-page .dashboard-credit-badge {
    min-height: 32px;
    border-radius: 8px;
    font-size: 13px;
  }

  .dashboard-page .dashboard-upgrade-link {
    padding-right: 12px;
    padding-left: 12px;
    gap: 6px;
  }

  .dashboard-page .dashboard-login-link {
    min-height: 32px;
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
  }

  .dashboard-page .dashboard-login-link:hover,
  .dashboard-page .dashboard-login-link:focus-visible {
    border-color: var(--portal-accent-border);
    background: var(--portal-accent-soft-bg);
    color: var(--portal-accent);
  }

  .dashboard-page .dashboard-upgrade-link__icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .dashboard-page .dashboard-credit-badge__balance {
    min-height: 30px;
    padding-right: 6px;
    padding-left: 10px;
    gap: 6px;
  }

  .dashboard-page .dashboard-credit-badge__icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .dashboard-page .dashboard-credit-badge__plus {
    width: 28px;
    min-width: 28px;
    min-height: 30px;
  }

  .dashboard-page .dashboard-credit-badge__plus-icon {
    width: 14px;
    height: 14px;
    border-width: 1px;
    font-size: 11px;
  }

  .dashboard-page .account-button,
  .dashboard-page .account-button__avatar {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .dashboard-page .account-button__avatar {
    font-size: 12px;
  }

  .dashboard-page {
    --ai-sidebar-collapsed-width: 64px;
    --ai-sidebar-transition: 220ms cubic-bezier(0.22, 0.8, 0.25, 1);
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) {
    --portal-sidebar-width: var(--ai-sidebar-collapsed-width);
  }

  .dashboard-page:not(.portal-pricing-guest) .dashboard-brand--ai {
    padding-left: 24px;
  }

  .dashboard-page:not(.portal-pricing-guest) .dashboard-brand__ai-logo {
    width: 190px;
  }

  .dashboard-page .dashboard-topbar__left {
    position: relative;
  }

  .dashboard-page .dashboard-sidebar-collapse {
    box-sizing: border-box;
    position: absolute;
    top: 12px;
    right: 8px;
    z-index: 3;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--panel-bg);
    color: var(--muted);
    opacity: 0.45;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition:
      right var(--ai-sidebar-transition),
      border-color 140ms ease,
      background-color 140ms ease,
      color 140ms ease,
      opacity 140ms ease;
  }

  .dashboard-page.portal-pricing-guest .dashboard-sidebar-collapse {
    display: none;
  }

  .dashboard-page .dashboard-sidebar-collapse:hover {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink);
    opacity: 1;
  }

  .dashboard-page .dashboard-sidebar-collapse:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    opacity: 1;
  }

  .dashboard-page .dashboard-sidebar-collapse__icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--ai-sidebar-transition);
  }

  .dashboard-page .dashboard-topbar {
    transition: width var(--ai-sidebar-transition);
  }

  .dashboard-page .dashboard-topbar__actions {
    transition: left var(--ai-sidebar-transition), border-bottom-color 140ms ease;
  }

  .dashboard-page .dashboard-shell,
  .credits-page .dashboard-shell,
  .pricing-page .dashboard-shell,
  .portal-account-deletion-lock {
    transition: width var(--ai-sidebar-transition), margin-left var(--ai-sidebar-transition);
  }

  .dashboard-page:not(.portal-pricing-guest)::after,
  .ai-story-wizard-dock {
    transition: left var(--ai-sidebar-transition);
  }

  .dashboard-page .dashboard-brand {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 130ms ease 70ms, transform var(--ai-sidebar-transition);
  }

  .dashboard-page .dashboard-nav {
    transition: padding-right var(--ai-sidebar-transition), padding-left var(--ai-sidebar-transition);
  }

  .dashboard-page .dashboard-nav__group > .dashboard-navlink,
  .dashboard-page .dashboard-nav-sublink,
  .dashboard-page .dashboard-nav-referral {
    transition:
      width var(--ai-sidebar-transition),
      margin var(--ai-sidebar-transition),
      padding var(--ai-sidebar-transition),
      gap var(--ai-sidebar-transition),
      color 140ms ease,
      background-color 140ms ease,
      border-color 140ms ease;
  }

  .dashboard-page .dashboard-nav__group > .dashboard-navlink .dashboard-navlink__label,
  .dashboard-page .dashboard-nav-sublink > span,
  .dashboard-page .dashboard-nav-referral__copy {
    max-width: 190px;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    transition:
      max-width var(--ai-sidebar-transition),
      opacity 120ms ease 70ms,
      transform var(--ai-sidebar-transition);
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-sidebar-collapse {
    right: 18px;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-sidebar-collapse__icon {
    transform: rotate(180deg);
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-brand {
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
    transition-delay: 0s;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav {
    padding-right: 12px;
    padding-left: 12px;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav__group {
    scrollbar-width: none;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav__group::-webkit-scrollbar {
    display: none;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav__group > .dashboard-navlink,
  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-sublink {
    width: 40px;
    min-width: 40px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
    gap: 0;
    justify-content: center;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav__group > .dashboard-navlink .dashboard-navlink__label,
  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-sublink > span,
  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral__copy {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    transition-delay: 0s;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    max-height: 40px;
    flex: 0 0 40px;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    gap: 0;
    justify-content: center;
    overflow: hidden;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 10px;
  }


  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral:hover {
    background: var(--portal-accent-soft-bg);
  }
  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral__icon {
    flex: 0 0 auto;
  }

  html[data-theme="dark"] .dashboard-page .dashboard-topbar__actions {
    border-bottom-color: transparent;
  }

  html[data-theme="dark"] .dashboard-page.portal-topbar-scrolled .dashboard-topbar__actions {
    border-bottom-color: var(--line);
  }

  .dashboard-page.portal-topbar-scrolled .dashboard-topbar__actions {
    border-bottom-color: var(--line);
  }

  .dashboard-page .dashboard-nav {
    overflow-y: hidden;
  }

  .dashboard-page .dashboard-nav__group {
    min-height: 0;
    flex: 0 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--portal-accent-rgb), 0.32) transparent;
  }

  .dashboard-page .dashboard-nav__group::-webkit-scrollbar {
    width: 5px;
  }

  .dashboard-page .dashboard-nav__group::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(var(--portal-accent-rgb), 0.32);
  }

  .dashboard-page .dashboard-nav .dashboard-nav-referral {
    flex: 0 0 auto;
  }
}

/* AI sidebar referral card: quiet reward treatment (concept A). */
.dashboard-page .dashboard-nav .dashboard-nav-referral {
  min-height: 62px;
  margin: 14px 0 8px;
  padding: 11px 9px;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--portal-accent) 14%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--panel-bg) 92%, var(--portal-accent) 8%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: width var(--ai-sidebar-transition), margin var(--ai-sidebar-transition), padding var(--ai-sidebar-transition), gap var(--ai-sidebar-transition), transform 160ms ease, color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 160ms ease;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--portal-accent) 36%, var(--line));
  background: color-mix(in srgb, var(--panel-bg) 87%, var(--portal-accent) 13%);
  box-shadow: 0 8px 22px rgba(23, 19, 47, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__icon {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(145deg, #9569ff 0%, #6f55ee 100%);
  color: #fff;
  box-shadow: 0 5px 14px rgba(111, 85, 238, 0.24);
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy {
  flex: 1 1 auto;
  min-width: 0;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__copy strong,
.dashboard-page .dashboard-nav .dashboard-nav-referral__copy span {
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__arrow {
  display: grid;
  place-items: center;
  width: 14px;
  min-width: 14px;
  height: 22px;
  color: var(--muted);
  opacity: 0.58;
  transition: color 140ms ease, opacity 140ms ease, transform 160ms ease;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral__arrow svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-page .dashboard-nav .dashboard-nav-referral:hover .dashboard-nav-referral__arrow {
  color: var(--portal-accent);
  opacity: 1;
  transform: translateX(2px);
}

html[data-theme="dark"] .dashboard-page .dashboard-nav .dashboard-nav-referral {
  background: color-mix(in srgb, var(--panel-bg) 88%, var(--portal-accent) 12%);
}

@media (min-width: 961px) {
  .dashboard-page .dashboard-nav .dashboard-nav-referral {
    margin-top: auto;
  }

  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral__arrow { display: none; }
  html[data-ai-sidebar-collapsed="true"] .dashboard-page:not(.portal-pricing-guest) .dashboard-nav-referral:hover { transform: none; box-shadow: none; }
}

@media (max-width: 960px) {
  .dashboard-page.ai-studio-page .dashboard-shell,
  .dashboard-page.ai-effects-gallery-page .dashboard-shell,
  .dashboard-page.ai-tools-gallery-page .dashboard-shell,
  .dashboard-page.pricing-page .dashboard-shell,
  .dashboard-page.credits-page .dashboard-shell {
    padding-top: 24px;
  }
}

@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__copy strong {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .dashboard-page .dashboard-welcome-credit-promo--featured .dashboard-welcome-credit-promo__benefits {
    display: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-page .dashboard-topbar,
  .dashboard-page .dashboard-topbar__actions,
  .dashboard-page .dashboard-shell,
  .dashboard-page .dashboard-brand,
  .dashboard-page .dashboard-nav,
  .dashboard-page .dashboard-sidebar-collapse,
  .dashboard-page .dashboard-sidebar-collapse__icon,
  .dashboard-page .dashboard-nav__group > .dashboard-navlink,
  .dashboard-page .dashboard-nav-sublink,
  .dashboard-page .dashboard-nav-referral,
  .ai-sidebar-tooltip {
    transition-duration: 0.01ms !important;
  }
}

/* Let a resized prompt grow its grid row, then cap it and scroll inside it. */
.dashboard-page #portal-page-ai-video .ai-tools-prompt-field > .ai-tools-prompt-body.is-open {
  max-height: none;
  overflow: hidden;
}

html[data-portal-site="ai"].ai-auth-page {
  overflow-y: auto;
  scrollbar-gutter: auto;
}

/* AI auth light theme: use opaque neutral surfaces so the dark split backdrop cannot show through. */
html[data-portal-site="ai"][data-theme="light"].ai-auth-page {
  --ai-auth-light-bg: #f7f8fa;
  --ai-auth-light-surface: #ffffff;
  --ai-auth-light-border: #d9dee7;
}

html[data-portal-site="ai"][data-theme="light"] .split-auth-page,
html[data-portal-site="ai"][data-theme="light"] .split-auth,
html[data-portal-site="ai"][data-theme="light"] .auth-form-side {
  background: var(--ai-auth-light-bg);
  color: var(--ink);
}

html[data-portal-site="ai"][data-theme="light"] .auth-divider span {
  background: var(--ai-auth-light-bg);
}

html[data-portal-site="ai"][data-theme="light"] .auth-divider::before {
  border-top-color: var(--ai-auth-light-border);
}

html[data-portal-site="ai"][data-theme="light"] .locale-switcher__trigger,
html[data-portal-site="ai"][data-theme="light"] .locale-switcher__menu,
html[data-portal-site="ai"][data-theme="light"] .auth-input,
html[data-portal-site="ai"][data-theme="light"] .signup-code-digit,
html[data-portal-site="ai"][data-theme="light"] .provider-button {
  border-color: var(--ai-auth-light-border);
  background: var(--ai-auth-light-surface);
}

html[data-portal-site="ai"][data-theme="light"] .auth-input::placeholder {
  color: #8d98a8;
}

html[data-portal-site="ai"][data-theme="light"] .auth-input:focus,
html[data-portal-site="ai"][data-theme="light"] .signup-code-digit:focus {
  border-color: #8b5cf6;
  background: var(--ai-auth-light-surface);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14);
}

html[data-portal-site="ai"][data-theme="light"] .provider-button:hover:not(:disabled) {
  border-color: #c2cad6;
  background: var(--ai-auth-light-surface);
}

html[data-portal-site="ai"][data-theme="light"] .primary-auth-button {
  background: #3e506a;
  color: #ffffff;
}

html[data-portal-site="ai"][data-theme="light"] .primary-auth-button:hover:not(:disabled) {
  background: #33445c;
}
/* AI auth uses the site's dark default while still honoring an explicitly saved light theme. */
html[data-portal-site="ai"][data-theme="dark"] .split-auth-page,
html[data-portal-site="ai"][data-theme="dark"] .split-auth,
html[data-portal-site="ai"][data-theme="dark"] .auth-form-side {
  background: #121316;
  color: var(--ink);
}

html[data-portal-site="ai"][data-theme="dark"] .auth-form-side {
  background:
    radial-gradient(ellipse at 0% 48%, rgba(124, 58, 237, 0.06), transparent 50%),
    radial-gradient(circle at 70% 28%, rgba(139, 92, 246, 0.025), transparent 34%),
    linear-gradient(135deg, #141519 0%, #111216 58%, #101115 100%);
}

html[data-portal-site="ai"][data-theme="dark"] .auth-divider span {
  background: #121316;
}

html[data-portal-site="ai"][data-theme="dark"] .locale-switcher__trigger,
html[data-portal-site="ai"][data-theme="dark"] .locale-switcher__menu,
html[data-portal-site="ai"][data-theme="dark"] .auth-input,
html[data-portal-site="ai"][data-theme="dark"] .signup-code-digit,
html[data-portal-site="ai"][data-theme="dark"] .provider-button {
  border-color: var(--line-strong);
  background: #1b1c20;
  color: var(--ink);
}

html[data-portal-site="ai"][data-theme="dark"] .auth-input:focus,
html[data-portal-site="ai"][data-theme="dark"] .signup-code-digit:focus {
  border-color: var(--portal-accent);
  background: #24252a;
}

html[data-portal-site="ai"][data-theme="dark"] .provider-button--google,
html[data-portal-site="ai"][data-theme="dark"] .provider-button--apple,
html[data-portal-site="ai"][data-theme="dark"] .provider-button--microsoft {
  color: var(--ink);
}

html[data-portal-site="ai"][data-theme="dark"] .provider-button__icon--apple {
  color: var(--ink);
}

html[data-portal-site="ai"][data-theme="dark"] .locale-switcher__button:hover,
html[data-portal-site="ai"][data-theme="dark"] .locale-switcher__button:focus-visible {
  background: rgba(139, 92, 246, 0.12);
  color: #ede9fe;
}

html[data-portal-site="ai"][data-theme="dark"] .locale-switcher__button.is-active {
  background: rgba(139, 92, 246, 0.24);
  color: #ddd6fe;
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.28);
}

html[data-portal-site="ai"][data-theme="dark"] .primary-auth-button {
  background: var(--primary-cta);
}

/* AI app sign-in: keep the transition calm and consistent with the violet AI Studio brand. */
html[data-portal-site="ai"] .app-login-panel .status-pill[data-state="loading"] {
  display: inline-flex;
  gap: 10px;
  min-height: 32px;
  margin: 18px 0 22px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #c9a7ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

html[data-portal-site="ai"] .app-login-panel .status-pill[data-state="loading"]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  box-sizing: border-box;
  border: 2px solid rgba(201, 167, 255, 0.28);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: app-login-ai-spin 0.8s linear infinite;
}

html[data-portal-site="ai"][data-theme="light"] .app-login-panel .status-pill[data-state="loading"] {
  color: #7c3aed;
}

html[data-portal-site="ai"][data-theme="light"] .app-login-panel .status-pill[data-state="loading"]::before {
  border-color: rgba(124, 58, 237, 0.22);
  border-top-color: #7c3aed;
}

@keyframes app-login-ai-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-portal-site="ai"] .app-login-panel .status-pill[data-state="loading"]::before {
    animation-duration: 1.6s;
  }
}

/* AI auth concept A: full-bleed sequential video playlist, isolated from My Bandicam. */
@media (min-width: 1101px) {
  html[data-portal-site="ai"] .split-auth {
    grid-template-columns: minmax(560px, 1.08fr) minmax(520px, 0.92fr);
    background: #0b0d14;
  }

  html[data-portal-site="ai"] .auth-showcase--ai-cinematic {
    isolation: isolate;
    border-right: 0;
    background: #090b12;
  }

  html[data-portal-site="ai"] .auth-showcase__video-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
  }

  html[data-portal-site="ai"] .auth-showcase__video-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(5, 7, 12, 0.08) 0%, transparent 48%, rgba(5, 7, 12, 0.36) 100%),
      linear-gradient(
        90deg,
        rgba(5, 7, 12, 0.12) 0%,
        transparent 30%,
        transparent calc(100% - 96px),
        rgba(18, 19, 22, 0.04) calc(100% - 72px),
        rgba(18, 19, 22, 0.14) calc(100% - 40px),
        rgba(18, 19, 22, 0.34) 100%
      );
    pointer-events: none;
  }

  html[data-portal-site="ai"] .auth-showcase__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #090b12;
  }

  html[data-portal-site="ai"] .auth-showcase--ai-cinematic .auth-showcase-home-link {
    z-index: 6;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(8, 10, 18, 0.62);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
  }

  html[data-portal-site="ai"] .auth-showcase--ai-cinematic .auth-showcase-home-link:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(18, 20, 32, 0.82);
    color: #fff;
  }

  html[data-portal-site="ai"] .auth-form-side {
    position: relative;
    z-index: 5;
    box-shadow: none;
  }
}

.dashboard-page #portal-page-ai-video .ai-tools-prompt-field > .ai-tools-prompt-body > .ai-video-prompt-editor {
  max-height: 360px;
  max-height: min(360px, 45dvh);
}

.dashboard-page.ai-studio-page .ai-studio-shell,
.dashboard-page.ai-studio-page .ai-studio-promo-grid,
.dashboard-page.ai-studio-page .ai-studio-promo-card {
  min-width: 0;
}

.dashboard-page.ai-studio-page .ai-studio-promo-grid {
  container-type: inline-size;
}

/* Keep narrow cards inside their grid tracks; only their centered video is cropped. */
.dashboard-page.ai-studio-page .ai-studio-promo-card {
  width: 100%;
  max-width: 100%;
  height: 250px;
  height: max(250px, calc(18.75cqw - 6.75px));
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  container-type: inline-size;
}

.dashboard-page.ai-studio-page .ai-studio-promo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.dashboard-page.ai-studio-page .ai-studio-tool-section,
html[data-theme="dark"] .dashboard-page.ai-studio-page .ai-studio-tool-section {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-page.ai-studio-page .ai-studio-tool-grid > [data-ai-product-category="tool"] {
  order: 1;
}

.dashboard-page.ai-studio-page .ai-studio-tool-grid > [data-ai-product-category="effect"] {
  order: 3;
}

.dashboard-page.ai-studio-page .ai-studio-promo-content {
  left: clamp(12px, 5cqw, 24px);
  right: clamp(12px, 5cqw, 24px);
  bottom: clamp(12px, 4cqw, 20px);
  gap: clamp(4px, 1.5cqw, 7px);
}

.dashboard-page.ai-studio-page .ai-studio-promo-content span {
  padding: clamp(4px, 1.4cqw, 5px) clamp(6px, 2cqw, 8px);
  font-size: clamp(10px, 3.2cqw, 12px);
}

.dashboard-page.ai-studio-page .ai-studio-promo-content strong {
  width: 100%;
  max-width: 100%;
  font-size: clamp(17px, 4.3cqw, 30px);
  line-height: 1.1;
  overflow-wrap: normal;
  white-space: nowrap;
  text-wrap: nowrap;
  letter-spacing: -0.03em;
}

.dashboard-page.ai-studio-page .ai-studio-promo-content small {
  width: 100%;
  max-width: 100%;
  font-size: clamp(11px, 3.5cqw, 14px);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .dashboard-page.ai-studio-page .ai-studio-promo-card {
    height: 218px;
  }
}