.studio-page {
  --studio-paper: #ffffff;
  --studio-ink: #222d29;
  --studio-muted: #647069;
  --studio-rule: #e5e7eb;
  --studio-green: #245b47;
  --studio-accent-soft: #e8f3ee;
  --studio-accent-hover: #dcece3;
  --studio-surface: #ffffff;
  --studio-wash: #f3f4f6;
  background: var(--studio-paper);
  color: var(--studio-ink);
  font-family: var(--font-sans);
  accent-color: var(--studio-green);
}

.studio-page #project-sidebar {
  background: var(--studio-surface);
  border-color: var(--studio-rule);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.studio-page #project-sidebar nav[aria-label="Разделы проекта"] > a { font-weight: 600; }

.studio-page > header {
  background: #fffffff5;
  border-color: var(--studio-rule);
}

.studio-page main > .max-w-6xl {
  max-width: 1240px;
}

.studio-page :is(button, a, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--studio-green);
  outline-offset: 3px;
}

.studio-skip-link {
  position: fixed;
  z-index: 60;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  transform: translateY(-160%);
  background: var(--studio-green);
  color: white;
  border-radius: 4px;
}

.studio-skip-link:focus { transform: translateY(0); }
.studio-mobile-project { display: none; }
.studio-content { min-width: 0; }
.studio-content :where(h1, h2, h3, p, dt, dd, legend) { overflow-wrap: anywhere; }
.studio-content :where(h1):not(.studio-title) {
  font-family: inherit;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.035em;
  color: var(--studio-ink);
}

.studio-content > header:not(.studio-heading) {
  padding-top: 24px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--studio-ink);
}

.studio-content > header > div { min-width: 0; }
.studio-content > header :where(h1) { margin-top: 12px; }
.studio-content > header :where(p:first-child):not(:last-child) {
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--studio-muted);
}

.studio-content :where(h2) { letter-spacing: -.02em; }
.studio-content :where(textarea) { line-height: 1.75; }
.studio-content :where(input, select, textarea) { max-width: 100%; }
.studio-content :where(input:not([type="hidden"], [type="radio"], [type="checkbox"], [type="file"], [type="range"], [type="color"], .sr-only), select, textarea) {
  background-color: var(--studio-surface);
  border-radius: 5px;
}

.studio-page :where(button, a, summary) {
  -webkit-tap-highlight-color: transparent;
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 160ms;
}

.studio-page :where(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  cursor: not-allowed;
}

/* Explicit neutral utility tokens bridge existing templates and dynamically rendered panels.
   Status, warning, error, platform and chart colors are intentionally not remapped. */
.studio-page :where(.bg-white) { background-color: var(--studio-surface); }
.studio-page :where([class~="bg-[#f7faf8]"], [class~="bg-[#f8faf9]"], [class~="bg-[#fafcfb]"], [class~="bg-[#f3f7f5]"]) {
  background-color: var(--studio-paper);
}

.studio-page :where([class~="bg-[#edf3ef]"], [class~="bg-[#e8f0eb]"], [class~="bg-[#e9eeeb]"]) {
  background-color: var(--studio-wash);
}

.studio-page :where([class~="border-[#dfe7e2]"], [class~="border-[#dce5df]"], [class~="border-[#dce8e1]"], [class~="border-[#e7ede9]"], [class~="border-[#e3e9e5]"], [class~="border-[#d5dfd9]"]) {
  border-color: var(--studio-rule);
}

.studio-page :where([class~="divide-[#e7ede9]"]) > :not(:last-child) {
  border-color: var(--studio-rule);
}

.studio-page :where([class~="text-[#718078]"], [class~="text-[#6d7b73]"], [class~="text-[#66756d]"]) {
  color: var(--studio-muted);
}

.studio-page :where(.bg-white.border.rounded-lg, .bg-white.border.rounded-xl, .bg-white.border.rounded-2xl) {
  border-radius: 5px;
  box-shadow: none;
}

.studio-page :is(button, a, summary, input[type="submit"])[class~="bg-[#087553]"] {
  background-color: var(--studio-green);
  color: white;
  border-radius: 5px;
}

.studio-page :is(button, a, summary, input[type="submit"])[class~="bg-[#087553]"]:hover {
  background-color: #194633;
}

.studio-page :where(nav a[aria-current="page"], [role="tab"][aria-selected="true"]) {
  color: var(--studio-green);
  border-color: var(--studio-green);
}

.studio-page #project-sidebar a[class~="bg-[#d9efe2]"] {
  background-color: var(--studio-accent-soft);
  color: var(--studio-green);
}

.studio-page #project-sidebar :where(nav a) { min-height: 36px; }
.studio-page #project-sidebar :where(nav) { border-color: var(--studio-rule); }
.studio-page #project-sidebar a:hover { background-color: var(--studio-wash); }
.studio-page #project-sidebar a[class~="bg-[#d9efe2]"]:hover {
  background-color: var(--studio-accent-hover);
}
.studio-page :where([role="tablist"], .studio-scroll-region) {
  scrollbar-color: #9ca3af var(--studio-paper);
  scrollbar-width: thin;
}

.studio-scroll-region { overscroll-behavior-x: contain; }
.studio-content :where(table) { font-variant-numeric: tabular-nums; }
.studio-content :where(thead) { background-color: var(--studio-wash); }
.studio-content :where(th) { font-size: 11px; letter-spacing: .025em; }
.studio-content :where([data-analytics-stat]) { box-shadow: none; border-radius: 4px; }
.studio-content :where([data-stat-value]) { font-weight: 500; letter-spacing: -.04em; }
.studio-chart-legend { flex-basis: 9rem; }

.studio-page .studio-calendar {
  --calendar-rule: #d1d5db;
  border-color: var(--calendar-rule);
}

.studio-calendar :where(.studio-calendar-week, .studio-calendar-weekdays, .studio-calendar-day) {
  border-color: var(--calendar-rule);
}

.studio-calendar .studio-calendar-day {
  background-color: var(--studio-surface);
  color: var(--studio-ink);
}

.studio-calendar .studio-calendar-day[data-outside-month] {
  background-color: var(--studio-wash);
  color: #4b5563;
}

/* Keep the past-day hatch while separating its fill from the surrounding page. */
.studio-calendar .studio-calendar-day[data-past] {
  background-color: #d4d9e0;
  color: #4b5563;
}

.studio-calendar .studio-calendar-day[data-past][data-outside-month] {
  background-color: #c7ced7;
}

.studio-calendar .studio-calendar-day[data-today] {
  background-color: var(--studio-accent-soft);
  box-shadow: inset 0 0 0 2px var(--studio-green);
}

.studio-calendar [aria-current="date"] { background-color: var(--studio-green); }
.studio-calendar .studio-calendar-count { color: inherit; }

.studio-calendar-layout [data-event-kind] {
  --event-background: var(--studio-accent-soft);
  --event-hover: var(--studio-accent-hover);
  --event-border: #bdd8ca;
  --event-ink: var(--studio-green);
}

.studio-calendar-layout [data-event-kind^="announcement"] {
  --event-background: #eff6ff;
  --event-hover: #dbeafe;
  --event-border: #bfdbfe;
  --event-ink: #1e40af;
}

.studio-calendar-event {
  background-color: var(--event-background);
  border-color: var(--event-border);
}

.studio-calendar-event:hover { background-color: var(--event-hover); }
.studio-calendar-layout .studio-calendar-event-accent { color: var(--event-ink); }
.studio-calendar-event-icon {
  background-color: var(--event-background);
  color: var(--event-ink);
}
.studio-calendar-layout [data-calendar-agenda] a:hover strong { color: var(--event-ink); }

/* Mute the date surface, not the readable publication and announcement statuses. */
.studio-calendar [data-past] .studio-calendar-events {
  opacity: 1;
  filter: none;
}

.ai-field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.ai-language {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--studio-rule);
  border-radius: 6px;
  background: var(--studio-paper);
}

.ai-language label { position: relative; cursor: pointer; }
.ai-language label > span {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 5px 8px;
  border-radius: 3px;
  color: var(--studio-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 160ms, color 160ms;
}

.ai-language input:checked + span { background: var(--studio-green); color: white; }
.studio-page input.sr-only:focus-visible + span { outline: 2px solid var(--studio-green); outline-offset: 3px; }
.ai-language input:focus-visible + span { outline: 2px solid var(--studio-green); outline-offset: 2px; }
.ai-language input:disabled + span { opacity: .5; cursor: not-allowed; }
.ai-language input:not(:checked, :disabled) + span:hover { background: var(--studio-wash); }

.studio-page :where(button[aria-busy="true"]) {
  cursor: wait;
}

.studio-page button[aria-busy="true"] :is(svg, i):first-child {
  animation: studio-breathe 1.8s ease-in-out infinite;
}

.studio-stage-running {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}

.studio-pipeline-stage:has(.studio-stage-running) .studio-stage-icon {
  animation: studio-breathe 1.8s ease-in-out infinite;
}

@keyframes studio-breathe {
  50% { opacity: .4; }
}

@media (max-width: 639px) {
  .studio-mobile-project { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; font-size: 14px; font-weight: 600; }
  .studio-mobile-project:hover { background: var(--studio-wash); }
  .studio-content > header:not(.studio-heading) { padding-top: 12px; padding-bottom: 24px; }
  .studio-content > header :where(a, button) { max-width: 100%; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .studio-content > header.flex { flex-wrap: wrap; }
}

.studio-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--studio-ink);
}

.studio-eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
  gap: 12px;
  color: var(--studio-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.studio-eyebrow > span:not(.studio-edition-mark) {
  color: #92998e;
}

.studio-edition-mark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--studio-green);
  background: linear-gradient(90deg, transparent 40%, var(--studio-green) 40% 52%, transparent 52%);
}

.studio-title {
  margin-top: 18px;
  max-width: 23ch;
  overflow-wrap: anywhere;
  font-family: inherit;
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.035em;
}

.studio-subtitle {
  margin-top: 16px;
  color: var(--studio-muted);
  font-size: 13px;
  line-height: 1.8;
}

.studio-heading-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.studio-timezone, .studio-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--studio-muted);
}

.studio-primary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 6px;
  background: var(--studio-green);
  color: white;
  font-size: 13px;
  font-weight: 600;
}

.studio-primary:hover {
  background: #194633;
}

.studio-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-rule);
  padding: 24px 0;
}

.studio-stats > div {
  padding: 0 22px;
  border-left: 1px solid var(--studio-rule);
}

.studio-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.studio-stats > div > span {
  display: block;
  color: var(--studio-muted);
  font-size: 11px;
  line-height: 1.6;
}

.studio-stats strong {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.studio-stat-alert strong { color: #a43b2e; }
.studio-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #b48634; }

.studio-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 36px;
  margin-top: 40px;
}

.studio-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
}

.studio-section-heading h2 {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.035em;
}

.studio-text-link {
  min-height: 36px;
  color: var(--studio-green);
  font-weight: 600;
}

.studio-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.studio-publication-list { border-top: 1px solid var(--studio-rule); }

.studio-publication-row {
  display: grid;
  grid-template-columns: 22px 44px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  border-bottom: 1px solid var(--studio-rule);
  transition: background-color 160ms;
}

.studio-publication-row:hover { background: var(--studio-wash); }
.studio-row-number { font-size: 10px; color: var(--studio-muted); font-variant-numeric: tabular-nums; }
.studio-publication-type { display: grid; place-items: center; height: 52px; border: 1px solid var(--studio-rule); background: var(--studio-wash); color: var(--studio-green); }
.studio-publication-type[data-publication-type="social_post"] { background: #eee8dd; color: #796343; }
.studio-publication-title { display: block; overflow-wrap: anywhere; font-size: 14px; font-weight: 600; line-height: 1.6; }
.studio-publication-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; font-size: 10px; color: var(--studio-muted); }
.studio-platforms { display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 100px; }
.studio-row-arrow { color: var(--studio-muted); }

.studio-desk-note {
  align-self: start;
  padding: 24px;
  background: #263f34;
  color: #f5f3e9;
  border-radius: 3px 3px 24px 3px;
}

.studio-desk-note .studio-eyebrow { color: #c5d0b5; margin-bottom: 32px; }
.studio-desk-note > svg { color: #c8d6ac; }
.studio-desk-note h2 { margin-top: 18px; font: 600 27px/1.18 var(--font-sans); letter-spacing: -.025em; }
.studio-desk-note > p:not(.studio-eyebrow) { margin-top: 18px; color: #d0d8cd; font-size: 12px; line-height: 1.9; }
.studio-desk-note > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 28px; border-top: 1px solid #5a6b5c; padding-top: 18px; font-size: 12px; }
.studio-desk-note > a:hover { text-decoration: underline; }
.studio-desk-note a:focus-visible { outline-color: #d3e1bb; }

.studio-connections, .studio-project-info { margin-top: 44px; }
.studio-connections > .divide-y { border-top: 1px solid var(--studio-rule); border-bottom: 1px solid var(--studio-rule); }
.studio-connections > .divide-y > div { padding-left: 0; padding-right: 0; }
.studio-project-info > dl { border-top: 1px solid var(--studio-rule); background: var(--studio-rule); }
.studio-project-info > dl > div { background: var(--studio-paper); }
.studio-project-info { margin-bottom: 24px; }

html:has(> body:is(.studio-publication, .studio-project)) { scrollbar-gutter: stable; }
.studio-project-heading { display: block; }
.studio-project-heading .studio-title { max-width: none; min-height: 1.12em; font-size: clamp(32px, 3.4vw, 48px); }
.studio-project-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.studio-project-description { flex: 1 1 22rem; min-width: 0; max-width: 46rem; color: var(--studio-muted); font-size: 13px; line-height: 1.8; }
.studio-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
.studio-project-actions:empty { display: none; }
.studio-project-content { display: flow-root; min-width: 0; }
@media (max-width: 639px) {
  .studio-project-heading .studio-title { min-height: 2.24em; }
}
.studio-publication .studio-title { max-width: 30ch; font-size: clamp(30px, 3vw, 44px); }
.studio-publication nav[aria-label="Разделы публикации"] { margin-top: 8px; }
.studio-publication nav[aria-label="Разделы публикации"] > a { font-weight: 600; }
.studio-materials #thumbnail-workspace { margin: 32px 0; }
.studio-materials #thumbnail-reference-title { font: 600 28px/1.2 var(--font-sans); }
.studio-materials [data-image-model] { min-width: 0; overflow-wrap: anywhere; }
.studio-materials .studio-cover-grid { max-width: none; gap: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.studio-materials [data-reference-dropzone] { background: var(--studio-wash); border-color: var(--studio-rule); border-radius: 2px; }
.studio-materials .studio-saved-cover > .aspect-video { border-radius: 2px; background: var(--studio-wash); border: 0; }
.reference-preview.has-history { padding-right: 80px; }
.reference-history { scrollbar-width: thin; }
.studio-materials [data-thumbnail-results] { margin-top: 24px; }
.studio-materials [data-thumbnail-options] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.studio-materials [data-thumbnail-choice].hidden,
.studio-materials [data-thumbnail-delete-ui].hidden { display: none; }
.studio-preview-copy { padding: 16px 0 8px; }
.studio-preview-copy h3 { margin-top: 8px; font-size: 20px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.studio-preview-copy p:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--studio-muted); font-size: 12px; line-height: 1.8; margin-top: 10px; }
.studio-materials #publication-metadata { padding: 28px; background: var(--studio-surface); border-color: var(--studio-rule); border-radius: 3px; box-shadow: none; }
.studio-materials #publication-metadata > div:first-of-type h2 { font: 600 28px/1.2 var(--font-sans); }
.studio-materials #publication-metadata :is(textarea, input:not([type="hidden"], [type="checkbox"], [type="radio"])) { background: var(--studio-surface); border-color: var(--studio-rule); }
.studio-materials #publication-metadata textarea { line-height: 1.85; }
.studio-save-bar { padding: 16px 0 0; border-top: 1px solid var(--studio-rule); }

.studio-ai-feedback {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 44px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d4ddd0;
  border-radius: 4px;
  background: #edf2e8;
  color: #335542;
  font-size: 12px;
  line-height: 1.6;
}

.studio-ai-feedback[hidden], .studio-ai-feedback.hidden { display: none; }
.studio-ai-feedback[data-state="failed"], .studio-ai-feedback[data-state="unknown"] { color: #843e28; background: #fbf2e8; border-color: #e6d2bc; }
.studio-ai-feedback button { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
.studio-ai-feedback time { margin-left: auto; font-variant-numeric: tabular-nums; }
.studio-ai-feedback[aria-busy="true"]::after,
.studio-stage-running[aria-busy="true"]::after,
.studio-materials [data-generation-progress][aria-busy="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 35%;
  background: #567b4d;
  animation: studio-working 2.4s ease-in-out infinite;
}

.studio-materials [data-generation-progress] { position: relative; overflow: hidden; padding: 12px 0; }
.studio-result-enter { animation: studio-result 400ms ease-out; }
.studio-ai-field[aria-busy="true"] { box-shadow: -3px 0 0 #638256; }

@keyframes studio-working {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(390%); }
}

@keyframes studio-result {
  from { opacity: .5; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1199px) {
  .studio-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .studio-desk-note { padding: 24px; }
  .studio-desk-note .studio-eyebrow { margin-bottom: 16px; }
}

@media (max-width: 767px) {
  .studio-heading { align-items: flex-start; flex-direction: column; padding-top: 16px; gap: 20px; }
  .studio-heading-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }
  .studio-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
  .studio-stats > div { padding: 0 10px; }
  .studio-stats > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .studio-stats strong { font-size: 27px; }
  .studio-overview-grid { margin-top: 28px; }
  .studio-publication-row { grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; }
  .studio-row-number, .studio-platforms { display: none; }
  .studio-publication-type { height: 44px; }
  .studio-section-heading h2 { font-size: 17px; }
  .studio-materials .studio-cover-grid { grid-template-columns: minmax(0, 1fr); }
  .studio-materials [data-thumbnail-options] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-materials #publication-metadata { padding: 16px; }
  .studio-save-bar { position: static; box-shadow: none; padding: 0; border: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-page *, .studio-page *::before, .studio-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .studio-ai-feedback[aria-busy="true"]::after,
  .studio-stage-running[aria-busy="true"]::after,
  .studio-materials [data-generation-progress][aria-busy="true"]::after { width: 100%; opacity: .6; }
}
