/* +more savvy Studio. Shared with the customer app's supplied sRGB palette.
   Bright swatches decorate; deeper steps keep text and controls readable. */
:root {
  --brand-charcoal: #191919;
  --brand-charcoal-800: #393939;
  --brand-charcoal-700: #5b5b5b;
  --brand-grey: #888888;
  --brand-line-strong: #b6b6b6;
  --brand-line: #dededc;
  --brand-off-white: #ededeb;
  --brand-canvas: #fafafa;
  --brand-white: #ffffff;
  --brand-green-900: #044312;
  --brand-green-600: #068627;
  --brand-green: #0dae32;
  --brand-green-300: #60d56b;
  --brand-green-100: #96ee96;
  --brand-green-50: #dcfadd;
  --brand-blue-950: #01314c;
  --brand-blue-700: #0660a5;
  --brand-blue: #0080f7;
  --brand-blue-400: #2da3ed;
  --brand-blue-200: #92d6f4;
  --brand-blue-50: #e4f5fc;
  --brand-violet-950: #26265f;
  --brand-violet-700: #4745ba;
  --brand-violet: #765aff;
  --brand-violet-400: #a99fff;
  --brand-violet-200: #cdcdff;
  --brand-violet-50: #f0f0ff;
  --brand-magenta-800: #860c72;
  --brand-magenta-600: #d20b98;
  --brand-magenta: #f70fad;
  --brand-magenta-400: #fc7be1;
  --brand-magenta-200: #fbbaff;
  --brand-magenta-50: #ffecfd;
  --brand-spectrum: linear-gradient(90deg, var(--brand-green) 0% 25%, var(--brand-blue) 25% 50%, var(--brand-violet) 50% 75%, var(--brand-magenta) 75% 100%);
  --cms-accent-500: var(--brand-violet-700);
  --cms-accent-600: var(--brand-violet-700);
  --cms-accent-700: var(--brand-violet-700);
  --cms-accent-800: var(--brand-violet-950);
  --cms-accent-900: var(--brand-violet-950);
  --surface-hover: var(--brand-violet-50);
  --surface-selected: var(--brand-violet-50);
  --surface-attention: var(--brand-blue-50);
  --border-selected: var(--brand-violet-700);
  --focus-light: var(--brand-violet-700);
  --focus-dark: var(--brand-violet-400);
  --focus-ring: var(--brand-violet-700);
  --success-700: var(--brand-green-900);
  --success-bg: var(--brand-green-50);
  --warning-700: var(--brand-violet-950);
  --warning-bg: var(--brand-violet-50);
  --danger-700: var(--brand-magenta-800);
  --danger-bg: var(--brand-magenta-50);
  --violet-bg: var(--brand-violet-50);
  --coral-700: var(--brand-magenta-800);
  --coral-bg: var(--brand-magenta-50);
  --pulse-ink-500: var(--brand-charcoal-700);
  --pulse-ink-400: var(--brand-charcoal-700);
  --pulse-ink-750: var(--brand-charcoal-800);
  --pulse-ink-850: var(--brand-charcoal);
  --pulse-line-strong: var(--brand-line-strong);
  --pulse-accent: var(--brand-violet-700);
  --pulse-accent-dark: var(--brand-violet-950);
  --pulse-accent-bright: var(--brand-violet-400);
  --pulse-accent-strong: var(--brand-violet-700);
  --pulse-violet: var(--brand-violet);
  --pulse-coral: var(--brand-magenta);
  --pulse-amber: var(--brand-violet-700);
  --pulse-green: var(--brand-green-600);
  --pulse-red: var(--brand-magenta-800);
  --auth-accent: var(--brand-violet-700);
  --auth-accent-bright: var(--brand-violet-400);
}

/* The capsule asset clips only the exterior background of the original artwork. */
.savvy-logo { display: block; width: 210px; height: auto; max-width: 100%; flex: 0 1 auto; aspect-ratio: 2813 / 642; }
.savvy-logo-animated { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; }
.savvy-logo-animated .savvy-logo-art { display: block; width: 100%; height: auto; visibility: hidden; }
.savvy-logo-animated .savvy-logo-motion { position: absolute; inset: 0; display: block; width: 100%; height: 100%; fill: none; stroke: none; filter: none; }
.savvy-logo-motion mask { mask-type: luminance; }
/* Match the slower 7.2s / 5.6s rhythm of the customer landing-page hero. */
.savvy-toggle-thumb, .savvy-toggle-clip { animation: savvy-toggle-thumb 7.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.savvy-toggle-plus { transform-box: fill-box; transform-origin: center; animation: savvy-plus-spin 5.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes savvy-toggle-thumb {
  0%, 12%, 88%, 100% { x: 0px; width: 1662px; }
  42%, 58% { x: 1595px; width: 1218px; }
}
@keyframes savvy-plus-spin {
  0%, 10% { transform: rotate(0); }
  65%, 100% { transform: rotate(360deg); }
}
@keyframes savvy-brand-gradient {
  from { background-position: 200% 50%; }
  to { background-position: 0% 50%; }
}
.sidebar-brand { height: var(--pulse-topbar); min-height: var(--pulse-topbar); flex-shrink: 0; padding: 8px 22px; background: var(--brand-white); border-bottom: 0; }
.sidebar-brand .brand-copy { display: grid; width: 100%; justify-items: center; gap: 4px; }
.sidebar-brand .savvy-logo { width: 154px; }
.sidebar-brand .brand-copy small { color: var(--brand-blue-700); font-size: .45rem; letter-spacing: .09em; line-height: 1.2; }
.sidebar-brand .brand-mark-compact { display: none; border-radius: 0; }
.cms-app.nav-collapsed .brand-mark-compact { display: block; width: 38px; height: 38px; flex-basis: 38px; }
.cms-app.nav-collapsed .brand-copy { display: none; }
.cms-sidebar { background: var(--brand-charcoal); box-shadow: 8px 0 28px rgb(25 25 25 / 8%); }
.cms-sidebar::before { content: none; }
.cms-sidebar { --nav-accent: var(--brand-green-300); --nav-tint: rgb(13 174 50 / 18%); }
.cms-sidebar[data-selection-color="blue"] { --nav-accent: var(--brand-blue-400); --nav-tint: rgb(0 128 247 / 18%); }
.cms-sidebar[data-selection-color="violet"] { --nav-accent: var(--brand-violet-400); --nav-tint: rgb(118 90 255 / 19%); }
.cms-sidebar[data-selection-color="magenta"] { --nav-accent: var(--brand-magenta-400); --nav-tint: rgb(247 15 173 / 18%); }
.nav-group h2 { color: #a8a8a8; }
.nav-link { color: #d2d2d2; }
.nav-link.is-active, .sidebar-help.is-active { border-color: var(--nav-accent); background: var(--nav-tint); box-shadow: inset 3px 0 var(--nav-accent); }
.nav-link.is-active svg, .sidebar-help.is-active svg { color: var(--nav-accent); }
.sidebar-help { color: #c6c6c6; }
.sidebar-edge-toggle {
  background: var(--brand-violet-700);
  color: var(--brand-white);
}
.sidebar-edge-toggle:hover { background: var(--brand-violet-950); }
body.cms-body { background: var(--brand-canvas); }
.cms-topbar { background: rgb(255 255 255 / 96%); border-bottom: 0; }
.cms-topbar::after { content: none; }
/* One continuous divider keeps both headers aligned, including collapsed navigation. */
.cms-app::before { position: fixed; z-index: 90; inset: calc(var(--pulse-topbar) - 2px) 0 auto; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--brand-green), var(--brand-blue), var(--brand-violet), var(--brand-magenta), var(--brand-green)); background-size: 200% 100%; animation: savvy-brand-gradient 18s linear infinite; content: ""; }
.surface-kicker, .dialog-context { color: var(--brand-violet-700); }
.surface-heading.studio-page-heading { background: radial-gradient(ellipse at 90% 100%, rgb(118 90 255 / 16%), transparent 65%), var(--brand-charcoal); }
.surface-heading.studio-page-heading .surface-kicker { color: var(--brand-violet-200); }
.nav-link.is-active::before { background: var(--nav-accent); }
.button-primary { border-color: var(--brand-violet-700); background: var(--brand-violet-700); color: var(--brand-white); box-shadow: 0 4px 12px rgb(71 69 186 / 16%); }
.button-primary:hover:not(:disabled) { border-color: var(--brand-violet-950); background: var(--brand-violet-950); box-shadow: 0 6px 16px rgb(71 69 186 / 20%); }
.button-primary.is-danger { border-color: var(--brand-magenta-800); background: var(--brand-magenta-800); }
.button-primary.is-danger:hover:not(:disabled) { background: var(--brand-charcoal); border-color: var(--brand-charcoal); }
.button-secondary:hover:not(:disabled) { background: var(--brand-violet-50); }
.notification-badge { background: var(--brand-magenta-800); }
.global-search:focus-within { border-color: var(--brand-violet-700); box-shadow: 0 0 0 4px rgb(118 90 255 / 12%); }
input, select, textarea { accent-color: var(--brand-violet-700); }
::selection { background: var(--brand-violet-200); color: var(--brand-charcoal); }

/* Four distinct series and workflow accents, on neutral cards. */
.pipeline-rail > button { --metric-color: var(--brand-blue-700); --metric-paper: var(--brand-blue-50); border-top: 3px solid var(--metric-color); }
.pipeline-rail > button:nth-child(2) { --metric-color: var(--brand-magenta-800); --metric-paper: var(--brand-magenta-50); }
.pipeline-rail > button:nth-child(3) { --metric-color: var(--brand-violet-700); --metric-paper: var(--brand-violet-50); }
.pipeline-rail > button:nth-child(4) { --metric-color: var(--brand-green-600); --metric-paper: var(--brand-green-50); }
.pipeline-rail > button:nth-child(5) { --metric-color: var(--brand-charcoal); --metric-paper: var(--brand-off-white); }
.pipeline-rail > button .kpi-icon { color: var(--metric-color); background: var(--metric-paper); }
.pipeline-rail > button .kpi-sparkline { color: var(--metric-color); stroke: var(--metric-color); }
.content-type-card:nth-child(1) .content-type-icon { color: var(--brand-blue-700); background: var(--brand-blue-50); }
.content-type-card:nth-child(2) .content-type-icon { color: var(--brand-violet-700); background: var(--brand-violet-50); }
.content-type-card:nth-child(3) .content-type-icon { color: var(--brand-magenta-800); background: var(--brand-magenta-50); }
.content-type-header, .reminder-hero, .reward-hero { background: var(--brand-charcoal); }
.reward-hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 40px;
  background: var(--brand-white);
  border: 1px solid var(--brand-line);
}
.reward-hero[hidden] { display: none; }
.reward-hero::before { content: none; }
.reward-hero h2 { color: var(--brand-charcoal); overflow-wrap: anywhere; }
.reward-hero > div:first-child > p { color: var(--brand-charcoal-700); line-height: 1.65; }
.reward-hero-stats { flex-wrap: wrap; gap: 18px 28px; padding-top: 20px; border-top: 1px solid var(--brand-line); }
.reward-hero-stats span { color: var(--brand-charcoal-700); }
.reward-hero-stats strong { color: var(--brand-charcoal); }
.reward-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-width: 0;
  min-height: 225px;
  overflow: hidden;
  padding: 26px;
  border: 1px solid #484857;
  border-radius: 20px;
  background: linear-gradient(125deg, #292937, #191919 65%);
  box-shadow: 0 18px 32px rgb(25 25 25 / 18%), inset 0 1px rgb(255 255 255 / 16%);
  color: var(--brand-white);
}
.reward-card::after { position: absolute; width: 220px; height: 220px; right: -110px; top: -110px; border: 30px solid rgb(169 159 255 / 12%); border-radius: 50%; content: ""; pointer-events: none; }
.reward-card img { width: 175px; max-width: 80%; height: auto; }
.reward-card-value { display: grid; gap: 8px; }
.reward-card-value span { color: var(--brand-violet-200); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.reward-card-value strong { font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; }
.reward-card-footer { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 20%); font-size: .7rem; color: #d2d2d2; }
.reward-card-code { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .reward-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .reward-card { max-width: 360px; justify-self: center; }
}
@media (max-width: 540px) {
  .reward-hero { padding: 24px 20px; }
  .reward-hero-stats { display: grid; grid-template-columns: 1fr; }
  .reward-card { padding: 22px; }
}
.content-type-header .dialog-context { color: var(--brand-violet-200) !important; }
.content-type-header p:not(.dialog-context) { color: #d2d2d2; }
.application-error-card > .savvy-logo { width: 250px; height: auto; margin-bottom: 26px; }
.analytics-intelligence .analytics-heading { background: radial-gradient(ellipse at 100% 100%, rgb(118 90 255 / 22%), transparent 65%), var(--brand-charcoal); }
.analytics-intelligence .analytics-heading .surface-kicker,
.analytics-trend-panel .analytics-panel-heading .surface-kicker { color: var(--brand-blue-200); }
.analytics-briefing .surface-kicker, .analytics-reaction-panel .surface-kicker { color: var(--brand-violet-200); }
.analytics-kpi-primary small, .analytics-kpi-conversation small { color: rgb(255 255 255 / 85%); }
.analytics-kpi-primary[data-tone="rising"] small, .analytics-kpi-conversation[data-tone="rising"] small { color: var(--brand-green-100); }
.analytics-kpi-primary[data-tone="declining"] small, .analytics-kpi-conversation[data-tone="declining"] small { color: var(--brand-magenta-50); }
.analytics-trend-panel .analytics-chart-legend { color: #d2d2d2; }
.analytics-trend-panel .analytics-metric-switch button { color: #d2d2d2; }

/* Staff sign-in and account recovery. */
html:has(.auth-body), body.auth-body { background: var(--brand-charcoal); }
.auth-brand, .error-brand { background: radial-gradient(ellipse at 95% 100%, rgb(118 90 255 / 15%), transparent 60%), var(--brand-charcoal); }
.auth-brand::before { border-color: rgb(169 159 255 / 20%); box-shadow: 0 0 0 64px rgb(118 90 255 / 4%), 0 0 0 128px rgb(247 15 173 / 3%); }
.auth-brand::after { inset: 0 0 auto; width: auto; height: 5px; border-radius: 0; background: linear-gradient(90deg, var(--brand-green), var(--brand-blue), var(--brand-violet), var(--brand-magenta), var(--brand-green)); background-size: 200% 100%; box-shadow: none; animation: savvy-brand-gradient 18s linear infinite; }
.auth-masthead { align-items: flex-start; flex-direction: column; gap: 14px; }
.auth-masthead .savvy-logo { width: clamp(230px, 27vw, 390px); }
.auth-login { --login-logo-width: clamp(280px, 32vw, 480px); }
.auth-login .auth-masthead { width: var(--login-logo-width); max-width: 100%; align-items: center; }
.auth-login .auth-masthead .savvy-logo { width: 100%; flex-shrink: 0; }
.auth-login .auth-masthead-copy { width: 100%; justify-content: center; text-align: center; }
.auth-masthead-copy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.auth-masthead-copy strong { font-size: .8rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.auth-masthead-copy span { padding-left: 14px; border-left: 1px solid var(--brand-charcoal-700); color: #c6c6c6; font-size: .57rem; letter-spacing: .1em; }
.auth-kicker { color: var(--brand-violet-200) !important; }
.auth-edition > p:last-child { color: #d2d2d2; }
.auth-proof > span { border-top: 2px solid var(--brand-blue); background: rgb(255 255 255 / 4%); }
.auth-proof > span:nth-child(2) { border-top-color: var(--brand-violet); }
.auth-proof > span:nth-child(3) { border-top-color: var(--brand-green); }
.auth-proof i { color: var(--brand-violet-200); }
.auth-proof small { color: #c6c6c6; }
.auth-card { background: var(--brand-white); }
.auth-card .button-primary { background: var(--brand-violet-700); border-color: var(--brand-violet-700); box-shadow: 0 4px 12px rgb(71 69 186 / 16%); }
.auth-card .button-primary:hover:not(:disabled) { background: var(--brand-violet-950); border-color: var(--brand-violet-950); }
.auth-body { --auth-serif: "Segoe UI Variable", "Aptos", "Segoe UI", system-ui, sans-serif; }
.auth-card input:focus { border-color: var(--brand-violet-700); box-shadow: 0 0 0 4px rgb(118 90 255 / 12%); }
.auth-card .dialog-context { color: var(--brand-violet-700); }
.auth-card .auth-security-note { border-color: var(--brand-blue-200); background: var(--brand-blue-50); }
.auth-security-note > span { border-color: var(--brand-blue-400); color: var(--brand-blue-700); background: var(--brand-white); }
.auth-security-note strong { color: var(--brand-blue-950); }
.auth-security-note small { color: var(--brand-blue-700); }
.auth-card .error-summary:not(:empty) { border-color: var(--brand-magenta-400); background: var(--brand-magenta-50); color: var(--brand-magenta-800); }
.auth-status { background: var(--brand-green-50); color: var(--brand-green-900); }

/* Legacy article colour keys remain stable for saved documents and the API. */
.editor-dialog .article-studio-shell { --studio-accent: var(--brand-violet-700); --studio-accent-dark: var(--brand-violet-950); --studio-accent-bright: var(--brand-violet); --studio-navy: var(--brand-charcoal); --studio-amber: var(--brand-magenta-800); --studio-paper: var(--brand-white); }
[data-article-accent="teal"], #article-rendered-canvas[data-article-accent="teal"] { --article-accent: var(--brand-blue-700); }
[data-article-accent="coral"], #article-rendered-canvas[data-article-accent="coral"] { --article-accent: var(--brand-magenta-800); }
[data-article-accent="gold"], #article-rendered-canvas[data-article-accent="gold"] { --article-accent: var(--brand-violet-700); }
[data-article-accent="navy"], #article-rendered-canvas[data-article-accent="navy"] { --article-accent: var(--brand-charcoal); }
.article-color--teal { color: var(--brand-blue-700) !important; }
.article-color--coral { color: var(--brand-magenta-800) !important; }
.article-color--gold { color: var(--brand-violet-700) !important; }
.article-color--navy { color: var(--brand-charcoal) !important; }
.article-writing-surface article[data-block-color="navy"] { color: var(--brand-charcoal); }
.article-writing-surface article[data-block-color="gold"] { color: var(--brand-violet-700); }
.article-colour-swatch[data-colour="navy"] { background: var(--brand-charcoal); }
.article-colour-swatch[data-colour="gold"] { background: var(--brand-violet-700); }
.article-render-callout--success { --article-accent: var(--brand-green-600); }

.navbar-brand { display: inline-flex; align-items: center; gap: 12px; }
.navbar-brand .savvy-logo { width: 180px; }
.navbar-brand > span { color: var(--brand-charcoal); font-size: .8rem; font-weight: 700; }

/* Video metadata has its own editor; the article canvas is never used here. */
.media-content-editor { width: min(900px, calc(100vw - 24px)); }
.media-content-editor .dialog-body { display: grid; gap: 20px; }
.media-content-fields { display: grid; gap: 18px; min-width: 0; padding: 0; border: 0; }
.media-content-preview { display: grid; justify-items: start; gap: 10px; }
#media-content-player { width: 100%; background: var(--brand-charcoal); border-radius: 12px; overflow: hidden; }
#media-content-player:empty { display: none; }
#media-content-player img, #media-content-player iframe { display: block; width: 100%; height: auto; max-height: 320px; aspect-ratio: 16 / 9; object-fit: contain; border: 0; }
.media-content-preview p, .media-content-workflow p { margin: 0; font-size: .8rem; line-height: 1.5; }
.media-content-workflow { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--brand-blue-50); color: var(--brand-blue-950); }
.media-card-actions .button { flex-basis: 80px; }
@media (max-width: 600px) {
  .media-content-editor { width: 100vw; max-height: 100dvh; margin: 0; border-radius: 0; }
  .media-content-editor .dialog-shell { height: 100dvh; min-height: 0; max-height: 100dvh; }
  .media-content-editor .form-grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .mobile-brand .savvy-logo { width: 145px; }
  .mobile-brand strong { color: var(--brand-charcoal-700); font-size: .65rem; }
}
@media (min-width: 901px) {
  .auth-login .auth-masthead { margin-top: clamp(24px, 5vh, 48px); }
  .auth-login .auth-edition { margin: clamp(40px, 8vh, 80px) 0 auto; padding: 0 0 40px; }
}
@media (max-width: 900px) {
  html:has(.auth-body) { height: auto; }
  body.auth-body { height: auto; min-height: 100dvh; overflow: visible; background: var(--brand-white); }
  .auth-shell { margin-inline: auto; }
  .auth-login .auth-masthead { margin-top: 8px; }
  .auth-login .auth-edition { margin: 32px 0 0; padding: 0 0 16px; }
}
@media (max-width: 600px) {
  .mobile-brand .savvy-logo { width: 118px; }
  .mobile-brand strong { display: none; }
  .auth-masthead .savvy-logo { width: min(260px, 100%); }
  .auth-login { --login-logo-width: 310px; }
  .auth-masthead-copy { gap: 10px; }
  .auth-masthead-copy span { padding-left: 10px; font-size: .5rem; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .auth-masthead .savvy-logo { width: 250px; }
  .auth-masthead { gap: 10px; }
  .auth-edition { margin-block: 32px; }
  .auth-shell { min-height: 100dvh; height: auto; }
  .auth-body { overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-brand::after, .cms-app::before, .savvy-logo-motion * { animation: none !important; }
  .savvy-logo-animated .savvy-logo-art { visibility: visible; }
  .savvy-logo-animated .savvy-logo-motion { display: none; }
}

/* Shared branded feedback for requests, confirmations and results. */
.cms-dialog.feedback-dialog { inset: 0; width: min(600px, calc(100vw - 32px)); height: fit-content; min-height: 0; max-height: calc(100dvh - 32px); margin: auto; overflow-y: auto; border: 1px solid var(--brand-line); border-radius: 24px; box-shadow: 0 28px 100px rgb(25 25 25 / 25%); }
.feedback-dialog .feedback-dialog-shell { height: auto; min-height: 0; max-height: none; }
.feedback-dialog::backdrop { background: rgb(25 25 25 / 48%); backdrop-filter: blur(5px); }
.feedback-brand { display: grid; justify-items: center; gap: 12px; padding: 28px 24px 23px; background: var(--brand-charcoal); border-top: 4px solid transparent; border-image: var(--brand-spectrum) 1; }
.feedback-brand .savvy-logo { width: min(250px, 80%); }
.feedback-brand > span:last-child { color: var(--brand-blue-200); font-size: .58rem; font-weight: 800; letter-spacing: .24em; }
.feedback-dialog .feedback-dialog-header { background: var(--brand-white); }
.feedback-dialog[data-feedback-type="loading"] .feedback-dialog-header { display: block; padding: 26px 28px 18px; text-align: center; }
.feedback-dialog[data-feedback-type="loading"] .feedback-dialog-symbol,
.feedback-dialog[data-feedback-type="loading"] .feedback-dialog-footer { display: none; }
.feedback-dialog[data-feedback-type="loading"] #feedback-dialog-message { display: none; }
.feedback-dialog[data-feedback-type="loading"] .dialog-context { color: var(--brand-blue-700); font-size: .6rem; letter-spacing: .12em; }
.feedback-dialog .feedback-dialog-progress { display: grid; gap: 14px; padding: 0 8px 6px; background: none; text-align: center; color: var(--brand-charcoal-700); }
.feedback-dialog .feedback-dialog-progress[hidden] { display: none; }
.feedback-dialog .feedback-dialog-progress > span { display: block; width: 100%; height: 5px; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-violet), var(--brand-magenta), var(--brand-green), var(--brand-blue)); background-size: 250% 100%; animation: savvy-brand-gradient 2s linear infinite; }
.feedback-dialog .feedback-dialog-progress p { font-size: .8rem; line-height: 1.6; font-weight: 500; }
.feedback-dialog .feedback-dialog-copy h2 { overflow-wrap: anywhere; }

/* Content thumbnails without an uploaded image share the Studio palette. */
.studio-content-sheet-image .studio-generated-art {
  --placeholder-accent: var(--brand-violet-700);
  --placeholder-tint: var(--brand-violet-50);
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 18px 20px;
  color: var(--brand-charcoal);
  background: linear-gradient(125deg, var(--brand-white), var(--placeholder-tint));
}
.studio-content-sheet.is-video .studio-generated-art { --placeholder-accent: var(--brand-blue-700); --placeholder-tint: var(--brand-blue-50); }
.studio-content-sheet.is-reel .studio-generated-art { --placeholder-accent: var(--brand-magenta-800); --placeholder-tint: var(--brand-magenta-50); }
.studio-content-sheet-image .studio-generated-art::before { inset: auto -28px -40px auto; width: 195px; height: 195px; border: 0; border-radius: 0; box-shadow: none; background: url('/images/brand/more-savvy-plus.svg') center / contain no-repeat; opacity: .12; transform: rotate(-12deg); }
.studio-content-sheet-image .studio-generated-art::after { inset: auto 0 0; width: 100%; height: 4px; background: var(--brand-spectrum); border-radius: 0; box-shadow: none; }
.studio-content-sheet-image .content-placeholder-brand { position: static; grid-column: 1 / -1; width: 125px; height: auto; max-height: none; object-fit: contain; }
.studio-content-sheet-image .studio-generated-art-label { grid-column: 1; grid-row: 3; align-self: center; color: var(--placeholder-accent); font-size: .64rem; letter-spacing: .14em; }
.studio-content-sheet-image .studio-generated-art-icon { grid-column: 1; grid-row: 2; width: 46px; height: 46px; padding: 10px; color: var(--placeholder-accent); background: var(--brand-white); border: 1px solid var(--brand-line); border-radius: 14px; box-shadow: 0 6px 14px rgb(25 25 25 / 4%); }
.studio-content-sheet-image .studio-generated-art > strong { grid-column: 2; grid-row: 3; align-self: center; max-width: none; color: var(--brand-charcoal-700); font-size: .58rem; font-weight: 500; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
  .feedback-dialog .feedback-dialog-progress > span { animation: none; }
}