/* Original YongsanCats brand system for web-v2 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Libre+Bodoni:wght@400;500&display=swap");

:root {
  color-scheme: light;
  --background: #fafafa;
  --background-deep: #f1f2f4;
  --background-soft: rgba(255, 200, 0, 0.16);
  --background-faint: #ffffff;
  --brand: #ffc800;
  --brand-soft: #ffe889;
  --brand-ink: #211a00;
  --surface: #ffffff;
  --surface-soft: #f7f7f7;
  --surface-muted: #f3f4f6;
  --surface-row: rgba(255, 255, 255, 0.74);
  --foreground: #172033;
  --muted-foreground: #64748b;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --accent: #0b69b7;
  --accent-strong: #1b65c6;
  --accent-care: #56cfae;
  --danger: #ff7a66;
  --border: #e5e7eb;
  --border-soft: rgba(229, 231, 235, 0.82);
  --border-strong: #d1d5db;
  --shadow: 0 20px 48px rgba(33, 33, 33, 0.1);
  --shadow-soft: 0 12px 30px rgba(33, 33, 33, 0.07);
  --shadow-card: 0 10px 24px rgba(33, 33, 33, 0.06);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --sidebar-width: clamp(248px, 20vw, 272px);
  --sidebar-rail-width: 74px;
  --content-max: 1180px;
  --body-font: var(--font-sans), "SUIT Variable", SUIT, "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font: var(--font-sans), "SUIT Variable", SUIT, "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html body:has(main.is-client-production-console) {
  background: #050506 !important;
}

html body:has(main.is-client-production-console) .site-main-admin-studio {
  background: #050506 !important;
}

main.is-client-production-console {
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 197, 94, 0.12), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(59, 130, 246, 0.1), transparent 30%),
    #050506 !important;
}

main.is-client-production-console .admin-studio-user-project-topbar.admin-studio-topbar.studio-minis-room-toolbar {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(12, 12, 13, 0.86) !important;
  color: #f8fafc !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(22px) saturate(120%);
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-heading,
main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-heading strong {
  color: rgba(248, 250, 252, 0.9) !important;
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-back-button {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(248, 250, 252, 0.9) !important;
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-search {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.065) !important;
  color: #f8fafc !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-search > svg {
  color: rgba(248, 250, 252, 0.48) !important;
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-search input,
main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-search.is-static span {
  color: #f8fafc !important;
}

main.is-client-production-console .admin-studio-user-project-topbar .studio-minis-room-search input::placeholder {
  color: rgba(248, 250, 252, 0.46) !important;
}

main.is-client-production-console .admin-studio-user-project-hero {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(125, 211, 252, 0.14), transparent 28%),
    radial-gradient(circle at 88% 28%, rgba(16, 185, 129, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(28, 30, 34, 0.98), rgba(8, 9, 11, 0.98)) !important;
}

main.is-client-production-console .admin-studio-user-project-hero h1 {
  overflow-wrap: anywhere;
}

main.is-client-production-console .admin-studio-user-project-stats div,
main.is-client-production-console .admin-studio-user-project-toggle,
main.is-client-production-console .admin-studio-user-project-stage-tabs a {
  color: rgba(248, 250, 252, 0.72) !important;
}

main.is-client-production-console .admin-studio-user-project-stage-tabs a.is-active {
  border-color: rgba(125, 211, 252, 0.24) !important;
  background: rgba(125, 211, 252, 0.12) !important;
  color: #f8fafc !important;
}

main.is-client-production-console .admin-studio-user-project-stage-tabs a strong {
  color: rgba(248, 250, 252, 0.9) !important;
}

main.is-client-production-console .admin-studio-user-project-stats .is-paid,
main.is-client-production-console .admin-studio-user-project-stats .is-production-ready {
  color: rgba(110, 231, 183, 0.9) !important;
}

main.is-client-production-console .admin-studio-user-project-storage.is-ready {
  border-color: rgba(45, 212, 191, 0.2) !important;
  background: rgba(20, 184, 166, 0.12) !important;
  color: rgba(153, 246, 228, 0.92) !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #ffc800;
  --background-deep: #e7ad00;
  --background-soft: rgba(255, 200, 0, 0.16);
  --background-faint: rgba(255, 200, 0, 0.11);
  --brand: #ffc800;
  --brand-soft: #ffe889;
  --brand-ink: #211a00;
  --surface: #171d1a;
  --surface-soft: #202823;
  --surface-muted: #1c241f;
  --surface-row: rgba(255, 255, 255, 0.07);
  --foreground: #f7f5ea;
  --muted-foreground: #b7b4a7;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --accent: #78b7ff;
  --accent-strong: #9fceff;
  --accent-care: #56cfae;
  --danger: #ff7a66;
  --border: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

.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;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--body-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.1), transparent 28%),
    #050506;
}

html[data-theme="dark"] body:has(.admin-studio-page) {
  background:
    radial-gradient(circle at 10% 0%, rgba(148, 163, 184, 0.1), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, 0.09), transparent 24%),
    linear-gradient(180deg, #0b1120 0%, #111827 52%, #0f172a 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

a[href],
button:not(:disabled),
select:not(:disabled),
summary,
label[for],
[role="button"]:not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
.site-overlay.is-open {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.68;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--foreground);
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

h3 {
  font-size: clamp(1.32rem, 2vw, 1.8rem);
  line-height: 1.12;
}

main {
  min-height: calc(100vh - 220px);
}

.container {
  width: min(var(--content-max), calc(100% - 32px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 100;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: white;
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.skip-link:focus-visible {
  top: 16px;
}

.stack,
.stack-tight,
.page-intro-support,
.hero-side-copy,
.section-header-copy,
.detail-stack,
.story-layout,
.timeline,
.field,
.empty-state,
.auth-card,
.content-card-body,
.sidebar-utility {
  display: grid;
}

.stack {
  gap: 24px;
}

.stack-tight {
  gap: 8px;
}

.section,
.hero-band,
.page-band,
.detail-band {
  padding: 34px 0;
}

.muted-section {
  background: rgba(255, 255, 255, 0.34);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.pawpi-page {
  --pawpi-bg: #f8fafc;
  --pawpi-panel: rgba(255, 255, 255, 0.92);
  --pawpi-panel-strong: #ffffff;
  --pawpi-ink: #172033;
  --pawpi-muted: #526071;
  --pawpi-soft: #e8eef5;
  --pawpi-line: rgba(15, 23, 42, 0.1);
  --pawpi-accent: #126a72;
  --pawpi-accent-soft: rgba(18, 106, 114, 0.1);
  --pawpi-chip: rgba(15, 23, 42, 0.06);
  min-height: calc(100vh - 220px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 252, 0.94)),
    var(--pawpi-bg);
  color: var(--pawpi-ink);
}

html[data-theme="dark"] body:has(.pawpi-page) {
  background: #08090b;
}

html[data-theme="dark"] .pawpi-page {
  --pawpi-bg: #08090b;
  --pawpi-panel: rgba(20, 24, 30, 0.9);
  --pawpi-panel-strong: #141820;
  --pawpi-ink: #f5f7fb;
  --pawpi-muted: #b9c2cf;
  --pawpi-soft: rgba(255, 255, 255, 0.07);
  --pawpi-line: rgba(255, 255, 255, 0.12);
  --pawpi-accent: #7dd3fc;
  --pawpi-accent-soft: rgba(125, 211, 252, 0.12);
  --pawpi-chip: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(8, 9, 11, 0.72), rgba(8, 9, 11, 0.98)),
    var(--pawpi-bg);
}

.pawpi-page :where(h1, h2, h3) {
  color: var(--pawpi-ink);
  letter-spacing: 0;
}

.pawpi-page p {
  color: var(--pawpi-muted);
}

.pawpi-hero {
  padding: clamp(42px, 7vw, 86px) 0 34px;
}

.pawpi-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(22px, 4vw, 56px);
  align-items: end;
}

.pawpi-hero-copy {
  max-width: 760px;
}

.pawpi-hero-copy h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 8vw, 6.8rem);
  line-height: 0.9;
}

.pawpi-lead {
  max-width: 760px;
  color: var(--pawpi-ink) !important;
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.56;
}

.pawpi-kicker {
  margin: 0;
  color: var(--pawpi-accent) !important;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.pawpi-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.pawpi-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--pawpi-line);
  border-radius: 999px;
  background: var(--pawpi-chip);
  color: var(--pawpi-ink);
  font-size: 0.84rem;
  font-weight: 760;
}

.pawpi-status-panel,
.pawpi-info-card,
.pawpi-compliance-panel {
  border: 1px solid var(--pawpi-line);
  background: var(--pawpi-panel);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .pawpi-status-panel,
html[data-theme="dark"] .pawpi-info-card,
html[data-theme="dark"] .pawpi-compliance-panel {
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.32);
}

.pawpi-status-panel {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
}

.pawpi-status-panel dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.pawpi-status-panel dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--pawpi-line);
}

.pawpi-status-panel dt,
.pawpi-status-panel dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}

.pawpi-status-panel dt {
  color: var(--pawpi-muted);
}

.pawpi-status-panel dd {
  color: var(--pawpi-ink);
  font-weight: 780;
  text-align: right;
}

.pawpi-section {
  padding: 40px 0;
}

.pawpi-section-last {
  padding-bottom: clamp(56px, 7vw, 96px);
}

.pawpi-section-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(18px, 4vw, 48px);
  align-items: end;
}

.pawpi-section-header h2,
.pawpi-compliance-panel h2 {
  max-width: 850px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
}

.pawpi-section-header > div:first-child {
  display: grid;
  gap: 10px;
}

.pawpi-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.pawpi-info-card {
  display: grid;
  gap: 18px;
  min-height: 230px;
  padding: 22px;
  border-radius: 16px;
}

.pawpi-info-card-head {
  display: grid;
  gap: 12px;
}

.pawpi-info-card-head span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--pawpi-accent-soft);
  color: var(--pawpi-accent);
  font-size: 0.8rem;
  font-weight: 850;
}

.pawpi-info-card h3 {
  font-size: clamp(1.24rem, 1.8vw, 1.7rem);
  line-height: 1.08;
}

.pawpi-compliance-panel {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 18px;
  background:
    linear-gradient(135deg, var(--pawpi-panel-strong), var(--pawpi-panel));
}

.pawpi-compliance-panel .stack-tight {
  gap: 12px;
  max-width: 980px;
}

.pawpi-compliance-panel a:not(.button) {
  color: var(--pawpi-accent);
  font-weight: 780;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 900px) {
  .pawpi-hero-layout,
  .pawpi-section-header,
  .pawpi-info-grid {
    grid-template-columns: 1fr;
  }

  .pawpi-hero-copy h1 {
    max-width: 10ch;
  }

  .pawpi-status-panel,
  .pawpi-info-card,
  .pawpi-compliance-panel {
    border-radius: 14px;
  }

  .pawpi-info-card {
    min-height: 0;
  }
}

.site-shell {
  position: relative;
}

.memorial-standalone-landing-shell {
  min-height: 100vh;
  background: #020202;
}

.site-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 30;
}

.site-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fff2bf 100%);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.mobile-nav-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
}

.mobile-nav-toggle.is-open {
  background: linear-gradient(180deg, #212121 0%, #38414a 100%);
  border-color: rgba(33, 33, 33, 0.55);
  color: white;
}

.mobile-nav-toggle.is-studio-console-toggle {
  border-color: rgba(255, 200, 0, 0.38);
  background: linear-gradient(180deg, #182235 0%, #0f172a 100%);
  color: #ffc800;
}

.mobile-nav-toggle.is-studio-console-toggle:hover {
  border-color: rgba(255, 200, 0, 0.58);
  color: #ffe16a;
}

.mobile-nav-toggle.is-studio-console-toggle.is-open {
  border-color: rgba(231, 220, 193, 0.22);
  background: linear-gradient(180deg, #111713 0%, #0d120f 100%);
  color: #f5efe2;
}

.mobile-toggle-icon {
  width: 20px;
  height: 20px;
}

.site-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: min(88vw, 332px);
  padding: 24px 18px 22px;
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-102%);
  transition: transform 180ms ease, width 180ms ease, padding 180ms ease, box-shadow 180ms ease;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 33, 33, 0.2) transparent;
}

.site-sidebar::-webkit-scrollbar {
  width: 10px;
}

.site-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.site-sidebar::-webkit-scrollbar-thumb {
  background: rgba(33, 33, 33, 0.18);
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.98);
}

.site-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(33, 33, 33, 0.26);
}

.site-sidebar.is-open {
  transform: translateX(0);
}

.sidebar-desktop-pin-toggle {
  display: none;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.82);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.sidebar-desktop-pin-toggle:is(:hover, :focus-visible),
.sidebar-desktop-pin-toggle.is-pinned {
  background: rgba(15, 23, 42, 0.09);
  color: #111827;
}

.sidebar-desktop-pin-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
}

.sidebar-desktop-pin-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-desktop-pin-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 4px 10px;
}

.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
}

.sidebar-brand-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.sidebar-brand-logo-dark {
  display: none;
}

.theme-toggle-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.38);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.86), transparent 46%),
    var(--surface-muted);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.theme-toggle-button:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.28);
}

.theme-toggle-button svg {
  width: 18px;
  height: 18px;
}

.sidebar-brand-name,
.brandmark-kicker,
.eyebrow,
.meta-label,
.footer-heading,
.sidebar-section-title {
  margin: 0;
}

.sidebar-brand-name {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brandmark-kicker,
.eyebrow,
.meta-label,
.footer-heading,
.sidebar-section-title,
.sidebar-language-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
}

.brandmark-kicker,
.eyebrow,
.meta-label,
.sidebar-section-title,
.sidebar-language-label {
  color: var(--accent);
}

.brandmark-title {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.45;
}

.sidebar-nav,
.sidebar-support-actions {
  display: grid;
  gap: 8px;
}

.language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-nav {
  gap: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  --sidebar-icon-bg: rgba(242, 177, 54, 0.16);
  --sidebar-icon-bg-strong: rgba(242, 177, 54, 0.28);
  --sidebar-icon-color: var(--accent-strong);
  --sidebar-icon-shadow: rgba(166, 96, 6, 0.12);
  color: rgba(33, 33, 33, 0.82);
  font-weight: 760;
  font-size: 0.92rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.sidebar-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-icon-color);
  box-shadow: none;
  position: relative;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}

.sidebar-link-icon::after {
  display: none;
}

.sidebar-link-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-link-label {
  min-width: 0;
}

.sidebar-link-secondary {
  min-height: 38px;
  padding-inline: 10px;
  border-radius: 14px;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 650;
}

.sidebar-link-secondary .sidebar-link-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
}

.sidebar-link-secondary .sidebar-link-icon svg {
  width: 16.5px;
  height: 16.5px;
}

.sidebar-link-tone-home {
  --sidebar-icon-bg: rgba(255, 200, 0, 0.2);
  --sidebar-icon-bg-strong: rgba(255, 200, 0, 0.34);
  --sidebar-icon-color: #9a5f00;
  --sidebar-icon-shadow: rgba(154, 95, 0, 0.14);
}

.sidebar-link-tone-cats {
  --sidebar-icon-bg: rgba(255, 154, 109, 0.2);
  --sidebar-icon-bg-strong: rgba(255, 154, 109, 0.34);
  --sidebar-icon-color: #a4411e;
  --sidebar-icon-shadow: rgba(164, 65, 30, 0.14);
}

.sidebar-link-tone-support {
  --sidebar-icon-bg: rgba(65, 195, 128, 0.17);
  --sidebar-icon-bg-strong: rgba(65, 195, 128, 0.3);
  --sidebar-icon-color: #0f7a4a;
  --sidebar-icon-shadow: rgba(15, 122, 74, 0.13);
}

.sidebar-link-tone-shorts {
  --sidebar-icon-bg: rgba(138, 111, 255, 0.17);
  --sidebar-icon-bg-strong: rgba(138, 111, 255, 0.3);
  --sidebar-icon-color: #5943c8;
  --sidebar-icon-shadow: rgba(89, 67, 200, 0.13);
}

.sidebar-link-tone-stories {
  --sidebar-icon-bg: rgba(247, 170, 56, 0.16);
  --sidebar-icon-bg-strong: rgba(247, 170, 56, 0.28);
  --sidebar-icon-color: #996020;
  --sidebar-icon-shadow: rgba(153, 96, 32, 0.12);
}

.sidebar-link-tone-community {
  --sidebar-icon-bg: rgba(43, 172, 208, 0.16);
  --sidebar-icon-bg-strong: rgba(43, 172, 208, 0.28);
  --sidebar-icon-color: #167692;
  --sidebar-icon-shadow: rgba(22, 118, 146, 0.12);
}

.sidebar-link-tone-projects {
  --sidebar-icon-bg: rgba(93, 150, 246, 0.16);
  --sidebar-icon-bg-strong: rgba(93, 150, 246, 0.29);
  --sidebar-icon-color: #2765b8;
  --sidebar-icon-shadow: rgba(39, 101, 184, 0.12);
}

.sidebar-link-tone-saved {
  --sidebar-icon-bg: rgba(236, 107, 148, 0.16);
  --sidebar-icon-bg-strong: rgba(236, 107, 148, 0.29);
  --sidebar-icon-color: #b63f70;
  --sidebar-icon-shadow: rgba(182, 63, 112, 0.12);
}

.sidebar-link-tone-alerts {
  --sidebar-icon-bg: rgba(255, 185, 76, 0.18);
  --sidebar-icon-bg-strong: rgba(255, 185, 76, 0.3);
  --sidebar-icon-color: #9b650e;
  --sidebar-icon-shadow: rgba(155, 101, 14, 0.12);
}

.sidebar-more-group {
  display: grid;
  gap: 8px;
}

.sidebar-more-group summary {
  list-style: none;
  cursor: pointer;
}

.sidebar-more-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-more-menu {
  display: grid;
  gap: 6px;
  padding: 4px 0 0 10px;
  border-left: 1px solid var(--border-soft);
}

.sidebar-more-menu .sidebar-link-secondary {
  min-height: 34px;
  font-size: 0.84rem;
}

.sidebar-link:hover {
  background: rgba(15, 23, 42, 0.035);
  border-color: rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.sidebar-link:hover .sidebar-link-icon {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(15, 23, 42, 0.06);
  color: var(--sidebar-icon-color);
  transform: translateY(-1px);
}

.sidebar-link.is-active {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
  box-shadow: inset 3px 0 0 var(--sidebar-icon-color);
}

.sidebar-link.is-active .sidebar-link-icon {
  background: color-mix(in srgb, var(--sidebar-icon-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--sidebar-icon-color) 18%, transparent);
  color: var(--sidebar-icon-color);
  box-shadow: none;
}

.sidebar-support-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  background: linear-gradient(180deg, #fff6cb 0%, #ffffff 100%);
  box-shadow: var(--shadow-card);
}

.sidebar-footer {
  display: grid;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid rgba(33, 33, 33, 0.06);
}

.site-sidebar.is-studio-console {
  background:
    radial-gradient(circle at 16% 0%, rgba(139, 200, 246, 0.08), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(86, 207, 174, 0.07), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.site-sidebar.is-studio-console .sidebar-brand-row {
  align-items: flex-start;
}

.sidebar-studio-brand {
  width: 100%;
  min-width: 0;
  gap: 9px;
  align-items: center;
  padding: 2px 4px 8px;
  color: #14120e;
  text-decoration: none;
}

.sidebar-studio-brand .studio-brand-mark {
  pointer-events: none;
}

.sidebar-studio-brand-symbol {
  display: inline-grid;
}

.sidebar-studio-brand-logo {
  display: inline-grid;
}

.sidebar-studio-brand-logo.studio-brand-mark.is-compact .studio-brand-logo-frame {
  width: 112px;
}

.sidebar-studio-brand-logo.studio-brand-mark.is-compact .studio-brand-wordmark-kicker {
  font-size: 0.94rem;
}

.sidebar-studio-brand-logo.studio-brand-mark.is-compact .studio-brand-wordmark-main {
  font-size: 0.52rem;
}

.sidebar-studio-mission {
  display: grid;
  gap: 3px;
  padding: 9px 4px 11px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.88);
}

.sidebar-studio-mission span {
  color: #2765b8;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.sidebar-studio-mission strong {
  max-width: 24ch;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.28;
}

.sidebar-studio-universe {
  display: grid;
  gap: 0;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.sidebar-studio-universe-current {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.76), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.2), rgba(39, 101, 184, 0.1));
  color: rgba(15, 23, 42, 0.9);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.sidebar-studio-universe-current.is-client {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.64), transparent 34%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.12), rgba(39, 101, 184, 0.12));
}

.sidebar-studio-universe-current::-webkit-details-marker {
  display: none;
}

.sidebar-studio-universe-avatar {
  display: inline-grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #1f5fae;
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.sidebar-studio-universe-current.is-client .sidebar-studio-universe-avatar {
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
}

.sidebar-studio-universe-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-studio-universe-copy small,
.sidebar-studio-universe-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-studio-universe-copy small {
  color: rgba(15, 23, 42, 0.52);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-studio-universe-copy strong {
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.08;
}

.sidebar-studio-universe-caret {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.94rem;
  font-weight: 950;
  line-height: 1;
}

.sidebar-studio-universe-switcher {
  display: grid;
  gap: 7px;
}

.sidebar-studio-universe-switcher .sidebar-studio-universe-current:hover {
  background: rgba(15, 23, 42, 0.035);
}

.sidebar-studio-universe-switcher[open] .sidebar-studio-universe-caret {
  background: rgba(15, 23, 42, 0.11);
  color: rgba(15, 23, 42, 0.76);
  font-size: 0;
}

.sidebar-studio-universe-switcher[open] .sidebar-studio-universe-caret::before {
  content: "-";
  font-size: 0.94rem;
  line-height: 1;
}

.sidebar-studio-universe-switcher > div {
  display: grid;
  gap: 6px;
  margin-top: 7px;
  padding-left: 8px;
  border-left: 1px solid rgba(15, 23, 42, 0.07);
}

.sidebar-studio-universe-switcher a,
.sidebar-studio-universe-switcher button {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 9px;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(15, 23, 42, 0.74);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.sidebar-studio-universe-switcher button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sidebar-studio-universe-switcher a.is-active {
  border-color: rgba(39, 101, 184, 0.22);
  background: rgba(39, 101, 184, 0.09);
  color: rgba(15, 23, 42, 0.9);
}

.sidebar-studio-universe-switcher strong,
.sidebar-studio-universe-switcher small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-studio-universe-switcher strong {
  font-size: 0.78rem;
  font-weight: 880;
  line-height: 1.1;
}

.sidebar-studio-universe-switcher small {
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 720;
  line-height: 1.1;
}

.sidebar-studio-nav {
  gap: 5px;
}

.sidebar-studio-advanced-group {
  display: grid;
  gap: 6px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.sidebar-studio-advanced-group summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px;
  border-radius: 10px;
  color: rgba(15, 23, 42, 0.68);
  cursor: pointer;
  list-style: none;
}

.sidebar-studio-advanced-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-studio-advanced-group summary::after {
  content: "⌄";
  grid-row: 1 / span 2;
  grid-column: 2;
  color: rgba(15, 23, 42, 0.42);
  font-size: 0.78rem;
  transition: transform 160ms ease;
}

.sidebar-studio-advanced-group[open] summary::after {
  transform: rotate(180deg);
}

.sidebar-studio-advanced-group summary:hover {
  background: rgba(15, 23, 42, 0.035);
  color: rgba(15, 23, 42, 0.82);
}

.sidebar-studio-advanced-group summary span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-studio-advanced-group summary small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-studio-advanced-menu {
  display: grid;
  gap: 5px;
  padding-left: 8px;
  border-left: 1px solid rgba(15, 23, 42, 0.07);
}

.sidebar-studio-link {
  --studio-link-accent: #2765b8;
  --studio-link-accent-soft: rgba(39, 101, 184, 0.1);
  min-height: 50px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
}

.sidebar-studio-link-tone-identity {
  --studio-link-accent: #9a6500;
  --studio-link-accent-soft: rgba(255, 200, 0, 0.16);
}

.sidebar-studio-link-tone-pipeline,
.sidebar-studio-link-tone-episode {
  --studio-link-accent: #2765b8;
  --studio-link-accent-soft: rgba(39, 101, 184, 0.12);
}

.sidebar-studio-link-tone-mini {
  --studio-link-accent: #0f766e;
  --studio-link-accent-soft: rgba(15, 118, 110, 0.12);
}

.sidebar-studio-link-tone-free-preview {
  --studio-link-accent: #be185d;
  --studio-link-accent-soft: rgba(190, 24, 93, 0.12);
}

.sidebar-studio-link-tone-mini-story {
  --studio-link-accent: #c2410c;
  --studio-link-accent-soft: rgba(194, 65, 12, 0.12);
}

.sidebar-studio-link-tone-qa {
  --studio-link-accent: #475569;
  --studio-link-accent-soft: rgba(71, 85, 105, 0.1);
}

.sidebar-studio-link-tone-home {
  --studio-link-accent: #9a6500;
  --studio-link-accent-soft: rgba(255, 200, 0, 0.16);
}

.sidebar-studio-link-tone-cats {
  --studio-link-accent: #b4532d;
  --studio-link-accent-soft: rgba(255, 154, 109, 0.14);
}

.sidebar-studio-link-tone-support {
  --studio-link-accent: #0f7a4a;
  --studio-link-accent-soft: rgba(65, 195, 128, 0.14);
}

.sidebar-studio-link-tone-shorts {
  --studio-link-accent: #5943c8;
  --studio-link-accent-soft: rgba(138, 111, 255, 0.14);
}

.sidebar-studio-link-tone-stories {
  --studio-link-accent: #996020;
  --studio-link-accent-soft: rgba(247, 170, 56, 0.14);
}

.sidebar-studio-link-tone-community {
  --studio-link-accent: #167692;
  --studio-link-accent-soft: rgba(43, 172, 208, 0.14);
}

.sidebar-studio-link-tone-projects {
  --studio-link-accent: #2765b8;
  --studio-link-accent-soft: rgba(93, 150, 246, 0.13);
}

.sidebar-studio-link-tone-saved {
  --studio-link-accent: #b63f70;
  --studio-link-accent-soft: rgba(236, 107, 148, 0.13);
}

.sidebar-studio-link-tone-alerts {
  --studio-link-accent: #9b650e;
  --studio-link-accent-soft: rgba(255, 185, 76, 0.14);
}

.sidebar-studio-link .sidebar-link-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border-color: transparent;
  background: transparent;
  color: var(--studio-link-accent);
  box-shadow: none;
}

.sidebar-studio-link .sidebar-link-icon::after {
  display: none;
}

.sidebar-studio-link .sidebar-link-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-studio-link .sidebar-link-label {
  display: grid;
  gap: 3px;
}

.sidebar-studio-link .sidebar-link-label span {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-studio-link .sidebar-link-label small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-studio-link-advanced {
  min-height: 42px;
  padding-block: 6px;
  opacity: 0.86;
}

.sidebar-studio-link-advanced .sidebar-link-icon {
  width: 27px;
  height: 27px;
}

.sidebar-studio-link-advanced .sidebar-link-label span {
  font-size: 0.82rem;
}

.site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 3px 0 0 var(--studio-link-accent);
}

.site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  border-color: color-mix(in srgb, var(--studio-link-accent) 18%, transparent);
  background: var(--studio-link-accent-soft);
  color: var(--studio-link-accent);
}

.site-sidebar.is-studio-console .sidebar-nav-secondary {
  gap: 6px;
}

.site-sidebar.is-studio-console .sidebar-link-secondary {
  min-height: 40px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.035);
}

.site-sidebar.is-studio-console .sidebar-link-secondary .sidebar-link-icon {
  color: rgba(15, 23, 42, 0.74);
}

.site-sidebar.is-studio-console .sidebar-link-secondary:hover .sidebar-link-icon {
  color: #2765b8;
}

.sidebar-utility {
  margin-top: auto;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-user {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.66));
}

.sidebar-user-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.sidebar-user-avatar {
  display: inline-grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(86, 207, 174, 0.16));
  color: #211a00;
  font-size: 0.98rem;
  font-weight: 940;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-user-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-user-row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.sidebar-user-kicker {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-user-role-pill {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid rgba(31, 95, 174, 0.16);
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.08);
  color: #1f5fae;
  font-size: 0.58rem;
  font-weight: 920;
  line-height: 1;
}

.sidebar-user-name,
.sidebar-user-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-name {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.12;
}

.sidebar-user-email {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.15;
}

.sidebar-user-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.sidebar-user-actions .sidebar-button {
  justify-content: center;
  min-height: 34px;
  padding-inline: 8px;
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 820;
}

.sidebar-locale-card {
  gap: 10px;
}

.sidebar-language-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.sidebar-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.sidebar-theme-toggle {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

.sidebar-language-label {
  flex-shrink: 0;
}

.sidebar-button {
  width: 100%;
}

.button-inline-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.language-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.language-pill:hover {
  transform: translateY(-1px);
  color: var(--foreground);
  border-color: rgba(11, 105, 183, 0.24);
  background: white;
}

.language-pill.is-active {
  border-color: var(--foreground);
  background: var(--foreground);
  color: white;
}

.site-main-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 180ms ease;
}

.site-main-shell.site-main-shell-soft-record {
  background: var(--background);
}

.site-main {
  flex: 1;
  --site-main-top: 78px;
  padding-top: var(--site-main-top);
}

.site-main.site-main-not-home {
  --site-main-top: 40px;
}

.site-main.site-main-soft-record {
  --site-main-top: 0px;
}

.site-main.site-main-cat-detail {
  --site-main-top: 0px;
}

.site-main-shell:has(.missing-pet-page-band),
.site-main:has(.missing-pet-page-band) {
  background: #f6f8fb;
}

.site-shell-rescue-console {
  --rescue-topbar-height: 64px;
}

.site-shell-rescue-console .site-sidebar.is-rescue-console {
  border: 0;
  background: var(--background);
  box-shadow: none;
}

.site-shell-rescue-console .sidebar-studio-link {
  --studio-link-accent: #172033;
  --studio-link-accent-soft: rgba(15, 23, 42, 0.075);
  color: rgba(15, 23, 42, 0.76);
}

.site-shell-rescue-console .sidebar-studio-link .sidebar-link-icon {
  border-color: transparent;
  background: transparent;
  color: rgba(15, 23, 42, 0.72);
}

.site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:hover {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.035);
  color: #172033;
}

.site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:hover .sidebar-link-icon {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.055);
  color: #172033;
  box-shadow: none;
}

.site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:active {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(15, 23, 42, 0.06);
  transform: translateY(0);
}

.site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:active .sidebar-link-icon {
  background: rgba(15, 23, 42, 0.09);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.1);
  transform: translateY(0) scale(0.96);
}

.site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.05);
  color: #172033;
  box-shadow: inset 3px 0 0 rgba(15, 23, 42, 0.76);
}

.site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon,
.site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link-secondary:hover .sidebar-link-icon {
  border-color: rgba(15, 23, 42, 0.08);
  background: rgba(15, 23, 42, 0.075);
  color: #172033;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

.rescue-shell-topbar.admin-studio-topbar.studio-minis-room-toolbar {
  display: none;
}

.rescue-shell-topbar-brand.studio-minis-room-back-button {
  display: inline-flex;
  width: 40px;
  height: 40px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #172033;
  box-shadow: none;
  text-decoration: none;
}

.rescue-shell-topbar-brand.studio-minis-room-back-button:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  outline: none;
  transform: none;
}

.rescue-shell-topbar-brand-mark {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
}

.rescue-shell-topbar-brand-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.rescue-shell-topbar-brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1;
}

.rescue-shell-topbar-brand-copy strong,
.rescue-shell-topbar-brand-copy small {
  min-width: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rescue-shell-topbar-brand-copy strong {
  color: inherit;
  font-size: 0.92rem;
  font-weight: 920;
}

.rescue-shell-topbar-brand-copy small {
  color: rgba(15, 23, 42, 0.54);
  font-size: 0.62rem;
  font-weight: 850;
}

.rescue-shell-topbar-spacer {
  min-width: 0;
}

.rescue-shell-topbar-search.studio-minis-room-search {
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(100%, 560px);
  justify-self: center;
  padding-left: 14px;
}

.rescue-shell-topbar-search.studio-minis-room-search input {
  grid-column: 1;
  letter-spacing: 0;
}

.rescue-shell-topbar-search-submit {
  appearance: none;
  display: inline-grid;
  grid-column: 2;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-search-submit:is(:hover, :focus-visible) {
  background: #1f2937;
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.rescue-shell-topbar-search-submit svg {
  width: 15px;
  height: 15px;
}

.rescue-shell-topbar-nav {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-self: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.58)),
    rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.rescue-shell-topbar-nav-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.66);
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-nav-link:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.07);
  color: #0f172a;
  outline: none;
}

.rescue-shell-topbar-nav-link.is-active {
  background: #0f172a;
  color: #ffffff;
}

.rescue-shell-topbar-actions.studio-minis-room-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.rescue-shell-topbar-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(15, 23, 42, 0.78);
  font-size: 0.78rem;
  font-weight: 880;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.rescue-shell-topbar-action:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transform: translateY(-1px);
}

.rescue-shell-topbar-action.is-primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

.rescue-shell-topbar-action.is-primary:is(:hover, :focus-visible) {
  border-color: #1f2937;
  background: #1f2937;
  color: #ffffff;
}

.rescue-shell-topbar-sign-in {
  min-width: 76px;
  padding-inline: 15px;
}

.rescue-shell-topbar-theme.theme-toggle-button {
  width: 38px;
  height: 38px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.rescue-shell-account-menu {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.rescue-shell-account-menu summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.rescue-shell-account-menu summary::-webkit-details-marker {
  display: none;
}

.rescue-shell-topbar-avatar,
.rescue-shell-account-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.9), rgba(86, 207, 174, 0.7));
  color: #172033;
  font-weight: 940;
  line-height: 1;
  text-transform: uppercase;
}

.rescue-shell-topbar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  font-size: 0.9rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.rescue-shell-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  font-size: 1rem;
}

.rescue-shell-topbar-avatar img,
.rescue-shell-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rescue-shell-account-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: grid;
  width: min(300px, calc(100vw - 32px));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    #ffffff;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px) saturate(130%);
}

.rescue-shell-account-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.rescue-shell-account-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.rescue-shell-account-copy strong,
.rescue-shell-account-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rescue-shell-account-copy strong {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 920;
}

.rescue-shell-account-copy small {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 760;
}

.rescue-shell-account-actions {
  display: grid;
  gap: 6px;
}

.rescue-shell-account-actions :is(a, button) {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.82);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 860;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rescue-shell-account-actions :is(a, button):is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  outline: none;
}

.rescue-shell-account-actions :is(a, button):disabled {
  cursor: wait;
  opacity: 0.62;
}

.rescue-shell-account-actions svg {
  width: 16px;
  height: 16px;
}

.site-shell-rescue-console .sidebar-studio-rail-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(135deg, #f4c56a, #e87951 54%, #334155);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 860;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

.site-shell-rescue-console .sidebar-studio-rail-avatar img,
.site-shell-rescue-console .sidebar-studio-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-shell-rescue-console .sidebar-studio-rail-avatar > svg {
  width: 18px;
  height: 18px;
}

.site-shell-rescue-console .sidebar-studio-account-avatar > svg {
  width: 22px;
  height: 22px;
}

.site-shell-rescue-console .sidebar-studio-account-menu {
  position: relative;
}

.site-shell-rescue-console .sidebar-studio-account-menu summary {
  display: grid;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

.site-shell-rescue-console .sidebar-studio-account-menu summary::-webkit-details-marker {
  display: none;
}

.site-shell-rescue-console .sidebar-studio-account-menu summary:is(:hover, :focus-visible) .sidebar-studio-rail-avatar {
  box-shadow: 0 0 0 5px rgba(15, 117, 188, 0.18);
}

.site-shell-rescue-console .sidebar-studio-account-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
  left: auto;
  z-index: 160;
  display: grid;
  width: min(328px, calc(100vw - 32px));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  box-shadow: 0 24px 74px rgba(15, 23, 42, 0.18);
}

.site-shell-rescue-console .sidebar-studio-account-profile {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 18px 17px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

.site-shell-rescue-console .sidebar-studio-account-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(135deg, #f4c56a, #e87951 54%, #334155);
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 840;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

.site-shell-rescue-console .sidebar-studio-account-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.site-shell-rescue-console .sidebar-studio-account-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-shell-rescue-console .sidebar-studio-account-copy small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-shell-rescue-console .sidebar-studio-account-section {
  display: grid;
  padding: 10px 0;
}

.site-shell-rescue-console .sidebar-studio-account-section + .sidebar-studio-account-section {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

.site-shell-rescue-console .sidebar-studio-account-popover :is(a, button) {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 720;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.site-shell-rescue-console .sidebar-studio-account-popover :is(a, button):is(:hover, :focus-visible) {
  background: #eef2f7;
  color: #0f172a;
  outline: none;
}

.site-shell-rescue-console .sidebar-studio-account-popover :is(a, button):disabled {
  cursor: default;
  opacity: 1;
}

.site-shell-rescue-console .sidebar-studio-account-popover svg {
  width: 22px;
  height: 22px;
  color: #64748b;
}

.site-shell-rescue-console .sidebar-studio-account-popover :is(a, button) span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-shell-rescue-console .sidebar-studio-account-popover :is(a, button) small {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 660;
}

.site-shell-rescue-console .sidebar-studio-account-popover .sidebar-studio-account-theme {
  grid-template-columns: 28px minmax(0, 1fr) max-content 16px;
}

.site-shell-rescue-console .sidebar-studio-account-popover .sidebar-studio-account-theme small {
  justify-self: end;
  white-space: nowrap;
}

.site-shell-rescue-console .sidebar-studio-account-popover .sidebar-studio-account-theme::after {
  justify-self: end;
  color: #64748b;
  font-size: 1.55rem;
  line-height: 1;
  content: "›";
}

.studio-standalone-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.28), transparent 30%),
    radial-gradient(circle at 88% 10%, rgba(19, 29, 24, 0.13), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(86, 207, 174, 0.12), transparent 38%),
    linear-gradient(180deg, #fff8df 0%, #fffdf7 34%, #f9f5e8 100%);
}

.studio-global-header {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: min(1080px, calc(100vw - 42px));
  margin: 0 auto 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.studio-global-brand,
.studio-global-nav,
.studio-global-actions {
  display: flex;
  align-items: center;
}

.studio-global-brand {
  justify-self: start;
  justify-content: center;
  width: 48px;
  height: 48px;
  max-width: none;
  gap: 8px;
  flex: 0 0 48px;
  min-width: 0;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 249, 226, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 22px rgba(15, 7, 2, 0.12);
  color: #17120a;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease;
  pointer-events: auto;
}

.studio-global-brand:hover {
  background: rgba(255, 249, 226, 0.76);
  transform: translateY(-1px);
}

.studio-global-brand-mark {
  color: #17120a;
}

.studio-global-brand-mark .studio-brand-logo-frame {
  width: 42px;
}

.studio-global-brand-mark .studio-brand-symbol {
  width: 72px;
  height: 46px;
}

.studio-global-brand-mark .studio-brand-wordmark-main {
  font-size: 1.18rem;
}

.studio-global-brand-mark .studio-brand-wordmark-kicker {
  font-size: 0.68rem;
}

.studio-global-nav {
  justify-content: center;
  gap: 3px;
  justify-self: center;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(255, 220, 92, 0.16);
  border-radius: 999px;
  background: rgba(15, 12, 9, 0.56);
  box-shadow:
    0 14px 34px rgba(15, 7, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.studio-global-link {
  position: relative;
  min-height: 31px;
  padding: 7px 10px;
  border-radius: 999px;
  color: rgba(255, 248, 223, 0.74);
  font-size: 0.82rem;
  font-weight: 880;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.studio-global-link::after {
  position: absolute;
  right: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: translateX(50%) scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
}

.studio-global-link:hover {
  transform: translateY(-1px);
  color: #fff8df;
  background: rgba(255, 255, 255, 0.13);
}

.studio-global-link.is-active {
  color: #17120a;
  background: linear-gradient(180deg, #ffd94a 0%, var(--brand) 100%);
  box-shadow:
    0 10px 24px rgba(255, 200, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.studio-global-link.is-active::after {
  opacity: 0;
  transform: translateX(50%) scale(0.6);
}

.studio-global-link.is-cta:not(.is-active) {
  color: #ffd94a;
  background: rgba(255, 200, 0, 0.1);
}

.studio-global-actions {
  justify-content: flex-end;
  gap: 8px;
  justify-self: end;
  padding: 4px;
  border: 1px solid rgba(255, 220, 92, 0.16);
  border-radius: 999px;
  background: rgba(15, 12, 9, 0.56);
  box-shadow:
    0 14px 34px rgba(15, 7, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.studio-global-theme {
  min-width: 34px;
  min-height: 34px;
  background: rgba(15, 12, 9, 0.62);
  color: #fff8df;
  border-color: rgba(255, 220, 92, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-global-rescue-link.button {
  min-height: 34px;
  border-color: rgba(255, 247, 222, 0.2);
  background: rgba(255, 249, 226, 0.64);
  color: #17120a;
  box-shadow: none;
}

.studio-global-rescue-link.button:hover {
  background: #ffffff;
}

.studio-standalone-main {
  min-height: calc(100vh - 68px);
  padding-top: 8px;
}

.studio-standalone-shell:has(.studio-loading-page) .studio-global-header {
  display: none;
}

.studio-standalone-shell:has(.studio-loading-page) .studio-standalone-main {
  min-height: 100vh;
  padding-top: 0;
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-header,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-header {
  width: min(1080px, calc(100vw - 42px));
  margin-bottom: -78px;
  padding: 0;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-brand,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-brand {
  padding: 3px;
  background: rgba(255, 249, 226, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 22px rgba(15, 7, 2, 0.12);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-brand:hover,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-brand:hover {
  background: rgba(255, 249, 226, 0.76);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-brand-mark .studio-brand-logo-frame,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-brand-mark .studio-brand-logo-frame {
  width: 42px;
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-nav,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-nav {
  gap: 3px;
  padding: 4px;
  border-color: rgba(255, 220, 92, 0.16);
  background: rgba(15, 12, 9, 0.56);
  box-shadow:
    0 14px 34px rgba(15, 7, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-link,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-link {
  min-height: 31px;
  padding: 7px 10px;
  color: rgba(255, 248, 223, 0.74);
  font-size: 0.82rem;
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-link:hover,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-link:hover {
  color: #fff8df;
  background: rgba(255, 255, 255, 0.13);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-link.is-active,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-link.is-active {
  color: #17120a;
  background: linear-gradient(180deg, #ffd94a 0%, var(--brand) 100%);
  box-shadow:
    0 10px 24px rgba(255, 200, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-theme,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-theme {
  min-width: 34px;
  min-height: 34px;
  background: rgba(15, 12, 9, 0.62);
  border-color: rgba(255, 220, 92, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-global-rescue-link.button,
.studio-standalone-shell:has(.studio-cameos-page) .studio-global-rescue-link.button {
  min-height: 34px;
  border-color: rgba(255, 247, 222, 0.2);
  background: rgba(255, 249, 226, 0.64);
}

.studio-standalone-shell:has(.studio-motion-hero) .studio-standalone-main,
.studio-standalone-shell:has(.studio-cameos-page) .studio-standalone-main {
  padding-top: 0;
}

.studio-standalone-shell:has(.studio-cameos-page) {
  background:
    radial-gradient(920px 430px at 52% -120px, rgba(255, 200, 0, 0.25), transparent 62%),
    radial-gradient(720px 430px at 4% 14%, rgba(255, 127, 94, 0.13), transparent 58%),
    radial-gradient(820px 500px at 97% 18%, rgba(86, 207, 174, 0.12), transparent 60%),
    linear-gradient(180deg, #fff8df 0%, #fff2c7 45%, #fffdf7 100%);
}

.studio-route-black,
.studio-standalone-shell:has(.studio-route-black),
.studio-standalone-shell:has(.studio-route-black) .studio-standalone-main {
  min-height: 100vh;
  background: #000;
  color: #fff8df;
  color-scheme: dark;
}

.studio-route-black .studio-page,
.studio-route-black .studio-home-page,
.studio-route-black .studio-create-page,
.studio-route-black .studio-monthly-care-page,
.studio-route-black .studio-character-page,
.studio-route-black .studio-fame-page,
.studio-route-black .studio-cameos-page,
.studio-route-black .studio-actor-page {
  background: #000;
  color: #fff8df;
}

.studio-route-black .studio-cameos-page {
  --studio-spotlight-bg: #000;
  --studio-spotlight-ink: #fff8df;
  --studio-spotlight-muted: rgba(255, 248, 223, 0.68);
  --studio-spotlight-panel: rgba(255, 248, 223, 0.08);
  --studio-spotlight-panel-strong: rgba(255, 248, 223, 0.12);
  --studio-spotlight-border: rgba(255, 248, 223, 0.14);
  --studio-spotlight-fade: rgba(0, 0, 0, 0.96);
  --studio-spotlight-button-bg: rgba(255, 248, 223, 0.1);
  --studio-spotlight-button-color: #fff8df;
  --studio-spotlight-grid: rgba(255, 248, 223, 0.06);
  --studio-spotlight-glow: rgba(255, 200, 0, 0.12);
  --studio-spotlight-accent: #ffc800;
  background: #000;
}

.studio-route-black .studio-cameos-page::before {
  opacity: 0.35;
}

.studio-flow-home {
  width: 100%;
  max-width: none;
  gap: 0;
  padding: 64px 0 64px;
  overflow-x: hidden;
  background: #000;
}

.studio-page.studio-home-page.studio-flow-home {
  padding: 64px 0 64px;
}

.studio-standalone-shell:has(.studio-flow-home) .studio-global-header,
.studio-standalone-shell:has(.studio-user-project-room) .studio-global-header,
.studio-standalone-shell:has(.studio-membership-page) .studio-global-header {
  display: none;
}

.studio-standalone-shell:has(.studio-flow-home) .studio-standalone-main,
.studio-standalone-shell:has(.studio-user-project-room) .studio-standalone-main,
.studio-standalone-shell:has(.studio-membership-page) .studio-standalone-main {
  padding-top: 0;
}

.studio-flow-home-topbar.admin-studio-topbar.studio-minis-room-toolbar {
  --admin-studio-topbar-canvas: rgba(8, 8, 8, 0.94);
  --admin-studio-topbar-gutter: clamp(18px, 2.1vw, 40px);
  --admin-studio-topbar-muted: rgba(255, 255, 255, 0.54);
  --admin-studio-topbar-text: rgba(255, 255, 255, 0.9);
  z-index: 80;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 10px var(--admin-studio-topbar-gutter);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.92)),
    rgba(8, 8, 8, 0.94);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.studio-flow-home-topbar .studio-minis-room-heading {
  gap: 9px;
}

.studio-flow-home-topbar .studio-minis-room-heading strong {
  max-width: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  font-weight: 900;
}

.studio-flow-home-topbar .studio-flow-home-mark.studio-minis-room-back-button {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  text-decoration: none;
  letter-spacing: 0;
  transform: none;
}

.studio-flow-home-topbar .studio-flow-home-brand.studio-minis-room-back-button {
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 38px;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 760;
  white-space: nowrap;
}

.studio-flow-home-brand-word {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
}

.studio-flow-home-brand-word::after {
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), transparent 78%);
  content: "";
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.studio-flow-home-brand-name {
  color: #ffffff;
  font-weight: 790;
}

.studio-flow-home-brand-studio {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 650;
}

.studio-flow-home-beta-badge {
  position: absolute;
  top: -15px;
  right: -31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 16px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.55rem;
  font-weight: 820;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  pointer-events: none;
}

.studio-flow-home-topbar .studio-flow-home-mark.studio-minis-room-back-button:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
  outline: none;
}

.studio-flow-home-topbar .studio-flow-home-brand.studio-minis-room-back-button:is(:hover, :focus-visible) .studio-flow-home-brand-word::after {
  opacity: 1;
  transform: translateY(0);
}

.studio-flow-home-topbar-spacer {
  display: block;
  min-width: 0;
}

.studio-flow-home-topbar-actions.studio-minis-room-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

.studio-flow-home-topbar-link,
.studio-flow-home-topbar-avatar {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  text-decoration: none;
}

.studio-flow-home-topbar-link {
  appearance: none;
  gap: 7px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-flow-home-topbar-link.is-primary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
}

.studio-flow-home-topbar-link.is-icon-only {
  width: 38px;
  padding: 0;
}

.studio-flow-home-topbar-link:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  outline: none;
  transform: translateY(-1px);
}

.studio-flow-home-topbar-link.is-primary:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #111111;
}

.studio-flow-home-topbar-link[data-creating="true"] {
  cursor: progress;
}

.studio-flow-home-topbar-avatar {
  appearance: none;
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #111111;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}

.studio-flow-home-topbar-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: inherit;
  object-fit: cover;
}

.studio-flow-home-topbar-sign-in {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.88);
}

.studio-profile-menu {
  display: inline-flex;
}

.studio-profile-menu > summary {
  list-style: none;
}

.studio-profile-menu > summary::-webkit-details-marker {
  display: none;
}

.studio-profile-menu-trigger {
  user-select: none;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.studio-profile-menu-trigger:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
  transform: translateY(-1px);
}

.studio-profile-menu-popover {
  position: fixed;
  top: 74px;
  right: var(--admin-studio-topbar-gutter, clamp(16px, 2.1vw, 40px));
  z-index: 640;
  display: grid;
  width: min(430px, calc(100vw - 28px));
  gap: 16px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(31, 34, 42, 0.98), rgba(27, 27, 28, 0.98)),
    #1d1d1f;
  color: #ffffff;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(126%);
}

.studio-profile-menu:not([open]) .studio-profile-menu-popover {
  display: none;
}

.studio-profile-menu-close {
  appearance: none;
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.studio-profile-menu-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.09);
  outline: none;
}

.studio-profile-menu-user {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 0 46px 0 4px;
}

.studio-profile-menu-avatar {
  appearance: none;
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #0b66b5;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 780;
  line-height: 1;
}

.studio-profile-menu-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-profile-menu-avatar-button {
  cursor: pointer;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    box-shadow 150ms ease,
    transform 150ms ease;
}

.studio-profile-menu-avatar-button:is(:hover, :focus-visible) {
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.32),
    0 0 0 3px rgba(255, 255, 255, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.studio-profile-menu-avatar-button:disabled {
  cursor: progress;
  transform: none;
}

.studio-profile-menu-avatar-camera {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.92);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(3px) scale(0.92);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.studio-profile-menu-avatar-button:is(:hover, :focus-visible) .studio-profile-menu-avatar-camera,
.studio-profile-menu-avatar-button:disabled .studio-profile-menu-avatar-camera {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.studio-profile-menu-user > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.studio-profile-menu-user strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-profile-menu-user small,
.studio-profile-menu-user em {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-profile-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.studio-profile-photo-spinner {
  animation: spin 0.86s linear infinite;
}

.studio-profile-photo-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: -1px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.studio-profile-photo-status.is-success {
  color: #9df2cf;
}

.studio-profile-photo-status.is-error {
  color: #ffb2b2;
}

.studio-profile-upgrade-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.06);
}

.studio-profile-credit-line {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 780;
}

.studio-profile-upgrade-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.92rem;
  line-height: 1.45;
}

.studio-profile-upgrade-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f1f1f1;
  color: #111111;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.studio-profile-upgrade-button:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.studio-profile-menu-actions {
  display: grid;
  gap: 10px;
}

.studio-profile-menu-actions form {
  display: contents;
}

.studio-profile-menu-actions a,
.studio-profile-menu-actions button {
  appearance: none;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 780;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-profile-menu-actions a:is(:hover, :focus-visible),
.studio-profile-menu-actions button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.studio-profile-menu-actions button:disabled {
  color: rgba(255, 255, 255, 0.46);
  cursor: progress;
  transform: none;
}

.studio-profile-menu-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 12px;
  padding-top: 4px;
  font-size: 0.78rem;
  font-weight: 650;
}

.studio-profile-menu-legal a {
  color: rgba(255, 255, 255, 0.38);
  text-decoration: none;
}

.studio-profile-menu-legal a:is(:hover, :focus-visible) {
  color: rgba(255, 255, 255, 0.78);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body:has(.legal-document-route-state) {
  background: #000;
  color-scheme: dark;
}

body:has(.legal-document-route-state) :is(.site-sidebar, .mobile-nav-toggle, .site-overlay, .site-footer) {
  display: none !important;
}

body:has(.legal-document-route-state) :is(.site-main-shell, .site-main) {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #000;
  box-shadow: none;
}

body:has(.legal-document-route-state) .site-main {
  --site-main-top: 0px;
}

.legal-document-page {
  min-height: 100svh;
  padding: 0 22px 82px;
  background:
    radial-gradient(circle at 82% 4%, rgba(217, 176, 106, 0.16), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24rem),
    #000;
  color: #f7f7f4;
}

.legal-document-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.legal-document-header {
  display: grid;
  gap: 46px;
  padding: 0 0 42px;
}

.legal-document-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px 0;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.92) 72%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(18px);
}

.legal-document-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #fff;
  font-size: 1rem;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
}

.legal-document-brand span {
  color: rgba(255, 255, 255, 0.92);
}

.legal-document-brand strong {
  color: rgba(255, 255, 255, 0.58);
  font: inherit;
  font-weight: 700;
}

.legal-document-nav {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.legal-document-nav a {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border-radius: 999px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  font-weight: 720;
  letter-spacing: 0;
  text-decoration: none;
}

.legal-document-nav a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.legal-document-nav a.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #090909;
}

.legal-document-hero {
  display: block;
  padding-top: 34px;
}

.legal-document-intro {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.legal-document-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-document-kicker-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

.legal-document-intro h1 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-size: 4.9rem;
  font-weight: 780;
  line-height: 0.92;
  letter-spacing: 0;
}

.legal-document-intro p {
  max-width: 66ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
  line-height: 1.66;
}

.legal-document-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.legal-document-card {
  display: grid;
  gap: 12px;
  padding: 26px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: transparent;
  box-shadow: none;
}

.legal-document-card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.22rem;
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: 0;
}

.legal-document-card p {
  max-width: 82ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.96rem;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .legal-document-header {
    gap: 46px;
  }

  .legal-document-hero {
    padding-top: 18px;
  }

  .legal-document-intro h1 {
    max-width: 13ch;
    font-size: 4.25rem;
  }
}

@media (max-width: 720px) {
  .legal-document-page {
    padding: 0 12px 50px;
  }

  .legal-document-header {
    gap: 30px;
    padding-bottom: 26px;
  }

  .legal-document-topbar {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 16px 0 4px;
  }

  .legal-document-brand {
    font-size: 0.98rem;
  }

  .legal-document-nav {
    width: 100%;
  }

  .legal-document-nav a {
    flex: 1;
    padding-inline: 10px;
  }

  .legal-document-hero {
    padding-top: 16px;
  }

  .legal-document-kicker-row span {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 0.72rem;
  }

  .legal-document-intro h1 {
    max-width: 11ch;
    font-size: 3rem;
    line-height: 0.96;
  }

  .legal-document-intro p {
    font-size: 0.98rem;
  }

  .legal-document-card {
    gap: 12px;
    padding: 21px 0 23px;
  }
}

@media (max-width: 680px) {
  .studio-profile-menu-popover {
    top: 66px;
    right: 12px;
    left: 12px;
    width: auto;
    gap: 13px;
    padding: 18px;
    border-radius: 26px;
  }

  .studio-profile-menu-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.55rem;
  }

  .studio-profile-upgrade-card {
    padding: 17px;
    border-radius: 22px;
  }

  .studio-profile-menu-actions a,
  .studio-profile-menu-actions button {
    min-height: 50px;
  }
}

.studio-motion-hero.studio-flow-hero {
  overflow: hidden;
  width: calc(100vw - 20px);
  height: min(56.25vw, 76svh, 920px);
  min-height: clamp(520px, 54vw, 760px);
  margin: 0 auto;
  border-radius: 22px;
  box-shadow: none;
}

.studio-flow-hero .studio-motion-hero-frame {
  box-shadow: none;
}

.studio-flow-hero::before {
  height: 48%;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), transparent 72%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 28%);
}

.studio-flow-hero::after {
  background:
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, transparent 38%, rgba(0, 0, 0, 0.26) 100%);
}

.studio-flow-hero .studio-motion-hero-copy {
  left: max(58px, calc((100vw - 1180px) / 2 + 34px));
  bottom: clamp(38px, 5.2vw, 78px);
  width: min(780px, calc(100vw - 48px));
}

.studio-flow-hero .studio-motion-hero-copy h1 {
  display: grid;
  gap: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(3.15rem, 5.56vw, 5.1rem);
  font-weight: 930;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.2),
    0 16px 34px rgba(0, 0, 0, 0.42);
}

.studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
  width: min(760px, 100%);
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--body-font);
  font-size: clamp(1.08rem, 1.36vw, 1.22rem);
  font-weight: 780;
  line-height: 1.38;
  letter-spacing: 0;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.52);
}

.studio-flow-hero-donation {
  display: inline-flex;
  width: fit-content;
  max-width: min(560px, 100%);
  min-height: 42px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 7px 15px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.34);
  color: rgba(255, 255, 255, 0.84);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(120%);
}

.studio-flow-hero-donation strong {
  display: inline-grid;
  min-width: 56px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #090909;
  font-size: 0.92rem;
  font-weight: 960;
  line-height: 1;
}

.studio-flow-hero-donation span {
  min-width: 0;
  font-size: clamp(0.78rem, 0.98vw, 0.9rem);
  font-weight: 820;
  line-height: 1.18;
}

.studio-flow-hero-progress {
  --studio-hero-progress: 0%;
  display: flex;
  width: min(282px, 72vw);
  gap: 10px;
  margin-top: 14px;
}

.studio-flow-hero-progress button {
  appearance: none;
  flex: 1 1 0;
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition:
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.studio-flow-hero-progress button span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.studio-flow-hero-progress button.is-active {
  background: rgba(255, 255, 255, 0.32);
  cursor: default;
}

.studio-flow-hero-progress button.is-active span {
  width: var(--studio-hero-progress);
}

.studio-flow-hero-progress button:not(.is-active):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.44);
  outline: none;
  transform: translateY(-1px);
}

.studio-flow-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.studio-flow-hero-proof span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  font-weight: 820;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(120%);
}

.studio-flow-hero-cta {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 430;
  display: inline-flex;
  justify-content: center;
  width: min(100%, 420px);
  pointer-events: none;
  transform: translateX(-50%);
}

.studio-flow-hero-cta .studio-flow-new-project-button {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  pointer-events: auto;
  transform: none;
}

.studio-flow-hero-cta .studio-flow-new-project-button:is(:hover, :focus-visible) {
  transform: translateY(-6px);
}

.studio-flow-hero-cta .studio-flow-new-project-button:active {
  transform: translateY(-2px) scale(0.992);
}

.studio-flow-home:has(.studio-flow-hero-cta) .studio-flow-hero .studio-motion-hero-copy {
  bottom: clamp(150px, 10.5vw, 182px);
}

.studio-flow-starter-hero {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, transparent),
    #030303;
}

.studio-flow-starter-hero::before {
  height: 58%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 66%),
    linear-gradient(90deg, rgba(255, 200, 0, 0.16), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.07));
}

.studio-flow-starter-hero::after {
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, transparent 42%, rgba(0, 0, 0, 0.44) 100%);
}

.studio-flow-starter-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.studio-flow-starter-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 96px);
  opacity: 0.46;
  pointer-events: none;
}

.studio-flow-starter-stage::after {
  position: absolute;
  right: clamp(-120px, -6vw, -40px);
  bottom: clamp(90px, 12vw, 180px);
  width: min(620px, 54vw);
  aspect-ratio: 1.72;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.032);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 38px 120px rgba(0, 0, 0, 0.58);
  content: "";
  transform: rotate(-7deg);
}

.studio-flow-starter-surface {
  position: absolute;
  inset: auto -8% -22% -8%;
  height: 45%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 26%),
    linear-gradient(90deg, rgba(255, 200, 0, 0.09), transparent 35%, rgba(255, 255, 255, 0.035) 76%, transparent);
  transform: skewY(-4deg);
}

.studio-flow-starter-frame {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 34px 96px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.studio-flow-starter-frame span {
  display: block;
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
}

.studio-flow-starter-frame-main {
  top: clamp(72px, 9vw, 118px);
  right: clamp(76px, 10vw, 184px);
  width: min(520px, 42vw);
  aspect-ratio: 16 / 9;
  transform: rotate(3deg);
}

.studio-flow-starter-frame-side {
  top: clamp(132px, 16vw, 230px);
  right: clamp(430px, 41vw, 620px);
  width: min(290px, 24vw);
  aspect-ratio: 4 / 5;
  opacity: 0.82;
  transform: rotate(-9deg);
}

.studio-flow-starter-frame-low {
  right: clamp(88px, 12vw, 230px);
  bottom: clamp(96px, 10vw, 160px);
  width: min(360px, 30vw);
  aspect-ratio: 16 / 10;
  opacity: 0.72;
  transform: rotate(8deg);
}

.studio-flow-starter-timeline {
  position: absolute;
  right: clamp(34px, 5vw, 92px);
  bottom: clamp(34px, 4vw, 62px);
  display: grid;
  grid-template-columns: repeat(5, minmax(34px, 1fr));
  gap: 8px;
  width: min(520px, 42vw);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 90px rgba(0, 0, 0, 0.42);
}

.studio-flow-starter-timeline span {
  aspect-ratio: 16 / 10;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.3), transparent 50%),
    rgba(255, 255, 255, 0.08);
}

.studio-flow-starter-stamp {
  position: absolute;
  top: clamp(78px, 8vw, 120px);
  left: clamp(34px, 5vw, 86px);
  display: grid;
  width: clamp(78px, 8vw, 118px);
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.58rem, 0.76vw, 0.74rem);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 26px 70px rgba(0, 0, 0, 0.36);
}

.studio-flow-starter-stamp span:first-child {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 1.4vw, 1.44rem);
  font-weight: 960;
}

.studio-flow-starter-copy {
  max-width: min(760px, calc(100vw - 48px));
}

.studio-flow-projects {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  width: min(1360px, calc(100vw - 48px));
  margin: clamp(20px, 3.2vw, 38px) auto 0;
  align-items: start;
}

.studio-flow-project-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 22px;
  background: #0d0d0d;
  color: #ffffff;
  box-shadow: none;
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.studio-flow-project-card:is(:hover, :focus-within) {
  box-shadow: 0 24px 76px rgba(0, 0, 0, 0.36);
  outline: none;
  transform: translateY(-2px);
}

.studio-flow-project-card.is-ready {
  background: #090909;
}

.studio-flow-project-card-link {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-rows: auto minmax(64px, auto);
  overflow: hidden;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
}

.studio-flow-project-card-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.studio-flow-project-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  background: #171716;
}

.studio-flow-project-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 52%, rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 54%);
  pointer-events: none;
}

.studio-flow-project-card :is(img, video) {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 200ms ease, opacity 200ms ease;
}

.studio-flow-project-card:is(:hover, :focus-within) :is(img, video) {
  opacity: 1;
  transform: scale(1.025);
}

.studio-flow-project-card video {
  display: block;
}

.studio-flow-project-complete-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(210, 255, 222, 0.28);
  border-radius: 999px;
  background: rgba(7, 28, 17, 0.72);
  color: rgba(222, 255, 231, 0.96);
  font-size: 0.74rem;
  font-weight: 920;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px) saturate(135%);
}

.studio-flow-project-copy {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  min-height: 66px;
  align-content: center;
  gap: 5px;
  padding: 14px 104px 16px 22px;
  background: #0d0d0d;
}

.studio-flow-project-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  font-weight: 760;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-flow-project-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.8rem;
  font-weight: 680;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-flow-project-actions {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 8;
  display: inline-flex;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.studio-flow-project-card:is(:hover, :focus-within) .studio-flow-project-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.studio-flow-project-action {
  appearance: none;
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(130%);
}

.studio-flow-project-action::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 50%;
  bottom: calc(100% + 9px);
  z-index: 12;
  display: block;
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.92);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  transform: translate(50%, 4px) scale(0.96);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  white-space: nowrap;
}

.studio-flow-project-action::before {
  content: "";
  position: absolute;
  right: 50%;
  bottom: calc(100% + 4px);
  z-index: 12;
  width: 7px;
  height: 7px;
  background: rgba(16, 16, 16, 0.92);
  opacity: 0;
  pointer-events: none;
  transform: translate(50%, 4px) rotate(45deg);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.studio-flow-project-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.studio-flow-project-action:is(:hover, :focus-visible)::before,
.studio-flow-project-action:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(50%, 0) scale(1);
}

.studio-flow-project-action:is(:hover, :focus-visible)::before {
  transform: translate(50%, 0) rotate(45deg);
}

.studio-flow-archive-panel {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 14px;
  width: min(1360px, calc(100vw - 48px));
  margin: clamp(18px, 2.5vw, 32px) auto 0;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.86);
}

.studio-flow-archive-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding-inline: 4px;
}

.studio-flow-archive-head div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-flow-archive-head span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-flow-archive-head strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  font-weight: 760;
  letter-spacing: 0;
}

.studio-flow-archive-head p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.8rem;
  font-weight: 620;
  line-height: 1.42;
  text-align: right;
}

.studio-flow-archive-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-flow-archive-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-width: 0;
  min-height: 82px;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.studio-flow-archive-thumb {
  position: relative;
  display: block;
  width: 74px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.studio-flow-archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.studio-flow-archive-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-flow-archive-copy strong,
.studio-flow-archive-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-flow-archive-copy strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 730;
}

.studio-flow-archive-copy small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.76rem;
  font-weight: 650;
}

.studio-flow-archive-restore-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0;
  cursor: pointer;
}

.studio-flow-archive-restore-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  outline: none;
}

.studio-flow-archive-restore-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

@media (hover: none) {
  .studio-flow-project-actions {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.studio-flow-new-project-button {
  appearance: none;
  position: fixed;
  right: auto;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 240;
  display: inline-flex;
  width: min(252px, calc(100vw - 40px));
  min-height: 106px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(232, 226, 220, 0.52), rgba(178, 169, 161, 0.34)),
    rgba(188, 180, 172, 0.42);
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 520;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(22px) saturate(126%);
  transform: translateX(-50%);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.studio-flow-new-project-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    linear-gradient(135deg, rgba(242, 237, 231, 0.62), rgba(194, 185, 176, 0.42)),
    rgba(198, 190, 182, 0.48);
  box-shadow:
    0 34px 82px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  cursor: pointer;
  outline: none;
  transform: translate(-50%, -6px);
}

.studio-flow-new-project-button:active {
  transform: translate(-50%, -2px) scale(0.992);
}

.studio-flow-new-project-button[data-creating="true"] {
  cursor: progress;
}

.studio-flow-new-project-button svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

body.studio-auth-modal-open {
  overflow: hidden;
}

.studio-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 620;
  display: grid;
  place-items: center;
  padding: 22px;
  color: #ffffff;
}

.studio-auth-modal-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.74);
  cursor: pointer;
  backdrop-filter: blur(22px) saturate(118%);
}

.studio-auth-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(340px, 1fr);
  gap: 18px;
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(31, 31, 31, 0.98), rgba(8, 8, 8, 0.98)),
    #0b0b0b;
  box-shadow:
    0 34px 110px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-auth-modal-panel.is-simple {
  grid-template-columns: minmax(0, 430px);
  width: min(486px, calc(100vw - 32px));
  padding-block-start: 68px;
}

.studio-auth-modal-close {
  appearance: none;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.studio-auth-modal-close:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.studio-auth-modal-copy {
  display: grid;
  min-height: 100%;
  align-content: end;
  gap: 18px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.03);
}

.studio-auth-modal-copy > span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.studio-auth-modal-copy h2 {
  max-width: 7.6ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(3rem, 5.4vw, 5rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.95;
}

.studio-auth-modal-copy p {
  max-width: 31ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 1rem;
  line-height: 1.55;
}

.studio-auth-modal .auth-card {
  align-content: center;
  gap: 12px;
}

.studio-auth-modal .form-card {
  padding: 20px;
  border-color: rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.052);
  color: #ffffff;
  box-shadow: none;
}

.studio-auth-modal .login-provider-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.05);
}

.studio-auth-modal .login-provider-heading h2,
.studio-auth-modal .login-email-heading h2 {
  color: #ffffff;
  font-size: clamp(1.1rem, 1.8vw, 1.32rem);
  letter-spacing: 0;
}

.studio-auth-modal .login-provider-heading p:last-child,
.studio-auth-modal .helper-text {
  color: rgba(255, 255, 255, 0.56);
}

.studio-auth-modal .meta-label {
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.1em;
}

.studio-auth-modal .google-sign-in-button {
  min-height: 50px;
  border-color: rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: #ffffff;
  color: #101010;
  box-shadow: none;
}

.studio-auth-modal .google-sign-in-button:is(:hover, :focus-visible) {
  border-color: #ffffff;
  background: #ffffff;
  outline: none;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
}

.studio-auth-modal .field label {
  color: rgba(255, 255, 255, 0.76);
}

.studio-auth-modal .field input {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.24);
  color: #ffffff;
}

.studio-auth-modal .field input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.studio-auth-modal .field input:focus {
  border-color: rgba(255, 255, 255, 0.44);
  outline: 3px solid rgba(255, 255, 255, 0.1);
}

.studio-auth-modal .button-primary {
  min-height: 50px;
  border-color: #ffffff;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  box-shadow: none;
}

.studio-auth-modal .button-primary:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

.studio-auth-modal .button-primary:disabled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.44);
}

.studio-auth-modal .inline-note {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}

.studio-auth-modal .success-note {
  background: rgba(125, 211, 162, 0.14);
  color: rgba(228, 255, 239, 0.92);
}

.studio-auth-modal .button-ghost {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

@media (max-width: 760px) {
  .studio-auth-modal {
    align-items: stretch;
    padding: 12px;
  }

  .studio-auth-modal-panel {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-height: calc(100svh - 24px);
    gap: 12px;
    padding: 12px;
    border-radius: 26px;
  }

  .studio-auth-modal-copy {
    min-height: 238px;
    padding: 24px;
    border-radius: 22px;
  }

  .studio-auth-modal-copy h2 {
    max-width: 9ch;
    font-size: clamp(2.45rem, 11vw, 3.7rem);
  }

  .studio-auth-modal-copy p {
    max-width: 34ch;
    font-size: 0.94rem;
  }

  .studio-auth-modal-close {
    top: 20px;
    right: 20px;
  }

  .studio-auth-modal-panel.is-simple {
    padding-block-start: 66px;
  }

  .studio-auth-modal .form-card {
    padding: 18px;
    border-radius: 22px;
  }
}

.studio-project-create-form {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(638px, calc(100vw - 36px));
  gap: 14px;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(58, 58, 56, 0.74), rgba(22, 22, 21, 0.86)),
    rgba(28, 28, 27, 0.74);
  color: #ffffff;
  box-shadow:
    0 28px 86px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(135%);
}

.studio-project-create-head {
  display: grid;
  gap: 8px;
}

.studio-project-create-head > span,
.studio-project-create-field > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.studio-project-create-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.94;
}

.studio-project-create-head p {
  max-width: 520px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  font-weight: 740;
  line-height: 1.42;
}

.studio-project-create-field {
  display: grid;
  gap: 7px;
}

.studio-project-create-field input,
.studio-project-create-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 720;
}

.studio-project-create-field input {
  min-height: 48px;
  padding: 0 15px;
}

.studio-project-create-field textarea {
  min-height: 96px;
  padding: 13px 15px;
  resize: vertical;
}

.studio-project-create-field input::placeholder,
.studio-project-create-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.studio-project-create-field input:focus,
.studio-project-create-field textarea:focus {
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.075);
}

.studio-project-create-preview {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
}

.studio-project-create-preview span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-project-create-submit {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #171716;
  font: inherit;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
  appearance: none;
}

.studio-project-create-submit:not(:disabled):is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-project-create-submit:disabled {
  cursor: default;
  opacity: 0.56;
}

.studio-user-project-room {
  width: min(1180px, calc(100vw - 36px));
  max-width: 1180px;
  gap: 18px;
  padding: 96px 0 188px;
  background: #000000;
  color: #ffffff;
}

.studio-user-project-room.is-dragging::before {
  position: fixed;
  inset: 14px;
  z-index: 44;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.045);
  content: "";
  pointer-events: none;
}

.studio-user-project-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: clamp(360px, 52vw, 620px);
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #151515;
  box-shadow: 0 26px 76px rgba(0, 0, 0, 0.34);
}

.studio-user-project-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.studio-user-project-hero::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.84)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.58), transparent 74%);
}

.studio-user-project-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
  padding: clamp(22px, 5vw, 46px) clamp(22px, 5vw, 46px) clamp(132px, 17vw, 172px);
}

.studio-user-project-hero-copy > span,
.studio-user-project-panel-head span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.studio-user-project-hero-copy h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(3.1rem, 9vw, 7rem);
  line-height: 0.85;
}

.studio-user-project-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.96rem, 1.55vw, 1.1rem);
  font-weight: 760;
  line-height: 1.42;
}

.studio-user-project-hero-copy dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
}

.studio-user-project-hero-copy dl div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.studio-user-project-hero-copy dt {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.64rem;
  font-weight: 950;
  text-transform: uppercase;
}

.studio-user-project-hero-copy dd {
  margin: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-project-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 54px;
}

.studio-user-project-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    #111111;
  color: #ffffff;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.studio-user-project-panel-wide {
  grid-row: span 2;
}

.studio-user-project-panel-head {
  display: grid;
  gap: 4px;
}

.studio-user-project-panel-head strong {
  color: #ffffff;
  font-size: 1.02rem;
  line-height: 1.1;
}

.studio-user-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.studio-user-reference-grid figure {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 196px;
  align-content: end;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #181817;
}

.studio-user-reference-grid figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-user-reference-grid figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 3px;
  padding: 42px 11px 11px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82) 44%);
}

.studio-user-reference-grid figcaption strong,
.studio-user-reference-grid figcaption small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-reference-grid figcaption strong {
  color: #ffffff;
  font-size: 0.78rem;
}

.studio-user-reference-grid figcaption small {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.7rem;
  font-weight: 760;
}

.studio-user-reference-grid figure button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #ffffff;
  cursor: pointer;
}

.studio-user-reference-grid.is-empty {
  min-height: 260px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.studio-user-reference-grid.is-empty > div {
  display: grid;
  gap: 7px;
  justify-items: center;
  max-width: 300px;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.studio-user-reference-grid.is-empty strong {
  color: #ffffff;
  font-size: 0.96rem;
}

.studio-user-reference-grid.is-empty small,
.studio-user-final-placeholder small {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.studio-user-project-timeline {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-user-project-timeline li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  font-weight: 850;
}

.studio-user-project-timeline i {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #111111;
  font-style: normal;
}

.studio-user-project-timeline li.is-active {
  color: #ffffff;
}

.studio-user-project-timeline li.is-done {
  color: rgba(255, 255, 255, 0.82);
}

.studio-user-project-timeline li.is-done i {
  border-color: rgba(116, 224, 200, 0.36);
  background: #74e0c8;
}

.studio-user-project-timeline li.is-active i {
  border-color: rgba(255, 200, 0, 0.44);
  background: rgba(255, 200, 0, 0.18);
}

.studio-user-delivery-panel {
  min-height: 284px;
}

.studio-user-final-video,
.studio-user-final-placeholder {
  display: grid;
  gap: 10px;
}

.studio-user-final-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #000000;
  object-fit: cover;
}

.studio-user-final-video a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
  font-size: 0.82rem;
  font-weight: 950;
  text-decoration: none;
}

.studio-user-final-placeholder {
  min-height: 178px;
  place-items: center;
  align-content: center;
  padding: 18px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}

.studio-user-final-placeholder strong {
  color: #ffffff;
  font-size: 0.94rem;
}

.studio-user-project-command {
  z-index: 46;
}

.studio-user-project-command .admin-studio-flow-working-notice span {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .studio-flow-home {
    padding-top: 58px;
  }

  .studio-page.studio-home-page.studio-flow-home {
    padding-top: 58px;
  }

  .studio-flow-home-topbar.admin-studio-topbar.studio-minis-room-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 58px;
    padding: 9px 12px;
  }

  .studio-flow-home-topbar .studio-flow-home-topbar-spacer {
    display: none;
  }

  .studio-flow-home-topbar .studio-minis-room-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .studio-flow-home-topbar .studio-minis-room-heading strong {
    max-width: 116px;
  }

  .studio-flow-home-topbar .studio-flow-home-brand.studio-minis-room-back-button {
    width: auto;
    padding: 0;
  }

  .studio-flow-home-brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .studio-flow-home-topbar-actions.studio-minis-room-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .studio-flow-home-topbar-link {
    width: 38px;
    padding: 0;
  }

  .studio-flow-home-topbar-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .studio-flow-hero {
    width: calc(100vw - 16px);
    min-height: 620px;
    border-radius: 18px;
  }

  .studio-flow-hero .studio-motion-hero-copy {
    left: 22px;
    bottom: 44px;
    width: calc(100vw - 52px);
  }

  .studio-flow-hero .studio-motion-hero-copy h1 {
    font-size: clamp(3rem, 14vw, 4.8rem);
    line-height: 1.02;
  }

  .studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
    width: min(360px, 100%);
    font-size: 1rem;
  }

  .studio-flow-hero-donation {
    max-width: min(360px, 100%);
    align-items: flex-start;
    border-radius: 20px;
  }

  .studio-flow-hero-donation strong {
    min-width: 50px;
  }

  .studio-flow-hero-donation span {
    font-size: 0.76rem;
  }

  .studio-flow-projects {
    grid-template-columns: 1fr;
    margin-top: 18px;
  }

  .studio-flow-archive-panel {
    width: min(100%, calc(100vw - 36px));
  }

  .studio-flow-archive-head {
    display: grid;
    gap: 8px;
  }

  .studio-flow-archive-head p {
    max-width: none;
    text-align: left;
  }

  .studio-flow-archive-list {
    grid-template-columns: 1fr;
  }

  .studio-flow-archive-item {
    grid-template-columns: 66px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .studio-flow-archive-thumb {
    width: 66px;
  }

  .studio-flow-archive-restore-button {
    min-width: 42px;
    padding-inline: 11px;
  }

  .studio-flow-archive-restore-button span {
    display: none;
  }

  .studio-flow-project-card {
    min-height: 0;
  }

  .studio-flow-new-project-button {
    width: min(230px, calc(100vw - 36px));
    min-height: 106px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px;
  }

  .studio-project-create-form {
    border-radius: 24px;
  }

  .studio-user-project-room {
    width: min(100%, calc(100vw - 24px));
    padding-top: 84px;
    padding-bottom: 224px;
  }

  .studio-user-project-hero-copy dl,
  .studio-user-project-board {
    grid-template-columns: 1fr;
  }

  .studio-user-project-hero-copy h1 {
    font-size: clamp(2.7rem, 18vw, 4.8rem);
  }

  .studio-user-project-panel-wide {
    grid-row: auto;
  }

  .studio-user-reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-user-project-command.admin-studio-flow-command-dock {
    right: 12px;
    bottom: 14px;
    left: 12px;
    max-width: none;
    padding: 11px;
    border-radius: 24px;
  }

  .studio-user-project-command .admin-studio-flow-command-form {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
  }

  .studio-user-project-command .admin-studio-flow-submit,
  .studio-user-project-command .admin-studio-flow-dropzone,
  .studio-user-project-command .admin-studio-flow-add-menu-wrap {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .studio-user-story-film-cta {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .studio-user-story-film-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .studio-user-story-film-cta a,
  .studio-user-story-film-cta button {
    min-height: 40px;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .studio-flow-projects,
  .studio-user-project-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-user-project-panel-wide {
    grid-column: 1 / -1;
  }
}

.studio-user-project-kind-toggle {
  min-width: 108px;
}

@media (max-width: 680px) {
  .studio-user-project-kind-toggle {
    min-width: 88px;
  }
}

.studio-user-minis-project-page {
  width: calc(100vw - 74px);
  max-width: none;
  min-height: 100svh;
  margin: 0 0 0 74px;
  padding: 0 0 320px;
  background: var(--studio-minis-canvas, #f6f4ed) !important;
  color: #111827;
}

.studio-user-minis-sidebar.site-sidebar {
  transform: translateX(0);
}

.studio-user-minis-sidebar .sidebar-studio-nav {
  gap: 14px;
}

.studio-user-minis-console {
  width: min(1180px, calc(100vw - 126px));
  margin: 0 26px 0 100px;
  gap: 20px;
}

.studio-user-minis-toolbar {
  width: 100%;
}

.studio-user-start-choice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(12px) saturate(120%);
}

.studio-user-start-choice-modal {
  display: grid;
  width: min(780px, 100%);
  gap: 18px;
  box-sizing: border-box;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 8px;
  background: #080808;
  color: #ffffff;
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.46);
}

.studio-user-start-choice {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: #080808;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.studio-user-start-choice-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.studio-user-start-choice-copy small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-user-start-choice-copy strong {
  max-width: 720px;
  color: #ffffff;
  font-size: clamp(1.3rem, 2.7vw, 2.1rem);
  font-weight: 940;
  letter-spacing: 0;
  line-height: 1.02;
}

.studio-user-start-choice-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
  font-weight: 680;
  line-height: 1.42;
}

.studio-user-start-choice-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-user-start-choice-card {
  display: grid;
  align-content: space-between;
  min-height: 188px;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 8px;
  background: #0d0d0d;
  padding: 16px;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.studio-user-start-choice-card:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background: #111111;
}

.studio-user-start-choice-card:disabled {
  cursor: wait;
  opacity: 0.72;
}

.studio-user-start-choice-card span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.studio-user-start-choice-card strong {
  color: #ffffff;
  font-size: clamp(1.1rem, 1.7vw, 1.44rem);
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1.06;
}

.studio-user-start-choice-card small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
}

.studio-user-start-choice-card em {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 6px;
  border-radius: 999px;
  background: #ffffff;
  padding: 0 12px;
  color: #111111;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 880;
}

.studio-user-start-choice-card.is-free {
  border-color: rgba(255, 200, 0, 0.26);
}

.studio-user-start-choice-card.is-free em {
  background: #ffc800;
  color: #141006;
}

@media (max-width: 760px) {
  .studio-user-start-choice {
    grid-template-columns: 1fr;
    gap: 13px;
    padding: 16px;
  }

  .studio-user-start-choice-options {
    grid-template-columns: 1fr;
  }

  .studio-user-start-choice-card {
    min-height: 154px;
  }

  .studio-user-start-choice-modal {
    max-height: min(720px, calc(100svh - 28px));
    overflow-y: auto;
  }

}

.studio-user-story-film-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px 54px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  background: #080808;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.studio-user-story-film-copy {
  display: grid;
  gap: 7px;
}

.studio-user-story-film-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.studio-user-story-film-cta-mini {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 0 18px;
}

.studio-user-story-film-cta-mini button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 0 15px;
  font-size: 0.82rem;
  font-weight: 880;
  cursor: pointer;
}

.studio-user-story-film-cta-mini-primary {
  background: #ffffff;
  color: #111111;
}

.studio-user-story-film-cta-mini-detail {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.78);
}

.studio-user-story-film-cta-mini button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.studio-user-story-film-cta-mini button:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-story-film-cta small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-user-story-film-cta small.studio-user-story-film-terms {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.studio-user-story-film-cta strong {
  color: #ffffff;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.02;
}

.studio-user-story-film-cta p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.35;
}

.studio-user-story-film-cta p.studio-user-story-film-guidance {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 680;
  line-height: 1.42;
}

.studio-user-story-film-impact {
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.25;
}

.studio-user-story-film-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-user-story-film-value {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.studio-user-story-film-value span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
}

.studio-user-story-film-requirement {
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
}

.studio-user-story-film-requirement.is-ready {
  border: 0;
  background: linear-gradient(135deg, #8fffbf, #2ee687);
  color: #021a0c;
  box-shadow: 0 0 0 1px rgba(143, 255, 190, 0.24), 0 10px 28px rgba(46, 230, 135, 0.2);
}

.studio-user-story-film-requirement svg {
  flex: 0 0 auto;
  margin-right: 5px;
  stroke-width: 3;
}

.studio-user-story-film-cta.is-confirmed {
  background: #080808;
}

.studio-user-story-film-cta a,
.studio-user-story-film-cta button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  padding: 0 18px;
  color: #111111;
  font-size: 0.84rem;
  font-weight: 880;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.studio-user-story-film-cta a {
  border: 0;
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.84);
}

.studio-user-story-film-cta a.studio-user-story-film-custom-series,
html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a.studio-user-story-film-custom-series {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.76rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none;
}

.studio-user-story-film-cta a.studio-user-story-film-custom-series:is(:hover, :focus-visible),
html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a.studio-user-story-film-custom-series:is(:hover, :focus-visible) {
  color: rgba(255, 255, 255, 0.86);
  background: transparent;
  outline: none;
  transform: translateY(-1px);
}

.studio-user-story-film-cta button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.studio-user-story-film-cta button:not(.studio-user-story-film-dismiss) svg {
  width: 16px;
  height: 16px;
  animation: spin 800ms linear infinite;
}

.studio-user-story-film-cta a:is(:hover, :focus-visible),
.studio-user-story-film-cta button:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-story-film-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-grid !important;
  width: 30px !important;
  min-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #141414 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  cursor: pointer;
  transform: none !important;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.studio-user-story-film-dismiss svg {
  width: 16px;
  height: 16px;
  animation: none !important;
  transform: none !important;
}

.studio-user-story-film-dismiss:is(:hover, :focus-visible) {
  background: #1f1f1f !important;
  color: #ffffff !important;
  transform: none !important;
}

.studio-user-story-direction-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(320px, 1.55fr);
  gap: 14px;
  align-items: center;
  margin: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.08), transparent 34%),
    #080808;
  padding: 14px;
  color: #ffffff;
}

.studio-user-story-basics-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  color: #ffffff;
}

.studio-user-story-basic-card {
  position: relative;
  display: inline-flex;
  max-width: min(100%, 360px);
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.22), transparent 22%),
    rgba(255, 255, 255, 0.09);
  padding: 0 15px 0 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 840;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.045) inset,
    0 12px 32px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  overflow: hidden;
  transition:
    background 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-user-story-basic-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, transparent 68%);
  content: "";
  opacity: 0.42;
  transform: translateX(-120%);
  animation: studioUserStoryBasicShine 2200ms ease-in-out infinite;
  pointer-events: none;
}

.studio-user-story-basic-card:is(:hover, :focus-visible) {
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.28), transparent 24%),
    rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 14px 40px rgba(0, 0, 0, 0.36);
  outline: none;
  transform: translateY(-1px);
}

.studio-user-story-basic-card:is(:hover, :focus-visible)::after {
  opacity: 0.62;
  animation-duration: 1200ms;
}

.studio-user-story-basic-spark {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.38), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.06));
  color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.studio-user-story-basic-spark::before {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 64%);
  content: "";
  opacity: 0.9;
}

.studio-user-story-basic-card > span:not(.studio-user-story-basic-spark) {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-user-story-basic-card strong {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 880;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-story-basic-card.is-ready {
  border-color: rgba(74, 222, 128, 0.24);
  background:
    radial-gradient(circle at 14% 24%, rgba(74, 222, 128, 0.13), transparent 28%),
    rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(74, 222, 128, 0.08) inset,
    0 0 22px rgba(34, 197, 94, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.28);
}

.studio-user-story-basic-card.is-ready::after {
  display: none;
}

.studio-user-story-basic-card.is-ready .studio-user-story-basic-spark {
  border-color: rgba(187, 247, 208, 0.42);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.36), transparent 34%),
    linear-gradient(145deg, #7bf2a5, #22c55e 68%, #16a34a);
  color: #ffffff;
  box-shadow:
    0 0 18px rgba(34, 197, 94, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.studio-user-story-basic-card.is-needed {
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.3), transparent 25%),
    linear-gradient(145deg, rgba(251, 191, 36, 0.16), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.09);
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.18) inset,
    0 0 24px rgba(251, 191, 36, 0.14),
    0 14px 38px rgba(0, 0, 0, 0.34);
  animation: studioUserStoryNeededPulse 2100ms ease-in-out infinite;
}

.studio-user-story-basic-card.is-needed::after {
  opacity: 0.78;
  animation-duration: 1500ms;
}

.studio-user-story-basic-card.is-needed .studio-user-story-basic-spark {
  border-color: rgba(254, 243, 199, 0.52);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.46), transparent 35%),
    linear-gradient(145deg, #fff7d6, #fbbf24 58%, #d97706);
  color: #ffffff;
  box-shadow:
    0 0 22px rgba(251, 191, 36, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.studio-user-story-basic-card.is-needed > span:not(.studio-user-story-basic-spark) {
  color: rgba(254, 243, 199, 0.78);
}

.studio-user-story-basic-card.is-recommended {
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 255, 255, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.075) inset,
    0 12px 34px rgba(0, 0, 0, 0.26);
}

.studio-user-story-basic-card.is-recommended .studio-user-story-basic-spark {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

.studio-user-story-basic-card.is-recommended > span:not(.studio-user-story-basic-spark) {
  color: rgba(255, 255, 255, 0.58);
}

.studio-user-story-note-card {
  gap: 0;
  padding: 0;
  cursor: default;
}

.studio-user-story-format-card {
  max-width: min(100%, 430px);
  padding-right: 7px;
  cursor: default;
}

.studio-user-story-format-card.is-locked {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.045);
}

.studio-user-format-toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 2px;
  margin-left: 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  padding: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}

.studio-user-format-toggle button {
  appearance: none;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 9px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-user-format-toggle button:is(:hover, :focus-visible) {
  color: #ffffff;
  outline: none;
}

.studio-user-format-toggle button.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #111111;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.studio-user-format-toggle button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.studio-user-story-format-card.is-locked .studio-user-format-toggle button:disabled {
  cursor: not-allowed;
}

.studio-user-format-lock-note {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.studio-user-story-note-main {
  appearance: none;
  display: inline-flex;
  min-width: 0;
  min-height: 46px;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  padding: 0 11px 0 8px;
  color: inherit;
  cursor: pointer;
}

.studio-user-story-note-main:is(:hover, :focus-visible) {
  outline: none;
}

.studio-user-story-note-main > span:not(.studio-user-story-basic-spark) {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-user-story-basic-card.is-ready .studio-user-story-note-main > span:not(.studio-user-story-basic-spark) {
  color: rgba(187, 247, 208, 0.66);
}

.studio-user-story-note-main strong {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 880;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-story-note-delete {
  appearance: none;
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: 30px;
  height: 30px;
  min-width: 30px;
  place-items: center;
  margin-right: 7px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
}

.studio-user-story-note-delete:is(:hover, :focus-visible) {
  background: rgba(248, 113, 113, 0.18);
  color: rgba(254, 202, 202, 0.96);
  outline: none;
}

.studio-user-story-note-delete:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.studio-user-story-note-delete svg {
  width: 13px;
  height: 13px;
}

.studio-user-story-basic-card.is-ready > span:not(.studio-user-story-basic-spark) {
  color: rgba(187, 247, 208, 0.66);
}

.studio-user-story-basic-card .studio-user-story-basic-spark svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

.studio-user-story-basic-card .studio-user-story-basic-spark .studio-user-story-basic-svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.studio-user-story-basic-svg-card {
  fill: rgba(255, 255, 255, 0.18);
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.5;
}

.studio-user-story-basic-svg-halo {
  fill: rgba(255, 255, 255, 0.32);
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 0.9;
}

.studio-user-story-basic-svg-line,
.studio-user-story-basic-svg-mountain {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.studio-user-story-basic-svg-dot {
  fill: rgba(255, 255, 255, 0.96);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.28));
}

.studio-user-story-basic-svg.is-name .studio-user-story-basic-svg-halo {
  transform-origin: 16px 9px;
  animation: studioUserStoryNameTwinkle 2600ms ease-in-out infinite;
}

.studio-user-story-basic-svg.is-memory .studio-user-story-basic-svg-halo {
  transform-origin: 22px 11px;
  animation: studioUserStoryMemoryPulse 3000ms ease-in-out infinite;
}

.studio-user-story-basic-svg.is-note .studio-user-story-basic-svg-halo {
  transform-origin: 16px 16px;
  animation: studioUserStoryMemoryPulse 2800ms ease-in-out infinite;
}

.studio-user-story-basic-card.is-ready .studio-user-story-basic-svg :is(
  .studio-user-story-basic-svg-card,
  .studio-user-story-basic-svg-halo,
  .studio-user-story-basic-svg-line,
  .studio-user-story-basic-svg-mountain
) {
  animation: none;
  stroke: rgba(255, 255, 255, 0.94);
}

@keyframes studioUserStoryNameTwinkle {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.9) rotate(0deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.08) rotate(7deg);
  }
}

@keyframes studioUserStoryMemoryPulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes studioUserStoryBasicShine {
  0%,
  28% {
    transform: translateX(-120%);
  }

  62%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes studioUserStoryNeededPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.15) inset,
      0 0 18px rgba(251, 191, 36, 0.1),
      0 14px 38px rgba(0, 0, 0, 0.34);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(254, 243, 199, 0.26) inset,
      0 0 32px rgba(251, 191, 36, 0.21),
      0 16px 42px rgba(0, 0, 0, 0.36);
  }
}

.studio-user-story-direction-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.studio-user-story-direction-copy small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-user-story-direction-copy strong {
  color: #ffffff;
  font-size: clamp(1rem, 1.55vw, 1.3rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.08;
}

.studio-user-story-direction-copy p {
  max-width: 320px;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
  line-height: 1.35;
}

.studio-user-story-direction-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.studio-user-story-direction-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.studio-user-story-direction-prompts button,
.studio-user-story-direction-primary {
  appearance: none;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 860;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-user-story-direction-prompts button {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.78);
}

.studio-user-story-direction-primary {
  background: #ffffff;
  color: #111111;
}

.studio-user-story-direction-prompts button:is(:hover, :focus-visible),
.studio-user-story-direction-primary:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-story-direction-prompts button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.studio-user-story-direction-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.studio-user-story-direction-saved {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: rgba(152, 255, 196, 0.1);
  padding: 0 11px;
  color: rgba(203, 255, 225, 0.94);
  font-size: 0.74rem;
  font-weight: 850;
}

.studio-user-minis-avatar {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.9), transparent 35%),
    #ffffff;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(91, 80, 55, 0.08);
}

.studio-user-photo-room {
  position: relative;
  display: grid;
  min-height: calc(100svh - 170px);
  padding: 10px 0 150px;
}

.studio-user-photo-empty {
  display: grid;
  min-height: calc(100svh - 232px);
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px dashed rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26)),
    rgba(255, 255, 255, 0.18);
  color: #111827;
  text-align: center;
}

.studio-user-photo-empty > span {
  display: inline-grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 18px 38px rgba(74, 64, 43, 0.08);
}

.studio-user-photo-empty svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.25;
}

.studio-user-photo-empty strong {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 930;
}

.studio-user-photo-empty small {
  max-width: 310px;
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.55;
}

.studio-user-project-room .studio-user-photo-empty {
  border: 0;
  background: transparent;
  color: #ffffff;
}

.studio-user-project-room .studio-user-photo-empty > span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: #111111;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
}

.studio-user-project-room .studio-user-photo-empty small {
  max-width: min(520px, calc(100vw - 64px));
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 580;
  line-height: 1.45;
}

.studio-user-project-room .studio-user-photo-empty strong {
  color: #ffffff;
  font-size: clamp(2.45rem, 6vw, 5.6rem);
  font-weight: 820;
  letter-spacing: 0;
  line-height: 0.96;
}

.studio-user-project-room .studio-user-photo-room.is-empty {
  min-height: clamp(280px, 42svh, 520px);
  align-items: center;
  padding: 0 0 150px;
}

.studio-user-project-room .studio-user-photo-room.is-empty .studio-user-photo-empty {
  min-height: clamp(260px, 40svh, 500px);
}

.studio-user-photo-empty-flow {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: min(640px, calc(100vw - 48px));
  margin-top: 4px;
}

.studio-user-photo-empty-flow span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(14px) saturate(120%);
}

.studio-user-project-room .studio-user-photo-year-head span {
  color: #ffffff;
}

.studio-user-project-room .studio-user-photo-year-head small,
.studio-user-project-room .studio-user-photo-year-rail a {
  color: rgba(255, 255, 255, 0.58);
}

.studio-user-project-room .studio-user-photo-year-rail a:is(:hover, :focus-visible) {
  color: #ffffff;
}

.studio-user-photo-library {
  --studio-user-photo-row-height: clamp(168px, 26svh, 330px);
  display: block;
  padding-right: 18px;
}

.studio-user-scene-order-bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  color: #ffffff;
}

.studio-user-scene-order-bar > div {
  display: grid;
  gap: 3px;
}

.studio-user-scene-order-bar strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
}

.studio-user-scene-order-bar small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.25;
}

.studio-user-scene-order-bar > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 820;
  white-space: nowrap;
}

.studio-user-scene-order-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.studio-user-scene-order-actions > span,
.studio-user-scene-order-actions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: #0a0a0a;
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.74rem;
  font-weight: 820;
  white-space: nowrap;
}

.studio-user-scene-order-actions button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.studio-user-scene-order-actions button:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  outline: none;
}

.studio-user-scene-order-actions button:disabled {
  cursor: default;
  opacity: 0.42;
}

.studio-user-free-preview-ready {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid rgba(255, 200, 0, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), rgba(255, 255, 255, 0.035) 42%, rgba(255, 255, 255, 0.016)),
    #080808;
  color: #ffffff;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.studio-user-free-preview-ready-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.studio-user-free-preview-ready small {
  color: rgba(255, 200, 0, 0.88);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-user-free-preview-ready strong {
  color: #ffffff;
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  font-weight: 930;
  line-height: 1.04;
}

.studio-user-free-preview-ready p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.38;
}

.studio-user-free-preview-ready button {
  appearance: none;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: #ffc800;
  padding: 0 20px;
  color: #141006;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 940;
  white-space: nowrap;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.24),
    0 18px 38px rgba(255, 200, 0, 0.18);
  transition:
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.studio-user-free-preview-ready button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.studio-user-free-preview-ready button:not(:disabled):is(:hover, :focus-visible) {
  background: #ffd84a;
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.32),
    0 22px 44px rgba(255, 200, 0, 0.24);
}

.studio-user-free-preview-ready button svg {
  animation: spin 800ms linear infinite;
}

.studio-user-free-preview-ready-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1180;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 200, 0, 0.14), transparent 30rem),
    rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(14px) saturate(118%);
}

.studio-user-free-preview-ready-modal {
  position: relative;
  display: grid;
  justify-items: center;
  width: min(500px, 100%);
  gap: 22px;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid rgba(255, 200, 0, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 200, 0, 0.18), transparent 18rem),
    linear-gradient(145deg, rgba(255, 200, 0, 0.11), rgba(255, 255, 255, 0.045) 34%, rgba(255, 255, 255, 0.018)),
    #080808;
  color: #ffffff;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.studio-user-free-preview-ready-modal::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 68%);
  opacity: 0.42;
  pointer-events: none;
}

.studio-user-free-preview-ready-modal > * {
  position: relative;
  z-index: 1;
}

.studio-user-free-preview-ready-close {
  appearance: none;
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.studio-user-free-preview-ready-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
  outline: none;
}

.studio-user-free-preview-ready-reel {
  position: relative;
  width: min(370px, 100%);
  height: 148px;
}

.studio-user-free-preview-ready-reel span {
  position: absolute;
  top: 18px;
  left: 50%;
  display: block;
  width: 104px;
  height: 122px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: #141414;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.studio-user-free-preview-ready-reel span:nth-child(1) {
  opacity: 0.72;
  transform: translateX(calc(-50% - 112px)) rotate(-11deg);
}

.studio-user-free-preview-ready-reel span:nth-child(2) {
  opacity: 0.84;
  transform: translateX(calc(-50% - 56px)) rotate(-5deg);
}

.studio-user-free-preview-ready-reel span:nth-child(3) {
  z-index: 3;
  width: 118px;
  height: 136px;
  top: 6px;
  border-color: rgba(255, 200, 0, 0.3);
  box-shadow:
    0 24px 62px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 200, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translateX(-50%) rotate(0deg);
}

.studio-user-free-preview-ready-reel span:nth-child(4) {
  opacity: 0.84;
  transform: translateX(calc(-50% + 56px)) rotate(5deg);
}

.studio-user-free-preview-ready-reel span:nth-child(5) {
  opacity: 0.72;
  transform: translateX(calc(-50% + 112px)) rotate(11deg);
}

.studio-user-free-preview-ready-reel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-user-free-preview-ready-modal-copy {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 0;
  text-align: center;
}

.studio-user-free-preview-ready-modal-copy small {
  color: rgba(255, 200, 0, 0.9);
  font-size: 0.74rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-user-free-preview-ready-modal-copy strong {
  max-width: none;
  color: #ffffff;
  font-size: clamp(2.26rem, 5vw, 3.35rem);
  font-weight: 930;
  line-height: 0.96;
}

.studio-user-free-preview-ready-modal-copy p {
  max-width: 44ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.96rem;
  font-weight: 680;
  line-height: 1.48;
}

.studio-user-free-preview-ready-modal-actions {
  display: grid;
  width: min(280px, 100%);
  gap: 10px;
}

.studio-user-free-preview-ready-modal-actions button {
  appearance: none;
  display: inline-flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 0 20px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 940;
  cursor: pointer;
  white-space: nowrap;
}

.studio-user-free-preview-ready-modal-actions button.is-primary {
  background: #ffc800;
  color: #141006;
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.26),
    0 20px 46px rgba(255, 200, 0, 0.2);
}

.studio-user-free-preview-ready-modal-actions button.is-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.84);
}

.studio-user-free-preview-ready-modal-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  box-shadow: none;
}

.studio-user-free-preview-ready-modal-actions button:not(:disabled):is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-free-preview-ready-modal-actions button.is-primary:not(:disabled):is(:hover, :focus-visible) {
  background: #ffd84a;
}

.studio-user-free-preview-ready-modal-actions button.is-secondary:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.studio-user-free-preview-ready-modal-actions button svg {
  animation: spin 800ms linear infinite;
}

.studio-user-photo-timeline {
  display: grid;
  gap: 18px;
}

.studio-user-photo-date-group {
  display: grid;
  gap: 10px;
}

.studio-user-photo-date-head {
  display: flex;
  min-height: 25px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-right: 4px;
}

.studio-user-photo-date-head span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 920;
  line-height: 1.1;
}

.studio-user-photo-date-head small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.7rem;
  font-weight: 840;
}

.studio-user-photo-mosaic {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: clamp(10px, 1.05vw, 16px);
}

.studio-user-photo-year {
  display: grid;
  gap: 10px;
  scroll-margin-top: 86px;
}

.studio-user-photo-year-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-height: 24px;
}

.studio-user-photo-year-head span {
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.1;
}

.studio-user-photo-year-head small {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
}

.studio-user-photo-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 118px;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 4px;
}

.studio-user-photo-card {
  position: relative;
  container-type: inline-size;
  flex: 0 0 calc(var(--studio-user-photo-row-height) * var(--studio-user-photo-ratio, 0.8));
  width: calc(var(--studio-user-photo-row-height) * var(--studio-user-photo-ratio, 0.8));
  height: var(--studio-user-photo-row-height);
  aspect-ratio: var(--studio-user-photo-ratio, 0.8);
  min-width: 0;
  min-height: 0;
  max-width: min(100%, 720px);
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #151515;
  box-shadow: none;
  cursor: grab;
  transition:
    outline-color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease;
}

.studio-user-photo-card:active {
  cursor: grabbing;
}

.studio-user-photo-card.is-dragging {
  opacity: 0.48;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  transform: scale(0.985);
}

.studio-user-photo-card.is-important {
  outline: 1px solid rgba(255, 221, 128, 0.5);
  outline-offset: 0;
}

.studio-user-photo-card.is-deleting {
  cursor: wait;
  outline: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0.92;
}

.studio-user-photo-card.is-deleting img {
  filter: brightness(0.48) saturate(0.72) blur(1px);
  transform: scale(1.01);
}

.studio-user-photo-card.is-deleting .studio-user-photo-scrim,
.studio-user-photo-card.is-deleting .studio-user-photo-actions,
.studio-user-photo-card.is-deleting figcaption {
  opacity: 1;
}

.studio-user-photo-card.is-drop-neighbor {
  outline: 1px solid rgba(255, 255, 255, 0.24);
  outline-offset: -1px;
}

.studio-user-photo-card.is-drop-target::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  z-index: 8;
  width: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.54),
    0 0 0 7px rgba(255, 255, 255, 0.14),
    0 14px 34px rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

.studio-user-photo-card.is-drop-before::before {
  left: 8px;
}

.studio-user-photo-card.is-drop-after::before {
  right: 8px;
}

.studio-user-photo-drop-slot {
  position: relative;
  z-index: 9;
  display: none;
  flex: 0 0 clamp(12px, 0.95vw, 18px);
  width: clamp(12px, 0.95vw, 18px);
  height: var(--studio-user-photo-row-height);
  min-height: 100%;
  margin-inline: calc(clamp(10px, 1.05vw, 16px) * -0.42);
  border-radius: 999px;
  cursor: copy;
  opacity: 0.86;
}

.studio-user-project-room.is-reordering-photos .studio-user-photo-drop-slot {
  display: none;
}

.studio-user-photo-drop-slot::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0.42;
  transform: translateX(-50%);
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease,
    transform 140ms ease,
    width 140ms ease;
}

.studio-user-photo-drop-slot::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  min-width: max-content;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
  transform: translate(-50%, -50%) scale(0.94);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.studio-user-photo-drop-slot:is(:hover, .is-active)::before {
  width: 4px;
  background: #ffffff;
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.54),
    0 0 0 8px rgba(255, 255, 255, 0.14),
    0 18px 38px rgba(0, 0, 0, 0.46);
  transform: translateX(-50%) scaleY(1.04);
}

.studio-user-photo-drop-slot:is(:hover, .is-active)::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.studio-user-photo-drop-slot.is-current-position {
  cursor: default;
  opacity: 0.22;
  pointer-events: none;
}

.studio-user-photo-drop-slot.is-current-position::before {
  opacity: 0.14;
}

.studio-user-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition:
    filter 150ms ease,
    transform 150ms ease;
}

.studio-user-photo-card:is(:hover, :focus-within) img {
  filter: brightness(0.84);
  transform: scale(1.014);
}

.studio-user-pending-photo-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    #141414;
}

.studio-user-pending-photo-card img {
  filter: brightness(0.58) saturate(0.88);
}

.studio-user-pending-photo-card.is-optimizing img,
.studio-user-pending-photo-card.is-uploading img {
  animation: studioPendingUploadPulse 1.2s ease-in-out infinite;
}

.studio-user-pending-photo-card.is-failed {
  outline: 1px solid rgba(255, 105, 105, 0.42);
}

.studio-user-pending-photo-card.is-duplicate {
  outline: 1px solid rgba(255, 214, 122, 0.42);
}

.studio-user-pending-photo-blank {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: rgba(255, 255, 255, 0.34);
}

.studio-user-pending-photo-blank svg {
  width: 30px;
  height: 30px;
}

.studio-user-pending-photo-state {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: inline-flex;
  max-width: calc(100% - 16px);
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.studio-user-pending-photo-state svg {
  width: 14px;
  height: 14px;
}

.studio-user-pending-photo-card.is-optimizing .studio-user-pending-photo-state svg,
.studio-user-pending-photo-card.is-uploading .studio-user-pending-photo-state svg {
  animation: spin 800ms linear infinite;
}

.studio-user-pending-photo-card figcaption,
.studio-user-pending-photo-card .studio-user-photo-scrim,
.studio-user-pending-photo-card .studio-user-photo-actions.is-visible {
  opacity: 1;
}

.studio-user-pending-photo-card figcaption {
  transform: translateY(0);
}

@keyframes studioPendingUploadPulse {
  0%,
  100% {
    opacity: 0.74;
  }

  50% {
    opacity: 0.48;
  }
}

.studio-user-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 42%, rgba(0, 0, 0, 0.7));
  opacity: 0;
  transition: opacity 150ms ease;
}

.studio-user-photo-delete-progress {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 22px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(7, 7, 7, 0.82);
  padding: 0 12px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(14px);
}

.studio-user-photo-delete-progress svg,
.studio-user-photo-delete-actions button.is-danger svg,
.studio-user-photo-actions button svg {
  flex: 0 0 auto;
}

.studio-user-photo-delete-progress svg {
  animation: spin 780ms linear infinite;
}

.studio-user-photo-delete-progress span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-photo-badge-stack {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: grid;
  width: fit-content;
  max-width: calc(100% - 150px);
  gap: 5px;
  pointer-events: none;
}

.studio-user-photo-order {
  position: static;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-width: 54px;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 930;
  line-height: 1;
  opacity: 1;
  backdrop-filter: blur(10px);
  transition: opacity 150ms ease;
}

.studio-user-photo-order small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-user-photo-important-badge {
  position: static;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid rgba(255, 224, 143, 0.22);
  border-radius: 999px;
  background: rgba(16, 14, 9, 0.7);
  color: #ffe08f;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0.92;
  backdrop-filter: blur(12px);
}

.studio-user-photo-important-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-photo-card figcaption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  gap: 3px;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.studio-user-photo-card figcaption strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-photo-card figcaption small,
.studio-user-photo-card figcaption em {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-photo-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.studio-user-photo-actions button {
  appearance: none;
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.54);
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.studio-user-photo-actions button:disabled {
  cursor: default;
  opacity: 0.34;
}

.studio-user-photo-actions button:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  outline: none;
}

.studio-user-photo-actions button.is-delete:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 91, 91, 0.95);
  color: #ffffff;
}

.studio-user-photo-actions button.is-important,
.studio-user-photo-actions button.is-important:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 224, 143, 0.94);
  color: #17130a;
}

.studio-user-photo-actions.is-visible {
  opacity: 1;
}

@container (max-width: 180px) {
  .studio-user-photo-badge-stack {
    max-width: 31px;
  }

  .studio-user-photo-order {
    min-width: 29px;
    width: 29px;
    padding: 0;
  }

  .studio-user-photo-order small,
  .studio-user-photo-important-badge span {
    display: none;
  }

  .studio-user-photo-important-badge {
    width: 29px;
    max-width: 29px;
    justify-content: center;
    padding: 0;
  }

  .studio-user-photo-actions {
    gap: 3px;
  }

  .studio-user-photo-actions button {
    width: 24px;
    height: 24px;
  }
}

@container (max-width: 132px) {
  .studio-user-photo-actions button:nth-child(2),
  .studio-user-photo-actions button:nth-child(3) {
    display: none;
  }
}

.studio-user-photo-card:is(:hover, :focus-within) .studio-user-photo-scrim,
.studio-user-photo-card:is(:hover, :focus-within) figcaption,
.studio-user-photo-card:is(:hover, :focus-within) .studio-user-photo-actions {
  opacity: 1;
}

.studio-user-photo-card:is(:hover, :focus-within) figcaption {
  transform: translateY(0);
}

.studio-user-photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 420;
  display: grid;
  place-items: center;
  padding: clamp(14px, 2.4vw, 28px);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(18px) saturate(112%);
}

.studio-user-photo-lightbox-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  width: min(100%, 1180px);
  max-height: min(88svh, 820px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: #070707;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.64);
}

.studio-user-photo-lightbox-stage {
  position: relative;
  display: grid;
  min-height: min(76svh, 760px);
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 45%),
    #000000;
}

.studio-user-photo-lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: min(78svh, 760px);
  object-fit: contain;
}

.studio-user-photo-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.76);
  color: #ffffff;
  cursor: pointer;
  transform: translateY(-50%);
  backdrop-filter: blur(12px);
}

.studio-user-photo-lightbox-nav.is-prev {
  left: 16px;
}

.studio-user-photo-lightbox-nav.is-next {
  right: 16px;
}

.studio-user-photo-lightbox-nav:disabled {
  cursor: default;
  opacity: 0.3;
}

.studio-user-photo-lightbox-nav:not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  outline: none;
}

.studio-user-photo-lightbox-info {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 224, 143, 0.1), transparent 28%),
    #111111;
  color: #ffffff;
}

.studio-user-photo-lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
}

.studio-user-photo-lightbox-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  outline: none;
}

.studio-user-photo-lightbox-order {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-user-photo-lightbox-info > strong {
  max-width: calc(100% - 36px);
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 1.18rem;
  font-weight: 930;
  line-height: 1.12;
}

.studio-user-photo-lightbox-info dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.studio-user-photo-lightbox-info dl div {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-user-photo-lightbox-info dt,
.studio-user-photo-lightbox-info dd {
  margin: 0;
}

.studio-user-photo-lightbox-info dt {
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-user-photo-lightbox-info dd {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.86rem;
  font-weight: 780;
}

.studio-user-photo-lightbox-actions {
  display: grid;
  gap: 8px;
}

.studio-user-photo-lightbox-actions button {
  appearance: none;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
}

.studio-user-photo-lightbox-actions button.is-important {
  border-color: rgba(255, 224, 143, 0.28);
  background: rgba(255, 224, 143, 0.92);
  color: #17130a;
}

.studio-user-photo-lightbox-actions button.is-delete:is(:hover, :focus-visible) {
  border-color: rgba(255, 91, 91, 0.32);
  background: rgba(255, 91, 91, 0.95);
  color: #ffffff;
}

.studio-user-photo-lightbox-actions button:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-photo-year-rail {
  position: fixed;
  top: 86px;
  right: 10px;
  bottom: 24px;
  z-index: 44;
  display: grid;
  width: 54px;
  align-content: start;
  gap: 9px;
  padding-right: 8px;
}

.studio-user-photo-year-rail a {
  display: inline-flex;
  min-height: 18px;
  align-items: center;
  justify-content: flex-end;
  color: #7b8077;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-decoration: none;
}

.studio-user-photo-year-rail a:is(:hover, :focus-visible) {
  color: #111827;
  outline: none;
}

.studio-user-photo-delete-dialog {
  position: fixed;
  inset: 0;
  z-index: 430;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(16px) saturate(115%);
}

.studio-user-photo-delete-modal {
  position: relative;
  display: grid;
  width: min(100%, 430px);
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 91, 91, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(28, 28, 28, 0.98), rgba(10, 10, 10, 0.98));
  padding: 20px;
  color: #ffffff;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.studio-user-photo-delete-modal.is-deleting {
  pointer-events: none;
}

.studio-user-photo-delete-modal.is-deleting > :not(.studio-user-photo-delete-modal-progress) {
  opacity: 0.42;
  filter: blur(0.5px);
}

.studio-user-photo-delete-modal-progress {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 32%),
    rgba(5, 5, 5, 0.74);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(10px);
}

.studio-user-photo-delete-modal-progress svg {
  animation: spin 820ms linear infinite;
}

.studio-user-photo-delete-modal-mark {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 112, 112, 0.24);
  border-radius: 16px;
  background: rgba(255, 91, 91, 0.12);
  color: #ff7777;
}

.studio-user-photo-delete-modal-mark svg {
  width: 21px;
  height: 21px;
}

.studio-user-photo-delete-modal-copy {
  display: grid;
  gap: 7px;
}

.studio-user-photo-delete-modal-copy span {
  color: rgba(255, 124, 124, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-user-photo-delete-modal-copy h2,
.studio-user-photo-delete-modal-copy p,
.studio-user-photo-delete-preview {
  margin: 0;
}

.studio-user-photo-delete-modal-copy h2 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.05;
}

.studio-user-photo-delete-modal-copy p {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  font-weight: 690;
  line-height: 1.45;
}

.studio-user-photo-delete-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  padding: 10px;
}

.studio-user-photo-delete-preview img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
}

.studio-user-photo-delete-preview figcaption {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.studio-user-photo-delete-preview strong,
.studio-user-photo-delete-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-photo-delete-preview strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 840;
}

.studio-user-photo-delete-preview small {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.78rem;
  font-weight: 720;
}

.studio-user-photo-delete-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.studio-user-photo-delete-actions button {
  appearance: none;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 840;
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-user-photo-delete-actions button.is-danger {
  border-color: rgba(255, 91, 91, 0.34);
  background: #ff4d4d;
  color: #ffffff;
}

.studio-user-photo-delete-actions button:not(:disabled):is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-user-photo-delete-actions button:not(.is-danger):not(:disabled):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.studio-user-photo-delete-actions button.is-danger:not(:disabled):is(:hover, :focus-visible) {
  background: #ff3737;
}

.studio-user-photo-delete-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  transform: none;
}

.studio-user-photo-delete-actions button.is-danger svg {
  width: 15px;
  height: 15px;
}

.studio-user-project-plus-upload svg {
  stroke-width: 2.45;
}

.studio-user-minis-card-grid {
  align-items: stretch;
}

.studio-user-minis-card.studio-minis-room-card.has-media .studio-minis-room-image {
  min-height: 296px;
}

.studio-user-minis-card.studio-minis-room-card.has-media .studio-minis-room-image b {
  color: rgba(255, 255, 255, 0.86);
  font-size: 2.4rem;
}

.studio-user-minis-card.is-project.studio-minis-room-card.has-media .studio-minis-room-image {
  background: #111827;
}

.studio-user-minis-empty-card .studio-minis-room-title {
  white-space: normal;
  overflow: visible;
  line-height: 1.35;
}

.studio-user-minis-detail {
  align-items: stretch;
}

.studio-user-minis-detail .studio-minis-active-room-copy {
  align-content: start;
}

.studio-user-minis-sequence-list {
  display: grid;
  gap: 9px;
  margin-top: 6px;
}

.studio-user-minis-sequence-list figure {
  display: grid;
  grid-template-columns: 36px 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.studio-user-minis-sequence-list figure.is-character {
  border-color: rgba(20, 184, 166, 0.24);
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.08), transparent 52%),
    rgba(255, 255, 255, 0.78);
}

.studio-user-minis-sequence-list figure > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  color: #4b5563;
  font-size: 0.72rem;
  font-weight: 950;
}

.studio-user-minis-sequence-list img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef2f7;
}

.studio-user-minis-sequence-list figcaption {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.studio-user-minis-sequence-list figcaption small,
.studio-user-minis-sequence-list figcaption em {
  min-width: 0;
  color: #6b7280;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 840;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.studio-user-minis-sequence-list figcaption strong {
  min-width: 0;
  overflow: hidden;
  color: #111827;
  font-size: 0.86rem;
  font-weight: 930;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-user-minis-sequence-list figure > div {
  display: grid;
  grid-template-columns: repeat(3, 30px);
  gap: 5px;
}

.studio-user-minis-sequence-list button {
  appearance: none;
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
}

.studio-user-minis-sequence-list button:disabled {
  cursor: default;
  opacity: 0.35;
}

.studio-user-minis-sequence-list button:not(:disabled):is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.18);
  background: #f9fafb;
  outline: none;
  transform: translateY(-1px);
}

.studio-user-minis-empty-state {
  min-height: 140px;
}

.studio-user-minis-download {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 930;
  text-decoration: none;
}

main.studio-user-minis-project-page > .studio-user-minis-console {
  width: min(1180px, calc(100vw - 126px)) !important;
  margin: 0 26px 0 74px !important;
}

@media (max-width: 760px) {
  .studio-user-minis-project-page {
    width: 100%;
    margin-left: 0;
  }

  .studio-user-minis-sidebar.site-sidebar {
    display: none;
  }

  .studio-user-minis-console {
    width: min(100%, calc(100vw - 28px)) !important;
    margin-inline: auto !important;
  }

  .studio-user-photo-room {
    min-height: calc(100svh - 148px);
    padding-bottom: 156px;
  }

  .studio-user-photo-empty {
    min-height: calc(100svh - 244px);
  }

  .studio-user-photo-library {
    --studio-user-photo-row-height: clamp(122px, 31vw, 178px);
    padding-right: 0;
  }

  .studio-user-scene-order-bar {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 12px;
  }

  .studio-user-scene-order-bar > span {
    min-height: 28px;
    font-size: 0.68rem;
  }

  .studio-user-scene-order-actions {
    justify-content: flex-start;
  }

  .studio-user-scene-order-actions > span,
  .studio-user-scene-order-actions button {
    min-height: 28px;
    font-size: 0.68rem;
  }

  .studio-user-photo-date-head {
    min-height: 22px;
  }

  .studio-user-photo-date-head span {
    font-size: 0.82rem;
  }

  .studio-user-photo-mosaic {
    gap: 8px;
  }

  .studio-user-photo-card {
    border-radius: 6px;
  }

  .studio-user-photo-card figcaption {
    right: 7px;
    bottom: 7px;
    left: 7px;
  }

  .studio-user-photo-actions {
    top: 6px;
    right: 6px;
  }

  .studio-user-photo-actions button {
    width: 26px;
    height: 26px;
  }

  .studio-user-photo-important-badge {
    top: 38px;
    min-height: 22px;
    font-size: 0.56rem;
  }

  .studio-user-photo-lightbox-panel {
    grid-template-columns: 1fr;
    max-height: 92svh;
    overflow-y: auto;
  }

  .studio-user-photo-lightbox-stage {
    min-height: 54svh;
  }

  .studio-user-photo-lightbox-stage img {
    max-height: 58svh;
  }

  .studio-user-photo-lightbox-info {
    padding: 18px;
  }

  .studio-user-photo-lightbox-nav {
    width: 36px;
    height: 36px;
  }

  .studio-user-photo-year-rail {
    display: none;
  }

  .studio-user-minis-sequence-list figure {
    grid-template-columns: 30px 62px minmax(0, 1fr);
  }

  .studio-user-minis-sequence-list img {
    width: 62px;
    height: 62px;
  }

  .studio-user-minis-sequence-list figure > div {
    grid-column: 1 / -1;
    justify-content: end;
  }
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-header,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-header,
.studio-standalone-shell:has(.studio-character-page) .studio-global-header {
  width: min(1080px, calc(100vw - 42px));
  margin-bottom: -78px;
  padding: 0;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-brand,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-brand,
.studio-standalone-shell:has(.studio-character-page) .studio-global-brand {
  padding: 3px;
  background: rgba(255, 249, 226, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 8px 22px rgba(15, 7, 2, 0.12);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-brand:hover,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-brand:hover,
.studio-standalone-shell:has(.studio-character-page) .studio-global-brand:hover {
  background: rgba(255, 249, 226, 0.76);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-brand-mark .studio-brand-logo-frame,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-brand-mark .studio-brand-logo-frame,
.studio-standalone-shell:has(.studio-character-page) .studio-global-brand-mark .studio-brand-logo-frame {
  width: 42px;
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-nav,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-nav,
.studio-standalone-shell:has(.studio-character-page) .studio-global-nav {
  gap: 3px;
  padding: 4px;
  border-color: rgba(255, 220, 92, 0.16);
  background: rgba(15, 12, 9, 0.56);
  box-shadow:
    0 14px 34px rgba(15, 7, 2, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-link,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-link,
.studio-standalone-shell:has(.studio-character-page) .studio-global-link {
  min-height: 31px;
  padding: 7px 10px;
  color: rgba(255, 248, 223, 0.74);
  font-size: 0.82rem;
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-link:hover,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-link:hover,
.studio-standalone-shell:has(.studio-character-page) .studio-global-link:hover {
  color: #fff8df;
  background: rgba(255, 255, 255, 0.13);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-link.is-active,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-link.is-active,
.studio-standalone-shell:has(.studio-character-page) .studio-global-link.is-active {
  color: #17120a;
  background: linear-gradient(180deg, #ffd94a 0%, var(--brand) 100%);
  box-shadow:
    0 10px 24px rgba(255, 200, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-theme,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-theme,
.studio-standalone-shell:has(.studio-character-page) .studio-global-theme {
  min-width: 34px;
  min-height: 34px;
  background: rgba(15, 12, 9, 0.62);
  border-color: rgba(255, 220, 92, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-standalone-shell:has(.studio-create-page) .studio-global-rescue-link.button,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-rescue-link.button,
.studio-standalone-shell:has(.studio-character-page) .studio-global-rescue-link.button {
  min-height: 34px;
  border-color: rgba(255, 247, 222, 0.2);
  background: rgba(255, 249, 226, 0.64);
}

.studio-standalone-shell:has(.studio-create-page) .studio-standalone-main,
.studio-standalone-shell:has(.studio-monthly-care-page) .studio-standalone-main,
.studio-standalone-shell:has(.studio-character-page) .studio-standalone-main {
  padding-top: 0;
}

.studio-standalone-shell:has(.studio-actor-page) {
  background: #fffdf7;
}

.studio-actor-page {
  width: 100%;
  max-width: none;
  gap: 0;
  padding: 0 0 48px;
}

.studio-actor-stage-hero {
  position: relative;
  width: min(100%, 100vw);
  min-height: calc(100svh - 74px);
  padding: 0 clamp(10px, 2vw, 24px) 24px;
}

.studio-room-stage .studio-room-canvas-wrap {
  height: clamp(560px, calc(100svh - 118px), 780px);
  min-height: 560px;
  border-radius: clamp(22px, 3vw, 40px);
  background: #fffdf7;
  box-shadow: 0 26px 80px rgba(17, 24, 39, 0.08);
}

.studio-actor-stage-panel {
  position: absolute;
  left: clamp(22px, 4vw, 56px);
  right: clamp(22px, 4vw, 56px);
  bottom: clamp(34px, 6vw, 70px);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.studio-actor-stage-panel > * {
  pointer-events: auto;
}

.studio-actor-stage-panel > div:first-child {
  min-width: 0;
  max-width: min(440px, 62vw);
  padding: 18px 20px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 48px rgba(17, 24, 39, 0.1);
  backdrop-filter: blur(16px);
}

.studio-actor-stage-panel h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: 0.92;
}

.studio-actor-stage-panel p:not(.eyebrow) {
  color: var(--muted-foreground);
  font-weight: 720;
  overflow-wrap: anywhere;
}

.site-footer {
  padding: 34px 0 42px;
}

.cats-page-band {
  position: relative;
  padding-top: 34px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 214, 79, 0.18), transparent 32%),
    linear-gradient(180deg, #fffaf0 0%, #fffdf8 270px, #fbfaf6 100%);
  overflow: hidden;
}

.cats-page-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(390px, 48vw);
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 200, 0, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 200, 0, 0.06), transparent 72%);
  pointer-events: none;
}

.cats-page-band > .container {
  position: relative;
  z-index: 1;
}

.cat-detail-band {
  padding-top: 0;
}

.footer-grid,
.hero-grid,
.detail-grid,
.page-intro-grid,
.section-header,
.field-grid,
.preset-grid,
.card-grid,
.snapshot-grid,
.stats-grid,
.admin-grid,
.two-up-grid,
.support-grid,
.note-grid,
.compact-card-grid {
  display: grid;
  gap: 18px;
}

.footer-brand,
.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.admin-card,
.form-card,
.empty-state {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.admin-card,
.form-card,
.empty-state,
.footer-brand {
  padding: 24px;
}

.cat-detail-band .detail-main,
.cat-detail-band .detail-side {
  padding-top: 16px;
}

.site-main-soft-record .detail-main,
.site-main-soft-record .detail-side {
  padding-top: 18px;
}

.site-main-cat-detail .cat-detail-band .detail-main,
.site-main-cat-detail .cat-detail-band .detail-side {
  padding-top: 16px;
}

.site-main-soft-record > .page-band:first-child,
.site-main-soft-record > .detail-band:first-child {
  padding-top: 12px;
}

.site-main-soft-record > .loading-page:first-child {
  padding-top: 12px;
}

.site-main-not-home > .page-band:first-child,
.site-main-not-home > .detail-band:first-child {
  padding-top: 22px;
}

.site-main-not-home > .loading-page:first-child {
  padding-top: 10px;
}

.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.admin-card,
.form-card,
.empty-state {
  display: grid;
  gap: 16px;
}

.auth-card {
  gap: 14px;
}

.login-page-shell {
  width: min(100%, 520px);
  margin-inline: auto;
}

.login-provider-card {
  gap: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, rgba(249, 252, 247, 0.96) 100%);
  border-color: rgba(255, 200, 0, 0.34);
}

.login-provider-heading,
.login-email-heading {
  display: grid;
  gap: 6px;
}

.login-provider-heading h2,
.login-email-heading h2 {
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.16;
}

.login-provider-heading p:last-child {
  margin: 0;
  color: var(--foreground-muted);
}

.google-sign-in-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid #dadce0;
  background: #ffffff;
  color: #1f1f1f;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.google-sign-in-button:hover {
  transform: translateY(-1px);
  border-color: #c6cbd1;
  background: #f8fbff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.google-sign-in-button:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.28);
  outline-offset: 3px;
}

.google-sign-in-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.login-email-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.page-intro-support {
  gap: 16px;
}

.page-intro-card.is-compact {
  gap: 18px;
  padding: 20px 22px;
}

.page-intro-card.is-compact h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
}

.page-intro-card.is-compact .hero-lead {
  font-size: 0.96rem;
  max-width: 52ch;
}

.project-page-intro > .stack-tight {
  align-content: center;
}

.page-intro-support > * {
  height: 100%;
}

.admin-cats-intro.page-intro-card.is-compact {
  padding: 12px;
}

.admin-cats-intro.page-intro-card.is-compact.page-intro-grid {
  grid-template-columns: minmax(112px, 0.2fr) minmax(0, 1.8fr);
  gap: 10px;
}

.admin-cats-intro > .stack-tight {
  gap: 2px;
  align-self: start;
}

.admin-cats-intro.page-intro-card.is-compact h1 {
  font-size: 1.08rem;
  line-height: 1.08;
}

.admin-cats-intro .eyebrow {
  font-size: 0.68rem;
}

.cats-page-intro.page-intro-card.is-compact {
  padding: 16px 18px;
  gap: 8px;
}

.cats-page-intro.page-intro-card.is-compact.page-intro-grid {
  grid-template-columns: minmax(0, 1fr);
}

.cats-page-intro > .stack-tight {
  gap: 4px;
}

.cats-page-intro.page-intro-card.is-compact h1 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.08;
}

.cats-page-intro.page-intro-card.is-compact .hero-lead {
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.5;
}

.cats-directory-intro {
  align-items: start;
  border-radius: 18px;
  border-color: rgba(245, 180, 0, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 229, 0.9)),
    #ffffff;
  box-shadow: 0 18px 52px rgba(117, 83, 0, 0.09);
}

.cats-directory-intro-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cats-directory-intro-meta {
  display: inline-grid;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  min-width: min(100%, 190px);
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.cats-directory-intro-meta span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.cats-directory-intro-meta strong {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.2;
}

.cats-directory-filter-list {
  padding-top: 4px;
}

.cats-filter-mobile-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.cats-filter-mobile-toggle-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.cats-filter-mobile-toggle-copy span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.cats-filter-mobile-toggle-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-filter-caret {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.cats-filter-mobile-toggle[aria-expanded="true"] .cats-filter-caret {
  transform: rotate(225deg) translateY(-2px);
}

@media (max-width: 719px) {
  .admin-cats-intro.page-intro-card.is-compact.page-intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-heading {
  color: var(--foreground);
  margin-bottom: 12px;
}

.footer-links,
.button-row,
.cta-rail,
.detail-meta,
.tag-row,
.project-meter,
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-age-panel {
  display: grid;
  gap: 10px;
}

.detail-age-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-age-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.86);
}

.detail-age-card strong {
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.2;
}

.detail-age-label {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-age-note {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 639px) {
  .detail-age-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-links a {
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.45;
  transition: color 120ms ease, transform 120ms ease;
}

.footer-links a:hover {
  color: var(--accent-strong);
  transform: translateX(1px);
}

.footer-brand {
  align-content: start;
}

.footer-brand p {
  max-width: 48ch;
}

.hero-copy h1,
.page-intro-card h1,
.detail-main h1 {
  font-size: clamp(2.65rem, 5vw, 4.85rem);
}

.section-header h2 {
  font-size: clamp(1.95rem, 3vw, 3.1rem);
}

.hero-lead {
  font-size: 1.06rem;
  max-width: 60ch;
}

.detail-intro-expanded {
  max-width: 68ch;
  line-height: 1.7;
  white-space: pre-line;
}

.expandable-text {
  display: grid;
  gap: 8px;
}

.expandable-text > p {
  margin: 0;
}

.expandable-text-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.expandable-text-toggle:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.hero-side {
  gap: 18px;
}

.hero-side-copy {
  gap: 14px;
}

.hero-media,
.media-thumb,
.detail-hero-media {
  position: relative;
  overflow: hidden;
}

.hero-media {
  min-height: 276px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: var(--surface-soft);
}

.media-thumb {
  width: calc(100% + 48px);
  height: 198px;
  margin: -24px -24px 16px;
  border-radius: 24px 24px 18px 18px;
  background: var(--surface-soft);
}

.detail-hero-media {
  min-height: 340px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.detail-photo-gallery,
.detail-case-intro,
.detail-gallery,
.detail-follow-up-card,
.detail-action-card,
.detail-project-card {
  display: grid;
  gap: 16px;
}

.detail-gallery {
  gap: 12px;
}

.detail-gallery-header,
.detail-signal-line,
.detail-project-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-gallery-header span,
.detail-signal-line span,
.detail-project-summary p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.45;
}

.detail-gallery-header-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.detail-gallery-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-gallery-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.detail-gallery-control:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.detail-media-note,
.detail-signal-note {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.55;
}

.detail-signal-line strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 800;
}

.detail-gallery-stage {
  display: grid;
  gap: 14px;
}

.detail-gallery-stage-media {
  min-height: 420px;
}

.detail-gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, 112px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.detail-gallery-thumb {
  appearance: none;
  position: relative;
  min-height: 112px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.detail-gallery-thumb.is-active {
  border-color: rgba(11, 105, 183, 0.32);
  box-shadow: var(--shadow-card);
}

.detail-gallery-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
}

.detail-gallery-thumb img {
  object-fit: cover;
}

.detail-case-body {
  align-items: start;
}

.detail-case-body-full {
  grid-column: 1 / -1;
}

.snapshot-grid.detail-snapshot-grid {
  gap: 14px;
}

.detail-snapshot-card {
  align-content: start;
  gap: 10px;
  min-height: 0;
}

.detail-snapshot-card strong {
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  line-height: 1.2;
}

.detail-snapshot-copy,
.detail-action-description,
.detail-preset-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.detail-snapshot-copy {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.cat-detail-minis {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(94, 224, 184, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.cat-detail-minis-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.cat-detail-minis-head h3 {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 2.2vw, 1.68rem);
}

.cat-detail-minis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cat-detail-mini-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.cat-detail-mini-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #111827;
  object-fit: cover;
}

.cat-detail-mini-card div {
  display: grid;
  gap: 4px;
}

.cat-detail-mini-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cat-detail-mini-card strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.25;
}

.detail-action-description {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

.detail-action-buttons,
.detail-preset-grid,
.detail-related-list {
  display: grid;
  gap: 10px;
}

.detail-action-card {
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 245, 191, 0.94) 0%, rgba(255, 255, 255, 0.98) 34%),
    rgba(255, 255, 255, 0.98);
}

.detail-action-card h3 {
  font-size: clamp(1.16rem, 1.6vw, 1.42rem);
  line-height: 1.24;
}

.detail-action-primary {
  display: grid;
  gap: 8px;
}

.detail-action-primary .button {
  min-height: 50px;
  box-shadow: var(--shadow-card);
}

.detail-secondary-actions {
  display: grid;
  gap: 8px;
}

.detail-secondary-actions .button {
  min-height: 44px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.detail-support-block {
  gap: 10px;
  border-color: rgba(255, 200, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 222, 0.94) 100%);
}

.detail-support-hint {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
}

.detail-preset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-action-card .detail-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-preset-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease,
    background 120ms ease;
}

.detail-action-card .detail-preset-card {
  justify-items: center;
  text-align: center;
  align-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 8px;
  gap: 0;
}

.detail-preset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.28);
  box-shadow: var(--shadow-card);
  background: white;
}

.detail-preset-amount {
  color: var(--foreground);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.detail-action-card .detail-preset-amount {
  font-size: 1.04rem;
  text-align: center;
}

.detail-support-note {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.35;
}

.detail-favorite-row {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 213, 226, 0.72);
}

.detail-favorite-row > * {
  width: 100%;
}

.detail-favorite-row .stack {
  gap: 8px;
}

.detail-favorite-row .button {
  min-height: 40px;
  font-size: 0.88rem;
}

@media (max-width: 460px) {
  .detail-action-card .detail-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail-project-card {
  gap: 18px;
}

.detail-project-card .tag-row {
  gap: 8px;
}

.detail-project-card .tag {
  background: #fffef4;
  border-color: rgba(255, 200, 0, 0.28);
}

.detail-project-card .project-meter {
  align-items: center;
  justify-content: space-between;
}

.detail-project-card .detail-project-summary {
  padding-top: 4px;
  border-top: 1px solid rgba(201, 213, 226, 0.72);
}

.detail-action-card .button,
.detail-project-card .button {
  width: 100%;
}

.detail-related-item {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.detail-related-item:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.detail-related-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hero-media img,
.media-thumb img,
.detail-hero-media img,
.story-gallery-media img {
  object-fit: cover;
}

.theme-image-dark {
  display: none;
}

html[data-theme="dark"] .theme-image-light {
  display: none;
}

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

.hero-bullets,
.summary-list {
  display: grid;
  gap: 12px;
  padding-left: 18px;
  margin: 0;
}

.hero-bullets li,
.summary-list li {
  color: var(--foreground);
}

.section-header-copy {
  gap: 12px;
}

.section-header {
  align-items: flex-end;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag-icon,
.eyebrow-icon,
.meta-row-icon,
.cats-priority-icon,
.cats-status-icon,
.cats-need-icon,
.cats-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tag-icon,
.cats-priority-icon,
.cats-status-icon,
.cats-need-icon,
.cats-search-icon {
  width: 16px;
  height: 16px;
}

.eyebrow-icon,
.meta-row-icon {
  width: 15px;
  height: 15px;
}

.tag-icon svg,
.eyebrow-icon svg,
.meta-row-icon svg,
.cats-priority-icon svg,
.cats-status-icon svg,
.cats-need-icon svg,
.cats-search-icon svg {
  width: 100%;
  height: 100%;
}

.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-icon {
  color: var(--accent-strong);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.button-small {
  min-height: 40px;
  padding-inline: 14px;
}

.report-action-button {
  min-width: 126px;
}

.monthly-report-pdf-download {
  display: grid;
  gap: 6px;
  min-width: min(240px, 100%);
}

.monthly-report-pdf-download-button {
  justify-content: center;
  gap: 8px;
}

.monthly-report-pdf-download-button svg {
  flex: 0 0 auto;
}

.monthly-report-pdf-download.is-pending .monthly-report-pdf-download-button svg {
  animation: spin 900ms linear infinite;
}

.monthly-report-pdf-download-message {
  max-width: 270px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.monthly-report-pdf-download.is-error .monthly-report-pdf-download-message {
  color: #b84a35;
}

html[data-theme="dark"] .monthly-report-pdf-download.is-error .monthly-report-pdf-download-message {
  color: #ff9a84;
}

.report-button-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 720ms linear infinite;
}

.admin-studio-action-submit {
  display: inline-grid;
  gap: 6px;
  justify-items: start;
  max-width: 100%;
  vertical-align: top;
}

.admin-studio-action-submit > .button {
  max-width: 100%;
}

.admin-studio-action-spinner {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 720ms linear infinite;
}

.admin-studio-action-feedback {
  max-width: min(340px, 100%);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-studio-action-feedback.is-pending {
  color: var(--accent-strong);
}

.button-primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: rgba(255, 200, 0, 0.58);
  box-shadow: var(--shadow-card);
}

.button-primary:hover {
  background: #ffd84d;
}

.button-secondary {
  background: var(--foreground);
  color: white;
  box-shadow: var(--shadow-card);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .button-primary {
  color: var(--brand-ink);
}

html[data-theme="dark"] .button-secondary {
  background: #f7f5ea;
  color: #111511;
}

html[data-theme="dark"] .button-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .site-sidebar {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.11), transparent 28%),
    rgba(15, 20, 18, 0.98);
  border-right-color: var(--border);
}

html[data-theme="dark"] .site-sidebar.is-studio-console {
  background:
    radial-gradient(circle at 16% 0%, rgba(139, 200, 246, 0.1), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(86, 207, 174, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(11, 17, 32, 0.98), rgba(15, 23, 42, 0.98));
}

html[data-theme="dark"] .sidebar-studio-mission {
  border-color: rgba(148, 163, 184, 0.14);
  color: #d7e8ff;
}

html[data-theme="dark"] .sidebar-studio-mission span {
  color: #93c5fd;
}

html[data-theme="dark"] .sidebar-studio-brand {
  color: #d7e8ff;
}

html[data-theme="dark"] .sidebar-studio-brand .studio-brand-mark {
  --studio-brand-ink: #d7e8ff;
}

html[data-theme="dark"] .sidebar-studio-universe {
  border-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .sidebar-studio-universe-current {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), rgba(59, 130, 246, 0.11));
  color: #eaf3ff;
}

html[data-theme="dark"] .sidebar-studio-universe-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.075);
  color: #ffe9a1;
}

html[data-theme="dark"] .sidebar-studio-universe-copy small {
  color: rgba(215, 232, 255, 0.56);
}

html[data-theme="dark"] .sidebar-studio-universe-caret {
  color: rgba(215, 232, 255, 0.48);
}

html[data-theme="dark"] .sidebar-studio-universe-switcher .sidebar-studio-universe-current:hover {
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .sidebar-studio-universe-switcher > div {
  border-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .sidebar-studio-universe-switcher a,
html[data-theme="dark"] .sidebar-studio-universe-switcher button {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(215, 232, 255, 0.82);
}

html[data-theme="dark"] .sidebar-studio-universe-switcher a.is-active {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(59, 130, 246, 0.12);
  color: #f8fbff;
}

html[data-theme="dark"] .sidebar-studio-advanced-group {
  border-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .sidebar-studio-advanced-group summary {
  color: rgba(215, 232, 255, 0.72);
}

html[data-theme="dark"] .sidebar-studio-advanced-group summary::after {
  color: rgba(215, 232, 255, 0.46);
}

html[data-theme="dark"] .sidebar-studio-advanced-group summary:hover {
  background: rgba(255, 255, 255, 0.045);
  color: rgba(215, 232, 255, 0.9);
}

html[data-theme="dark"] .sidebar-studio-advanced-menu {
  border-color: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .sidebar-studio-link .sidebar-link-icon {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(207, 227, 255, 0.8);
}

html[data-theme="dark"] .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 3px 0 0 var(--studio-link-accent);
}

html[data-theme="dark"] .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  border-color: color-mix(in srgb, var(--studio-link-accent) 20%, transparent);
  background: var(--studio-link-accent-soft);
  color: var(--studio-link-accent);
}

html[data-theme="dark"] .site-sidebar.is-studio-console .sidebar-link-secondary {
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .site-sidebar.is-studio-console .sidebar-link-secondary .sidebar-link-icon {
  color: rgba(207, 227, 255, 0.68);
}

html[data-theme="dark"] .site-sidebar.is-studio-console .sidebar-link-secondary:hover .sidebar-link-icon {
  color: #93c5fd;
}

html[data-theme="dark"] .mobile-nav-toggle {
  background: rgba(23, 29, 26, 0.96);
  color: var(--brand);
  border-color: rgba(255, 200, 0, 0.3);
}

html[data-theme="dark"] .mobile-nav-toggle.is-open {
  background: var(--brand);
  color: var(--brand-ink);
}

html[data-theme="dark"] .sidebar-brand-logo-light {
  display: none;
}

html[data-theme="dark"] .sidebar-brand-logo-dark {
  display: block;
}

html[data-theme="dark"] .theme-toggle-button {
  background:
    radial-gradient(circle at top, rgba(255, 200, 0, 0.16), transparent 48%),
    rgba(255, 255, 255, 0.08);
  color: var(--brand-soft);
  border-color: rgba(255, 200, 0, 0.3);
}

html[data-theme="dark"] .rescue-shell-topbar.admin-studio-topbar.studio-minis-room-toolbar {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 17, 32, 0.86)),
    rgba(11, 17, 32, 0.9);
  color: #eef6ff;
}

html[data-theme="dark"] .rescue-shell-topbar-brand.studio-minis-room-back-button {
  color: #eef6ff;
}

html[data-theme="dark"] .rescue-shell-topbar-brand.studio-minis-room-back-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

html[data-theme="dark"] .rescue-shell-topbar-brand-copy small {
  color: rgba(238, 246, 255, 0.52);
}

html[data-theme="dark"] .rescue-shell-topbar-nav {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link {
  color: rgba(238, 246, 255, 0.64);
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link.is-active {
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-action {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 246, 255, 0.78);
  box-shadow: none;
}

html[data-theme="dark"] .rescue-shell-topbar-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] .rescue-shell-topbar-action.is-primary {
  border-color: rgba(255, 200, 0, 0.72);
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-search-submit {
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-search-submit:is(:hover, :focus-visible) {
  background: #ffe16a;
  color: #211a00;
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-link {
  --studio-link-accent: #ffc800;
  --studio-link-accent-soft: rgba(255, 200, 0, 0.14);
  color: rgba(238, 246, 255, 0.72);
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-link .sidebar-link-icon {
  border-color: transparent;
  background: transparent;
  color: rgba(238, 246, 255, 0.7);
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:hover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:hover .sidebar-link-icon {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:active {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-studio-link:active .sidebar-link-icon {
  background: rgba(255, 200, 0, 0.16);
  color: #ffc800;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: rgba(255, 200, 0, 0.16);
  background: rgba(255, 200, 0, 0.085);
  color: #ffffff;
  box-shadow: inset 3px 0 0 rgba(255, 200, 0, 0.9);
}

html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon,
html[data-theme="dark"] .site-shell-rescue-console .site-sidebar.is-studio-console .sidebar-link-secondary:hover .sidebar-link-icon {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.14);
  color: #ffc800;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover {
  border-color: rgba(255, 255, 255, 0.09);
  background: #1b1e24;
  color: #ffffff;
  box-shadow: 0 24px 74px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover :is(a, button) {
  color: #f4f7fb;
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover :is(a, button):is(:hover, :focus-visible) {
  background: #2d323b;
  color: #ffffff;
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-copy small,
html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover svg,
html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover :is(a, button) small,
html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-popover .sidebar-studio-account-theme::after {
  color: #aab4c5;
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-profile,
html[data-theme="dark"] .site-shell-rescue-console .sidebar-studio-account-section + .sidebar-studio-account-section {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .rescue-shell-topbar-avatar,
html[data-theme="dark"] .rescue-shell-account-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  color: #211a00;
  box-shadow: none;
}

html[data-theme="dark"] .rescue-shell-account-popover {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 17, 32, 0.94)),
    #0b1120;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .rescue-shell-account-copy strong {
  color: #eef6ff;
}

html[data-theme="dark"] .rescue-shell-account-copy small {
  color: rgba(238, 246, 255, 0.56);
}

html[data-theme="dark"] .rescue-shell-account-actions :is(a, button) {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(238, 246, 255, 0.8);
}

html[data-theme="dark"] .rescue-shell-account-actions :is(a, button):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

html[data-theme="dark"] .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .sidebar-link {
  --sidebar-icon-bg: rgba(255, 255, 255, 0.08);
  --sidebar-icon-bg-strong: rgba(255, 255, 255, 0.13);
  --sidebar-icon-color: var(--brand-soft);
  --sidebar-icon-shadow: rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .sidebar-link-tone-home {
  --sidebar-icon-bg: rgba(255, 200, 0, 0.14);
  --sidebar-icon-bg-strong: rgba(255, 200, 0, 0.22);
  --sidebar-icon-color: #ffd85a;
}

html[data-theme="dark"] .sidebar-link-tone-cats {
  --sidebar-icon-bg: rgba(255, 154, 109, 0.14);
  --sidebar-icon-bg-strong: rgba(255, 154, 109, 0.22);
  --sidebar-icon-color: #ffb08f;
}

html[data-theme="dark"] .sidebar-link-tone-support {
  --sidebar-icon-bg: rgba(65, 195, 128, 0.13);
  --sidebar-icon-bg-strong: rgba(65, 195, 128, 0.21);
  --sidebar-icon-color: #72dda5;
}

html[data-theme="dark"] .sidebar-link-tone-shorts {
  --sidebar-icon-bg: rgba(155, 137, 255, 0.14);
  --sidebar-icon-bg-strong: rgba(155, 137, 255, 0.22);
  --sidebar-icon-color: #b8aaff;
}

html[data-theme="dark"] .sidebar-link-tone-stories {
  --sidebar-icon-bg: rgba(247, 170, 56, 0.13);
  --sidebar-icon-bg-strong: rgba(247, 170, 56, 0.21);
  --sidebar-icon-color: #f5bd70;
}

html[data-theme="dark"] .sidebar-link-tone-community {
  --sidebar-icon-bg: rgba(76, 202, 236, 0.13);
  --sidebar-icon-bg-strong: rgba(76, 202, 236, 0.21);
  --sidebar-icon-color: #82daf0;
}

html[data-theme="dark"] .sidebar-link-tone-projects {
  --sidebar-icon-bg: rgba(105, 166, 255, 0.13);
  --sidebar-icon-bg-strong: rgba(105, 166, 255, 0.21);
  --sidebar-icon-color: #9cc5ff;
}

html[data-theme="dark"] .sidebar-link-tone-saved {
  --sidebar-icon-bg: rgba(248, 122, 170, 0.13);
  --sidebar-icon-bg-strong: rgba(248, 122, 170, 0.21);
  --sidebar-icon-color: #ffa0c3;
}

html[data-theme="dark"] .sidebar-link-tone-alerts {
  --sidebar-icon-bg: rgba(255, 190, 85, 0.13);
  --sidebar-icon-bg-strong: rgba(255, 190, 85, 0.21);
  --sidebar-icon-color: #ffd085;
}

html[data-theme="dark"] .sidebar-link.is-active {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  box-shadow: inset 3px 0 0 var(--sidebar-icon-color);
}

html[data-theme="dark"] .sidebar-link.is-active .sidebar-link-icon {
  color: var(--sidebar-icon-color);
  border-color: color-mix(in srgb, var(--sidebar-icon-color) 18%, transparent);
  background: color-mix(in srgb, var(--sidebar-icon-color) 10%, transparent);
}

html[data-theme="dark"] .sidebar-link-secondary .sidebar-link-icon {
  color: var(--sidebar-icon-color);
}

html[data-theme="dark"] .sidebar-support-card,
html[data-theme="dark"] .sidebar-user,
html[data-theme="dark"] .language-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

html[data-theme="dark"] .sidebar-user-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(86, 207, 174, 0.12));
  color: #ffe889;
}

html[data-theme="dark"] .sidebar-user-role-pill {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.09);
  color: #bfdbfe;
}

html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .sidebar-utility {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .site-main-shell.site-main-shell-soft-record {
  background:
    radial-gradient(circle at 90% 0%, rgba(86, 207, 174, 0.1), transparent 30%),
    linear-gradient(180deg, #101612 0%, #111815 42%, #0c110f 100%);
}

html[data-theme="dark"] .sidebar-more-menu {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .language-pill.is-active {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

html[data-theme="dark"] .footer-brand,
html[data-theme="dark"] .page-intro-card,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero-side,
html[data-theme="dark"] .card,
html[data-theme="dark"] .snapshot-card,
html[data-theme="dark"] .cat-detail-minis,
html[data-theme="dark"] .notice-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .detail-main,
html[data-theme="dark"] .detail-side,
html[data-theme="dark"] .story-layout,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .help-detail-main,
html[data-theme="dark"] .help-detail-action-card,
html[data-theme="dark"] .help-detail-participants-card,
html[data-theme="dark"] .help-comment-thread.is-room {
  background: rgba(23, 29, 26, 0.94);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .muted-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .tag,
html[data-theme="dark"] .language-pill,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: rgba(247, 245, 234, 0.48);
}

.content-card {
  align-content: start;
  gap: 14px;
  min-height: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.content-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 200, 0, 0.42);
}

.support-entry-card {
  gap: 18px;
  background: #ffffff;
}

.support-page-band > .container {
  width: 100%;
}

body:has(.site-shell-rescue-console) .site-main:has(.support-page-band) {
  --site-main-top: 0px;
}

.support-page-band .support-anchor-section,
.support-page-band .studio-support-context-card {
  width: min(var(--content-max), calc(100% - 32px));
  justify-self: center;
}

.support-donation-hero {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  min-height: clamp(680px, calc(100vh - 112px), 840px);
  width: 100%;
  margin-top: 0;
  padding: clamp(58px, 8vw, 112px) clamp(18px, 3vw, 64px) clamp(64px, 8vw, 104px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(180deg, #ffcf35 0%, #ffd032 100%);
  overflow: hidden;
}

.support-donation-hero::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 54%;
  display: none;
  height: 78px;
  background:
    linear-gradient(135deg, transparent 0 18px, #fff3cf 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #fff3cf 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: 0.96;
}

.support-donation-copy {
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  max-width: 580px;
  gap: clamp(18px, 2vw, 28px);
  padding-top: clamp(16px, 4vw, 52px);
}

.support-donation-copy h1 {
  margin: 0;
  color: #050505;
  font-size: clamp(2.65rem, 4.8vw, 5.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.96;
}

.support-donation-copy p:not(.eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: #111111;
  font-size: clamp(1.1rem, 1.55vw, 1.55rem);
  font-weight: 720;
  line-height: 1.34;
}

.support-donation-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(430px, 760px);
  gap: clamp(24px, 4vw, 82px);
  align-items: start;
  width: min(1500px, 100%);
  margin-inline: auto;
}

.support-donation-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.support-checkout-return-note {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: rgba(255, 254, 248, 0.92);
  color: #111111;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
}

.support-donation-paypal {
  position: relative;
  min-height: 100%;
  gap: clamp(16px, 2vw, 22px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-donation-paypal.support-stripe-card {
  box-sizing: border-box;
  width: min(760px, 100%);
  gap: 28px;
  margin-inline: auto;
  padding: clamp(24px, 3.2vw, 36px);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 22px;
  background: rgba(255, 254, 248, 0.99);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.16);
}

.support-donation-paypal::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.support-donation-paypal.support-stripe-card::before {
  display: none;
}

.support-donation-paypal .eyebrow {
  color: var(--foreground);
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.support-checkout-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-checkout-control-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.support-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.support-control-label {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-stripe-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  max-width: none;
  padding: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.support-frequency-toggle {
  gap: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f0ede6;
}

.support-stripe-mode-toggle button {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground-muted);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.support-frequency-toggle button {
  min-height: 118px;
  gap: 12px;
  border-radius: 0;
  color: #111111;
  font-size: clamp(1.12rem, 2.4vw, 1.55rem);
  font-weight: 900;
}

.support-frequency-toggle button:first-child {
  border-radius: 14px 0 0 14px;
}

.support-frequency-toggle button:last-child {
  border-radius: 0 14px 14px 0;
}

.support-frequency-toggle button.is-selected {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

.support-frequency-toggle button.is-selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 16px solid #111111;
  transform: translateX(-50%);
}

.support-mode-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-mode-icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 0;
  border-radius: 999px;
  background: rgba(255, 208, 59, 0.2);
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

.support-mode-icon svg {
  position: relative;
  z-index: 1;
}

.support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon {
  animation: support-monthly-icon-float 2.8s ease-in-out infinite;
  transform-origin: 50% 58%;
}

.support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon::before {
  animation: support-monthly-icon-halo 2.8s ease-in-out infinite;
}

@keyframes support-monthly-icon-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  18% {
    transform: translateY(-3px) scale(1.04);
  }

  34% {
    transform: translateY(0) scale(1);
  }

  48% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes support-monthly-icon-halo {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.72);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  46% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon,
  .support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon::before {
    animation: none;
  }
}

.support-mode-label {
  color: currentColor;
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
}

.support-stripe-mode-toggle button strong {
  color: inherit;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.05;
}

.support-stripe-mode-toggle button span {
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0.66;
}

.support-stripe-mode-toggle button .support-mode-icon,
.support-stripe-mode-toggle button .support-mode-label {
  opacity: 1;
}

.support-stripe-mode-toggle button .support-mode-label {
  font-size: inherit;
  font-weight: 950;
}

.support-stripe-currency-toggle {
  display: inline-flex;
  justify-content: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-stripe-currency-toggle button {
  min-height: 0;
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  color: rgba(17, 24, 39, 0.46);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
}

.support-stripe-mode-toggle button:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.05);
  color: var(--foreground);
  outline: none;
}

.support-stripe-mode-toggle button.is-selected {
  background: rgba(15, 23, 42, 0.09);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.support-stripe-mode-toggle.support-frequency-toggle button.is-selected {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

.support-stripe-mode-toggle.support-stripe-currency-toggle button:is(:hover, :focus-visible),
.support-stripe-mode-toggle.support-stripe-currency-toggle button.is-selected {
  background: transparent;
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  box-shadow: none;
}

.support-selected-amount {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.support-selected-amount span,
.support-checkout-section-heading span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-selected-amount strong {
  color: var(--foreground);
  font-size: clamp(1.22rem, 2.1vw, 1.72rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.support-selected-amount small {
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
}

.support-checkout-section {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-checkout-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.support-checkout-section-heading span {
  color: #111111;
  font-size: clamp(1.38rem, 2.6vw, 1.9rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  text-transform: none;
}

.support-donation-paypal h3 {
  color: var(--foreground-muted);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.support-donation-paypal .stack-tight {
  gap: 4px;
}

.support-donation-paypal .paypal-preset-grid {
  gap: 8px;
}

.support-donation-paypal .support-stripe-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 14px;
}

.support-donation-paypal .chip-button {
  position: relative;
  min-height: 94px;
  align-content: center;
  justify-items: center;
  overflow: visible;
  padding: 18px 12px;
  border-radius: 12px;
  border: 2px solid rgba(17, 17, 17, 0.22);
  background: #ffffff;
  box-shadow: 0 9px 18px rgba(17, 17, 17, 0.08);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(17, 17, 17, 0.42);
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.support-donation-paypal .chip-button.is-selected {
  border-color: #111111;
  background: #111111;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
}

.support-donation-paypal .chip-button strong,
.support-donation-paypal .chip-button.is-selected strong {
  color: #111111;
  font-size: clamp(1.82rem, 3.2vw, 2.55rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.support-donation-paypal .chip-button span,
.support-donation-paypal .chip-button.is-selected span {
  color: rgba(17, 24, 39, 0.68);
  font-weight: 780;
  line-height: 1.34;
}

.support-donation-paypal .chip-button.is-selected strong,
.support-donation-paypal .chip-button.is-selected span {
  color: #ffffff;
}

.support-donation-paypal .chip-button .support-preset-badge,
.support-donation-paypal .chip-button.is-selected .support-preset-badge {
  position: absolute;
  top: -19px;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% + 22px);
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: #ffd344;
  color: #050505;
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: none;
  box-shadow: 0 8px 14px rgba(17, 17, 17, 0.12);
  transform: translateX(-50%);
}

.support-donation-paypal .field {
  gap: 14px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-donation-paypal .field input {
  background: #ffffff;
}

.support-custom-amount-field {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
  align-items: center;
  justify-content: stretch;
  max-width: none;
  padding: 18px 20px;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.06);
}

.support-donation-paypal .support-custom-amount-field {
  gap: 18px;
  padding: 18px 20px;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.support-custom-amount-field label {
  color: #111111;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.support-donation-paypal .support-custom-amount-field label {
  color: #111111;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.15;
}

.support-custom-amount-field input {
  width: 100%;
  min-height: 66px;
  border-width: 2px;
  border-color: rgba(17, 17, 17, 0.28);
  border-radius: 12px;
  font-size: 1.34rem;
  font-weight: 900;
}

.support-donation-paypal .support-custom-amount-field input {
  min-height: 66px;
  padding: 16px 18px;
  border: 2px solid rgba(17, 17, 17, 0.28);
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  font-size: 1.34rem;
  font-weight: 900;
}

.support-amount-stack {
  display: grid;
  gap: 20px;
}

.support-impact-card {
  position: relative;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 158px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  background: #f4f1ea;
}

.support-impact-card::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 22px solid transparent;
  border-bottom: 22px solid #f4f1ea;
  border-left: 22px solid transparent;
  transform: translateX(-50%);
}

.support-impact-visual {
  position: relative;
  display: block;
  width: 138px;
  height: 138px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff8de;
  box-shadow: 0 10px 20px rgba(17, 17, 17, 0.1);
}

.support-impact-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-impact-illustration {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #111111;
  border-radius: inherit;
  background: #ffd03b;
}

.support-impact-illustration::before {
  content: "";
  position: absolute;
  left: 17px;
  bottom: 18px;
  width: 44px;
  height: 25px;
  border: 4px solid #111111;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.support-impact-illustration::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #111111;
  box-shadow: 17px -4px 0 #111111, 34px 2px 0 #111111;
}

.support-impact-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.support-impact-copy small {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-impact-copy strong {
  color: #111111;
  font-size: clamp(1.02rem, 1.8vw, 1.24rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.28;
}

.support-donate-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 76px;
  width: 100%;
  padding: 0 26px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.support-donate-now-button:is(:hover, :focus-visible) {
  border-color: #111111;
  background: #ffd03b;
  color: #111111;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
}

.support-donate-now-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
  box-shadow: none;
}

.support-payment-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(8px);
  isolation: isolate;
}

.support-payment-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(720px, 100%);
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 24px;
  background: #fffef8;
  box-shadow: 0 28px 80px rgba(17, 17, 17, 0.22);
}

.support-payment-sheet h3 {
  margin: 0 34px 8px;
  color: #111111;
  font-size: clamp(1.65rem, 4vw, 2.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
}

.support-payment-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #111111;
}

.support-payment-sheet-close:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
}

.support-payment-option-card,
.support-payment-option-paypal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(40px, 0.14fr);
  align-items: center;
  min-height: 74px;
  width: 100%;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: transform 140ms ease, filter 140ms ease, background 140ms ease;
}

.support-payment-option-card:is(:hover, :focus-visible),
.support-payment-option-paypal:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.support-payment-option-card:disabled,
.support-payment-option-paypal:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.support-payment-option-card {
  border: 2px solid #111111;
  background: #111111;
  color: #ffffff;
}

.support-payment-option-card:is(:hover, :focus-visible) {
  filter: brightness(0.94);
}

.support-payment-option-card strong {
  justify-self: center;
  color: #ffffff;
  font: inherit;
}

.support-payment-option-copy {
  justify-self: center;
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  color: inherit;
}

.support-payment-option-copy strong {
  justify-self: center;
}

.support-payment-option-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.support-payment-option-card > span:last-child {
  justify-self: end;
}

.support-payment-option-paypal {
  grid-template-columns: 1fr;
  justify-items: center;
  border: 2px solid #111111;
  background: #ffffff;
  color: #111111;
}

.support-payment-option-paypal:is(:hover, :focus-visible) {
  background: #fffdf7;
}

.support-payment-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.support-payment-actions.has-paypal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-brand-pay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 72px;
  padding: 16px 18px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  text-align: left;
  box-shadow: none;
  transition: filter 140ms ease, transform 140ms ease;
}

.support-brand-pay-button:is(:hover, :focus-visible) {
  filter: brightness(0.96);
  outline: none;
  transform: translateY(-1px);
}

.support-brand-pay-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.62;
  transform: none;
}

.support-brand-pay-button > span:last-child:not(:first-child) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.support-brand-pay-button strong,
.support-brand-pay-button small {
  color: currentColor;
  line-height: 1.1;
}

.support-brand-pay-button strong {
  font-size: 1rem;
  font-weight: 950;
}

.support-brand-pay-button small {
  font-size: 0.78rem;
  font-weight: 760;
  opacity: 0.74;
}

.support-brand-pay-mark {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1;
}

.support-brand-pay-button-stripe {
  background: #635bff;
}

.support-brand-pay-button-paypal {
  background: #ffc439;
  color: #111111;
}

.support-paypal-wordmark {
  display: inline-flex;
  gap: 0;
  align-items: baseline;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.support-paypal-wordmark span:first-child {
  color: #003087;
}

.support-paypal-wordmark span:last-child {
  color: #009cde;
}

.support-donation-paypal .paypal-checkout-button {
  min-height: 58px;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
}

.support-donation-paypal .paypal-checkout-button:is(:hover, :focus-visible) {
  background: #000000;
}

.support-donation-paypal .paypal-checkout-amount {
  border-color: var(--brand);
  background: var(--brand);
  color: #111111;
}

.support-alt-payment-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.support-alt-payment-button {
  min-height: 46px;
  border-radius: 8px;
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: none;
}

.support-alt-payment-button:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.22);
  background: #ffffff;
  color: var(--foreground);
  outline: none;
}

.support-donation-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(1050px, calc(100% - 32px));
  margin-inline: auto;
}

.support-donation-secondary-card,
.support-donation-secondary-bank .bank-transfer-card {
  min-height: 132px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.support-donation-secondary-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--foreground);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.support-donation-secondary-card:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: #ffffff;
  color: var(--foreground);
  outline: none;
  transform: translateY(-1px);
}

.support-donation-patreon-card {
  border-color: rgba(255, 200, 0, 0.4);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, #fff9db 0%, #fffef8 64%, #fff3b5 100%);
}

.support-donation-patreon-card:is(:hover, :focus-visible) {
  border-color: rgba(17, 17, 17, 0.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.3), transparent 36%),
    linear-gradient(135deg, #fff4b8 0%, #fffdf3 62%, #ffe27a 100%);
}

.support-donation-patreon-card span {
  color: rgba(17, 17, 17, 0.62);
}

.support-donation-patreon-card small {
  color: rgba(17, 17, 17, 0.68);
}

.support-donation-secondary-card span {
  color: var(--foreground-muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-donation-secondary-card strong {
  color: var(--foreground);
  font-size: clamp(1.14rem, 2vw, 1.52rem);
  font-weight: 950;
  line-height: 1.04;
}

.support-donation-secondary-card small {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.35;
}

.support-donation-secondary-card.support-donation-patreon-card span {
  color: rgba(17, 17, 17, 0.62);
}

.support-donation-secondary-card.support-donation-patreon-card small {
  color: rgba(17, 17, 17, 0.68);
}

.support-donation-secondary-bank .bank-transfer-card summary {
  min-height: 132px;
  padding: 20px;
}

.support-donation-secondary-bank .bank-transfer-card[open] summary {
  min-height: auto;
}

.support-donation-secondary-bank .bank-transfer-summary-title {
  font-size: clamp(1.14rem, 2vw, 1.52rem);
  line-height: 1.04;
}

.support-donation-secondary-bank .bank-transfer-open-label {
  background: #111111;
  color: #ffffff;
}

.support-field-photo-band {
  --support-field-gutter: max(clamp(26px, 4vw, 42px), calc((100vw - var(--content-max)) / 2 + clamp(26px, 4vw, 42px)));
  display: grid;
  grid-template-columns: minmax(300px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: center;
  min-height: clamp(520px, 38vw, 740px);
  width: 100%;
  justify-self: stretch;
  margin-top: clamp(24px, 4vw, 52px);
  padding: clamp(52px, 7vw, 104px) var(--support-field-gutter);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 211, 68, 0.28), transparent 30%),
    linear-gradient(135deg, #fff8dc 0%, #fffdf7 100%);
  overflow: hidden;
}

.support-field-photo-copy {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

.support-field-photo-copy .eyebrow {
  color: rgba(17, 17, 17, 0.58);
}

.support-field-photo-copy h2 {
  margin: 0;
  color: #111111;
  font-size: clamp(1.9rem, 3.6vw, 3.65rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.support-field-photo-copy p {
  max-width: 45ch;
  margin: 0;
  color: rgba(17, 24, 39, 0.72);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  font-weight: 680;
  line-height: 1.48;
}

.support-field-photo-rail {
  display: grid;
  align-items: stretch;
  grid-auto-columns: clamp(240px, 18vw, 380px);
  grid-auto-flow: column;
  gap: clamp(14px, 1.2vw, 22px);
  width: calc(100% + var(--support-field-gutter));
  margin-right: calc(var(--support-field-gutter) * -1);
  padding: 8px var(--support-field-gutter) 18px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 0 var(--support-field-gutter);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(17, 17, 17, 0.3) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 54px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 54px), transparent 100%);
  cursor: grab;
}

.support-field-photo-rail:active {
  cursor: grabbing;
}

.support-field-photo-rail::-webkit-scrollbar,
.support-public-record-rail::-webkit-scrollbar {
  height: 7px;
}

.support-field-photo-rail::-webkit-scrollbar-track,
.support-public-record-rail::-webkit-scrollbar-track {
  background: transparent;
}

.support-field-photo-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.3);
}

.support-field-photo-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 22px;
  background: #111111;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.12);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.support-field-photo-item:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(17, 17, 17, 0.18);
}

.support-field-photo-item img {
  object-fit: cover;
  transition: transform 220ms ease;
}

.support-field-photo-item:is(:hover, :focus-visible) img {
  transform: scale(1.035);
}

.support-public-record-band {
  --support-record-gutter: max(clamp(36px, 6vw, 72px), calc((100vw - var(--content-max)) / 2 + clamp(36px, 6vw, 72px)));
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: center;
  min-height: clamp(520px, 34vw, 700px);
  width: 100%;
  justify-self: stretch;
  margin-top: -24px;
  padding: clamp(56px, 7vw, 96px) var(--support-record-gutter);
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.26), transparent 28%),
    linear-gradient(135deg, #874017 0%, #9d4518 100%);
  color: #ffffff;
  overflow: hidden;
}

.support-public-record-copy {
  display: grid;
  gap: 20px;
  max-width: 680px;
}

.support-public-record-copy .eyebrow {
  color: #ffd344;
}

.support-public-record-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.65rem, 2.4vw, 3.1rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.support-public-record-copy p {
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  font-weight: 620;
  line-height: 1.52;
}

.support-public-record-copy ul {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.support-public-record-copy li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.95rem, 1.08vw, 1.04rem);
  font-weight: 720;
  line-height: 1.42;
}

.support-public-record-copy li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffd344;
}

.support-public-record-rail {
  display: grid;
  align-items: stretch;
  grid-auto-columns: clamp(340px, 24vw, 520px);
  grid-auto-flow: column;
  gap: clamp(18px, 1.4vw, 26px);
  width: calc(100% + var(--support-record-gutter));
  margin-right: calc(var(--support-record-gutter) * -1);
  padding: 12px var(--support-record-gutter) 22px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 0 var(--support-record-gutter);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255, 211, 68, 0.68) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
  cursor: grab;
}

.support-public-record-rail:active {
  cursor: grabbing;
}

.support-public-record-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 211, 68, 0.68);
}

.support-public-record-card {
  display: grid;
  grid-template-rows: 240px minmax(210px, auto);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: rgba(255, 254, 248, 0.96);
  color: #111111;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.support-public-record-card:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

.support-public-record-media {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #111111;
}

.support-public-record-media img {
  object-fit: cover;
  transition: transform 220ms ease;
}

.support-public-record-card:is(:hover, :focus-visible) .support-public-record-media img {
  transform: scale(1.035);
}

.support-public-record-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
}

.support-public-record-body small {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-public-record-body strong {
  color: #111111;
  font-size: clamp(1.24rem, 2vw, 1.58rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.support-public-record-body span {
  color: rgba(17, 24, 39, 0.72);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
}

html[data-theme="dark"] .support-public-record-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.22), transparent 28%),
    linear-gradient(135deg, #6f3413 0%, #8d3c14 100%);
}

html[data-theme="dark"] .support-field-photo-band {
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 211, 68, 0.14), transparent 30%),
    linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
}

html[data-theme="dark"] .support-field-photo-copy .eyebrow {
  color: rgba(255, 211, 68, 0.86);
}

html[data-theme="dark"] .support-field-photo-copy h2 {
  color: #ffffff;
}

html[data-theme="dark"] .support-field-photo-copy p {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] .support-field-photo-item {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .support-public-record-card,
html[data-theme="dark"] .support-public-record-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 254, 248, 0.96);
  color: #111111;
}

html[data-theme="dark"] .support-public-record-body small {
  color: rgba(17, 17, 17, 0.58);
}

html[data-theme="dark"] .support-public-record-body strong {
  color: #111111;
}

html[data-theme="dark"] .support-public-record-body span {
  color: rgba(17, 24, 39, 0.72);
}

.support-stripe-disclaimer {
  max-width: 52ch;
  margin: 0;
}

.support-donation-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.support-route-card {
  display: grid;
  min-height: 144px;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.support-route-card:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
  transform: translateY(-2px);
}

.support-route-card > span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.support-route-card > strong {
  display: block;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
}

.support-route-card > small {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.45;
}

.support-route-card-monthly {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.support-route-card-monthly > strong {
  color: #ffffff;
}

.support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: #000000;
  background: #000000;
}

.support-donation-side .bank-transfer-card {
  min-height: 144px;
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: none;
}

.support-donation-side .bank-transfer-card summary {
  min-height: 144px;
  padding: 20px;
}

.support-donation-side .bank-transfer-card[open] summary {
  min-height: auto;
}

.support-donation-side .bank-transfer-summary-title {
  font-size: clamp(1.18rem, 2vw, 1.56rem);
  line-height: 1.04;
}

.support-donation-side .bank-transfer-open-label {
  background: #111111;
  color: #ffffff;
}

.support-entry-copy {
  display: grid;
  max-width: 720px;
  gap: 7px;
}

.support-entry-copy > strong {
  font-size: clamp(1.72rem, 3vw, 2.55rem);
  letter-spacing: 0;
  line-height: 1.04;
}

.support-entry-copy > p {
  max-width: 58ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.98rem;
  font-weight: 680;
  line-height: 1.52;
}

.support-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-entry-option {
  display: grid;
  min-width: 0;
  min-height: 136px;
  align-content: start;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.support-entry-option:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
}

.support-entry-option > span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.support-entry-option > strong {
  display: block;
  color: var(--foreground);
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.12;
}

.support-entry-option > small {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.42;
}

.support-entry-option-primary {
  border-color: rgba(15, 23, 42, 0.16);
}

.support-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.08);
}

.support-trust-strip span {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  background: #ffffff;
}

.support-trust-strip strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.support-trust-strip small {
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.42;
}

html[data-theme="dark"] .support-entry-option {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #ffffff;
}

html[data-theme="dark"] .support-entry-option:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .support-entry-option > span,
html[data-theme="dark"] .support-entry-option > small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-entry-option > strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-hero {
  border-color: transparent;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 200, 0, 0.1), transparent 25%),
    linear-gradient(180deg, #050505 0%, #000000 100%);
}

html[data-theme="dark"] .support-donation-hero::after {
  background:
    linear-gradient(135deg, transparent 0 18px, #000000 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #000000 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x;
  opacity: 1;
}

html[data-theme="dark"] .support-donation-copy h1,
html[data-theme="dark"] .support-donation-paypal .eyebrow,
html[data-theme="dark"] .support-route-card > strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-copy p:not(.eyebrow),
html[data-theme="dark"] .support-donation-paypal h3,
html[data-theme="dark"] .support-route-card > span,
html[data-theme="dark"] .support-route-card > small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-paypal,
html[data-theme="dark"] .support-route-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}

html[data-theme="dark"] .support-donation-paypal {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-donation-paypal.support-stripe-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #050505;
}

html[data-theme="dark"] .support-donation-paypal .chip-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-checkout-controls,
html[data-theme="dark"] .support-checkout-section {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .support-control-label {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-selected-amount {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .support-selected-amount strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-selected-amount span,
html[data-theme="dark"] .support-selected-amount small,
html[data-theme="dark"] .support-checkout-section-heading span {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-stripe-mode-toggle button {
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-stripe-mode-toggle {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-stripe-mode-toggle button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

html[data-theme="dark"] .support-stripe-mode-toggle button.is-selected {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle {
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button:is(:hover, :focus-visible),
html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button.is-selected {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle button.is-selected {
  background: #ffffff;
  color: #111111;
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle button.is-selected::after {
  border-top-color: #ffffff;
}

html[data-theme="dark"] .support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-paypal .chip-button strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-paypal .chip-button span {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected {
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected strong {
  color: #111111;
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected span {
  color: rgba(17, 17, 17, 0.64);
}

html[data-theme="dark"] .support-impact-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #111111;
}

html[data-theme="dark"] .support-impact-card::before {
  border-bottom-color: #111111;
}

html[data-theme="dark"] .support-impact-illustration {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-impact-copy small {
  color: rgba(255, 255, 255, 0.58);
}

html[data-theme="dark"] .support-impact-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donate-now-button {
  border-color: var(--brand);
  background: var(--brand);
  color: #111111;
  box-shadow: 0 18px 36px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .support-donate-now-button:is(:hover, :focus-visible) {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .support-alt-payment-button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html[data-theme="dark"] .support-alt-payment-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-card,
html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-donation-secondary-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-secondary-card strong,
html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-summary-title {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-card span,
html[data-theme="dark"] .support-donation-secondary-card small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-patreon-card,
html[data-theme="dark"] .support-donation-patreon-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.16) 0%, rgba(255, 255, 255, 0.065) 64%, rgba(255, 200, 0, 0.1) 100%);
}

html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card span,
html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card small {
  color: rgba(255, 236, 170, 0.72);
}

html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-open-label {
  background: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .support-donation-paypal .field {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-donation-paypal .field input {
  background: #050505;
}

html[data-theme="dark"] .support-donation-paypal .support-custom-amount-field {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="dark"] .support-custom-amount-field label {
  color: #ffffff;
}

html[data-theme="dark"] .support-custom-amount-field input {
  border-color: rgba(255, 255, 255, 0.24);
  background: #050505;
  color: #ffffff;
}

html[data-theme="dark"] .support-route-card-monthly {
  border-color: #ffffff;
  background: #ffffff;
}

html[data-theme="dark"] .support-route-card-monthly > strong {
  color: #111111;
}

html[data-theme="dark"] .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-donation-side .bank-transfer-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0a0a0a;
}

html[data-theme="dark"] .support-route-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-trust-strip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-trust-strip span {
  background: #101010;
}

html[data-theme="dark"] .support-trust-strip strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-trust-strip small {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 760px) {
  .support-donation-hero {
    min-height: auto;
    padding: clamp(44px, 7vw, 76px) clamp(18px, 5vw, 42px) clamp(54px, 7vw, 82px);
  }

  .support-donation-hero::after {
    top: 39%;
  }

  .support-donation-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(760px, 100%);
    gap: clamp(24px, 4vw, 38px);
  }

  .support-donation-copy {
    justify-self: center;
    max-width: min(650px, 100%);
    padding-top: 0;
    text-align: center;
  }

  .support-donation-copy p:not(.eyebrow) {
    margin-inline: auto;
  }

  .support-donation-main,
  .support-donation-paypal.support-stripe-card {
    width: 100%;
  }

  .support-donation-paypal .chip-button {
    min-height: 84px;
  }
}

@media (max-width: 720px) {
  .support-donation-hero {
    min-height: auto;
    margin-top: 0;
    padding: 34px max(16px, env(safe-area-inset-right)) 46px max(16px, env(safe-area-inset-left));
    background:
      radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.15), transparent 30%),
      linear-gradient(180deg, #ffcf35 0%, #ffd03b 100%);
  }

  .support-donation-hero::after {
    top: 34%;
    height: 52px;
    background:
      linear-gradient(135deg, transparent 0 13px, #fff3cf 13px 23px, transparent 23px 32px) 0 0 / 74px 52px repeat-x,
      linear-gradient(24deg, transparent 0 12px, #fff3cf 12px 23px, transparent 23px 34px) 0 8px / 88px 50px repeat-x;
  }

  html[data-theme="dark"] .support-donation-hero {
    background:
      radial-gradient(circle at 22% 10%, rgba(255, 200, 0, 0.1), transparent 30%),
      linear-gradient(180deg, #050505 0%, #000000 100%);
  }

  html[data-theme="dark"] .support-donation-hero::after {
    background:
      linear-gradient(135deg, transparent 0 13px, #000000 13px 23px, transparent 23px 32px) 0 0 / 74px 52px repeat-x,
      linear-gradient(24deg, transparent 0 12px, #000000 12px 23px, transparent 23px 34px) 0 8px / 88px 50px repeat-x;
  }

  .support-donation-copy {
    max-width: 100%;
    gap: 12px;
    padding-top: 4px;
    text-align: left;
  }

  .support-donation-copy h1 {
    font-size: clamp(2.25rem, 9.6vw, 3.05rem);
    white-space: nowrap;
  }

  .support-donation-copy p:not(.eyebrow) {
    max-width: 34ch;
    font-size: 1.02rem;
  }

  .support-donation-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .support-donation-paypal.support-stripe-card {
    width: 100%;
    gap: 22px;
    padding: 20px 14px;
    border-radius: 18px;
  }

  .support-checkout-controls,
  .support-payment-actions.has-paypal {
    grid-template-columns: 1fr;
  }

  .support-control-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .support-donation-paypal .support-stripe-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .support-donation-paypal .chip-button {
    min-height: 68px;
    padding: 12px 8px;
    border-radius: 10px;
  }

  .support-donation-paypal .chip-button strong,
  .support-donation-paypal .chip-button.is-selected strong {
    font-size: clamp(1.12rem, 5.8vw, 1.58rem);
  }

  .support-donation-paypal .chip-button span,
  .support-donation-paypal .chip-button.is-selected span {
    font-size: 0.78rem;
  }

  .support-impact-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    min-height: 108px;
    padding: 10px 12px 10px 10px;
    border-radius: 14px;
  }

  .support-impact-visual {
    width: 88px;
    height: 88px;
    border-radius: 12px;
  }

  .support-impact-illustration {
    border-radius: 18px;
  }

  .support-impact-illustration::before {
    left: 13px;
    bottom: 14px;
    width: 32px;
    height: 18px;
    border-width: 3px;
  }

  .support-impact-illustration::after {
    top: 15px;
    left: 15px;
    width: 7px;
    height: 7px;
    box-shadow: 13px -3px 0 #111111, 26px 2px 0 #111111;
  }

  .support-impact-copy strong {
    font-size: 0.95rem;
  }

  .support-custom-amount-field {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 12px;
    padding: 16px;
  }

  .support-donation-paypal .support-custom-amount-field {
    gap: 12px;
    padding: 16px;
  }

  .support-custom-amount-field input {
    min-height: 58px;
    font-size: 1.14rem;
  }

  .support-donation-paypal .support-custom-amount-field input {
    min-height: 58px;
    padding: 13px 15px;
    font-size: 1.14rem;
  }

  .support-payment-sheet {
    gap: 14px;
    padding: 22px 16px;
  }

  .support-payment-option-card {
    grid-template-columns: minmax(0, 1fr) 28px;
    min-height: 64px;
    padding: 8px 14px;
  }

  .support-payment-option-copy small {
    font-size: 0.68rem;
  }

  .support-payment-option-paypal {
    min-height: 62px;
  }

  .support-donation-secondary-grid,
  .support-alt-payment-row {
    grid-template-columns: 1fr;
  }

  .support-field-photo-band {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    width: 100%;
    justify-self: stretch;
    margin-top: 0;
    padding: 24px 18px 20px;
    border: 0;
  }

  .support-field-photo-copy {
    gap: 12px;
  }

  .support-field-photo-copy h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .support-field-photo-copy p {
    font-size: 0.96rem;
  }

  .support-field-photo-rail {
    grid-auto-columns: minmax(190px, 72vw);
    width: calc(100% + 18px);
    margin-right: -18px;
    padding: 2px 18px 12px 0;
    scroll-padding-inline: 0 18px;
  }

  .support-field-photo-item {
    border: 0;
    border-radius: 18px;
  }

  .support-public-record-band {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
    width: 100%;
    justify-self: stretch;
    margin-top: -24px;
    padding: 28px 18px 22px;
    border: 0;
  }

  .support-public-record-copy {
    gap: 14px;
  }

  .support-public-record-copy h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.85rem);
  }

  .support-public-record-copy p,
  .support-public-record-copy li {
    font-size: 0.96rem;
  }

  .support-public-record-rail {
    grid-auto-columns: minmax(260px, 82vw);
    width: calc(100% + 18px);
    margin-right: -18px;
    padding: 4px 18px 14px 0;
    scroll-padding-inline: 0 18px;
  }

  .support-public-record-card {
    grid-template-rows: 196px minmax(184px, auto);
    border: 0;
    border-radius: 20px;
  }

  .support-public-record-body {
    gap: 10px;
    padding: 18px;
  }

  .support-route-card {
    min-height: auto;
  }

  .support-entry-actions {
    grid-template-columns: 1fr;
  }

  .support-entry-option {
    min-height: auto;
  }

  .support-trust-strip {
    grid-template-columns: 1fr;
  }

  .rescue-search-destinations {
    grid-template-columns: 1fr;
  }
}

.rescue-search-intro {
  align-items: start;
}

.rescue-search-results-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 18px;
  align-items: end;
  padding: 2px 0 6px;
}

.rescue-search-results-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rescue-search-results-copy h1 {
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.08;
}

.rescue-search-results-copy p:not(.eyebrow) {
  max-width: 56ch;
  color: var(--foreground-muted);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.5;
}

.rescue-search-page-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(100%, 760px);
  align-items: center;
}

.rescue-search-page-form.has-clear {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rescue-search-page-form input {
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 760;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.rescue-search-page-form input:focus-visible {
  border-color: rgba(11, 105, 183, 0.36);
  box-shadow: 0 0 0 4px rgba(11, 105, 183, 0.12);
}

.rescue-search-page-form input::placeholder {
  color: rgba(15, 23, 42, 0.44);
}

.rescue-search-page-form .button {
  gap: 8px;
  min-height: 44px;
}

.rescue-search-clear-link {
  white-space: nowrap;
}

.rescue-search-summary {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: 0;
}

.rescue-search-results {
  align-items: stretch;
}

.rescue-search-empty strong {
  color: var(--foreground);
  font-size: 1.02rem;
  letter-spacing: 0;
}

.rescue-search-destinations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.rescue-search-destinations a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.rescue-search-destinations a:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
  transform: translateY(-1px);
}

.rescue-search-destinations strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.rescue-search-destinations span {
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.38;
}

html[data-theme="dark"] .rescue-search-destinations a {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .rescue-search-destinations a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .rescue-search-destinations span {
  color: rgba(255, 255, 255, 0.62);
}

.studio-support-context-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr);
  gap: 18px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 32%),
    linear-gradient(145deg, #090909 0%, #171717 58%, #22201c 100%);
  color: #fffdf3;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}

.studio-support-context-copy {
  display: grid;
  gap: 10px;
}

.studio-support-context-copy .eyebrow {
  color: rgba(255, 218, 107, 0.78);
}

.studio-support-context-copy h2 {
  max-width: 680px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 3.4vw, 3.15rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.98;
}

.studio-support-context-copy p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.98rem;
  font-weight: 560;
  line-height: 1.58;
}

.studio-support-context-meta {
  display: grid;
  gap: 9px;
  align-content: start;
}

.studio-support-context-meta span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}

.studio-support-context-meta small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-support-context-meta strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-support-context-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.studio-support-context-actions .button {
  min-height: 44px;
  border-radius: 999px;
}

.studio-support-context-actions .button-secondary,
.studio-support-context-actions .button-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
}

@media (max-width: 720px) {
  .studio-support-context-card {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .studio-support-context-actions .button {
    width: 100%;
  }
}

.bank-transfer-card {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
}

.bank-transfer-card summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.bank-transfer-card summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.bank-transfer-card summary::-webkit-details-marker {
  display: none;
}

.bank-transfer-card strong,
.bank-transfer-card p,
.bank-transfer-card dl {
  margin: 0;
}

.bank-transfer-card strong {
  display: block;
  margin-top: 3px;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.25;
}

.bank-transfer-summary-title {
  display: block;
  margin-top: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
}

.bank-transfer-open-label {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground-muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.bank-transfer-card[open] .bank-transfer-open-label {
  background: var(--foreground);
  color: #ffffff;
}

.bank-transfer-panel {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.bank-transfer-card p {
  margin-top: 4px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.bank-transfer-details {
  display: grid;
  gap: 8px;
}

.bank-transfer-details div {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.bank-transfer-details dt {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bank-transfer-details dd {
  margin: 0;
  color: var(--foreground);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.loading-page {
  padding-top: 10px;
}

body:has(.loading-page) .site-sidebar,
body:has(.loading-page) .site-overlay,
body:has(.loading-page) .mobile-nav-toggle {
  display: none !important;
}

body:has(.studio-loading-page) .site-sidebar,
body:has(.studio-loading-page) .site-overlay,
body:has(.studio-loading-page) .mobile-nav-toggle,
body:has(.studio-loading-page) .site-footer {
  display: none !important;
}

body:has(.loading-page) .site-main-shell,
body:has(.loading-page) .site-main-shell.is-studio-sidebar-pinned {
  min-height: 100svh;
  margin-left: 0 !important;
}

body:has(.studio-loading-page) .site-main-shell,
body:has(.studio-loading-page) .site-main-shell.is-studio-sidebar-pinned {
  min-height: 100svh;
  margin-left: 0 !important;
}

body:has(.loading-page) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
}

body:has(.studio-loading-page) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
}

.loading-shell {
  gap: 18px;
}

.loading-hero {
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 222, 0.96) 100%);
}

.loading-status-card {
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.site-main-shell-soft-record .loading-page {
  background: transparent;
}

.site-main-shell-soft-record .loading-hero {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 247, 0.96) 100%);
}

.loading-status-list,
.loading-card-grid,
.loading-card-body {
  display: grid;
}

.loading-status-list {
  gap: 12px;
}

.loading-status-row,
.loading-tag-row,
.loading-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-card-grid {
  gap: 16px;
}

.loading-card {
  gap: 14px;
  min-height: 100%;
  overflow: hidden;
}

.loading-thumb {
  width: calc(100% + 48px);
  height: 180px;
  margin: -24px -24px 0;
  border-radius: 24px 24px 18px 18px;
  background: #e9eef5;
}

.loading-card-body {
  gap: 12px;
}

.loading-pill,
.loading-line,
.loading-dot,
.loading-chip,
.loading-thumb {
  position: relative;
  overflow: hidden;
  background: #e8edf4;
}

.loading-pill,
.loading-chip {
  height: 28px;
  border-radius: 999px;
}

.loading-pill {
  width: 76px;
}

.loading-pill-wide {
  width: 108px;
}

.loading-chip {
  width: 48px;
  flex-shrink: 0;
}

.loading-line {
  height: 12px;
  border-radius: 999px;
}

.loading-line-title {
  width: 72%;
  height: 22px;
}

.loading-line-long {
  width: 100%;
}

.loading-line-medium {
  width: 72%;
}

.loading-line-short {
  width: 46%;
}

.loading-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
}

.loading-meta-row {
  margin-top: auto;
}

.loading-shimmer::after,
.loading-line::after,
.loading-dot::after,
.loading-pill::after,
.loading-chip::after,
.loading-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.82) 50%, transparent 100%);
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes loading-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.home-hero-band {
  padding-top: 12px;
}

.recognition-ticker-band {
  --recognition-ticker-duration: 96s;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.recognition-ticker-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--foreground);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.recognition-ticker-window {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: #172033;
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

.recognition-ticker-track {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: max-content;
  animation: recognition-marquee var(--recognition-ticker-duration) linear infinite;
}

.recognition-ticker-band:hover .recognition-ticker-track {
  animation-play-state: paused;
}

.recognition-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: #172033;
  white-space: nowrap;
}

.recognition-ticker-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #172033;
  opacity: 0.36;
}

.recognition-ticker-name {
  font-size: 0.84rem;
  font-weight: 950;
  letter-spacing: 0;
}

.recognition-ticker-kind {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes recognition-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.home-home-stack,
.home-hero-header {
  gap: 18px;
}

.help-room-form-section .field-grid {
  align-items: start;
}

.home-home-highlights,
.home-intro-grid,
.home-card-grid {
  gap: 16px;
}

.home-hero-shell {
  display: grid;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.home-hero-shell-copy,
.home-hero-shell-media,
.home-home-highlights,
.home-spotlight-card,
.home-spotlight-card-head,
.home-spotlight-card-foot {
  display: grid;
}

.home-hero-shell-copy,
.home-spotlight-card {
  min-width: 0;
}

.home-hero-shell-copy {
  gap: 20px;
  align-content: center;
  padding: 8px 4px;
}

.home-hero-shell-copy h1 {
  max-width: none;
  font-size: clamp(2.65rem, 5vw, 4.85rem);
}

.home-hero-lead {
  max-width: none;
  font-size: 0.96rem;
  line-height: 1.55;
}

.home-hero-media {
  min-height: 248px;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-soft);
}

.home-hero-media img {
  object-position: 58% center;
}

.home-home-highlights {
  display: grid;
}

.home-feature-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.home-feature-card-pet {
  background: #ffffff;
}

.home-feature-card-video {
  background: #ffffff;
}

.home-feature-media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 0;
  background: var(--surface-soft);
}

.home-feature-media img {
  object-fit: cover;
}

.home-feature-media-pet::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 18, 26, 0.12) 0%, rgba(13, 18, 26, 0) 34%, rgba(13, 18, 26, 0.52) 100%);
}

.home-feature-media-video {
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 390px;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.98) 0%, rgba(34, 34, 34, 0.98) 100%);
}

.home-feature-video-bg {
  position: absolute;
  z-index: 0;
  inset: -34px;
  width: calc(100% + 68px);
  height: calc(100% + 68px);
  object-fit: cover;
  opacity: 0.72;
  filter: blur(24px) saturate(1.16) contrast(1.05) brightness(0.72);
  transform: scale(1.04);
  pointer-events: none;
}

.home-feature-media-video::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.32) 0%, rgba(10, 12, 16, 0.64) 100%);
}

.home-feature-video-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding-block: 10px;
}

.home-feature-video-embed.story-video-embed-short {
  width: min(100%, 298px);
  max-width: 298px;
  margin-inline: auto;
}

.home-feature-panel {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 20px 20px 22px;
  border-top: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.home-feature-panel-video {
  background: #ffffff;
}

.studio-page {
  display: grid;
  gap: 28px;
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 22px 0 72px;
}

.studio-create-page {
  width: 100%;
  max-width: none;
  padding: 0 0 72px;
  overflow-x: hidden;
}

.studio-create-console {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  min-height: 100svh;
  margin-inline: calc(50% - 50vw);
  padding: clamp(108px, 11vw, 144px) 18px clamp(34px, 6vw, 70px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 200, 0, 0.16), transparent 34%),
    linear-gradient(135deg, #120c08 0%, #21140c 48%, #0f1713 100%);
  box-shadow: none;
  isolation: isolate;
}

.studio-create-console::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 50% 43%, rgba(20, 12, 7, 0.04), rgba(20, 12, 7, 0.48) 58%, rgba(20, 12, 7, 0.68) 100%),
    linear-gradient(180deg, rgba(18, 10, 5, 0.34) 0%, rgba(18, 10, 5, 0.06) 38%, rgba(18, 10, 5, 0.34) 100%);
  pointer-events: none;
}

.studio-create-console .studio-pass-layout {
  position: relative;
  z-index: 2;
}

.studio-create-hidden-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.studio-create-video-wall {
  position: absolute;
  inset: -7%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.studio-create-video-wall::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07), transparent 26%),
    linear-gradient(90deg, rgba(18, 10, 5, 0.54), transparent 26%, transparent 74%, rgba(18, 10, 5, 0.54));
  pointer-events: none;
}

.studio-create-video-tile {
  position: absolute;
  width: clamp(118px, 15vw, 250px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: clamp(18px, 2.2vw, 34px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 28px 88px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 238, 190, 0.12);
  opacity: 0.54;
  transform: rotate(var(--tile-rotate, 0deg)) scale(var(--tile-scale, 1));
}

.studio-create-video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.studio-create-video-tile:nth-child(1) {
  left: 5%;
  top: 13%;
  --tile-rotate: -7deg;
  --tile-scale: 1.08;
}

.studio-create-video-tile:nth-child(2) {
  right: 7%;
  top: 8%;
  --tile-rotate: 6deg;
  --tile-scale: 0.94;
}

.studio-create-video-tile:nth-child(3) {
  left: 17%;
  bottom: 3%;
  --tile-rotate: 5deg;
  --tile-scale: 0.98;
}

.studio-create-video-tile:nth-child(4) {
  right: 18%;
  bottom: 0;
  --tile-rotate: -5deg;
  --tile-scale: 1.08;
}

.studio-create-video-tile:nth-child(5) {
  left: 41%;
  top: -3%;
  --tile-rotate: 2deg;
  --tile-scale: 0.8;
  opacity: 0.34;
}

.studio-create-video-tile:nth-child(6) {
  right: -1%;
  top: 44%;
  --tile-rotate: -8deg;
  --tile-scale: 0.82;
  opacity: 0.36;
}

.studio-create-video-tile:nth-child(7) {
  left: -2%;
  top: 43%;
  --tile-rotate: 7deg;
  --tile-scale: 0.82;
  opacity: 0.36;
}

.studio-create-video-tile:nth-child(8) {
  left: 47%;
  bottom: -8%;
  --tile-rotate: -2deg;
  --tile-scale: 0.74;
  opacity: 0.3;
}

.studio-create-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(22px, 4vw, 42px);
  align-items: center;
  min-height: clamp(520px, 58vw, 700px);
  padding: clamp(24px, 5vw, 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 200, 0, 0.22);
  border-radius: 34px;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 200, 0, 0.26), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(86, 207, 174, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 254, 247, 0.94), rgba(255, 247, 218, 0.78) 52%, rgba(244, 255, 248, 0.92));
  box-shadow: 0 34px 90px rgba(77, 54, 22, 0.15);
  isolation: isolate;
}

.studio-create-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.5) 43%, transparent 68%),
    radial-gradient(circle at 50% 100%, rgba(255, 200, 0, 0.16), transparent 48%);
  opacity: 0.68;
  pointer-events: none;
}

.studio-create-hero-copy,
.studio-create-showcase {
  position: relative;
  z-index: 1;
}

.studio-create-hero-copy {
  display: grid;
  gap: 18px;
  max-width: 570px;
}

.studio-create-hero-copy h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.45rem, 7vw, 5.3rem);
  line-height: 0.9;
  letter-spacing: 0;
}

.studio-create-hero-copy p:not(.eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: var(--muted-foreground);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 720;
  line-height: 1.5;
}

.studio-create-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.studio-create-budget-note {
  width: fit-content;
  max-width: 48ch;
  padding: 10px 13px;
  border: 1px solid rgba(66, 170, 133, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #2f6656 !important;
  font-size: 0.86rem !important;
  font-weight: 900 !important;
}

.studio-create-showcase {
  display: grid;
  gap: 16px;
  justify-items: center;
}

.studio-create-showcase-main {
  width: min(100%, 420px);
  transform: rotate(1deg);
}

.studio-create-showcase-main .studio-card {
  min-height: 520px;
  border-color: rgba(255, 255, 255, 0.64);
  box-shadow: 0 34px 92px rgba(56, 42, 17, 0.22);
}

.studio-create-showcase-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 470px);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 16px 38px rgba(61, 45, 18, 0.12);
  backdrop-filter: blur(12px);
}

.studio-create-avatar-link {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 17px;
  color: var(--foreground);
  text-decoration: none;
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.studio-create-avatar-link:hover {
  background: rgba(255, 200, 0, 0.14);
  transform: translateY(-1px);
}

.studio-create-avatar-link img {
  width: 58px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 999px;
  background: rgba(255, 249, 228, 0.9);
}

.studio-create-avatar-link span {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 0.75rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-create-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-create-proof-grid article {
  display: grid;
  gap: 9px;
  min-height: 168px;
  padding: 20px;
  border: 1px solid rgba(255, 200, 0, 0.2);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 44px rgba(78, 58, 24, 0.08);
}

.studio-create-proof-grid span {
  display: inline-grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #17120a;
  font-size: 0.82rem;
  font-weight: 950;
}

.studio-create-proof-grid h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.05rem;
}

.studio-create-proof-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
}

.studio-create-start {
  display: grid;
  gap: 18px;
  scroll-margin-top: 120px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 253, 244, 0.86));
  box-shadow: var(--shadow-soft);
}

.studio-create-start-copy {
  display: grid;
  gap: 8px;
  max-width: 780px;
}

.studio-create-start-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
}

.studio-create-start-copy p:not(.eyebrow) {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 720;
  line-height: 1.5;
}

.studio-motion-hero {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: min(56.25vw, calc(100svh - 16px), 1440px);
  min-height: clamp(360px, 56.25vw, 760px);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: #1a120d;
  box-shadow: 0 34px 92px rgba(72, 44, 18, 0.18);
  isolation: isolate;
}

.studio-motion-hero::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: clamp(92px, 16vw, 168px);
  content: "";
  background:
    linear-gradient(180deg, rgba(18, 10, 5, 0.46) 0%, rgba(18, 10, 5, 0.22) 46%, transparent 100%);
  pointer-events: none;
}

.studio-motion-hero::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.1), transparent 28%),
    linear-gradient(90deg, rgba(20, 11, 6, 0.32) 0%, transparent 12%, transparent 88%, rgba(20, 11, 6, 0.3) 100%),
    linear-gradient(180deg, rgba(24, 13, 8, 0.01) 0%, rgba(24, 13, 8, 0.14) 100%);
  pointer-events: none;
}

.studio-motion-hero-bg {
  position: absolute;
  inset: -44px;
  z-index: 0;
  width: calc(100% + 88px);
  height: calc(100% + 88px);
  object-fit: cover;
  opacity: 0.84;
  filter: blur(30px) saturate(1.2) contrast(1.06) brightness(0.7);
  transform: scale(1.05);
  pointer-events: none;
}

.studio-motion-hero-frame {
  position: relative;
  z-index: 1;
  width: min(100vw, calc((100svh - 16px) * 16 / 9), 2560px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow:
    0 28px 86px rgba(18, 10, 5, 0.26),
    0 0 0 1px rgba(255, 248, 226, 0.08);
}

.studio-motion-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.studio-motion-hero-copy {
  position: absolute;
  left: clamp(22px, 5vw, 86px);
  bottom: clamp(22px, 4vw, 54px);
  z-index: 5;
  display: grid;
  width: min(620px, calc(100vw - 36px));
  justify-items: start;
  gap: 11px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  backdrop-filter: none;
}

.studio-motion-hero-copy .eyebrow {
  margin: 0;
  color: rgba(255, 248, 223, 0.86);
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.78),
    0 6px 18px rgba(0, 0, 0, 0.42);
}

.studio-motion-hero-copy h1 {
  margin: 0;
  color: #fffaf0;
  font-size: clamp(1.8rem, 4.6vw, 4.3rem);
  line-height: 0.88;
  letter-spacing: 0;
  -webkit-text-stroke: 1px rgba(22, 10, 4, 0.48);
  text-shadow:
    0 2px 0 rgba(22, 10, 4, 0.58),
    0 6px 18px rgba(0, 0, 0, 0.54),
    0 18px 44px rgba(0, 0, 0, 0.42);
}

.studio-motion-hero-copy p:not(.eyebrow) {
  width: min(520px, 100%);
  margin: 0;
  color: rgba(255, 250, 240, 0.94);
  font-size: clamp(0.9rem, 1.45vw, 1.02rem);
  font-weight: 820;
  line-height: 1.45;
  text-shadow:
    0 1px 0 rgba(22, 10, 4, 0.88),
    1px 1px 0 rgba(22, 10, 4, 0.64),
    -1px 1px 0 rgba(22, 10, 4, 0.48),
    0 7px 22px rgba(0, 0, 0, 0.56);
}

.studio-motion-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: 10px;
  padding: 11px 14px 11px 20px;
  border: 1px solid rgba(255, 248, 223, 0.46);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.9), rgba(255, 242, 198, 0.78)),
    rgba(255, 248, 223, 0.82);
  box-shadow:
    0 18px 48px rgba(23, 13, 5, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
  color: #17120a;
  font-size: clamp(0.92rem, 1.7vw, 1.04rem);
  font-weight: 950;
  letter-spacing: 0;
  text-decoration: none;
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
  backdrop-filter: blur(18px) saturate(1.2);
}

.studio-motion-hero-cta svg {
  flex: 0 0 auto;
  transition: transform 140ms ease;
}

.studio-motion-hero-cta:hover {
  background:
    linear-gradient(180deg, #fffdf6, #ffd94a),
    var(--brand);
  box-shadow:
    0 22px 58px rgba(23, 13, 5, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
}

.studio-motion-hero-cta:hover svg {
  transform: translateX(3px);
}

.studio-brand-mark {
  --studio-brand-yellow: #ffc800;
  --studio-brand-yellow-deep: #d88a00;
  --studio-brand-ink: #14120e;
  --studio-brand-mint: #56cfae;
  --studio-brand-coral: #ff9876;
  --studio-brand-sky: #8bc8f6;
  --studio-brand-cream: #fff4c8;
  display: inline-grid;
  align-items: start;
  width: fit-content;
  max-width: 100%;
  color: var(--studio-brand-ink);
}

.studio-brand-logo-frame {
  display: block;
  width: clamp(176px, 22vw, 292px);
  max-width: 100%;
  aspect-ratio: 1;
}

.studio-brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.studio-brand-symbol {
  position: relative;
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  place-items: center;
  overflow: visible;
}

.studio-brand-symbol-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(32, 22, 8, 0.14));
}

.studio-brand-wordmark {
  display: grid;
  gap: 5px;
  min-width: 0;
  justify-items: start;
  line-height: 1;
}

.studio-brand-wordmark-kicker {
  position: relative;
  z-index: 1;
  width: max-content;
  color: var(--studio-brand-ink);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(2.35rem, 7vw, 4.7rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.78;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.42),
    0 10px 28px rgba(32, 22, 8, 0.16);
}

.studio-brand-wordmark-kicker::after {
  position: absolute;
  right: 5%;
  bottom: -10%;
  z-index: -1;
  width: 50%;
  height: 30%;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.38);
  content: "";
}

.studio-brand-wordmark-main {
  width: max-content;
  padding: 5px 12px 5px;
  border: 2px solid rgba(20, 18, 14, 0.94);
  border-radius: 999px;
  background: var(--studio-brand-yellow);
  box-shadow:
    0 8px 0 rgba(20, 18, 14, 0.95),
    0 16px 28px rgba(32, 22, 8, 0.14);
  color: #17120a;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(0.92rem, 2.4vw, 1.28rem);
  font-weight: 950;
  letter-spacing: 0.16em;
  line-height: 0.92;
  text-transform: uppercase;
}

.studio-brand-mark.is-compact {
  gap: 0;
}

.studio-brand-mark.is-compact .studio-brand-logo-frame {
  width: clamp(72px, 10vw, 104px);
}

.studio-standalone-shell .studio-global-brand-mark.studio-brand-mark.is-compact .studio-brand-logo-frame {
  width: 42px;
}

.studio-brand-mark.is-compact .studio-brand-symbol {
  width: 46px;
  height: 46px;
}

.studio-brand-mark.is-compact .studio-brand-wordmark-kicker {
  font-size: 1.02rem;
  line-height: 0.82;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.36);
}

.studio-brand-mark.is-compact .studio-brand-wordmark-main {
  padding: 3px 7px 3px;
  border-width: 1px;
  box-shadow:
    0 4px 0 rgba(20, 18, 14, 0.95),
    0 8px 14px rgba(32, 22, 8, 0.12);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.studio-hero-brand {
  margin-bottom: 2px;
}

.studio-loading-page {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(24px, 6vw, 56px);
  background:
    linear-gradient(90deg, rgba(255, 242, 196, 0.045) 1px, transparent 1px) center / 92px 100%,
    radial-gradient(ellipse at 50% 30%, rgba(255, 221, 114, 0.24), transparent 34%),
    radial-gradient(ellipse at 46% 106%, rgba(255, 200, 0, 0.26), transparent 38%),
    radial-gradient(circle at 12% 12%, rgba(255, 152, 118, 0.12), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(86, 207, 174, 0.12), transparent 27%),
    linear-gradient(180deg, #2a1a10 0%, #18110d 48%, #0f1412 100%);
  color: #fff8df;
}

.studio-loading-page::before,
.studio-loading-page::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.studio-loading-page::before {
  top: -14%;
  left: 50%;
  width: min(860px, 92vw);
  height: min(780px, 78vh);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 247, 218, 0.5), rgba(255, 210, 74, 0.2) 30%, transparent 69%);
  opacity: 0.68;
  filter: blur(3px);
  transform: translateX(-50%);
}

.studio-loading-page::after {
  inset: auto -8vw -18vh;
  height: 44vh;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 0, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(255, 248, 223, 0.08), transparent);
  opacity: 0.92;
  filter: blur(1px);
}

.studio-loading-backlights {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.studio-loading-backlights span {
  position: absolute;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}

.studio-loading-backlights .is-key,
.studio-loading-backlights .is-fill,
.studio-loading-backlights .is-practical {
  top: -22vh;
  width: clamp(280px, 34vw, 620px);
  height: 128vh;
  border-radius: 999px;
  filter: blur(20px);
  transform-origin: 50% 0%;
  clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);
}

.studio-loading-backlights .is-key {
  left: 4vw;
  background: linear-gradient(180deg, rgba(255, 246, 214, 0.64), rgba(255, 200, 0, 0.14) 46%, transparent 82%);
  animation: studioLoadingSpotlightSweep 7.8s ease-in-out infinite;
}

.studio-loading-backlights .is-fill {
  right: 0;
  background: linear-gradient(180deg, rgba(255, 230, 175, 0.48), rgba(86, 207, 174, 0.1) 48%, transparent 82%);
  animation: studioLoadingSpotlightSweepAlt 9.6s ease-in-out infinite;
  animation-delay: -2.8s;
}

.studio-loading-backlights .is-practical {
  left: 37%;
  width: clamp(220px, 24vw, 440px);
  background: linear-gradient(180deg, rgba(255, 152, 118, 0.28), rgba(255, 248, 223, 0.08) 42%, transparent 78%);
  filter: blur(26px);
  animation: studioLoadingSpotlightCenter 8.9s ease-in-out infinite;
  animation-delay: -1.2s;
}

.studio-loading-backlights .is-bloom-one,
.studio-loading-backlights .is-bloom-two {
  width: clamp(180px, 22vw, 380px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(24px);
  background:
    radial-gradient(circle, rgba(255, 248, 223, 0.46), rgba(255, 200, 0, 0.16) 42%, transparent 70%);
  animation: studioLoadingBloomDrift 6.4s ease-in-out infinite;
}

.studio-loading-backlights .is-bloom-one {
  top: 15vh;
  left: 13vw;
}

.studio-loading-backlights .is-bloom-two {
  right: 12vw;
  bottom: 16vh;
  width: clamp(150px, 18vw, 320px);
  background:
    radial-gradient(circle, rgba(255, 248, 223, 0.32), rgba(86, 207, 174, 0.12) 46%, transparent 72%);
  animation-delay: -3.1s;
}

.studio-loading-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(520px, 100%);
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.studio-loading-mark {
  position: relative;
  display: grid;
  width: min(380px, 84vw);
  min-height: 334px;
  place-items: center;
  overflow: hidden;
  padding: 34px 32px 38px;
  border: 1px solid rgba(255, 248, 223, 0.1);
  border-radius: 46px;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 248, 223, 0.2), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(255, 200, 0, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 250, 232, 0.1), rgba(255, 250, 232, 0.035));
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 248, 223, 0.11);
  backdrop-filter: blur(18px) saturate(1.08);
  isolation: isolate;
}

.studio-loading-mark::before {
  position: absolute;
  inset: 18px 24px;
  z-index: 0;
  border: 1px solid rgba(255, 248, 223, 0.12);
  border-radius: 36px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 223, 0.07), transparent),
    linear-gradient(180deg, transparent 0 30%, rgba(255, 248, 223, 0.045) 30% 31%, transparent 31% 100%);
  content: "";
  pointer-events: none;
}

.studio-loading-mark::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 248, 223, 0.2), transparent 32%),
    linear-gradient(115deg, transparent 0 18%, rgba(255, 248, 223, 0.1) 26%, transparent 36% 100%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
  content: "";
  pointer-events: none;
}

.studio-loading-mark.is-compact {
  width: clamp(132px, 25vw, 190px);
  min-height: clamp(132px, 25vw, 190px);
  padding: 18px;
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(23, 19, 12, 0.14);
}

.studio-loading-brand {
  position: relative;
  z-index: 3;
  justify-self: center;
}

.studio-loading-logo-stage {
  position: relative;
  z-index: 3;
  display: grid;
  width: clamp(214px, 33vw, 292px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  isolation: isolate;
}

.studio-loading-logo-stage::before {
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 248, 223, 0.7), rgba(255, 200, 0, 0.22) 54%, transparent 72%);
  content: "";
  filter: blur(2px);
}

.studio-loading-logo-stage::after {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(255, 248, 223, 0.18);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 10px rgba(255, 248, 223, 0.06),
    0 18px 44px rgba(0, 0, 0, 0.28);
  content: "";
  animation: studioLoadingLensBreathe 3.8s ease-in-out infinite;
}

.studio-loading-logo-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    conic-gradient(from 0deg, rgba(255, 200, 0, 0), rgba(255, 200, 0, 0.42), rgba(86, 207, 174, 0.18), rgba(255, 152, 118, 0.22), rgba(255, 200, 0, 0));
  opacity: 0.46;
  filter: blur(13px);
  animation: studioLoadingHaloSpin 12s linear infinite;
}

.studio-loading-logo-aperture {
  position: absolute;
  inset: 1%;
  z-index: 1;
  border-radius: inherit;
  background:
    conic-gradient(
      from 18deg,
      transparent 0deg 32deg,
      rgba(255, 200, 0, 0.5) 34deg 43deg,
      transparent 45deg 92deg,
      rgba(86, 207, 174, 0.28) 94deg 101deg,
      transparent 103deg 164deg,
      rgba(255, 152, 118, 0.3) 166deg 174deg,
      transparent 176deg 242deg,
      rgba(255, 248, 223, 0.36) 244deg 251deg,
      transparent 253deg 360deg
    );
  opacity: 0.82;
  animation: studioLoadingHaloSpin 16s linear infinite reverse;
  -webkit-mask: radial-gradient(circle, transparent 0 70%, #000 71% 78%, transparent 79%);
  mask: radial-gradient(circle, transparent 0 70%, #000 71% 78%, transparent 79%);
}

.studio-loading-logo-aperture::before,
.studio-loading-logo-aperture::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.studio-loading-logo-aperture::before {
  inset: 6%;
  border: 1px solid rgba(255, 200, 0, 0.22);
  box-shadow: inset 0 0 18px rgba(255, 200, 0, 0.06);
}

.studio-loading-logo-aperture::after {
  inset: 15%;
  border: 1px solid rgba(255, 248, 223, 0.1);
}

.studio-loading-logo-aperture span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 223, 0.92);
  box-shadow:
    0 0 0 5px rgba(255, 248, 223, 0.13),
    0 0 22px rgba(255, 200, 0, 0.38);
  transform-origin: center;
  animation: studioLoadingApertureTwinkle 1.75s ease-in-out infinite;
}

.studio-loading-logo-aperture span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg) translateX(46%);
}

.studio-loading-logo-aperture span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(60deg) translateX(46%);
  animation-delay: 0.22s;
}

.studio-loading-logo-aperture span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(120deg) translateX(46%);
  animation-delay: 0.44s;
}

.studio-loading-logo-aperture span:nth-child(4) {
  transform: translate(-50%, -50%) rotate(180deg) translateX(46%);
  animation-delay: 0.66s;
}

.studio-loading-logo-aperture span:nth-child(5) {
  transform: translate(-50%, -50%) rotate(240deg) translateX(46%);
  animation-delay: 0.88s;
}

.studio-loading-logo-aperture span:nth-child(6) {
  transform: translate(-50%, -50%) rotate(300deg) translateX(46%);
  animation-delay: 1.1s;
}

.studio-loading-logo-spark {
  position: absolute;
  z-index: 5;
  width: 9px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ffc800;
  filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.42));
  box-shadow:
    0 0 0 8px rgba(255, 200, 0, 0.12),
    0 0 28px rgba(255, 200, 0, 0.58);
  animation: studioLoadingSpark 1.85s ease-in-out infinite;
}

.studio-loading-logo-spark.is-one {
  top: 20%;
  right: 24%;
}

.studio-loading-logo-spark.is-two {
  bottom: 30%;
  left: 18%;
  width: 6px;
  background: #56cfae;
  box-shadow:
    0 0 0 7px rgba(86, 207, 174, 0.13),
    0 0 24px rgba(86, 207, 174, 0.48);
  animation-delay: 0.28s;
}

.studio-loading-logo-spark.is-three {
  right: 22%;
  bottom: 22%;
  width: 5px;
  background: #ff9876;
  box-shadow:
    0 0 0 7px rgba(255, 152, 118, 0.13),
    0 0 24px rgba(255, 152, 118, 0.46);
  animation-delay: 0.62s;
}

.studio-loading-mark .studio-brand-logo-frame {
  width: clamp(168px, 28vw, 232px);
  filter:
    drop-shadow(0 24px 34px rgba(0, 0, 0, 0.36))
    drop-shadow(0 2px 0 rgba(255, 229, 150, 0.12));
}

.studio-loading-mark.is-compact .studio-brand-logo-frame {
  width: clamp(82px, 15vw, 118px);
}

.studio-loading-mark.is-compact .studio-loading-logo-stage {
  width: clamp(108px, 20vw, 142px);
}

.studio-loading-mark.is-compact .studio-loading-logo-stage::after {
  inset: 2%;
}

.studio-loading-mark.is-compact .studio-loading-logo-aperture,
.studio-loading-mark.is-compact .studio-loading-logo-spark {
  display: none;
}

.studio-loading-scan {
  position: absolute;
  inset: 19px 25px;
  z-index: 4;
  border-radius: 36px;
  background: linear-gradient(
    112deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 240, 185, 0.24) 50%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0.78;
  pointer-events: none;
  transform: translateX(-118%);
  animation: studioLoadingScan 2.9s ease-in-out infinite;
}

.studio-loading-film-strip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(23, 19, 12, 0.08);
  border-radius: 999px;
  background: rgba(23, 19, 12, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

.studio-loading-film-strip span {
  display: block;
  width: 18px;
  height: 12px;
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%),
    rgba(23, 19, 12, 0.18);
  opacity: 0.44;
  animation: studioLoadingFilmCue 1.8s ease-in-out infinite;
}

.studio-loading-film-strip span:nth-child(2) {
  animation-delay: 0.16s;
}

.studio-loading-film-strip span:nth-child(3) {
  animation-delay: 0.32s;
}

.studio-loading-film-strip span:nth-child(4) {
  animation-delay: 0.48s;
}

.studio-loading-film-strip span:nth-child(5) {
  animation-delay: 0.64s;
}

.studio-loading-cue-dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.studio-loading-cue-dots span {
  position: absolute;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ffc800;
  box-shadow:
    0 0 0 8px rgba(255, 200, 0, 0.1),
    0 10px 20px rgba(116, 79, 0, 0.16);
  animation: studioLoadingCueFloat 3.2s ease-in-out infinite;
}

.studio-loading-cue-dots span:nth-child(1) {
  top: 32%;
  right: 18%;
}

.studio-loading-cue-dots span:nth-child(2) {
  bottom: 31%;
  left: 17%;
  width: 8px;
  background: #56cfae;
  box-shadow:
    0 0 0 8px rgba(86, 207, 174, 0.1),
    0 10px 20px rgba(39, 108, 89, 0.14);
  animation-delay: 0.42s;
}

.studio-loading-cue-dots span:nth-child(3) {
  right: 24%;
  bottom: 17%;
  width: 7px;
  background: #ff9876;
  box-shadow:
    0 0 0 7px rgba(255, 152, 118, 0.1),
    0 10px 20px rgba(137, 63, 42, 0.14);
  animation-delay: 0.84s;
}

.studio-loading-mark.is-compact {
  min-height: clamp(132px, 25vw, 190px);
}

.studio-loading-mark.is-compact .studio-loading-film-strip {
  display: none;
}

.studio-loading-mark.is-compact .studio-loading-scan {
  inset: 12px;
  border-radius: 18px;
}

.studio-loading-mark.is-compact .studio-loading-cue-dots span {
  width: 6px;
}

.studio-loading-mark.has-loaded-before .studio-loading-logo-halo {
  animation-duration: 18s;
  opacity: 0.42;
}

.studio-loading-mark.has-loaded-before .studio-loading-logo-aperture {
  animation-duration: 22s;
  opacity: 0.68;
}

.studio-loading-mark.has-loaded-before .studio-loading-scan {
  animation-duration: 3.8s;
  opacity: 0.48;
}

.studio-loading-room-card {
  position: relative;
  width: min(360px, 82vw);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(23, 19, 12, 0.1);
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 34px 92px rgba(23, 19, 12, 0.16);
  isolation: isolate;
}

.studio-loading-room-card.is-compact {
  width: clamp(132px, 25vw, 190px);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(23, 19, 12, 0.14);
}

.studio-loading-wall,
.studio-loading-floor,
.studio-loading-sunbeam,
.studio-loading-window,
.studio-loading-shelf,
.studio-loading-cushion,
.studio-loading-cat {
  position: absolute;
}

.studio-loading-wall {
  inset: 0 0 34%;
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 227, 115, 0.48), transparent 26%),
    linear-gradient(180deg, #fffaf0 0%, #fff5da 100%);
}

.studio-loading-floor {
  inset: 62% 0 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 235, 178, 0.2)),
    #f9f4e8;
}

.studio-loading-sunbeam {
  top: 18%;
  right: 1%;
  width: 42%;
  height: 72%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 226, 114, 0.5), rgba(255, 226, 114, 0));
  filter: blur(1px);
  transform: rotate(12deg);
  transform-origin: top center;
  animation: studioLoadingSunbeam 4.8s ease-in-out infinite;
}

.studio-loading-window {
  top: 13%;
  right: 13%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 27%;
  aspect-ratio: 1;
  gap: 5px;
  padding: 7px;
  border: 3px solid rgba(35, 39, 33, 0.75);
  border-radius: 18px;
  background: linear-gradient(180deg, #dbf8ff, #fff2b8);
  box-shadow: 0 12px 24px rgba(35, 39, 33, 0.1);
}

.studio-loading-window span {
  min-width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-loading-shelf {
  top: 31%;
  left: 12%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 27%;
  height: 10%;
  border-bottom: 5px solid rgba(35, 39, 33, 0.74);
}

.studio-loading-shelf span {
  display: block;
  width: 18%;
  border-radius: 999px 999px 3px 3px;
  background: #56cfae;
}

.studio-loading-shelf span:nth-child(2) {
  height: 72%;
  background: #ffc800;
}

.studio-loading-shelf span:nth-child(3) {
  height: 56%;
  background: #ff9876;
}

.studio-loading-shelf span:nth-child(1) {
  height: 42%;
}

.studio-loading-cushion {
  left: 50%;
  bottom: 17%;
  width: 48%;
  height: 12%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 42%, rgba(255, 255, 255, 0.42), transparent 30%),
    linear-gradient(180deg, #ffdc58, #ffbd25);
  box-shadow: 0 12px 20px rgba(110, 84, 25, 0.12);
  transform: translateX(-50%);
}

.studio-loading-cat {
  left: 50%;
  bottom: 22%;
  width: 30%;
  aspect-ratio: 0.82;
  border-radius: 46% 46% 38% 38%;
  background:
    radial-gradient(circle at 66% 34%, rgba(255, 228, 171, 0.58), transparent 18%),
    linear-gradient(135deg, #c77b45 0%, #7c4a30 100%);
  box-shadow: inset -12px -10px 18px rgba(36, 20, 12, 0.18);
  transform: translateX(-50%);
  animation: studioLoadingCatBreathe 2.8s ease-in-out infinite;
}

.studio-loading-cat-ear {
  position: absolute;
  top: -13%;
  width: 31%;
  aspect-ratio: 1;
  border-radius: 8px 70% 8px 70%;
  background: #8f5536;
}

.studio-loading-cat-ear.is-left {
  left: 12%;
  transform: rotate(-18deg);
}

.studio-loading-cat-ear.is-right {
  right: 12%;
  transform: rotate(108deg);
}

.studio-loading-cat-face {
  position: absolute;
  inset: 18% 14% auto;
  display: block;
  height: 34%;
  border-radius: 999px;
  background: rgba(255, 227, 188, 0.38);
}

.studio-loading-cat-eye,
.studio-loading-cat-nose {
  position: absolute;
  display: block;
}

.studio-loading-cat-eye {
  top: 30%;
  width: 18%;
  height: 24%;
  border-radius: 999px;
  background: #1a1b12;
  transform-origin: center;
  animation: studioLoadingBlink 3.1s ease-in-out infinite;
}

.studio-loading-cat-eye.is-left {
  left: 23%;
}

.studio-loading-cat-eye.is-right {
  right: 23%;
}

.studio-loading-cat-nose {
  left: 50%;
  bottom: 18%;
  width: 12%;
  aspect-ratio: 1.2;
  border-radius: 999px;
  background: #4b241b;
  transform: translateX(-50%);
}

.studio-loading-copy {
  display: grid;
  gap: 8px;
}

.studio-loading-copy h1 {
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 3.35rem);
  letter-spacing: 0;
  line-height: 0.96;
}

.studio-loading-copy p {
  margin: 0;
  color: rgba(23, 19, 12, 0.72);
  font-weight: 760;
}

.studio-loading-status {
  margin: 0;
  color: rgba(255, 248, 223, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.26);
}

@keyframes studioLoadingBlink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }

  91%,
  94% {
    transform: scaleY(0.08);
  }
}

@keyframes studioLoadingCatBreathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.018, 0.988);
  }
}

@keyframes studioLoadingSunbeam {
  0%,
  100% {
    opacity: 0.58;
  }

  50% {
    opacity: 0.86;
  }
}

@keyframes studioLoadingLightDrift {
  0%,
  100% {
    opacity: 0.78;
    transform: translateY(0) rotate(-1deg);
  }

  48% {
    opacity: 1;
    transform: translateY(4px) rotate(1deg);
  }
}

@keyframes studioLoadingSpotlightSweep {
  0%,
  100% {
    opacity: 0.16;
    transform: translateX(-8vw) rotate(-15deg) scaleX(0.82);
  }

  28% {
    opacity: 0.58;
    transform: translateX(7vw) rotate(-5deg) scaleX(1);
  }

  58% {
    opacity: 0.34;
    transform: translateX(18vw) rotate(7deg) scaleX(0.92);
  }
}

@keyframes studioLoadingSpotlightSweepAlt {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(8vw) rotate(15deg) scaleX(0.84);
  }

  34% {
    opacity: 0.48;
    transform: translateX(-5vw) rotate(4deg) scaleX(1);
  }

  64% {
    opacity: 0.28;
    transform: translateX(-18vw) rotate(-8deg) scaleX(0.9);
  }
}

@keyframes studioLoadingSpotlightCenter {
  0%,
  100% {
    opacity: 0.1;
    transform: translateY(-3vh) rotate(-2deg) scaleX(0.86);
  }

  45% {
    opacity: 0.36;
    transform: translateY(2vh) rotate(3deg) scaleX(1.04);
  }
}

@keyframes studioLoadingBloomDrift {
  0%,
  100% {
    opacity: 0.18;
    transform: translate3d(-10px, 8px, 0) scale(0.92);
  }

  45% {
    opacity: 0.62;
    transform: translate3d(18px, -14px, 0) scale(1.08);
  }

  72% {
    opacity: 0.34;
    transform: translate3d(6px, -4px, 0) scale(0.98);
  }
}

@keyframes studioLoadingScan {
  0%,
  34% {
    transform: translateX(-118%);
  }

  62%,
  100% {
    transform: translateX(118%);
  }
}

@keyframes studioLoadingFilmCue {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(0);
  }

  42% {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

@keyframes studioLoadingCueFloat {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(0) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: translateY(-7px) scale(1.08);
  }
}

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

@keyframes studioLoadingLensBreathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}

@keyframes studioLoadingApertureTwinkle {
  0%,
  100% {
    opacity: 0.52;
    filter: brightness(1);
  }

  34% {
    opacity: 1;
    filter: brightness(1.28);
  }

  62% {
    opacity: 0.76;
    filter: brightness(1.06);
  }
}

@keyframes studioLoadingSpark {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(0) scale(0.72);
  }

  36% {
    opacity: 1;
    transform: translateY(-7px) scale(1.2);
  }

  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.04);
  }

  76% {
    opacity: 0.48;
    transform: translateY(-1px) scale(0.84);
  }
}

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

@keyframes studioLoadingPulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.92);
  }

  48% {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes studioLoadingProgress {
  0% {
    left: -42%;
  }

  52% {
    left: 28%;
  }

  100% {
    left: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-loading-emblem-ring,
  .studio-loading-orbit,
  .studio-loading-progress span,
  .studio-loading-logo-halo,
  .studio-loading-logo-aperture,
  .studio-loading-logo-stage::after,
  .studio-loading-logo-spark,
  .studio-loading-logo-aperture span,
  .studio-loading-scan,
  .studio-loading-backlights span,
  .studio-loading-film-strip span,
  .studio-loading-cue-dots span,
  .studio-loading-cat,
  .studio-loading-cat-eye,
  .studio-loading-sunbeam {
    animation: none;
  }
}

.studio-home-page {
  width: 100%;
  max-width: none;
  padding-top: 0;
}

.studio-home-page > .studio-section,
.studio-home-page > .studio-safety-note {
  width: min(1120px, calc(100vw - 32px));
  margin-inline: auto;
}

.studio-hero,
.studio-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 1.14fr);
  gap: 28px;
  align-items: center;
}

.studio-hero {
  min-height: min(720px, calc(100svh - 80px));
}

.studio-hero-stage-first {
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: stretch;
  min-height: auto;
  width: 100%;
}

.studio-hero-stage-first .studio-hero-room {
  width: 100%;
}

.studio-hero-stage-first .studio-hero-copy {
  width: min(1120px, calc(100vw - 32px));
  margin-inline: auto;
  overflow: hidden;
}

.studio-hero-stage-first .studio-hero-copy h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: break-word;
}

.studio-hero-stage-first .studio-hero-copy h1 span {
  display: inline;
}

.studio-hero-stage-first .studio-hero-copy p {
  max-width: 48rem;
  overflow-wrap: anywhere;
  white-space: normal;
}

.studio-home-stage .studio-room-canvas-wrap {
  height: min(72svh, 760px);
  min-height: 560px;
  border-top: 0;
  border-inline: 0;
  border-radius: 0 0 clamp(24px, 4vw, 46px) clamp(24px, 4vw, 46px);
  background: #ffffff;
  box-shadow: none;
}

.studio-home-living-hero {
  background: #ffffff;
}

.studio-home-living-stage {
  width: 100%;
  min-width: 0;
  background: #ffffff;
}

.studio-home-living-scene {
  gap: 10px;
  background: #ffffff;
}

.studio-deferred-scene-shell {
  width: 100%;
  min-width: 0;
}

.studio-deferred-scene-placeholder,
.studio-deferred-scene-loading {
  display: grid;
  width: 100%;
  height: min(76svh, 780px);
  min-height: 590px;
  place-items: center;
  overflow: hidden;
  border-radius: 0 0 clamp(24px, 4vw, 46px) clamp(24px, 4vw, 46px);
  background: #ffffff;
}

.studio-deferred-scene-placeholder .studio-loading-mark,
.studio-deferred-scene-loading .studio-loading-mark {
  transform: scale(0.86);
}

.studio-home-living-scene .studio-living-lobby-canvas-wrap {
  height: min(76svh, 780px);
  min-height: 590px;
  border-top: 0;
  border-inline: 0;
  border-radius: 0 0 clamp(24px, 4vw, 46px) clamp(24px, 4vw, 46px);
  background: #ffffff;
  box-shadow: none;
}

.studio-home-living-scene .studio-living-lobby-caption {
  width: min(1120px, calc(100vw - 32px));
  margin-inline: auto;
}

.studio-monthly-care-scene .studio-living-lobby-canvas-wrap {
  min-height: calc(100svh - 102px);
  border-inline: 0;
  border-radius: 0;
  background: #fffdf7;
  box-shadow: none;
}

.studio-monthly-care-page {
  width: 100%;
  max-width: none;
  gap: 0;
  padding: 0 0 72px;
}

.studio-monthly-care-page .studio-topbar {
  width: min(1120px, calc(100vw - 32px));
  margin: 16px auto 12px;
}

.studio-monthly-care-scene {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.studio-monthly-care-scene .studio-living-lobby-shell {
  gap: 0;
}

.studio-monthly-care-scene .studio-living-lobby-caption {
  display: none;
}

.studio-standalone-shell:has(.studio-lounge-app-shell) {
  overflow-x: hidden;
  background: #fffaf0;
}

.studio-standalone-shell:has(.studio-lounge-app-shell) .studio-global-header {
  width: min(1080px, calc(100vw - 42px));
  margin-bottom: -72px;
}

.studio-standalone-shell:has(.studio-lounge-app-shell) .studio-global-brand-mark .studio-brand-logo-frame {
  width: 42px;
}

.studio-standalone-shell:has(.studio-lounge-app-shell) .studio-standalone-main {
  padding-top: 0;
}

.studio-lounge-app-shell {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #fffaf0;
}

.studio-lounge-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.studio-lounge-main-scene {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.studio-lounge-main-scene .studio-living-lobby-shell {
  gap: 0;
}

.studio-lounge-main-scene .studio-living-lobby-caption {
  display: none;
}

.studio-lounge-main-scene .studio-living-lobby-canvas-wrap {
  height: 100svh;
  min-height: 680px;
  border: 0;
  border-radius: 0;
  background: #fffdf7;
  box-shadow: none;
}

.studio-lounge-stage-overlay {
  position: absolute;
  top: clamp(82px, 11svh, 112px);
  left: clamp(16px, 4vw, 42px);
  z-index: 4;
  display: flex;
  max-width: min(520px, calc(100vw - 32px));
  gap: 8px;
  align-items: center;
  color: #17120a;
  pointer-events: none;
}

.studio-lounge-live-chip,
.studio-lounge-room-note {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1;
  backdrop-filter: blur(18px);
}

.studio-lounge-live-chip {
  gap: 7px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(35, 23, 12, 0.12);
}

.studio-lounge-live-chip span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #56cfae;
  box-shadow: 0 0 0 4px rgba(86, 207, 174, 0.2);
}

.studio-lounge-room-note {
  padding: 8px 12px;
  background: rgba(255, 200, 0, 0.26);
  color: rgba(23, 18, 10, 0.78);
}

.studio-lounge-care-strip {
  position: absolute;
  top: clamp(88px, 13svh, 126px);
  left: clamp(16px, 4vw, 42px);
  z-index: 5;
  display: grid;
  width: min(230px, calc(100vw - 32px));
  gap: 8px;
}

.studio-lounge-care-pill {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 220, 92, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 16px 42px rgba(35, 23, 12, 0.1);
  backdrop-filter: blur(18px);
  transition: transform 150ms ease, background 150ms ease;
}

.studio-lounge-care-pill:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.82);
}

.studio-lounge-care-icon {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.22);
  color: #17120a;
  font-size: 0.72rem;
  font-weight: 980;
}

.studio-lounge-care-pill.is-blanket .studio-lounge-care-icon {
  background: rgba(86, 207, 174, 0.22);
}

.studio-lounge-care-pill.is-clinic .studio-lounge-care-icon {
  background: rgba(185, 223, 255, 0.44);
}

.studio-lounge-care-pill.is-warmth .studio-lounge-care-icon {
  background: rgba(255, 181, 167, 0.34);
}

.studio-lounge-care-pill strong,
.studio-lounge-care-pill small {
  display: block;
}

.studio-lounge-care-pill strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 940;
}

.studio-lounge-care-pill small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 820;
}

.studio-lounge-bottom-panel {
  position: absolute;
  right: 50%;
  bottom: clamp(12px, 3vw, 24px);
  z-index: 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: min(1180px, calc(100vw - 24px));
  padding: 10px;
  border: 1px solid rgba(255, 220, 92, 0.18);
  border-radius: 28px;
  background: rgba(18, 13, 8, 0.72);
  color: #fff8df;
  box-shadow:
    0 26px 80px rgba(15, 7, 2, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px);
  transform: translateX(50%);
}

.studio-lounge-dock-copy {
  display: grid;
  gap: 2px;
  min-width: 152px;
  padding: 0 6px 0 8px;
}

.studio-lounge-dock-copy strong {
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 960;
}

.studio-lounge-dock-copy span {
  color: rgba(255, 248, 223, 0.66);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.2;
}

.studio-lounge-dock {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px;
  scrollbar-width: none;
}

.studio-lounge-dock::-webkit-scrollbar {
  display: none;
}

.studio-lounge-dock-card {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 48px minmax(96px, 1fr);
  gap: 9px;
  align-items: center;
  width: 180px;
  min-height: 60px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff8df;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.studio-lounge-dock-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.15);
}

.studio-lounge-dock-card.is-selected {
  border-color: rgba(255, 200, 0, 0.68);
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.28), rgba(255, 200, 0, 0.13)),
    rgba(255, 255, 255, 0.11);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 204, 0.14);
}

.studio-lounge-dock-avatar {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border-radius: 16px;
  background: #ffc800;
}

.studio-lounge-dock-card.is-mint .studio-lounge-dock-avatar {
  background: #bff2df;
}

.studio-lounge-dock-card.is-sky .studio-lounge-dock-avatar {
  background: #b9dfff;
}

.studio-lounge-dock-card.is-coral .studio-lounge-dock-avatar {
  background: #ffb5a7;
}

.studio-lounge-dock-card.is-lavender .studio-lounge-dock-avatar {
  background: #d9c9ff;
}

.studio-lounge-dock-card.is-charcoal .studio-lounge-dock-avatar {
  background: #17201d;
}

.studio-lounge-dock-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-lounge-dock-card strong,
.studio-lounge-dock-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-lounge-dock-card strong {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 950;
}

.studio-lounge-dock-card small {
  margin-top: 2px;
  color: rgba(255, 248, 223, 0.6);
  font-size: 0.66rem;
  font-weight: 820;
}

.studio-lounge-create-button {
  min-height: 48px;
  white-space: nowrap;
}

.studio-lounge-empty-inline {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px dashed rgba(255, 200, 0, 0.4);
  border-radius: 20px;
  color: #fff8df;
}

.studio-lounge-empty-inline span {
  color: rgba(255, 248, 223, 0.64);
  font-size: 0.76rem;
}

.studio-lounge-character-sheet {
  position: absolute;
  top: clamp(130px, 18svh, 170px);
  right: clamp(16px, 4vw, 42px);
  z-index: 6;
  display: grid;
  width: min(330px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid rgba(255, 220, 92, 0.18);
  border-radius: 32px;
  background: rgba(255, 250, 238, 0.72);
  box-shadow: 0 28px 86px rgba(35, 23, 12, 0.16);
  backdrop-filter: blur(22px);
}

.studio-lounge-sheet-dismiss,
.studio-lounge-sheet-reopen {
  border: 1px solid rgba(35, 23, 12, 0.1);
  background: rgba(255, 255, 255, 0.68);
  color: #17120a;
  box-shadow: 0 14px 34px rgba(35, 23, 12, 0.12);
  backdrop-filter: blur(18px);
  cursor: pointer;
  transition:
    transform 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.studio-lounge-sheet-dismiss:hover,
.studio-lounge-sheet-reopen:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 42px rgba(35, 23, 12, 0.16);
}

.studio-lounge-sheet-dismiss:focus-visible,
.studio-lounge-sheet-reopen:focus-visible {
  outline: 3px solid rgba(255, 200, 0, 0.58);
  outline-offset: 3px;
}

.studio-lounge-sheet-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
}

.studio-lounge-sheet-reopen {
  position: absolute;
  top: clamp(130px, 18svh, 170px);
  right: clamp(16px, 4vw, 42px);
  z-index: 6;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 940;
}

.studio-lounge-sheet-art {
  display: grid;
  min-height: 184px;
  place-items: end center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.8), transparent 44%),
    #ffc800;
}

.studio-lounge-sheet-art.is-mint {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.82), transparent 44%),
    #bff2df;
}

.studio-lounge-sheet-art.is-sky {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.82), transparent 44%),
    #b9dfff;
}

.studio-lounge-sheet-art.is-coral {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.82), transparent 44%),
    #ffb5a7;
}

.studio-lounge-sheet-art.is-lavender {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.82), transparent 44%),
    #d9c9ff;
}

.studio-lounge-sheet-art.is-charcoal {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.16), transparent 46%),
    #17201d;
}

.studio-lounge-sheet-art img {
  width: min(78%, 210px);
  height: auto;
  object-fit: contain;
  object-position: bottom center;
}

.studio-lounge-sheet-copy {
  display: grid;
  gap: 9px;
  padding: 16px;
}

.studio-lounge-sheet-number {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.24);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 940;
}

.studio-lounge-sheet-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 0.96;
}

.studio-lounge-sheet-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.38;
}

.studio-lounge-current-action {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(255, 200, 0, 0.22);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.42);
}

.studio-lounge-current-action span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 940;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-lounge-current-action strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 880;
  line-height: 1.25;
}

.studio-lounge-sheet-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.studio-lounge-sheet-badges span {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 880;
}

.studio-lounge-membership-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.studio-lounge-membership-grid a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, background 140ms ease;
}

.studio-lounge-membership-grid a:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.64);
}

.studio-lounge-membership-grid strong,
.studio-lounge-membership-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-lounge-membership-grid strong {
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 940;
}

.studio-lounge-membership-grid small {
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 800;
}

.studio-lounge-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-monthly-care-hero .studio-lounge-copy {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.92);
}

.studio-monthly-care-side {
  background:
    radial-gradient(circle at 18% 18%, rgba(86, 207, 174, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.9);
}

.studio-monthly-stage-panel {
  display: flex;
  gap: 14px;
  align-items: stretch;
  justify-content: space-between;
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 44px rgba(116, 82, 0, 0.09);
}

.studio-monthly-stage-panel > div:first-child {
  display: grid;
  gap: 4px;
  min-width: min(340px, 100%);
  align-content: center;
}

.studio-monthly-stage-panel strong {
  color: var(--foreground);
}

.studio-monthly-stage-panel span {
  color: var(--muted-foreground);
  font-weight: 740;
}

.studio-monthly-stage-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
}

.studio-monthly-stage-switcher a {
  display: grid;
  gap: 3px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.studio-monthly-stage-switcher a:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 200, 0, 0.54);
}

.studio-monthly-stage-switcher a.is-active {
  border-color: rgba(255, 200, 0, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.92), rgba(255, 229, 128, 0.86));
  box-shadow: 0 14px 34px rgba(255, 200, 0, 0.22);
}

.studio-monthly-stage-switcher a > span {
  color: rgba(23, 18, 10, 0.7);
  font-size: 0.75rem;
  font-weight: 920;
  text-transform: uppercase;
}

.studio-monthly-stage-switcher a > strong {
  color: #17120a;
  font-size: 1rem;
}

.studio-monthly-support-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-monthly-care-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
}

.studio-monthly-care-card strong {
  color: var(--foreground);
  font-size: 1.02rem;
}

.studio-monthly-care-card p {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 720;
}

.studio-fame-page {
  gap: 18px;
}

.studio-fame-hero,
.studio-fame-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.55fr);
  gap: 16px;
  align-items: stretch;
}

.studio-fame-hero-copy,
.studio-fame-stats,
.studio-fame-feature-copy,
.studio-fame-entry-card,
.studio-fame-workflow-card {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.studio-fame-hero-copy,
.studio-fame-feature-copy {
  display: grid;
  gap: 14px;
  align-content: center;
  padding: 24px;
}

.studio-fame-hero-copy h1 {
  max-width: 880px;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  line-height: 0.94;
}

.studio-fame-hero-copy p,
.studio-fame-feature-copy p,
.studio-fame-entry-copy p,
.studio-fame-workflow-card p {
  color: var(--muted-foreground);
  font-weight: 720;
}

.studio-fame-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
  padding: 18px;
}

.studio-fame-stats div {
  display: grid;
  gap: 4px;
  min-height: 96px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 200, 0, 0.16);
}

.studio-fame-stats strong {
  color: var(--foreground);
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 0.9;
}

.studio-fame-stats span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-fame-feature {
  grid-template-columns: minmax(320px, 0.56fr) minmax(0, 1fr);
}

.studio-fame-video-card,
.studio-fame-card-media {
  min-width: 0;
}

.studio-fame-video-card.is-featured {
  padding: 12px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 10%, rgba(255, 200, 0, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 26px 72px rgba(116, 82, 0, 0.16);
}

.studio-fame-video-embed {
  overflow: hidden;
  min-height: 560px;
  border-radius: 22px;
  background: #17120a;
}

.studio-fame-video-placeholder {
  display: grid;
  gap: 10px;
  min-height: 520px;
  place-items: center;
  align-content: center;
  padding: 22px;
  border: 1px dashed rgba(255, 200, 0, 0.54);
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(255, 200, 0, 0.22), transparent 48%),
    linear-gradient(145deg, rgba(23, 18, 10, 0.92), rgba(42, 35, 22, 0.92));
  color: #fff8df;
  text-align: center;
}

.studio-fame-video-placeholder span {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: #ffc800;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-fame-video-placeholder strong {
  color: #fff8df;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
}

.studio-fame-feature-copy h2,
.studio-fame-entry-copy h3 {
  margin: 0;
  color: var(--foreground);
}

.studio-fame-feature-copy h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 0.96;
}

.studio-fame-entry-topline,
.studio-fame-guest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.studio-fame-entry-topline span,
.studio-fame-guest-row a,
.studio-fame-guest-row span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 880;
  text-decoration: none;
}

.studio-fame-guest-row a:hover {
  background: var(--brand);
  color: #17120a;
}

.studio-fame-production-note {
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground) !important;
}

.studio-fame-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-fame-workflow-card {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.studio-fame-workflow-card > span {
  width: fit-content;
  padding: 7px 9px;
  border-radius: 999px;
  background: var(--brand);
  color: #17120a;
  font-size: 0.74rem;
  font-weight: 920;
}

.studio-fame-workflow-card strong {
  color: var(--foreground);
}

.studio-fame-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.studio-fame-entry-card {
  display: grid;
  overflow: hidden;
}

.studio-fame-card-media {
  padding: 10px;
}

.studio-fame-entry-card .studio-fame-video-embed,
.studio-fame-entry-card .studio-fame-video-placeholder {
  min-height: 380px;
  border-radius: 18px;
}

.studio-fame-entry-copy {
  display: grid;
  gap: 10px;
  padding: 4px 18px 18px;
}

.studio-fame-pinboard-page {
  gap: 0;
  padding-inline: clamp(12px, 2.2vw, 26px);
}

.studio-cameos-page {
  --studio-spotlight-bg:
    radial-gradient(920px 430px at 52% -120px, rgba(255, 200, 0, 0.25), transparent 62%),
    radial-gradient(720px 430px at 4% 14%, rgba(255, 127, 94, 0.13), transparent 58%),
    radial-gradient(820px 500px at 97% 18%, rgba(86, 207, 174, 0.12), transparent 60%),
    linear-gradient(180deg, #fff8df 0%, #fff2c7 45%, #fffdf7 100%);
  --studio-spotlight-ink: #17120a;
  --studio-spotlight-muted: rgba(23, 18, 10, 0.68);
  --studio-spotlight-panel: rgba(255, 253, 247, 0.62);
  --studio-spotlight-panel-strong: rgba(255, 253, 247, 0.78);
  --studio-spotlight-border: rgba(90, 57, 16, 0.14);
  --studio-spotlight-fade: rgba(255, 248, 223, 0.96);
  --studio-spotlight-button-bg:
    linear-gradient(180deg, rgba(255, 253, 247, 0.88), rgba(255, 248, 223, 0.58)),
    rgba(255, 253, 247, 0.72);
  --studio-spotlight-button-color: #17120a;
  --studio-spotlight-grid: rgba(90, 57, 16, 0.07);
  --studio-spotlight-glow: rgba(255, 200, 0, 0.2);
  --studio-spotlight-accent: #7a5600;
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin-inline: 0;
  padding-inline: 0;
  padding-top: clamp(96px, 10vw, 128px);
  padding-bottom: clamp(34px, 6vw, 72px);
  background: var(--studio-spotlight-bg);
}

.studio-cameos-page::before {
  content: "";
  position: absolute;
  inset: 72px 0 auto;
  height: clamp(220px, 32vw, 420px);
  background:
    linear-gradient(90deg, transparent, var(--studio-spotlight-glow), transparent),
    repeating-linear-gradient(90deg, var(--studio-spotlight-grid) 0 1px, transparent 1px 88px);
  opacity: 0.72;
  pointer-events: none;
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

.studio-appearances-rail-head {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  padding: clamp(6px, 1vw, 12px) clamp(16px, 3vw, 42px);
  background: transparent;
}

.studio-appearances-rail-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 14px 24px;
  box-sizing: border-box;
  width: min(1180px, 100%);
  margin-inline: auto;
}

.studio-appearances-rail-head .eyebrow {
  margin-bottom: 8px;
  color: var(--studio-spotlight-muted);
}

.studio-appearances-rail-head h1 {
  max-width: 640px;
  margin: 0;
  color: var(--studio-spotlight-ink);
  font-size: clamp(2.18rem, 4.1vw, 4.2rem);
  letter-spacing: 0;
  line-height: 0.96;
  text-wrap: balance;
}

.studio-spotlights-subtitle {
  max-width: 520px;
  margin: 10px 0 0;
  color: var(--studio-spotlight-muted);
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  font-weight: 780;
  line-height: 1.45;
}

.studio-appearances-rail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.studio-spotlights-stat-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-spotlights-stat-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--studio-spotlight-border);
  border-radius: 999px;
  background: var(--studio-spotlight-panel);
  color: var(--studio-spotlight-muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  backdrop-filter: blur(14px);
}

.studio-spotlights-stat-row strong {
  color: var(--studio-spotlight-accent);
  font-size: 0.86rem;
  font-weight: 980;
}

.studio-fame-screen-title {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.studio-fame-masonry {
  width: min(100%, 1180px);
  margin-inline: auto;
  column-count: 4;
  column-gap: 14px;
}

.studio-cameos-page .studio-spotlights-reel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(238px, 25vw, 340px);
  align-items: start;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: 12px 2px 20px;
  overflow-x: auto;
  overflow-y: visible;
  column-count: initial;
  column-gap: 0;
  gap: clamp(12px, 1.5vw, 18px);
  scroll-snap-type: x proximity;
  scroll-padding-inline: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 200, 0, 0.5) rgba(255, 248, 223, 0.08);
}

.studio-cameos-page .studio-spotlights-reel::after {
  content: "";
  width: 2px;
}

.studio-spotlights-rail-shell {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1240px, calc(100vw - 20px));
  margin-inline: auto;
  padding-inline: clamp(4px, 1vw, 12px);
  overflow: visible;
}

.studio-spotlights-rail-shell::before,
.studio-spotlights-rail-shell::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 16px;
  z-index: 3;
  width: min(42px, 6vw);
  pointer-events: none;
  opacity: 0;
}

.studio-spotlights-rail-shell::before {
  left: 0;
  background: linear-gradient(90deg, rgba(23, 18, 10, 0.08) 0%, transparent 100%);
}

.studio-spotlights-rail-shell::after {
  right: 0;
  background: linear-gradient(270deg, rgba(23, 18, 10, 0.08) 0%, transparent 100%);
}

.studio-spotlights-rail-controls {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.studio-spotlights-rail-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  border: 1px solid var(--studio-spotlight-border);
  border-radius: 999px;
  background: var(--studio-spotlight-button-bg);
  color: var(--studio-spotlight-button-color);
  box-shadow:
    0 14px 34px rgba(45, 28, 4, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  place-items: center;
  pointer-events: auto;
  backdrop-filter: blur(16px);
  transition: transform 140ms ease, opacity 140ms ease, background 140ms ease;
}

.studio-spotlights-rail-button span {
  display: block;
  margin-top: -2px;
  font-size: 2rem;
  font-weight: 760;
  line-height: 1;
}

.studio-spotlights-rail-button:hover:not(:disabled),
.studio-spotlights-rail-button:focus-visible:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255, 218, 78, 0.9), rgba(255, 200, 0, 0.9)),
    var(--brand);
  color: #17120a;
  transform: translateY(-1px) scale(1.03);
}

.studio-spotlights-rail-button:disabled {
  opacity: 0.22;
  cursor: default;
}

.studio-fame-pin {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  break-inside: avoid;
  scroll-snap-align: start;
  border: 0;
  border-radius: 26px;
  background: #15110b;
  box-shadow: 0 22px 54px rgba(32, 22, 8, 0.14);
  transform: translateZ(0);
  transition: box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
}

.studio-fame-pin.is-featured {
  outline: 1px solid rgba(255, 200, 0, 0.34);
  box-shadow: 0 30px 82px rgba(84, 57, 0, 0.28);
}

.studio-cameos-page .studio-fame-pin.is-featured {
  transform-origin: center bottom;
}

@media (min-width: 1000px) {
  .studio-cameos-page .studio-fame-pin.is-featured {
    grid-column: span 1;
    transform: translateY(-8px) translateZ(0);
  }

  .studio-cameos-page .studio-fame-pin.is-featured:hover,
  .studio-cameos-page .studio-fame-pin.is-featured:focus-within {
    transform: translateY(-13px) translateZ(0);
  }
}

.studio-fame-pin:hover,
.studio-fame-pin:focus-within {
  filter: saturate(1.05);
  transform: translateY(-3px) translateZ(0);
}

.studio-fame-pin-media {
  position: relative;
  overflow: hidden;
  background: #15110b;
}

.studio-fame-pin-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, transparent 30%, rgba(0, 0, 0, 0.56) 100%),
    radial-gradient(circle at 18% 12%, rgba(255, 248, 223, 0.12), transparent 28%);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.studio-fame-pin:hover .studio-fame-pin-media::after,
.studio-fame-pin:focus-within .studio-fame-pin-media::after {
  opacity: 0.72;
}

.studio-fame-pin .studio-fame-video-embed,
.studio-fame-pin .studio-fame-video-placeholder {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.studio-fame-pin .studio-fame-video-embed {
  aspect-ratio: 9 / 16;
}

.studio-fame-local-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #15110b;
  object-fit: cover;
}

.studio-fame-watermark {
  position: absolute;
  right: 0;
  bottom: 1px;
  z-index: 4;
  width: clamp(43px, 10.2%, 56px);
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.34));
  object-fit: contain;
  pointer-events: none;
}

.studio-fame-pin-topline {
  position: absolute;
  top: 10px;
  right: 10px;
  left: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.studio-fame-pin-topline span {
  overflow: hidden;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(255, 248, 223, 0.18);
  border-radius: 999px;
  background: rgba(18, 14, 9, 0.54);
  color: rgba(255, 248, 223, 0.88);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(14px);
}

.studio-fame-pin-placeholder {
  position: relative;
  min-height: auto;
  padding: 0;
  aspect-ratio: 9 / 16;
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 200, 0, 0.3), transparent 28%),
    radial-gradient(circle at 64% 62%, rgba(86, 207, 174, 0.2), transparent 30%),
    linear-gradient(160deg, #18130c 0%, #312616 54%, #17120a 100%);
}

.studio-fame-pin.is-pin-2 .studio-fame-pin-placeholder {
  background:
    radial-gradient(circle at 64% 20%, rgba(146, 210, 255, 0.28), transparent 28%),
    linear-gradient(160deg, #151c20 0%, #293641 100%);
}

.studio-fame-pin.is-pin-3 .studio-fame-pin-placeholder {
  background:
    radial-gradient(circle at 48% 32%, rgba(255, 126, 104, 0.3), transparent 30%),
    linear-gradient(160deg, #221419 0%, #3d2021 100%);
}

.studio-fame-pin.is-pin-4 .studio-fame-pin-placeholder {
  background:
    radial-gradient(circle at 54% 24%, rgba(202, 176, 255, 0.3), transparent 30%),
    linear-gradient(160deg, #19162a 0%, #2c2448 100%);
}

.studio-fame-pin-placeholder::before,
.studio-fame-pin-placeholder::after {
  content: "";
  position: absolute;
  inset: auto;
  border-radius: 999px;
}

.studio-fame-pin-placeholder::before {
  right: 22%;
  bottom: 24%;
  width: 42%;
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.12);
  filter: blur(2px);
}

.studio-fame-pin-placeholder::after {
  right: 18%;
  bottom: 17%;
  width: 28%;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
  transform: rotate(-4deg);
}

.studio-fame-pin-placeholder > span {
  position: absolute;
  inset: 0;
  padding: 0;
  border-radius: 0;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.14) 48%, transparent 100%);
  color: transparent;
  opacity: 0.62;
  animation: studioFameSlotSweep 5.6s ease-in-out infinite;
}

@keyframes studioFameSlotSweep {
  0%,
  48% {
    transform: translateX(-110%);
  }
  76%,
  100% {
    transform: translateX(110%);
  }
}

.studio-fame-pin .lazy-embed-play {
  width: 58px;
  min-width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  gap: 0;
  background: rgba(255, 200, 0, 0.94);
}

.studio-fame-pin .lazy-embed-overlay {
  inset: 0;
  justify-content: center;
  padding: 0;
}

.studio-fame-pin .lazy-embed-play > span:not(.lazy-embed-play-icon) {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.studio-fame-pin .lazy-embed-link {
  display: none;
}

.studio-fame-pin-overlay {
  position: absolute;
  inset: auto 10px 10px;
  z-index: 5;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(28, 20, 12, 0.74), rgba(14, 12, 9, 0.84));
  color: #fff8df;
  opacity: 0.96;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(14px);
}

.studio-fame-pin:hover .studio-fame-pin-overlay,
.studio-fame-pin:focus-within .studio-fame-pin-overlay {
  opacity: 1;
  transform: translateY(-2px);
}

.studio-fame-pin-overlay h2,
.studio-fame-pin-title {
  margin: 0;
  color: #fff8df;
  font-size: clamp(0.95rem, 1.55vw, 1.14rem);
  font-weight: 950;
  line-height: 1.08;
}

.studio-fame-pin-watch {
  width: max-content;
  padding-top: 2px;
  color: rgba(255, 248, 223, 0.7);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
}

.studio-fame-pin-overlay .studio-fame-entry-topline span,
.studio-fame-pin-overlay .studio-fame-guest-row a,
.studio-fame-pin-overlay .studio-fame-guest-row span {
  background: rgba(255, 255, 255, 0.14);
  color: #fff8df;
}

.studio-fame-pin-overlay .studio-fame-guest-row a:hover {
  background: var(--brand);
  color: #17120a;
}

.studio-cameo-media-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.studio-cameos-page .studio-fame-masonry {
  width: min(100%, 1220px);
}

.studio-cameo-pin {
  border-radius: 22px;
}

.studio-cameo-pin .studio-fame-pin-overlay {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.studio-appearance-card-kicker {
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.94);
  color: #17120a;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0;
}

.studio-spotlights-invite {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  margin: clamp(8px, 1.6vw, 18px) auto 18px;
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--studio-spotlight-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.18), transparent 34%),
    radial-gradient(circle at 94% 24%, rgba(86, 207, 174, 0.14), transparent 34%),
    var(--studio-spotlight-panel-strong);
  color: var(--studio-spotlight-ink);
  box-shadow:
    0 24px 70px rgba(75, 48, 7, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  backdrop-filter: blur(18px);
}

.studio-spotlights-invite div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-spotlights-invite span {
  color: var(--studio-spotlight-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-spotlights-invite strong {
  color: var(--studio-spotlight-ink);
  font-size: clamp(1.12rem, 2.2vw, 1.55rem);
  font-weight: 980;
  line-height: 1.04;
}

.studio-spotlights-invite p {
  max-width: 660px;
  margin: 0;
  color: var(--studio-spotlight-muted);
  font-size: 0.92rem;
  font-weight: 740;
  line-height: 1.45;
}

.studio-spotlights-invite-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  border: 1px solid rgba(23, 18, 10, 0.12);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffdb52 0%, var(--brand) 100%);
  color: #17120a;
  font-size: 0.86rem;
  font-weight: 960;
  text-decoration: none;
  box-shadow:
    0 16px 38px rgba(255, 200, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.studio-spotlights-invite-action:hover,
.studio-spotlights-invite-action:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 20px 46px rgba(255, 200, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.studio-spotlights-path {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(max-content, 390px);
  gap: 18px;
  align-items: center;
  width: min(1040px, calc(100vw - 32px));
  margin: clamp(6px, 1.2vw, 16px) auto clamp(20px, 3vw, 34px);
  padding: clamp(14px, 1.8vw, 18px);
  border: 1px solid var(--studio-spotlight-border);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 248, 224, 0.74)),
    var(--studio-spotlight-panel);
  color: var(--studio-spotlight-ink);
  box-shadow: 0 18px 48px rgba(75, 48, 7, 0.07);
}

.studio-spotlights-path-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 4px 6px 4px 8px;
}

.studio-spotlights-path-copy .eyebrow {
  margin: 0;
}

.studio-spotlights-path-copy h2 {
  max-width: 760px;
  margin: 0;
  color: var(--studio-spotlight-ink);
  font-size: clamp(1rem, 1.42vw, 1.24rem);
  line-height: 1.2;
  letter-spacing: 0;
  text-wrap: balance;
}

.studio-spotlights-path-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-spotlights-path-steps li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 7px 12px 7px 8px;
  border: 1px solid rgba(23, 18, 10, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--studio-spotlight-ink);
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.studio-spotlights-path-steps li + li {
  margin-left: 0;
}

.studio-spotlights-path-steps li + li::before {
  display: none;
}

.studio-spotlights-path-steps li span {
  white-space: nowrap;
}

.studio-spotlights-path-steps strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: #17120a;
  color: #ffc800;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.studio-short-cameo-section {
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 34%),
    var(--surface);
}

.studio-short-cameo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-short-cameo-card {
  position: relative;
  display: block;
  min-height: 240px;
  overflow: hidden;
  border-radius: 20px;
  background: #15110b;
  color: #fff8df;
  text-decoration: none;
}

.studio-short-cameo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.58) 100%);
}

.studio-short-cameo-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.studio-short-cameo-card span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  overflow: hidden;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(16, 14, 10, 0.7);
  color: #fff8df;
  font-size: 0.74rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.studio-fame-footnote {
  box-sizing: border-box;
  width: min(980px, calc(100vw - 32px));
  margin: 0 auto;
  color: var(--studio-spotlight-muted, var(--muted-foreground));
  font-size: 0.78rem;
  font-weight: 780;
  text-align: center;
}

@media (max-width: 1100px) {
  .studio-fame-masonry {
    column-count: 3;
  }
}

@media (max-width: 760px) {
  .studio-fame-pinboard-page {
    padding-inline: 10px;
  }

  .studio-cameos-page {
    padding-inline: 0;
    padding-top: 88px;
  }

  .studio-appearances-rail-inner {
    grid-template-columns: 1fr;
    align-items: start;
    margin-bottom: 14px;
  }

  .studio-appearances-rail-head h1 {
    font-size: clamp(2.25rem, 13vw, 4.1rem);
  }

  .studio-appearances-rail-actions {
    justify-content: flex-start;
  }

  .studio-spotlights-invite {
    display: grid;
    gap: 14px;
    margin-top: 4px;
    border-radius: 22px;
  }

  .studio-spotlights-invite-action {
    width: 100%;
  }

  .studio-fame-masonry {
    column-count: 2;
    column-gap: 10px;
  }

  .studio-fame-pin {
    margin-bottom: 10px;
    border-radius: 20px;
  }

  .studio-fame-watermark {
    right: 0;
    bottom: 1px;
    width: 38px;
  }

  .studio-fame-pin-overlay {
    inset: auto 7px 7px;
    padding: 10px;
    border-radius: 16px;
  }
}

@media (max-width: 360px) {
  .studio-fame-masonry {
    column-count: 1;
  }

}

.studio-home-decoration-section {
  margin-top: -4px;
}

.studio-hero-copy,
.studio-hall-hero,
.studio-section,
.studio-safety-note,
.studio-pass-form,
.studio-detail-copy,
.admin-studio-hero,
.admin-studio-submission-card {
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.studio-hero-copy,
.studio-section,
.studio-safety-note,
.studio-pass-form,
.studio-detail-copy,
.admin-studio-hero {
  border-radius: 24px;
  padding: 24px;
}

.studio-hero-copy {
  display: grid;
  gap: 18px;
}

.studio-home-page .studio-hero-copy {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 200, 0, 0.26);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 200, 0, 0.2), transparent 28%),
    radial-gradient(circle at 96% 18%, rgba(86, 207, 174, 0.14), transparent 28%),
    linear-gradient(135deg, #161d18 0%, #101612 54%, #1f1a0e 100%);
  box-shadow: 0 30px 86px rgba(17, 24, 39, 0.24);
}

.studio-home-page .studio-hero-copy::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.055) 46%, transparent 100%);
  opacity: 0.72;
}

.studio-home-page .studio-hero-copy > * {
  position: relative;
  z-index: 1;
}

.studio-hero-copy h1,
.studio-pass-intro h1,
.studio-hall-hero h1,
.studio-detail-copy h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: 0.92;
  letter-spacing: 0;
}

.studio-pass-step-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.studio-pass-step-strip li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid rgba(255, 200, 0, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 253, 244, 0.72)),
    rgba(255, 255, 255, 0.74);
}

.studio-pass-step-strip span {
  display: inline-grid;
  width: 28px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #17120a;
  font-size: 0.78rem;
  font-weight: 950;
}

.studio-pass-step-strip strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.86rem;
  line-height: 1.12;
}

.studio-hero-copy p,
.studio-section p,
.studio-hall-hero p,
.studio-safety-note p,
.studio-detail-copy p,
.admin-studio-hero p,
.admin-studio-submission-copy p {
  color: var(--muted-foreground);
}

.studio-home-page .studio-hero-copy h1,
.studio-home-page .studio-hero-copy p {
  color: #fff8df;
}

.studio-home-page .studio-hero-copy .studio-brand-mark {
  --studio-brand-ink: #fff8df;
  color: #fff8df;
}

.studio-home-page .studio-hero-copy .studio-brand-symbol {
  border-color: rgba(255, 248, 223, 0.22);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.24),
    inset 0 -18px 24px rgba(90, 50, 0, 0.16);
}

.studio-home-page .studio-hero-copy .studio-brand-wordmark-kicker {
  color: rgba(255, 248, 223, 0.62);
}

.studio-home-page .studio-hero-copy .button-primary {
  background: var(--brand);
  color: #17120a;
  border-color: rgba(255, 200, 0, 0.6);
  box-shadow: 0 16px 34px rgba(255, 200, 0, 0.2);
}

.studio-home-page .studio-hero-copy .button-ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff8df;
  border-color: rgba(255, 248, 223, 0.2);
}

.studio-home-page .studio-hero-copy .button-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
}

.studio-budget-note {
  max-width: 34rem;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground) !important;
  font-weight: 720;
}

.studio-home-page .studio-budget-note {
  border: 1px solid rgba(255, 200, 0, 0.24);
  background: rgba(255, 200, 0, 0.16);
  color: #fff8df !important;
}

.studio-home-cameos-preview .studio-section-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 10px 18px;
}

.studio-home-cameos-preview .studio-section-head .eyebrow,
.studio-home-cameos-preview .studio-section-head h2 {
  grid-column: 1;
}

.studio-home-cameos-preview .studio-section-head .button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

.studio-home-cameos-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.studio-home-cameo-card {
  position: relative;
  display: block;
  min-height: clamp(240px, 30vw, 390px);
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 40% 18%, rgba(255, 200, 0, 0.22), transparent 34%),
    #15110b;
  color: #fff8df;
  text-decoration: none;
  box-shadow: 0 22px 58px rgba(32, 22, 8, 0.14);
  transform: translateZ(0);
}

.studio-home-cameo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, 0.52) 100%),
    radial-gradient(circle at 50% 30%, transparent 38%, rgba(0, 0, 0, 0.16) 100%);
  pointer-events: none;
}

.studio-home-cameo-card img,
.studio-home-cameo-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform 220ms ease, filter 220ms ease;
}

.studio-home-cameo-placeholder {
  background:
    radial-gradient(circle at 54% 30%, rgba(255, 200, 0, 0.34), transparent 30%),
    linear-gradient(160deg, #18130c 0%, #312616 54%, #17120a 100%);
}

.studio-home-cameo-card:hover img,
.studio-home-cameo-card:hover .studio-home-cameo-placeholder {
  filter: saturate(1.08);
  transform: scale(1.035);
}

.studio-home-cameo-guests {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 1;
  display: block;
  overflow: hidden;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(16, 14, 10, 0.7);
  color: #fff8df;
  font-size: 0.74rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.studio-section {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 36%),
    rgba(255, 255, 255, 0.9);
}

.studio-hero-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.studio-hero-room {
  min-width: 0;
}

.studio-room-shell {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
}

.studio-room-canvas-wrap {
  position: relative;
  min-height: clamp(420px, 56vw, 620px);
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(145deg, rgba(255, 244, 199, 0.84), rgba(191, 242, 223, 0.46));
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.18);
}

.studio-room-canvas-mount {
  position: absolute;
  inset: 0;
}

.studio-room-shell.is-compact .studio-room-canvas-wrap {
  min-height: 430px;
}

.studio-room-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.studio-room-loading,
.studio-room-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 12px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.46);
  z-index: 4;
  backdrop-filter: blur(10px);
}

.studio-room-loading p {
  margin: 0;
  color: rgba(23, 19, 12, 0.72);
  font-size: 0.86rem;
  font-weight: 840;
}

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

.mini-spin {
  animation: spin 0.9s linear infinite;
}

.studio-room-fallback {
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

.studio-room-fallback span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #16120a;
  font-weight: 820;
}

.studio-room-caption {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.studio-room-caption div {
  display: grid;
  gap: 2px;
}

.studio-room-caption strong {
  color: var(--foreground);
  font-size: 0.98rem;
}

.studio-room-caption span {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
}

.studio-room-live-pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
}

.studio-living-lobby-shell {
  position: relative;
  display: grid;
  gap: 12px;
  width: 100%;
}

.studio-living-lobby-canvas-wrap {
  position: relative;
  min-height: clamp(460px, 60vw, 680px);
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(145deg, rgba(255, 244, 199, 0.84), rgba(191, 242, 223, 0.46));
  box-shadow: 0 28px 80px rgba(17, 24, 39, 0.18);
}

.studio-living-lobby-canvas-mount {
  position: absolute;
  inset: 0;
}

.studio-living-lobby-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.studio-living-lobby-loading,
.studio-living-lobby-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  gap: 12px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.44);
  z-index: 4;
  backdrop-filter: blur(10px);
}

.studio-living-lobby-loading p {
  margin: 0;
  color: rgba(23, 19, 12, 0.72);
  font-size: 0.86rem;
  font-weight: 840;
}

.studio-living-lobby-fallback {
  grid-template-columns: repeat(2, max-content);
  gap: 10px;
}

.studio-living-lobby-fallback span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #16120a;
  font-weight: 820;
}

.studio-living-lobby-caption {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}

.studio-living-lobby-caption div {
  display: grid;
  gap: 2px;
}

.studio-living-lobby-caption strong {
  color: var(--foreground);
  font-size: 0.98rem;
}

.studio-living-lobby-caption span {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
}

.studio-living-lobby-pill {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground) !important;
  font-size: 0.78rem !important;
  text-transform: uppercase;
}

.studio-lounge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.46fr);
  gap: 16px;
  align-items: stretch;
}

.studio-lounge-copy,
.studio-lounge-side {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.studio-lounge-copy h1 {
  max-width: 820px;
  margin: 0;
  color: var(--foreground);
  font-size: clamp(2.1rem, 5vw, 4.1rem);
  line-height: 0.96;
  overflow-wrap: anywhere;
}

.studio-lounge-copy p,
.studio-lounge-side span {
  color: var(--muted-foreground);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.studio-lounge-side {
  align-content: center;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 40%),
    rgba(255, 255, 255, 0.9);
}

.studio-room-info-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.studio-room-cat-list,
.studio-room-moment-list {
  display: grid;
  gap: 10px;
}

.studio-room-cat-list div,
.studio-room-moment-list span {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.04);
}

.studio-room-cat-list strong {
  color: var(--foreground);
}

.studio-room-cat-list span,
.studio-room-moment-list span {
  color: var(--muted-foreground);
  font-weight: 720;
}

.studio-room-kit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.studio-room-kit-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.78);
}

.studio-room-kit-card h3 {
  margin: 0;
  color: var(--foreground);
}

.studio-room-kit-card p,
.studio-room-kit-card li {
  color: var(--muted-foreground);
}

.studio-room-kit-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 1.15rem;
}

.studio-room-kit-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.studio-room-kit-pill-row span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.75rem;
  font-weight: 840;
  text-transform: uppercase;
}

.studio-decoration-slot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.studio-decoration-slot-card {
  display: grid;
  gap: 7px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.16), transparent 44%),
    rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 34px rgba(17, 24, 39, 0.08);
}

.studio-decoration-slot-card span {
  width: max-content;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-decoration-slot-card strong {
  color: var(--foreground);
  font-size: 1rem;
}

.studio-decoration-slot-card p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 720;
}

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

.studio-section-head {
  display: grid;
  gap: 6px;
}

.studio-section-head h2,
.studio-pass-intro h1,
.admin-studio-hero h1 {
  margin: 0;
}

.studio-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.studio-tier-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 250px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.82);
}

.studio-tier-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 200, 0, 0.44);
}

.studio-tier-price {
  width: max-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--brand);
  color: #16120a;
  font-weight: 860;
}

.studio-card {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 360px;
  overflow: hidden;
  padding: 16px;
  border-radius: 28px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  box-shadow: 0 22px 60px rgba(17, 24, 39, 0.16);
  color: #16120a;
}

.studio-card-large {
  min-height: 560px;
  padding: 22px;
}

.studio-card.is-yellow {
  background: linear-gradient(160deg, #ffe680 0%, #ffc800 62%, #fff2b8 100%);
}

.studio-card.is-mint {
  background: linear-gradient(160deg, #ecfff7 0%, #bff2df 62%, #fff8d8 100%);
}

.studio-card.is-sky {
  background: linear-gradient(160deg, #eef8ff 0%, #b9dfff 62%, #fff2d3 100%);
}

.studio-card.is-coral {
  background: linear-gradient(160deg, #fff0ec 0%, #ffb5a7 62%, #fff8da 100%);
}

.studio-card.is-lavender {
  background: linear-gradient(160deg, #f6f0ff 0%, #d9c9ff 62%, #fff4cb 100%);
}

.studio-card.is-charcoal {
  background: linear-gradient(160deg, #22352e 0%, #17201d 62%, #3d3520 100%);
  color: #fff8df;
}

.studio-card-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  border-radius: 22px;
  overflow: hidden;
}

.studio-card-large .studio-card-art {
  min-height: 360px;
}

.studio-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-card-cat-placeholder {
  position: relative;
  width: min(74%, 260px);
  aspect-ratio: 1 / 1;
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(circle at 32% 38%, #111 0 4%, transparent 4.5%),
    radial-gradient(circle at 68% 38%, #111 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 52%, #f28b82 0 3.2%, transparent 3.7%),
    linear-gradient(180deg, #fffdf4 0%, #fff7df 100%);
  border: 5px solid currentColor;
  box-shadow: 0 20px 46px rgba(17, 24, 39, 0.16);
}

.studio-card.is-charcoal .studio-card-cat-placeholder {
  background:
    radial-gradient(circle at 32% 38%, #111 0 4%, transparent 4.5%),
    radial-gradient(circle at 68% 38%, #111 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 52%, #f28b82 0 3.2%, transparent 3.7%),
    linear-gradient(180deg, #fffdf4 0%, #fff7df 100%);
  color: #f8e7b7;
}

.studio-card-cat-ear {
  position: absolute;
  top: -8%;
  width: 31%;
  aspect-ratio: 1;
  border: 5px solid currentColor;
  background: inherit;
  transform: rotate(45deg);
}

.studio-card-cat-ear-left {
  left: 9%;
}

.studio-card-cat-ear-right {
  right: 9%;
}

.studio-card-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(12px);
}

.studio-card.is-charcoal .studio-card-copy {
  background: rgba(0, 0, 0, 0.24);
}

.studio-card-number,
.studio-card-foot,
.studio-card-badges span {
  font-size: 0.76rem;
  font-weight: 860;
  text-transform: uppercase;
  letter-spacing: 0;
}

.studio-card-copy h3 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1;
}

.studio-card-copy p {
  margin: 0;
  color: inherit;
  font-weight: 720;
}

.studio-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  opacity: 0.74;
}

.studio-card-badges {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.studio-card-badges span {
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #16120a;
}

.studio-topbar,
.studio-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-filter-row {
  justify-content: flex-start;
}

.studio-filter-row span {
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-foreground);
  font-weight: 760;
}

.studio-filter-row .is-active {
  background: var(--brand);
  color: #16120a;
  border-color: rgba(255, 200, 0, 0.56);
}

.studio-hall-hero,
.admin-studio-hero {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
}

.studio-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.studio-wall-link {
  color: inherit;
  text-decoration: none;
}

.studio-wall-link:hover .studio-card {
  transform: translateY(-2px);
}

.studio-character-page {
  gap: clamp(18px, 3vw, 32px);
}

.studio-character-hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(320px, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.studio-character-card-stage {
  display: grid;
  place-items: center;
}

.studio-character-card {
  width: min(100%, 440px);
}

.studio-character-copy {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 200, 0, 0.2), transparent 28%),
    rgba(255, 255, 255, 0.68);
  box-shadow: 0 30px 80px rgba(35, 23, 12, 0.12);
  backdrop-filter: blur(18px);
}

.studio-character-copy h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.88;
  letter-spacing: 0;
}

.studio-character-copy p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 720;
}

.studio-character-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.studio-character-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.studio-character-facts div {
  display: grid;
  gap: 4px;
  min-height: 86px;
  align-content: center;
  padding: 12px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.56);
}

.studio-character-facts dt,
.studio-character-facts dd {
  margin: 0;
}

.studio-character-facts dt {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-character-facts dd {
  color: var(--foreground);
  font-weight: 920;
}

.studio-character-traits,
.studio-lounge-card-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.studio-character-traits span {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 880;
}

.studio-character-note {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground) !important;
}

.studio-character-path {
  display: grid;
  gap: 16px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(16px, 2.8vw, 26px);
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 200, 0, 0.18), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.62);
  box-shadow: 0 24px 70px rgba(35, 23, 12, 0.1);
  backdrop-filter: blur(16px);
}

.studio-character-path-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-character-path-grid article {
  display: grid;
  gap: 8px;
  min-height: 150px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.64);
}

.studio-character-path-grid span {
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.2);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 950;
}

.studio-character-path-grid strong {
  color: var(--foreground);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 980;
  line-height: 1.05;
}

.studio-character-path-grid p,
.studio-character-revenue-note {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.45;
}

.studio-character-revenue-note {
  width: max-content;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground);
}

.studio-character-spotlights,
.studio-lounge-cards {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.studio-character-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.studio-character-spotlight-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.64);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 18px 46px rgba(35, 23, 12, 0.1);
}

.studio-character-spotlight-card img,
.studio-character-spotlight-card > span {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
  background: rgba(23, 18, 10, 0.1);
}

.studio-character-spotlight-card strong {
  color: var(--foreground);
  font-size: 0.95rem;
}

.studio-character-spotlight-card small {
  color: var(--muted-foreground);
  font-weight: 820;
}

.studio-character-empty {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(255, 200, 0, 0.46);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.54);
}

.studio-character-empty strong {
  color: var(--foreground);
}

.studio-lounge-cards {
  display: grid;
  gap: 14px;
  padding: 0 clamp(16px, 4vw, 28px) clamp(22px, 5vw, 46px);
}

.studio-lounge-cards-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-end;
}

.studio-lounge-cards-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  line-height: 0.98;
}

.studio-lounge-card-rail {
  padding: 4px 2px 8px;
}

.studio-lounge-card-link {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 72px minmax(120px, 1fr);
  gap: 12px;
  align-items: center;
  width: min(270px, 78vw);
  padding: 10px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.68);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 16px 42px rgba(35, 23, 12, 0.1);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.studio-lounge-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 52px rgba(35, 23, 12, 0.14);
}

.studio-lounge-card-avatar {
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  place-items: center;
  border-radius: 20px;
  background: #ffc800;
}

.studio-lounge-card-avatar.is-mint {
  background: #bff2df;
}

.studio-lounge-card-avatar.is-sky {
  background: #b9dfff;
}

.studio-lounge-card-avatar.is-coral {
  background: #ffb5a7;
}

.studio-lounge-card-avatar.is-lavender {
  background: #d9c9ff;
}

.studio-lounge-card-avatar.is-charcoal {
  background: #17201d;
}

.studio-lounge-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-lounge-card-link strong,
.studio-lounge-card-link small {
  display: block;
}

.studio-lounge-card-link strong {
  color: var(--foreground);
  font-weight: 920;
}

.studio-lounge-card-link small {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 860;
}

.studio-pass-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 24px;
  align-items: start;
}

.studio-pass-layout.is-checkout {
  grid-template-columns: minmax(330px, 0.86fr) minmax(360px, 1.14fr);
}

.studio-create-console .studio-pass-layout.is-checkout {
  align-items: stretch;
  width: min(430px, calc(100vw - 32px));
  grid-template-columns: 1fr;
}

.studio-pass-form {
  display: grid;
  gap: 18px;
}

.studio-pass-form-head {
  display: grid;
  gap: 8px;
}

.studio-pass-form-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  line-height: 1;
  letter-spacing: 0;
}

.studio-pass-form-head p:not(.eyebrow) {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.45;
}

.studio-pass-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
}

.studio-pass-kicker-row .eyebrow {
  margin: 0;
}

.studio-pass-kicker-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 200, 0, 0.42);
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: #5b3a0d;
  font-size: 0.8rem;
  font-weight: 950;
}

.studio-pass-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 0.48fr);
  gap: 16px;
  align-items: start;
}

.studio-pass-layout.is-checkout .studio-pass-form {
  border-color: rgba(255, 200, 0, 0.3);
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 200, 0, 0.18), transparent 32%),
    rgba(255, 255, 255, 0.9);
}

.studio-create-console .studio-pass-layout.is-checkout .studio-pass-form {
  gap: 16px;
  padding: clamp(16px, 3vw, 22px);
  border-color: rgba(255, 255, 255, 0.46);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.88);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.28) inset;
  backdrop-filter: blur(24px);
}

.studio-pass-layout.is-checkout .studio-pass-form .button-row {
  margin-top: 2px;
}

.studio-pass-layout.is-checkout .studio-pass-form .button-primary {
  justify-content: center;
  width: 100%;
}

.studio-pass-layout.is-checkout .studio-pass-preview {
  align-content: start;
}

.studio-pass-preview-panel {
  position: relative;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 200, 0, 0.24);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 200, 0, 0.28), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(86, 207, 174, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 250, 230, 0.84));
  box-shadow: 0 24px 60px rgba(78, 58, 24, 0.13);
}

.studio-pass-preview-panel::after {
  position: absolute;
  inset: auto 22px 18px auto;
  width: 88px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  content: "";
  filter: blur(4px);
  pointer-events: none;
}

.studio-pass-preview-head {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 4px 4px 0;
}

.studio-pass-preview-head .eyebrow {
  margin: 0 0 2px;
}

.studio-pass-preview-head strong {
  display: block;
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 950;
  letter-spacing: 0;
}

.studio-pass-preview-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 920;
}

.studio-pass-preview-stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  background: #fffdf5;
  box-shadow: 0 18px 42px rgba(47, 35, 14, 0.12);
}

.studio-pass-preview-stage .studio-room-shell {
  gap: 0;
}

.studio-pass-preview-stage .studio-room-canvas-wrap {
  min-height: clamp(320px, 38vw, 430px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.studio-pass-preview-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-pass-preview-foot span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  color: #2f6656;
  font-size: 0.76rem;
  font-weight: 920;
}

.studio-pass-card-preview {
  display: grid;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 20px 46px rgba(78, 58, 24, 0.1);
}

.studio-pass-card-preview .studio-card {
  min-height: 360px;
  border-radius: 22px;
  box-shadow: none;
}

.studio-background-picker {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
}

.studio-background-picker legend {
  font-weight: 800;
}

.studio-background-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-background-options label {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.92) 100%);
  box-shadow: 0 8px 18px rgba(78, 58, 24, 0.06);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.studio-background-options label:hover,
.studio-background-options label:focus-within {
  border-color: rgba(255, 200, 0, 0.48);
  box-shadow:
    0 12px 24px rgba(78, 58, 24, 0.08),
    0 0 0 3px rgba(255, 200, 0, 0.1);
  transform: translateY(-1px);
}

.studio-background-options label.is-selected {
  border-color: rgba(255, 200, 0, 0.72);
  background:
    linear-gradient(135deg, #fff1ad 0%, #fff8dc 46%, #fffdf5 100%);
  box-shadow:
    0 14px 30px rgba(78, 58, 24, 0.1),
    0 0 0 3px rgba(255, 200, 0, 0.18);
}

.studio-background-options label.is-recommended:not(.is-selected) {
  border-color: rgba(66, 170, 133, 0.42);
}

.studio-background-options input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.studio-background-options span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--studio-swatch);
  border: 1px solid rgba(17, 24, 39, 0.18);
}

.studio-background-options small {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(66, 170, 133, 0.13);
  color: #1f6f58;
  font-size: 0.72rem;
  font-weight: 800;
}

.studio-photo-picker {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 118px;
  padding: 18px;
  overflow: hidden;
  border: 2px dashed rgba(255, 200, 0, 0.54);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.22), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 42px rgba(66, 44, 10, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.studio-photo-picker:hover,
.studio-photo-picker:focus-within,
.studio-photo-picker.is-dragging {
  border-color: rgba(255, 200, 0, 0.86);
  box-shadow:
    0 0 0 5px rgba(255, 200, 0, 0.14),
    0 22px 54px rgba(66, 44, 10, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}

.studio-photo-picker.is-dragging {
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 200, 0, 0.34), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.24), transparent 34%),
    rgba(255, 255, 255, 0.92);
}

.studio-photo-picker.has-photo {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.56);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.22), transparent 34%),
    rgba(255, 255, 255, 0.86);
}

.studio-photo-picker input[type="file"] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  appearance: none;
  color: transparent;
  font-size: 0;
  opacity: 0;
  cursor: pointer;
}

.studio-photo-picker-icon,
.studio-photo-picker-copy,
.studio-photo-picker-action {
  position: relative;
  z-index: 0;
}

.studio-photo-picker-icon {
  display: grid;
  width: 54px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 200, 0, 0.22);
  color: #5b3a0d;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.34);
}

.studio-photo-picker.is-uploading .studio-photo-picker-icon svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.studio-photo-picker.has-photo .studio-photo-picker-icon {
  background: rgba(86, 207, 174, 0.18);
  color: #1f6f58;
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.28);
}

.studio-photo-picker-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-photo-picker strong {
  color: var(--foreground);
  font-size: 1.06rem;
  font-weight: 960;
  letter-spacing: 0;
}

.studio-photo-picker small {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.38;
}

.studio-photo-picker-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #17120a;
  color: #fff8df;
  font-size: 0.78rem;
  font-weight: 940;
  white-space: nowrap;
}

.photo-upload-queue {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(42, 39, 31, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.photo-upload-queue.is-uploading {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 248, 224, 0.84);
}

.photo-upload-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photo-upload-queue-head strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 920;
}

.photo-upload-queue-head span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.photo-upload-queue-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-upload-queue-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 6px;
  border: 1px solid rgba(42, 39, 31, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.photo-upload-queue-item.is-primary {
  border-color: rgba(86, 207, 174, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.74);
}

.photo-upload-preview {
  display: block;
  width: 52px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(42, 39, 31, 0.08);
}

.photo-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.photo-upload-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-upload-copy small {
  color: var(--muted-foreground);
  font-size: 0.73rem;
  font-weight: 760;
}

.photo-upload-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.photo-upload-state {
  display: grid;
  width: 28px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  font-size: 0.76rem;
  font-weight: 900;
}

.photo-upload-action {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(42, 39, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted-foreground);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.photo-upload-action:hover,
.photo-upload-action:focus-visible {
  border-color: rgba(255, 200, 0, 0.46);
  background: rgba(255, 248, 224, 0.9);
  color: #6b4a10;
  transform: translateY(-1px);
}

.photo-upload-action.is-remove:hover,
.photo-upload-action.is-remove:focus-visible {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 226, 226, 0.82);
  color: #b91c1c;
}

.photo-upload-queue.is-uploading .photo-upload-state {
  background: rgba(255, 200, 0, 0.2);
  color: #5b3a0d;
}

.photo-upload-queue.is-uploading .photo-upload-state svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.photo-upload-queue p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.45;
}

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

.studio-optional-note-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 74%, transparent);
  cursor: pointer;
  text-align: left;
  transition:
    color 160ms ease,
    opacity 160ms ease;
}

.studio-optional-note-toggle:hover,
.studio-optional-note-toggle:focus-visible {
  color: var(--foreground);
  outline: none;
}

.studio-optional-note-toggle span {
  font-size: 0.82rem;
  font-weight: 880;
  white-space: nowrap;
}

.studio-optional-note-toggle small {
  color: color-mix(in srgb, var(--muted-foreground) 78%, transparent);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.2;
}

.studio-optional-field-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-optional-field-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(79, 50, 20, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 880;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.studio-optional-field-head button:hover,
.studio-optional-field-head button:focus-visible {
  border-color: rgba(255, 200, 0, 0.48);
  color: var(--foreground);
  transform: translateY(-1px);
}

.studio-pass-account-note {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.studio-pass-account-note span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-pass-account-note strong {
  color: var(--foreground);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.studio-pass-account-note small {
  color: var(--muted-foreground);
  font-weight: 650;
}

.studio-pass-readiness {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background: rgba(248, 252, 250, 0.78);
}

.studio-pass-readiness span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.studio-pass-readiness i {
  display: inline-block;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.22);
}

.studio-pass-readiness span.is-ready {
  background: rgba(86, 207, 174, 0.14);
  color: #116c55;
}

.studio-pass-readiness span.is-ready i {
  background: #32b98d;
  box-shadow: 0 0 0 4px rgba(86, 207, 174, 0.15);
}

.studio-payment-note {
  margin: -2px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 200, 0, 0.24);
  border-radius: 16px;
  background: rgba(255, 246, 203, 0.52);
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.studio-template-picker,
.studio-auto-match-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.64);
}

.studio-template-picker-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.studio-template-picker-head h3 {
  margin: 0;
}

.studio-template-card-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.studio-template-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.92) 100%);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(78, 58, 24, 0.06);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.studio-template-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow:
    0 14px 30px rgba(78, 58, 24, 0.08),
    0 0 0 3px rgba(255, 200, 0, 0.1);
}

.studio-template-card.is-selected {
  border-color: rgba(255, 200, 0, 0.84);
  background:
    linear-gradient(135deg, #fff0a6 0%, #fff8d8 48%, #fffdf5 100%);
  box-shadow:
    0 16px 34px rgba(78, 58, 24, 0.12),
    0 0 0 3px rgba(255, 200, 0, 0.18);
}

.studio-template-card span {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: capitalize;
}

.studio-template-card.is-recommended span {
  background: var(--brand);
  color: #17120a;
}

.studio-template-card strong {
  line-height: 1.05;
}

.studio-auto-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-auto-match-grid > div {
  display: grid;
  gap: 6px;
  min-height: 92px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
}

.studio-auto-match-grid span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.studio-auto-match-grid strong {
  display: flex;
  gap: 8px;
  align-items: center;
  line-height: 1.1;
}

.studio-auto-match-grid i {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--studio-swatch);
  border: 1px solid rgba(17, 24, 39, 0.18);
}

.studio-auto-match-grid small {
  color: var(--muted-foreground);
  line-height: 1.35;
}

.studio-template-card small,
.studio-match-summary span {
  color: var(--muted-foreground);
  line-height: 1.35;
}

.studio-match-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(86, 207, 174, 0.12);
}

.studio-preview-pose-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.studio-preview-pose-strip div {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.studio-preview-pose-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.studio-preview-pose-strip span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  text-align: center;
}

.studio-opt-in {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 200, 0, 0.12);
  color: var(--foreground);
  font-weight: 720;
}

.studio-membership-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 2px;
}

.studio-membership-note a {
  display: grid;
  gap: 2px;
  min-height: 42px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid rgba(79, 50, 20, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.42);
  color: rgba(53, 35, 18, 0.82);
  line-height: 1.2;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.studio-membership-note a:hover,
.studio-membership-note a:focus-visible {
  border-color: rgba(255, 200, 0, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
  transform: translateY(-1px);
}

.studio-membership-note strong {
  color: rgba(53, 35, 18, 0.92);
  font-size: 0.8rem;
  font-weight: 980;
}

.studio-membership-note small {
  color: rgba(78, 58, 24, 0.72);
  font-size: 0.68rem;
  font-weight: 820;
}

.support-anchor-section {
  scroll-margin-top: 96px;
}

.studio-submission-result {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground);
}

.studio-pass-review-summary {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(86, 207, 174, 0.12);
}

.studio-pass-review-summary span {
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 720;
}

.studio-detail-copy {
  display: grid;
  gap: 16px;
}

.studio-detail-badges,
.admin-studio-submission-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-detail-badges span,
.admin-studio-status {
  padding: 7px 10px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: var(--foreground);
  font-weight: 780;
}

.studio-safety-note.is-compact {
  padding: 16px;
  box-shadow: none;
}

.studio-share-text {
  overflow-wrap: anywhere;
  font-size: 0.88rem;
}

.admin-studio-page {
  display: grid;
  gap: 20px;
  align-items: start;
  width: min(calc(100% - clamp(28px, 5vw, 76px)), 1760px);
  min-width: 0;
  margin-inline: auto;
  padding-bottom: 56px;
  color: var(--foreground);
}

.admin-studio-character-create-page {
  gap: 8px;
}

.admin-studio-page > * {
  min-width: 0;
}

.admin-studio-page > .admin-section-shell,
.admin-studio-page > .admin-studio-mode-nav {
  display: none;
}

body:has(.admin-studio-page),
body:has(.site-main-shell-admin-studio) {
  background:
    radial-gradient(circle at 10% 0%, rgba(15, 23, 42, 0.075), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(27, 101, 198, 0.08), transparent 24%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f7 48%, #e8edf4 100%);
}

body:has(.admin-studio-page) .site-main {
  padding-top: clamp(18px, 2.6vw, 34px);
}

body:has(.admin-studio-character-create-page) .site-main {
  padding-top: 10px;
}

body:has(.admin-studio-page) :is(
  .admin-studio-page-header,
  .admin-studio-generation-card,
  .admin-studio-production-rail,
  .admin-studio-source-builder,
  .studio-minis-control-room,
  .studio-minis-queue-panel,
  .studio-minis-roster-panel,
  .studio-minis-command-center,
  .studio-minis-builder,
  .studio-minis-daily-queue,
  .studio-minis-output,
  .studio-minis-panel
) {
  border-radius: 8px;
}

body:has(.admin-studio-page) :is(
  .admin-studio-character-list a,
  .admin-studio-character-preview,
  .admin-studio-character-asset-card,
  .admin-studio-lyrics-line,
  .admin-studio-lyrics-panel,
  .admin-studio-lyrics-track,
  .admin-studio-lyrics-copy-pack,
  .admin-studio-lyrics-translation-grid article,
  .admin-studio-production-episode-list a,
  .admin-studio-production-season-list a,
  .admin-studio-production-source div,
  .admin-studio-source-builder-card,
  .studio-minis-control-side div,
  .studio-minis-queue-list article,
  .studio-minis-queue-thumb,
  .studio-minis-roster-list a,
  .studio-minis-roster-thumb,
  .studio-minis-builder-card,
  .studio-minis-command-meta div,
  .studio-minis-operator-card,
  .studio-minis-purpose-note,
  .studio-minis-command-preview,
  .studio-minis-command-production-title
) {
  border-radius: 6px;
}

body:has(.admin-studio-page) .admin-section-link.is-active {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.055);
  box-shadow: inset 4px 0 0 rgba(255, 200, 0, 0.86);
}

body:has(.admin-studio-page) .admin-studio-hero {
  border-color: rgba(15, 23, 42, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
}

.admin-studio-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-stats div {
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.admin-studio-stats span {
  color: var(--muted-foreground);
  font-weight: 720;
}

.admin-studio-stats strong {
  font-size: 2rem;
  line-height: 1;
}

.admin-studio-guest-console {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.admin-studio-guest-console .admin-studio-page-header {
  padding: 10px 12px 12px;
  border: 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-studio-guest-console .admin-studio-page-header h1 {
  margin-top: 2px;
}

.admin-studio-guest-console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 10px;
  align-items: stretch;
}

.admin-studio-guest-console .admin-studio-filter-row {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.admin-studio-guest-console .admin-studio-pipeline-step-chip {
  flex: 1 1 240px;
  min-height: 74px;
  min-width: min(100%, 240px);
  border-radius: 6px;
}

.admin-studio-guest-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-guest-stats div {
  min-height: 74px;
  padding: 11px 12px;
  border-radius: 6px;
  box-shadow: none;
}

.admin-studio-guest-stats strong {
  font-size: 1.55rem;
}

.admin-studio-submission-list {
  display: grid;
  gap: 16px;
}

.admin-studio-submission-list.is-empty {
  margin-top: -4px;
}

.admin-studio-guest-empty {
  min-height: 210px;
  align-content: center;
  border-radius: 8px;
  border-style: dashed;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.86));
}

@media (max-width: 980px) {
  .admin-studio-guest-console-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-studio-guest-stats {
    grid-template-columns: 1fr;
  }
}

.admin-studio-submission-card {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  border-radius: 24px;
}

.admin-studio-submission-card .studio-card {
  min-height: 300px;
}

.admin-studio-submission-copy {
  display: grid;
  gap: 12px;
  align-content: start;
}

.admin-studio-submission-copy h2 {
  margin: 0;
}

.admin-studio-submission-copy dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-studio-submission-copy dl div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-submission-copy dt {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-studio-submission-copy dd {
  margin: 0;
  color: var(--foreground);
  font-weight: 760;
}

.admin-studio-actions form {
  display: contents;
}

.admin-studio-generation-list {
  display: grid;
  gap: 18px;
}

.admin-studio-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -4px;
}

.admin-studio-filter-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 820;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
}

.admin-studio-filter-chip strong {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  font-size: 0.72rem;
}

.admin-studio-filter-chip.is-active {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
  box-shadow:
    0 0 0 2px rgba(27, 101, 198, 0.12),
    0 10px 24px rgba(27, 101, 198, 0.1);
  color: var(--foreground);
}

.admin-studio-pipeline-step-chip {
  align-items: flex-start;
  justify-content: flex-start;
  min-width: min(100%, 320px);
  border-radius: var(--radius-md);
  position: relative;
  padding-left: 16px;
}

.admin-studio-pipeline-step-chip.is-active {
  background:
    linear-gradient(90deg, rgba(27, 101, 198, 0.13), transparent 42%),
    #ffffff;
}

.admin-studio-pipeline-step-chip.is-active::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 8px;
  width: 4px;
  border-radius: 999px;
  background: var(--accent-strong);
}

.admin-studio-pipeline-step-chip.is-active strong {
  background: var(--accent-strong);
  color: #ffffff;
}

.admin-studio-pipeline-step-chip span {
  display: block;
}

.admin-studio-pipeline-step-chip small {
  display: block;
  max-width: 260px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
}

.admin-studio-generation-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.admin-studio-generation-head {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-generation-head h2 {
  margin: 8px 0 4px;
}

.admin-studio-generation-head p {
  margin: 0;
  color: var(--muted-foreground);
}

.admin-studio-generation-meta {
  display: grid;
  gap: 4px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  text-align: right;
}

.admin-studio-generation-meta a {
  color: var(--foreground);
  font-weight: 860;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.admin-studio-review-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(260px, 0.8fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-review-brief h3 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}

.admin-studio-review-brief p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.4;
}

.admin-studio-review-brief.is-ready {
  border-color: rgba(86, 207, 174, 0.45);
  background: linear-gradient(135deg, rgba(86, 207, 174, 0.16), rgba(255, 255, 255, 0.74));
}

.admin-studio-review-brief.is-blocked {
  border-color: rgba(239, 68, 68, 0.38);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.74));
}

.admin-studio-review-brief.is-work {
  border-color: rgba(255, 200, 0, 0.46);
  background: linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(255, 255, 255, 0.74));
}

.admin-studio-review-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 13px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.76rem;
  font-weight: 880;
  white-space: nowrap;
}

.admin-studio-review-next form {
  display: contents;
}

.admin-studio-publish-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.admin-studio-publish-links > span {
  flex: 1 1 100%;
  text-align: center;
}

.admin-studio-review-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 7px;
  margin: 0;
}

.admin-studio-review-kpis div {
  display: grid;
  gap: 2px;
  min-height: 54px;
  align-content: center;
  padding: 8px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.055);
}

.admin-studio-review-kpis dt {
  color: var(--muted-foreground);
  font-size: 0.65rem;
  font-weight: 820;
  text-transform: uppercase;
}

.admin-studio-publish-map {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(20, 17, 10, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 2% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.62);
}

.admin-studio-publish-map-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-publish-map-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.15rem;
}

.admin-studio-publish-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-publish-map-grid article {
  display: grid;
  gap: 6px;
  min-height: 128px;
  align-content: start;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-publish-map-grid article.is-ready {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.12);
}

.admin-studio-publish-map-grid article.is-live {
  border-color: rgba(86, 207, 174, 0.44);
  background: rgba(86, 207, 174, 0.14);
}

.admin-studio-publish-map-grid article.is-waiting {
  opacity: 0.78;
}

.admin-studio-publish-map-grid span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-publish-map-grid strong {
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.1;
}

.admin-studio-publish-map-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.38;
}

.admin-studio-review-kpis dd {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 880;
}

.admin-studio-review-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 200, 0, 0.35);
  border-radius: 18px;
  background: rgba(255, 200, 0, 0.1);
}

.admin-studio-review-note span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
  text-transform: uppercase;
}

.admin-studio-review-note p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-studio-generation-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
}

.admin-studio-generation-grid.is-secondary {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1fr);
}

.admin-studio-generation-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-generation-panel h3 {
  margin: 0;
}

.admin-studio-mini-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-studio-mini-dl div {
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-mini-dl dt {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.admin-studio-mini-dl dd {
  margin: 0;
  font-weight: 820;
}

.admin-studio-match-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-match-pill-row span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-compact-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.35;
}

.admin-studio-pose-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-readiness,
.admin-studio-delivery-plan {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-readiness strong,
.admin-studio-delivery-plan strong {
  font-size: 0.84rem;
}

.admin-studio-readiness span,
.admin-studio-delivery-plan span,
.admin-studio-delivery-plan small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-readiness.is-ready {
  border-color: rgba(86, 207, 174, 0.36);
}

.admin-studio-readiness.is-blocked {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.06);
}

.admin-studio-pose-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-pose-set-actions form {
  display: contents;
}

.admin-studio-pose-set-actions span {
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 820;
}

.admin-studio-pose-set-actions small {
  flex-basis: 100%;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.35;
}

.admin-studio-pose-tile {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-pose-tile.is-missing {
  border-style: dashed;
}

.admin-studio-pose-tile img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.admin-studio-pose-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.14), transparent),
    rgba(255, 255, 255, 0.56);
}

.admin-studio-pose-tile span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 760;
  text-align: center;
}

.admin-studio-pose-tile form {
  display: grid;
}

.admin-studio-pose-tile .button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 0.66rem;
}

.admin-studio-gate-grid {
  display: grid;
  gap: 8px;
}

.admin-studio-gate {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-gate strong {
  font-size: 0.84rem;
}

.admin-studio-gate span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-gate.is-blocking {
  border-color: rgba(255, 200, 0, 0.42);
}

.admin-studio-gate.is-review {
  border-color: rgba(86, 207, 174, 0.34);
}

.admin-studio-generation-panel .admin-studio-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-generation-panel .admin-studio-actions form {
  display: grid;
  gap: 8px;
}

.admin-studio-generation-panel .admin-studio-actions textarea {
  min-height: 68px;
  resize: vertical;
  font-size: 0.78rem;
}

.admin-studio-generation-debug {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  padding: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-generation-debug summary {
  cursor: pointer;
  font-weight: 820;
}

.admin-studio-generation-debug pre {
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.admin-studio-prompt-summary {
  display: grid;
  gap: 12px;
  padding-top: 10px;
}

.admin-studio-prompt-list {
  display: grid;
  gap: 8px;
}

.admin-studio-prompt-list details {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.52);
}

.admin-studio-prompt-list summary {
  font-size: 0.84rem;
}

.admin-studio-mode-nav {
  display: grid;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  min-height: calc(100vh - 40px);
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.075);
  position: sticky;
  top: 20px;
}

.admin-studio-mode-nav-head {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 128px;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.34), transparent 44%),
    #111827;
  color: #ffffff;
}

.admin-studio-mode-nav-head span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-mode-nav-head strong {
  overflow-wrap: anywhere;
  font-size: 1.18rem;
  line-height: 1.18;
}

.admin-studio-mode-nav-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.admin-studio-mode-nav-actions a {
  display: inline-flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
}

.admin-studio-mode-nav-actions a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.admin-studio-mode-link-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}

.admin-studio-mode-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-mode-link:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
}

.admin-studio-mode-link-icon {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.055);
  color: var(--foreground);
}

.admin-studio-mode-link-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-mode-link-copy strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
  line-height: 1.12;
}

.admin-studio-mode-link-copy small {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 740;
  line-height: 1.22;
}

.admin-studio-mode-link.is-active {
  border-color: rgba(15, 23, 42, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.78));
  box-shadow:
    inset 0 0 0 2px rgba(255, 200, 0, 0.28),
    0 12px 30px rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.admin-studio-mode-link.is-active .admin-studio-mode-link-icon {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.18);
}

.admin-studio-page-header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.93));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.admin-studio-character-create-page .admin-studio-page-header {
  gap: 10px;
  padding: 2px 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-studio-character-create-page .admin-studio-page-header h1 {
  font-size: clamp(1.18rem, 1.65vw, 1.48rem);
  line-height: 1.05;
}

.admin-studio-character-create-page .admin-studio-page-header .eyebrow {
  color: #2765b8;
}

.admin-studio-builder-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.78)),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.admin-studio-builder-header-main {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.admin-studio-builder-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: #1f5fae;
  font-size: 0.73rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-builder-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
}

.admin-studio-builder-title-row h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: clamp(1.32rem, 2vw, 1.8rem);
  font-weight: 940;
  line-height: 1.03;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-builder-meta,
.admin-studio-builder-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-studio-builder-meta span,
.admin-studio-builder-status span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.78);
  color: #64748b;
  font-size: 0.73rem;
  font-weight: 820;
  line-height: 1;
}

.admin-studio-builder-meta span {
  padding: 5px 8px;
}

.admin-studio-builder-status {
  justify-content: flex-end;
}

.admin-studio-builder-status span {
  padding: 6px 9px;
  white-space: nowrap;
}

.admin-studio-builder-status span.is-ready {
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(240, 253, 244, 0.8);
  color: #166534;
}

.admin-studio-builder-header-action {
  display: flex;
  justify-content: flex-end;
}

.admin-studio-page-header h1,
.admin-studio-page-header p {
  margin: 0;
}

.admin-studio-page-header p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted-foreground);
}

.admin-studio-page-header-action {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1020px) {
  .admin-studio-mode-nav {
    min-height: 0;
    position: static;
  }

  .admin-studio-mode-nav-head {
    min-height: auto;
  }

  .admin-studio-mode-link-list {
    grid-auto-columns: minmax(158px, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 760px) {
  .admin-studio-page {
    width: min(calc(100% - 24px), 1760px);
    gap: 16px;
    padding-bottom: 34px;
  }

  .admin-studio-page-header {
    align-items: stretch;
    flex-direction: column;
    padding: 16px;
  }

  .admin-studio-page-header-action {
    justify-content: flex-start;
  }

  .admin-studio-mode-nav {
    padding: 8px;
    border-radius: 18px;
  }

  .admin-studio-mode-link {
    min-height: 66px;
  }
}

.admin-studio-user-projects-page {
  gap: 18px;
}

.admin-studio-user-projects-page.is-client-production-console,
.admin-studio-user-project-detail-page.is-client-production-console {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(16px, 2.5vw, 34px);
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 197, 94, 0.12), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(59, 130, 246, 0.1), transparent 30%),
    #050506;
  color: #f8fafc;
  --foreground: #f8fafc;
  --muted-foreground: rgba(248, 250, 252, 0.62);
}

.admin-studio-user-project-topbar.admin-studio-topbar {
  position: sticky;
  top: 10px;
  z-index: 40;
  margin-bottom: 4px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: rgba(12, 12, 13, 0.82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(22px);
}

.studio-minis-page:not(.is-mini-flow-workspace) .admin-studio-user-project-topbar.admin-studio-topbar.studio-minis-room-toolbar {
  position: fixed;
  top: 0;
  z-index: 200;
  margin-bottom: 0;
  padding: 0 var(--studio-minis-page-gutter);
  border: 0;
  border-radius: 0;
  background: var(--studio-minis-canvas);
  box-shadow: none;
  backdrop-filter: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .admin-studio-user-project-hero {
  border-color: rgba(17, 24, 39, 0.08);
  background:
    radial-gradient(circle at 14% 0%, rgba(15, 23, 42, 0.055), transparent 30%),
    radial-gradient(circle at 88% 28%, rgba(20, 184, 166, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 247, 241, 0.82));
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.06);
}

.studio-minis-page:not(.is-mini-flow-workspace) .admin-studio-user-project-hero p {
  color: rgba(17, 24, 39, 0.5);
}

.studio-minis-page:not(.is-mini-flow-workspace) .admin-studio-user-project-hero h1 {
  color: #111827;
}

.studio-minis-page:not(.is-mini-flow-workspace) .admin-studio-user-project-hero span {
  color: rgba(17, 24, 39, 0.62);
}

.admin-studio-user-project-topbar .studio-minis-room-heading strong {
  max-width: min(34vw, 360px);
  color: rgba(248, 250, 252, 0.86);
  font-size: 0.88rem;
}

.admin-studio-user-project-topbar .studio-minis-room-back-button {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.86);
}

.admin-studio-user-project-topbar .studio-minis-room-search {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.admin-studio-user-project-topbar .studio-minis-room-search input {
  color: #f8fafc;
}

.admin-studio-user-project-topbar .studio-minis-room-search.is-static span {
  min-width: 0;
  color: rgba(248, 250, 252, 0.72);
  font-size: 0.82rem;
  font-weight: 820;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 142px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.22);
}

.admin-studio-user-project-hero div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-studio-user-project-hero p,
.admin-studio-user-project-hero h1,
.admin-studio-user-project-hero span {
  margin: 0;
}

.admin-studio-user-project-hero p {
  color: rgba(248, 250, 252, 0.54);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-studio-user-project-hero h1 {
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 930;
  line-height: 0.96;
}

.admin-studio-user-project-hero span {
  max-width: 720px;
  color: rgba(248, 250, 252, 0.66);
  font-size: 0.95rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-user-project-hero > strong {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-size: 0.84rem;
  font-weight: 920;
  white-space: nowrap;
}

.admin-studio-user-project-storage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.86);
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-studio-user-project-storage.is-ready {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(236, 253, 245, 0.88);
  color: #047857;
}

.admin-studio-user-project-storage.is-blocked {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(255, 251, 235, 0.9);
  color: #92400e;
}

.admin-studio-user-project-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.admin-studio-user-project-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.admin-studio-user-project-search label:first-child {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  padding: 0 10px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.86);
  color: #64748b;
}

.admin-studio-user-project-search input[type="text"],
.admin-studio-user-project-search input[name="q"] {
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.admin-studio-user-project-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 780;
  white-space: nowrap;
}

.admin-studio-user-project-stats {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-user-project-stats div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.admin-studio-user-project-stats .is-waiting {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
}

.admin-studio-user-project-stats .is-clear {
  border-color: rgba(16, 185, 129, 0.24);
  background: rgba(236, 253, 245, 0.88);
  color: #047857;
}

.admin-studio-user-project-stats .is-paid {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.9);
  color: #0f766e;
}

.admin-studio-user-project-stats .is-production-ready {
  border-color: rgba(79, 70, 229, 0.24);
  background: rgba(238, 242, 255, 0.92);
  color: #4338ca;
}

.admin-studio-user-project-filter-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.admin-studio-user-project-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-user-project-stage-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 0.75rem;
  font-weight: 860;
  text-decoration: none;
}

.admin-studio-user-project-stage-tabs a strong {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: var(--foreground);
  font-size: 0.68rem;
  line-height: 1;
  text-align: center;
}

.admin-studio-user-project-stage-tabs a.is-active {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(238, 242, 255, 0.92);
  color: #4338ca;
}

.admin-studio-user-project-summary-menu {
  position: relative;
  z-index: 30;
}

.admin-studio-user-project-summary-menu summary {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-summary-menu summary::-webkit-details-marker {
  display: none;
}

.admin-studio-user-project-summary-menu summary:hover,
.admin-studio-user-project-summary-menu[open] summary {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(238, 242, 255, 0.94);
  color: #4338ca;
  transform: translateY(-1px);
}

.admin-studio-user-project-summary-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.14);
}

.admin-studio-user-project-summary-panel .admin-studio-user-project-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
}

.admin-studio-user-project-summary-panel .admin-studio-user-project-stats div {
  min-width: 0;
  justify-content: flex-start;
}

.admin-studio-user-project-summary-panel .admin-studio-user-project-toggle {
  width: 100%;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
}

.admin-studio-user-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}

.admin-studio-user-project-grid.is-empty {
  grid-template-columns: 1fr;
}

.admin-studio-user-project-toolbar.is-client-summary {
  grid-template-columns: minmax(0, 1fr) auto;
}

.admin-studio-user-project-toggle {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
}

.admin-studio-client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.admin-studio-client-grid.is-empty {
  grid-template-columns: 1fr;
}

.admin-studio-client-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(17, 18, 20, 0.92);
  color: #f8fafc;
  text-decoration: none;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-client-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  outline: none;
  transform: translateY(-2px);
}

.admin-studio-client-card-media {
  position: relative;
  display: grid;
  min-height: 238px;
  overflow: hidden;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(59, 130, 246, 0.11)),
    #141518;
}

.admin-studio-client-card-media.has-2-covers,
.admin-studio-client-card-media.has-3-covers,
.admin-studio-client-card-media.has-4-covers {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-studio-client-card-media img,
.admin-studio-client-card-media b {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 238px;
}

.admin-studio-client-card-media img {
  object-fit: cover;
  transform: scale(1.001);
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.admin-studio-client-card:is(:hover, :focus-visible) .admin-studio-client-card-media img {
  filter: brightness(0.82);
  transform: scale(1.018);
}

.admin-studio-client-card-media b {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 3rem;
  font-weight: 950;
}

.admin-studio-client-card-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 36%, rgba(0, 0, 0, 0.72)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 54%);
  pointer-events: none;
}

.admin-studio-client-card-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  max-width: calc(100% - 24px);
  min-height: 30px;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(14px);
}

.admin-studio-client-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px 0;
}

.admin-studio-client-card-eyebrow,
.admin-studio-client-card-title,
.admin-studio-client-card-stats {
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
}

.admin-studio-client-card-eyebrow {
  justify-content: space-between;
  color: rgba(248, 250, 252, 0.52);
  font-size: 0.68rem;
  font-weight: 820;
}

.admin-studio-client-card-copy strong {
  min-width: 0;
  overflow: hidden;
  color: #f8fafc;
  font-size: 1.04rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-card-copy small {
  display: -webkit-box;
  min-height: 37px;
  overflow: hidden;
  color: rgba(248, 250, 252, 0.62);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-client-card-title {
  justify-content: space-between;
  padding: 8px 14px 0;
  color: rgba(248, 250, 252, 0.86);
  font-size: 0.82rem;
  font-weight: 860;
}

.admin-studio-client-card-title em {
  color: rgba(248, 250, 252, 0.48);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 820;
  white-space: nowrap;
}

.admin-studio-client-card-stats {
  flex-wrap: wrap;
  padding: 10px 14px 14px;
}

.admin-studio-client-card-stats span {
  display: inline-flex;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(248, 250, 252, 0.66);
  font-size: 0.66rem;
  font-weight: 880;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-card-stats span.is-email-sent {
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.13);
  color: rgba(187, 247, 208, 0.9);
}

.admin-studio-client-card-stats span.is-email-pending {
  border: 1px solid rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.12);
  color: rgba(254, 240, 138, 0.86);
}

.admin-studio-client-card-stats span.is-email-failed {
  border: 1px solid rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(254, 202, 202, 0.94);
}

.admin-studio-client-card-stats span.is-checkout-issue {
  border: 1px solid rgba(251, 113, 133, 0.26);
  background: rgba(251, 113, 133, 0.14);
  color: rgba(255, 228, 230, 0.94);
}

.admin-studio-client-card-stats span.is-customer-action {
  border: 1px solid rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.13);
  color: rgba(254, 240, 138, 0.94);
}

.admin-studio-client-card-hover {
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 4;
  display: grid;
  gap: 2px;
  min-height: 48px;
  justify-content: start;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.62);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
  backdrop-filter: blur(16px);
}

.admin-studio-client-card-hover span,
.admin-studio-client-card-hover small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-card-hover span {
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-studio-client-card-hover small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.66rem;
  font-weight: 720;
}

.admin-studio-client-card:is(:hover, :focus-visible) .admin-studio-client-card-hover {
  opacity: 1;
  transform: translateY(0);
}

.admin-studio-client-card.is-production-ready {
  border-color: rgba(125, 211, 252, 0.22);
}

.admin-studio-client-card.is-in-production {
  border-color: rgba(251, 191, 36, 0.26);
  box-shadow: 0 18px 58px rgba(146, 64, 14, 0.18);
}

.admin-studio-client-card.is-delivered {
  border-color: rgba(16, 185, 129, 0.22);
}

.admin-studio-client-card.is-checkout-issue {
  border-color: rgba(251, 113, 133, 0.28);
  box-shadow: 0 18px 58px rgba(136, 19, 55, 0.2);
}

.admin-studio-client-account-strip {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(82px, auto));
  gap: 8px;
  align-items: stretch;
}

.admin-studio-client-account-strip > div {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  align-content: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(248, 250, 252, 0.76);
}

.admin-studio-client-account-strip svg {
  grid-row: span 2;
  align-self: center;
  color: rgba(248, 250, 252, 0.44);
}

.admin-studio-client-account-strip span,
.admin-studio-client-account-strip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-account-strip span {
  color: rgba(248, 250, 252, 0.48);
  font-size: 0.63rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-client-account-strip strong {
  color: #f8fafc;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-studio-client-account-strip > div.is-clear {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.1);
}

.admin-studio-client-account-strip > div.is-warning {
  border-color: rgba(225, 29, 72, 0.22);
  background: rgba(225, 29, 72, 0.12);
}

.admin-studio-client-production-console {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(286px, 0.75fr);
  gap: 16px;
  align-items: stretch;
}

.admin-studio-client-primary-room {
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(20, 184, 166, 0.1), transparent 34%),
    radial-gradient(circle at 90% 24%, rgba(79, 70, 229, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.8);
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.065);
}

.admin-studio-client-primary-media {
  position: relative;
  display: grid;
  min-height: 248px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.1)),
    #f1eee5;
  color: rgba(17, 24, 39, 0.48);
  text-decoration: none;
}

.admin-studio-client-primary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-client-primary-media span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(14px);
}

.admin-studio-client-primary-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: 4px;
}

.admin-studio-client-primary-label {
  width: fit-content;
  color: rgba(17, 24, 39, 0.48);
  font-size: 0.72rem;
  font-weight: 930;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-client-primary-copy h1,
.admin-studio-client-primary-copy p {
  margin: 0;
}

.admin-studio-client-primary-copy h1 {
  max-width: 12ch;
  color: #111827;
  font-size: clamp(2rem, 4vw, 4.2rem);
  font-weight: 940;
  line-height: 0.92;
  overflow-wrap: anywhere;
}

.admin-studio-client-primary-copy p {
  color: rgba(17, 24, 39, 0.58);
  font-size: 0.86rem;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.admin-studio-client-primary-stats,
.admin-studio-client-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-client-primary-stats span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.055);
  color: rgba(17, 24, 39, 0.62);
  font-size: 0.72rem;
  font-weight: 860;
}

.admin-studio-client-primary-actions a,
.admin-studio-client-primary-actions button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #111827;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.admin-studio-client-primary-actions a:first-child,
.admin-studio-client-primary-actions button {
  background: #111827;
  color: #ffffff;
}

.admin-studio-client-storyboard-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.9);
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-client-storyboard-pill.is-live {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.92);
  color: #0f766e;
}

.admin-studio-client-production-runway {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.admin-studio-client-production-runway > div {
  display: grid;
  min-width: 0;
  align-content: space-between;
  gap: 7px;
  min-height: 142px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045);
}

.admin-studio-client-production-runway > div svg {
  color: rgba(17, 24, 39, 0.42);
}

.admin-studio-client-production-runway span,
.admin-studio-client-production-runway strong,
.admin-studio-client-production-runway small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-client-production-runway span {
  color: rgba(17, 24, 39, 0.54);
  font-size: 0.7rem;
  font-weight: 920;
  text-transform: uppercase;
}

.admin-studio-client-production-runway strong {
  color: #111827;
  font-size: 1.5rem;
  font-weight: 940;
  line-height: 1;
}

.admin-studio-client-production-runway small {
  color: rgba(17, 24, 39, 0.56);
  font-size: 0.72rem;
  font-weight: 780;
}

.admin-studio-client-production-runway > div.is-ready {
  border-color: rgba(20, 184, 166, 0.2);
  background: rgba(240, 253, 250, 0.82);
}

.admin-studio-client-production-runway > div.is-blocked {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.82);
}

.admin-studio-client-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-client-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-client-section-head span,
.admin-studio-client-section-head h2,
.admin-studio-client-section-head strong {
  margin: 0;
}

.admin-studio-client-section-head span {
  color: rgba(17, 24, 39, 0.5);
  font-size: 0.7rem;
  font-weight: 930;
  text-transform: uppercase;
}

.admin-studio-client-section-head h2 {
  color: #111827;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 930;
  line-height: 1;
}

.admin-studio-client-section-head strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.07);
  color: rgba(17, 24, 39, 0.66);
  font-size: 0.72rem;
  font-weight: 880;
  white-space: nowrap;
}

.admin-studio-client-workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.admin-studio-client-workspace-project-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.028)),
    rgba(17, 18, 20, 0.92);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
  cursor: pointer;
}

.admin-studio-client-workspace-project-card:is(:hover, :focus-within) {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  transform: translateY(-2px);
}

.admin-studio-client-workspace-project-card.is-checkout-issue {
  border-color: rgba(251, 113, 133, 0.28);
  box-shadow: 0 18px 58px rgba(136, 19, 55, 0.2);
}

.admin-studio-client-workspace-card-hitarea {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}

.admin-studio-client-workspace-project-card > :not(.admin-studio-client-workspace-card-hitarea) {
  position: relative;
  z-index: 2;
}

.admin-studio-client-workspace-card-hitarea:focus-visible {
  outline: 3px solid rgba(17, 24, 39, 0.22);
  outline-offset: 3px;
}

.admin-studio-client-workspace-project-card .admin-studio-user-project-links {
  position: relative;
  z-index: 4;
}

.admin-studio-client-workspace-project-card .admin-studio-user-project-links a {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  text-decoration: none;
}

.admin-studio-client-workspace-project-card .admin-studio-user-project-links a:first-child {
  background: #111827;
  color: #ffffff;
}

.admin-studio-client-workspace-project-card .admin-studio-user-project-links a:last-child {
  background: rgba(17, 24, 39, 0.07);
  color: rgba(17, 24, 39, 0.72);
}

.admin-studio-client-workspace-project-cover {
  position: relative;
  display: grid;
  min-height: 0;
  aspect-ratio: 1.46;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(59, 130, 246, 0.11)),
    #141518;
  color: rgba(248, 250, 252, 0.58);
  text-decoration: none;
}

.admin-studio-client-workspace-project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.admin-studio-client-workspace-project-card:is(:hover, :focus-within) .admin-studio-client-workspace-project-cover img {
  filter: brightness(0.84);
  transform: scale(1.018);
}

.admin-studio-client-workspace-project-cover::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 46%, rgba(0, 0, 0, 0.68)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 64%);
  pointer-events: none;
}

.admin-studio-client-workspace-project-copy {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 13px 14px 14px;
}

.admin-studio-client-workspace-project-copy h2,
.admin-studio-client-workspace-project-copy p {
  margin: 0;
}

.admin-studio-client-workspace-project-copy h2 {
  overflow: hidden;
  color: #f8fafc;
  font-size: 1.04rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-workspace-project-copy p {
  overflow: hidden;
  color: rgba(248, 250, 252, 0.58);
  font-size: 0.76rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-room-status-row,
.admin-studio-client-room-meta,
.admin-studio-client-room-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.admin-studio-client-room-status-row span,
.admin-studio-client-room-meta span {
  display: inline-flex;
  max-width: 100%;
  min-height: 25px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(248, 250, 252, 0.66);
  font-size: 0.66rem;
  font-weight: 880;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-client-room-status-row span.is-paid,
.admin-studio-client-room-status-row span.is-delivered {
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.13);
  color: rgba(187, 247, 208, 0.92);
}

.admin-studio-client-room-status-row span.is-unpaid,
.admin-studio-client-room-status-row span.is-progress,
.admin-studio-client-room-meta span.is-customer-action {
  border: 1px solid rgba(251, 191, 36, 0.2);
  background: rgba(251, 191, 36, 0.12);
  color: rgba(254, 240, 138, 0.9);
}

.admin-studio-client-room-status-row span.is-board {
  border: 1px solid rgba(125, 211, 252, 0.2);
  background: rgba(14, 165, 233, 0.12);
  color: rgba(186, 230, 253, 0.92);
}

.admin-studio-client-room-meta span.is-email-failed {
  border: 1px solid rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(254, 202, 202, 0.94);
}

.admin-studio-client-room-foot {
  justify-content: space-between;
  padding-top: 2px;
  color: rgba(248, 250, 252, 0.44);
  font-size: 0.68rem;
  font-weight: 800;
}

.admin-studio-client-room-foot form {
  position: relative;
  z-index: 4;
}

.admin-studio-client-room-foot button {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.78);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 880;
  cursor: pointer;
}

.admin-studio-user-project-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.admin-studio-user-project-card.is-production-ready {
  border-color: rgba(79, 70, 229, 0.2);
  box-shadow:
    0 16px 42px rgba(79, 70, 229, 0.1),
    0 14px 36px rgba(15, 23, 42, 0.045);
}

.admin-studio-user-project-card.is-delivered {
  border-color: rgba(16, 185, 129, 0.18);
}

.admin-studio-user-project-card-main {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.admin-studio-user-project-cover {
  display: grid;
  place-items: center;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(59, 130, 246, 0.09)),
    #f1f5f9;
  color: #64748b;
}

.admin-studio-user-project-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-user-project-copy {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}

.admin-studio-user-project-head,
.admin-studio-user-project-meta,
.admin-studio-user-project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.admin-studio-user-project-head {
  justify-content: space-between;
}

.admin-studio-user-project-status-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-studio-user-project-head time {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 780;
}

.admin-studio-user-project-status,
.admin-studio-user-project-payment-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 5px 8px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.86);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-user-project-payment-status {
  border-color: rgba(100, 116, 139, 0.14);
  background: rgba(248, 250, 252, 0.86);
  color: #475569;
}

.admin-studio-user-project-payment-status.is-production-ready {
  border-color: rgba(79, 70, 229, 0.22);
  background: rgba(238, 242, 255, 0.92);
  color: #4338ca;
}

.admin-studio-user-project-payment-status.is-delivered {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(236, 253, 245, 0.88);
  color: #047857;
}

.admin-studio-user-project-payment-status.is-checkout-pending,
.admin-studio-user-project-payment-status.is-refs-ready {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.9);
  color: #92400e;
}

.admin-studio-user-project-payment-status.is-checkout-issue {
  border-color: rgba(225, 29, 72, 0.2);
  background: rgba(255, 241, 242, 0.92);
  color: #be123c;
}

.admin-studio-user-project-status.is-active {
  border-color: rgba(16, 185, 129, 0.22);
  background: rgba(236, 253, 245, 0.88);
  color: #047857;
}

.admin-studio-user-project-status.is-trashed,
.admin-studio-user-project-status.is-archived {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.9);
  color: #92400e;
}

.admin-studio-user-project-copy h2,
.admin-studio-user-project-copy p {
  margin: 0;
}

.admin-studio-user-project-copy h2 {
  color: var(--foreground);
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  font-weight: 920;
  line-height: 1.05;
}

.admin-studio-user-project-copy p {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-studio-user-project-copy .admin-studio-user-project-handoff-note {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 780;
}

.admin-studio-user-project-meta span {
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.admin-studio-user-project-meta span.is-email-sent {
  border: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(16, 185, 129, 0.11);
  color: #047857;
}

.admin-studio-user-project-meta span.is-email-failed {
  border: 1px solid rgba(225, 29, 72, 0.2);
  background: rgba(255, 241, 242, 0.92);
  color: #be123c;
}

.admin-studio-user-project-meta span.is-customer-action {
  border: 1px solid rgba(217, 119, 6, 0.2);
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
}

.admin-studio-user-project-links a,
.admin-studio-user-project-links button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 850;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.admin-studio-user-project-links form {
  display: inline-flex;
  margin: 0;
}

.admin-studio-user-project-links button:is(:hover, :focus-visible) {
  outline: none;
  color: var(--brand-700);
}

.admin-studio-user-project-reference-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-user-project-reference-strip figure {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.admin-studio-user-project-reference-strip img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 12px;
  background: #f1f5f9;
  object-fit: cover;
}

.admin-studio-user-project-reference-strip figcaption {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 740;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-empty-line,
.admin-studio-user-project-deliverables-empty {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
}

.admin-studio-user-project-delivery {
  display: grid;
  gap: 10px;
}

.admin-studio-user-project-delivery-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: flex-end;
}

.admin-studio-user-project-delivery-readiness {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.08);
}

.admin-studio-user-project-delivery-readiness span,
.admin-studio-user-project-delivery-readiness strong,
.admin-studio-user-project-delivery-readiness p {
  margin: 0;
}

.admin-studio-user-project-delivery-readiness span {
  color: #047857;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.admin-studio-user-project-delivery-readiness strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-studio-user-project-delivery-readiness p {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.42;
}

.admin-studio-user-project-delivery-warning {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 11px 12px;
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
}

.admin-studio-user-project-delivery-warning.is-final-review {
  border-color: rgba(59, 130, 246, 0.28);
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}

.admin-studio-user-project-delivery-warning.is-final-review input {
  accent-color: #2563eb;
}

.admin-studio-user-project-delivery-warning input {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin-top: 2px;
  padding: 0 !important;
  accent-color: #f59e0b;
}

.admin-studio-user-project-delivery-warning span {
  color: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.35;
  text-transform: none;
}

.admin-studio-user-project-delivery-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-user-project-delivery-form label small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.34;
  text-transform: none;
}

.admin-studio-user-project-delivery-form input,
.admin-studio-user-project-delivery-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
}

.admin-studio-user-project-delivery-form input {
  min-height: 38px;
  padding: 8px 10px;
}

.admin-studio-user-project-delivery-form input[type="file"] {
  padding: 6px 8px;
  color: var(--muted-foreground);
}

.admin-studio-user-project-delivery-form textarea {
  min-height: 78px;
  padding: 10px;
  resize: vertical;
}

.admin-studio-user-project-delivery-note {
  grid-column: 1 / -1;
}

.admin-studio-user-project-delivery-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
}

.admin-studio-user-project-deliverables {
  display: grid;
  gap: 8px;
}

.admin-studio-user-project-deliverable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.84);
}

.admin-studio-user-project-deliverable.is-archived {
  opacity: 0.62;
}

.admin-studio-user-project-deliverable > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-user-project-deliverable strong,
.admin-studio-user-project-deliverable small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-deliverable strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 880;
}

.admin-studio-user-project-deliverable span {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.11);
  color: #047857;
  font-size: 0.66rem;
  font-weight: 880;
  line-height: 1;
}

.admin-studio-user-project-deliverable.is-archived span {
  background: rgba(100, 116, 139, 0.12);
  color: #64748b;
}

.admin-studio-user-project-deliverable .admin-studio-user-project-deliverable-notification {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  line-height: 1.25;
}

.admin-studio-user-project-deliverable .admin-studio-user-project-deliverable-notification.is-sent {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}

.admin-studio-user-project-deliverable .admin-studio-user-project-deliverable-notification.is-failed {
  background: rgba(239, 68, 68, 0.13);
  color: #dc2626;
}

.admin-studio-user-project-deliverable small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 720;
}

.admin-studio-user-project-deliverable > div:last-child {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.admin-studio-user-project-deliverable a,
.admin-studio-user-project-deliverable button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
}

.admin-studio-user-project-deliverable button {
  cursor: pointer;
}

.admin-studio-user-project-deliverable button:disabled {
  cursor: progress;
  opacity: 0.66;
}

.admin-studio-user-project-delivery-status {
  margin: 0;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 820;
}

.admin-studio-user-project-delivery-status.is-success {
  background: rgba(236, 253, 245, 0.9);
  color: #047857;
}

.admin-studio-user-project-delivery-status.is-error {
  background: rgba(254, 242, 242, 0.92);
  color: #b91c1c;
}

.admin-studio-user-project-detail-page {
  gap: 18px;
}

.admin-studio-production-room-hero {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 0%, rgba(20, 184, 166, 0.1), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(79, 70, 229, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 44px rgba(17, 24, 39, 0.065);
}

.admin-studio-production-room-hero-media {
  position: relative;
  display: grid;
  min-height: 252px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(20, 184, 166, 0.1)),
    #f1eee5;
  color: rgba(17, 24, 39, 0.48);
  text-decoration: none;
}

.admin-studio-production-room-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-production-room-hero-media span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(14px);
}

.admin-studio-production-room-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(8px, 1.7vw, 18px);
}

.admin-studio-production-room-hero-copy h1,
.admin-studio-production-room-hero-copy p {
  margin: 0;
}

.admin-studio-production-room-hero-copy h1 {
  max-width: 13ch;
  color: #111827;
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 940;
  line-height: 0.92;
  overflow-wrap: anywhere;
}

.admin-studio-production-room-hero-copy p {
  max-width: 760px;
  color: rgba(17, 24, 39, 0.62);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
}

.admin-studio-production-room-tabs {
  position: sticky;
  top: 68px;
  z-index: 35;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(246, 244, 237, 0.88);
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.055);
  backdrop-filter: blur(18px) saturate(120%);
}

.admin-studio-production-room-tabs a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(17, 24, 39, 0.72);
  font-size: 0.76rem;
  font-weight: 880;
  text-decoration: none;
}

.admin-studio-production-room-tabs a:is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.16);
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
}

.admin-studio-production-room-tabs strong {
  min-width: 21px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  font-size: 0.66rem;
  line-height: 1;
  text-align: center;
}

.admin-studio-production-room-runway {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.admin-studio-production-room-runway a {
  display: grid;
  min-width: 0;
  align-content: space-between;
  gap: 7px;
  min-height: 142px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.045);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-production-room-runway a:is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.16);
  box-shadow: 0 16px 36px rgba(17, 24, 39, 0.075);
  transform: translateY(-1px);
}

.admin-studio-production-room-runway svg {
  color: rgba(17, 24, 39, 0.42);
}

.admin-studio-production-room-runway span,
.admin-studio-production-room-runway strong,
.admin-studio-production-room-runway small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-production-room-runway span {
  color: rgba(17, 24, 39, 0.52);
  font-size: 0.68rem;
  font-weight: 930;
  text-transform: uppercase;
}

.admin-studio-production-room-runway strong {
  color: #111827;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 940;
  line-height: 1;
  text-transform: capitalize;
}

.admin-studio-production-room-runway small {
  color: rgba(17, 24, 39, 0.56);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.28;
}

.admin-studio-production-room-runway a.is-ready {
  border-color: rgba(20, 184, 166, 0.2);
  background: rgba(240, 253, 250, 0.82);
}

.admin-studio-production-room-runway a.is-blocked {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.82);
}

.admin-studio-production-room-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.admin-studio-production-room-sidebar,
.admin-studio-production-room-sections {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.admin-studio-production-room-sidebar {
  position: sticky;
  top: 128px;
}

.admin-studio-production-room-section {
  scroll-margin-top: 132px;
}

.admin-studio-production-room-split {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(360px, 1.28fr);
  gap: 16px;
  align-items: start;
}

.admin-studio-user-project-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-user-project-detail-actions a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 860;
  text-decoration: none;
}

.admin-studio-user-project-detail-summary {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) repeat(3, minmax(150px, 1fr));
  gap: 10px;
}

.admin-studio-user-project-detail-summary > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 58px;
  padding: 13px 14px;
  border: 1px solid rgba(100, 116, 139, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  color: #475569;
  font-size: 0.78rem;
  font-weight: 850;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.admin-studio-user-project-detail-summary > div span,
.admin-studio-user-project-detail-summary > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-user-project-detail-status {
  justify-content: space-between;
}

.admin-studio-user-project-detail-status span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-user-project-detail-status strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 920;
}

.admin-studio-user-project-detail-status.is-production-ready span,
.admin-studio-user-project-detail-status.is-delivered span {
  background: rgba(236, 253, 245, 0.88);
  color: #047857;
}

.admin-studio-user-project-detail-status.is-checkout-pending span,
.admin-studio-user-project-detail-status.is-refs-ready span,
.admin-studio-user-project-detail-status.is-waiting-photos span {
  background: rgba(255, 251, 235, 0.92);
  color: #92400e;
}

.admin-studio-user-project-detail-status.is-checkout-issue span {
  background: rgba(255, 241, 242, 0.92);
  color: #be123c;
}

.admin-studio-user-project-detail-grid,
.admin-studio-user-project-production-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}

.admin-studio-user-project-detail-grid {
  grid-template-columns: minmax(300px, 0.82fr) minmax(360px, 1.18fr);
}

.admin-studio-user-project-production-grid {
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
}

.admin-studio-user-project-detail-card,
.admin-studio-user-project-storyboard-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.055);
}

.admin-studio-user-project-detail-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-user-project-detail-section-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-user-project-detail-section-head span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-user-project-detail-section-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  font-weight: 920;
  line-height: 1.08;
}

.admin-studio-user-project-detail-section-head p {
  max-width: 680px;
  margin: 2px 0 0;
  color: rgba(17, 24, 39, 0.56);
  font-size: 0.8rem;
  font-weight: 740;
  line-height: 1.42;
}

.admin-studio-user-project-fact-list,
.admin-studio-user-project-order dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.admin-studio-user-project-fact-list div,
.admin-studio-user-project-order dl div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  min-width: 0;
}

.admin-studio-user-project-fact-list dt,
.admin-studio-user-project-order dt {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-user-project-fact-list dd,
.admin-studio-user-project-order dd {
  min-width: 0;
  margin: 0;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 780;
  overflow-wrap: anywhere;
}

.admin-studio-user-project-brief {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.055);
  color: #475569;
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.admin-studio-user-project-order-list {
  display: grid;
  gap: 10px;
}

.admin-studio-user-project-order {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-studio-user-project-order > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-user-project-order strong {
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 920;
}

.admin-studio-user-project-order span {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.075);
  color: #475569;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-user-project-order.is-paid span,
.admin-studio-user-project-order.is-in_production span,
.admin-studio-user-project-order.is-delivered span {
  background: rgba(236, 253, 245, 0.9);
  color: #047857;
}

.admin-studio-user-project-order-notifications {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-user-project-order-notifications form {
  display: inline-flex;
  margin: 0;
}

.admin-studio-user-project-order .admin-studio-user-project-order-notifications span {
  max-width: 100%;
  min-height: 24px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  font-size: 0.64rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.admin-studio-user-project-order .admin-studio-user-project-order-notifications span.is-sent {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}

.admin-studio-user-project-order .admin-studio-user-project-order-notifications span.is-failed {
  background: rgba(239, 68, 68, 0.13);
  color: #dc2626;
}

.admin-studio-user-project-order-notifications button {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  padding: 4px 8px;
  color: #334155;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.admin-studio-user-project-order-notifications button:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.18);
  background: #ffffff;
  outline: none;
}

.admin-studio-user-project-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.admin-studio-production-room-reference-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-production-room-reference-summary span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.62);
  font-size: 0.72rem;
  font-weight: 860;
}

.admin-studio-user-project-reference-grid figure {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.admin-studio-user-project-reference-grid a {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #f1f5f9;
}

.admin-studio-user-project-reference-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.admin-studio-user-project-reference-grid figcaption {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-user-project-reference-grid strong,
.admin-studio-user-project-reference-grid span,
.admin-studio-user-project-reference-grid em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-reference-grid strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 860;
}

.admin-studio-user-project-reference-grid span,
.admin-studio-user-project-reference-grid em {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 720;
}

.admin-studio-user-project-reference-grid em {
  font-style: normal;
}

.admin-studio-user-project-storyboard-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.admin-studio-user-project-storyboard-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 850;
}

.admin-studio-user-project-storyboard-card textarea {
  width: 100%;
  min-height: 520px;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  outline: 0;
  background: rgba(15, 23, 42, 0.035);
  color: var(--foreground);
  font: inherit;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.55;
  resize: vertical;
}

.admin-studio-user-project-detail-delivery {
  max-width: none;
}

.admin-studio-user-project-command-log {
  align-content: start;
}

.admin-studio-user-project-command-list {
  display: grid;
  gap: 10px;
}

.admin-studio-user-project-command-list article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-studio-user-project-command-list article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-user-project-command-list strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 880;
}

.admin-studio-user-project-command-list time {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
}

.admin-studio-user-project-command-list p {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.42;
  white-space: pre-wrap;
}

.admin-studio-user-project-command-list span {
  width: fit-content;
  min-height: 25px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 880;
}

.admin-studio-user-project-pipeline-card {
  align-content: start;
}

.admin-studio-user-project-pipeline-card p {
  margin: 0;
  max-width: 860px;
  color: #475569;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.48;
}

.admin-studio-user-project-pipeline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.admin-studio-user-project-pipeline-actions form {
  margin: 0;
}

.admin-studio-user-project-pipeline-actions a,
.admin-studio-user-project-pipeline-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 880;
  text-decoration: none;
}

.admin-studio-user-project-production-board {
  padding-bottom: 172px;
}

.admin-studio-user-project-production-board .admin-studio-episode-workspace-topbar {
  border-bottom: 0;
}

.admin-studio-user-project-intake-board {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 76px var(--studio-workspace-gutter, 22px) 220px;
}

.admin-studio-user-project-intake-hero,
.admin-studio-user-project-intake-photos {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.06);
}

.admin-studio-user-project-intake-hero {
  position: sticky;
  top: 86px;
}

.admin-studio-user-project-intake-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.admin-studio-user-project-intake-photo-grid a {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.08);
  aspect-ratio: 4 / 5;
  color: #ffffff;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-intake-photo-grid a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-user-project-intake-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-user-project-intake-photo-grid span,
.admin-studio-user-project-intake-photo-grid strong {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.admin-studio-user-project-intake-photo-grid span {
  top: 8px;
  left: 8px;
  min-height: 24px;
  padding: 0 8px;
  background: rgba(0, 0, 0, 0.48);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-studio-user-project-intake-photo-grid strong {
  right: 8px;
  bottom: 8px;
  min-height: 24px;
  max-width: calc(100% - 16px);
  padding: 0 8px;
  overflow: hidden;
  background: rgba(143, 255, 190, 0.18);
  color: rgba(224, 255, 237, 0.96);
  font-size: 0.64rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-settings-drawer {
  position: relative;
}

.admin-studio-user-project-settings-grid {
  width: min(1120px, calc(100vw - 40px));
  max-height: min(760px, calc(100vh - 116px));
  overflow: auto;
  align-items: start;
}

.admin-studio-user-project-settings-grid .admin-studio-user-project-detail-card {
  min-height: 0;
  box-shadow: none;
}

.admin-studio-user-project-settings-wide {
  grid-column: 1 / -1;
}

.admin-studio-user-project-production-actions-card {
  order: -3;
}

.admin-studio-user-project-free-preview-job {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
}

.admin-studio-user-project-free-preview-job-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-user-project-free-preview-job-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-user-project-free-preview-job-head span,
.admin-studio-user-project-free-preview-job-meta span,
.admin-studio-user-project-free-preview-steps small {
  color: rgba(71, 85, 105, 0.86);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-user-project-free-preview-job-head strong {
  color: #111827;
  font-size: 1.02rem;
  font-weight: 930;
  line-height: 1.1;
}

.admin-studio-user-project-free-preview-job-head small {
  color: rgba(71, 85, 105, 0.78);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.35;
}

.admin-studio-user-project-free-preview-job-head form {
  flex: 0 0 auto;
  margin: 0;
}

.admin-studio-user-project-free-preview-job-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-studio-user-project-free-preview-job-head button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-studio-user-project-free-preview-job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-user-project-free-preview-board {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-studio-user-project-free-preview-board-head {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-user-project-free-preview-board-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-user-project-free-preview-board-head strong {
  color: #111827;
  font-size: 0.92rem;
  font-weight: 930;
  line-height: 1.1;
}

.admin-studio-user-project-free-preview-board-head small {
  color: rgba(71, 85, 105, 0.78);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.35;
}

.admin-studio-user-project-free-preview-board-head > span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  padding: 0 9px;
  color: rgba(71, 85, 105, 0.82);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-studio-user-project-free-preview-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.admin-studio-user-project-free-preview-shot-card {
  position: relative;
  display: grid;
  gap: 11px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.74)),
    rgba(255, 255, 255, 0.72);
  padding: 12px;
}

.admin-studio-user-project-free-preview-shot-card.is-running::after,
.admin-studio-user-project-free-preview-shot-card.is-ready::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 200, 0, 0.12), transparent);
  transform: translateX(-120%);
  animation: admin-studio-free-preview-card-sheen 3.4s ease-in-out infinite;
}

.admin-studio-user-project-free-preview-shot-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-user-project-free-preview-shot-title span {
  color: rgba(71, 85, 105, 0.86);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-user-project-free-preview-shot-title strong {
  overflow: hidden;
  color: #111827;
  font-size: 0.94rem;
  font-weight: 930;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-free-preview-shot-title small {
  color: rgba(71, 85, 105, 0.74);
  font-size: 0.7rem;
  font-weight: 760;
  text-transform: capitalize;
}

.admin-studio-user-project-free-preview-shot-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-user-project-free-preview-shot-media figure {
  display: grid;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.06);
}

.admin-studio-user-project-free-preview-shot-media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #050505;
}

.admin-studio-user-project-free-preview-shot-media figure > div {
  display: grid;
  min-height: 168px;
  aspect-ratio: 4 / 5;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: rgba(71, 85, 105, 0.7);
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-user-project-free-preview-shot-media figure > div.is-generating svg {
  color: #d97706;
  animation: spin 900ms linear infinite;
}

.admin-studio-user-project-free-preview-shot-media figcaption {
  padding: 7px 8px;
  color: rgba(71, 85, 105, 0.76);
  font-size: 0.66rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-studio-user-project-free-preview-shot-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-studio-user-project-free-preview-shot-footer span,
.admin-studio-user-project-free-preview-shot-footer a {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  padding: 0 9px;
  color: rgba(15, 23, 42, 0.74);
  font-size: 0.66rem;
  font-weight: 880;
  text-decoration: none;
  text-transform: uppercase;
}

.admin-studio-user-project-free-preview-shot-footer span.is-running,
.admin-studio-user-project-free-preview-shot-footer span.is-ready {
  background: rgba(255, 200, 0, 0.16);
  color: #92400e;
}

.admin-studio-user-project-free-preview-shot-footer span.is-done {
  background: rgba(34, 197, 94, 0.14);
  color: #166534;
}

.admin-studio-user-project-free-preview-shot-footer span.is-must {
  background: rgba(190, 24, 93, 0.12);
  color: #9d174d;
}

.admin-studio-user-project-free-preview-shot-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(71, 85, 105, 0.72);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

@keyframes admin-studio-free-preview-card-sheen {
  0% {
    transform: translateX(-120%);
  }

  54%,
  100% {
    transform: translateX(120%);
  }
}

.admin-studio-user-project-free-preview-image-review {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-studio-user-project-free-preview-image-review > div:first-child {
  display: grid;
  gap: 2px;
}

.admin-studio-user-project-free-preview-image-review strong {
  color: #111827;
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1.15;
}

.admin-studio-user-project-free-preview-image-review small {
  color: rgba(71, 85, 105, 0.78);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.35;
}

.admin-studio-user-project-free-preview-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 9px;
}

.admin-studio-user-project-free-preview-image-grid figure {
  display: grid;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-user-project-free-preview-image-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #0b0b0b;
}

.admin-studio-user-project-free-preview-image-grid figcaption {
  overflow: hidden;
  padding: 8px 9px;
  color: rgba(15, 23, 42, 0.78);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-studio-user-project-free-preview-video {
  display: block;
  width: 100%;
  max-height: min(68vh, 720px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: #050505;
  object-fit: contain;
}

.admin-studio-user-project-free-preview-job-meta span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  padding: 0 9px;
}

.admin-studio-user-project-free-preview-blockers,
.admin-studio-user-project-free-preview-steps {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-studio-user-project-free-preview-blockers li {
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.13);
  color: #92400e;
  padding: 8px 10px;
  font-size: 0.74rem;
  font-weight: 820;
  line-height: 1.35;
}

.admin-studio-user-project-free-preview-steps {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-studio-user-project-free-preview-steps li {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
}

.admin-studio-user-project-free-preview-steps span {
  overflow: hidden;
  color: #172033;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-scene-action-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  padding: 0 11px;
  color: rgba(15, 23, 42, 0.74);
  font-size: 0.72rem;
  font-weight: 860;
}

.admin-studio-free-preview-auto-refresh {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 200, 0, 0.24);
  border-radius: 999px;
  background: rgba(17, 18, 20, 0.88);
  padding: 0 12px;
  color: rgba(255, 232, 137, 0.92);
  font-size: 0.72rem;
  font-weight: 860;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px) saturate(120%);
}

.admin-studio-user-project-settings-grid .admin-studio-user-project-storyboard-card {
  min-height: 0;
  box-shadow: none;
}

.admin-studio-user-project-settings-grid .admin-studio-user-project-storyboard-card textarea {
  min-height: 260px;
}

.admin-studio-user-project-settings-grid .admin-studio-user-project-pipeline-actions {
  align-items: center;
}

.admin-studio-user-project-delivery-modal {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
}

.admin-studio-user-project-delivery-modal > summary {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 13px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 880;
  line-height: 1;
  list-style: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-delivery-modal > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-user-project-delivery-modal > summary:hover {
  transform: translateY(-1px);
}

.admin-studio-user-project-delivery-modal[open] > summary {
  border-color: rgba(37, 99, 235, 0.28);
  background: #f8fafc;
  color: #0f172a;
}

.admin-studio-user-project-delivery-modal[open]::before {
  position: absolute;
  z-index: -1;
  inset: -6px;
  border-radius: 22px;
  background: rgba(37, 99, 235, 0.08);
  content: "";
  pointer-events: none;
}

.admin-studio-user-project-delivery-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-height: none;
  margin-top: 10px;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
  color: var(--foreground);
  backdrop-filter: blur(22px);
}

.admin-studio-user-project-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.admin-studio-user-project-export-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.admin-studio-user-project-export-actions a {
  display: inline-flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 880;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-export-actions a:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background: #0f172a;
  transform: translateY(-1px);
}

.admin-studio-user-project-download-grid a {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(100, 116, 139, 0.13);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.72);
  color: #334155;
  font-size: 0.74rem;
  font-weight: 820;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-download-grid a:hover {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(239, 246, 255, 0.88);
  color: #1d4ed8;
  transform: translateY(-1px);
}

.admin-studio-user-project-export-actions a svg,
.admin-studio-user-project-download-grid a svg {
  flex: 0 0 auto;
}

.admin-studio-user-project-export-actions a span,
.admin-studio-user-project-download-grid a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-character-lock-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.62fr) minmax(280px, 1fr);
  gap: 14px;
  align-items: stretch;
}

.admin-studio-user-project-character-lock-refs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-user-project-character-lock-refs figure {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.08);
  aspect-ratio: 4 / 5;
}

.admin-studio-user-project-character-lock-refs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-user-project-character-lock-refs figcaption {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.64);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.admin-studio-user-project-character-lock-empty {
  display: grid;
  min-height: 138px;
  grid-column: 1 / -1;
  place-items: center;
  gap: 8px;
  border: 1px dashed rgba(100, 116, 139, 0.24);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.52);
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 860;
}

.admin-studio-user-project-character-lock-steps {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid rgba(100, 116, 139, 0.13);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.66);
}

.admin-studio-user-project-character-lock-steps ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #475569;
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.42;
}

.admin-studio-user-project-character-lock-steps .admin-studio-user-project-pipeline-actions {
  gap: 8px;
}

.admin-studio-user-project-production-brief-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(360px, 1.28fr);
  gap: 14px;
  align-items: stretch;
}

.admin-studio-user-project-customer-brief-card {
  align-content: start;
}

.admin-studio-user-project-customer-brief-card .admin-studio-user-project-brief {
  font-size: 0.88rem;
  line-height: 1.55;
}

.admin-studio-user-project-source-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-studio-user-project-source-cards > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.13);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
}

.admin-studio-user-project-source-cards svg {
  width: 17px;
  height: 17px;
  color: #64748b;
}

.admin-studio-user-project-source-cards span,
.admin-studio-user-project-customer-note-panel span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-user-project-source-cards strong {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-source-cards small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-user-project-source-cards > div.is-ready {
  border-color: rgba(16, 185, 129, 0.19);
  background: rgba(236, 253, 245, 0.72);
}

.admin-studio-user-project-source-cards > div.is-ready svg {
  color: #059669;
}

.admin-studio-user-project-source-cards > div.is-warning {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(255, 251, 235, 0.76);
}

.admin-studio-user-project-source-cards > div.is-warning svg {
  color: #d97706;
}

.admin-studio-user-project-source-cards > div.is-missing {
  border-color: rgba(239, 68, 68, 0.16);
  background: rgba(254, 242, 242, 0.72);
}

.admin-studio-user-project-source-cards > div.is-missing svg {
  color: #dc2626;
}

.admin-studio-user-project-customer-note-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.13);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.045);
}

.admin-studio-user-project-customer-note-panel > div {
  display: flex;
  gap: 7px;
  align-items: center;
}

.admin-studio-user-project-customer-note-panel svg {
  width: 17px;
  height: 17px;
  color: #64748b;
}

.admin-studio-user-project-customer-note-panel p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.48;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.admin-studio-user-project-source-checklist {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-studio-user-project-source-checklist li {
  display: grid;
  grid-template-columns: auto minmax(96px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(100, 116, 139, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-studio-user-project-source-checklist li svg {
  width: 15px;
  height: 15px;
}

.admin-studio-user-project-source-checklist li.is-ready svg {
  color: #059669;
}

.admin-studio-user-project-source-checklist li.is-needed svg {
  color: #d97706;
}

.admin-studio-user-project-source-checklist span,
.admin-studio-user-project-source-checklist small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-source-checklist span {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-studio-user-project-source-checklist small {
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
}

.admin-studio-user-project-nudge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-user-project-nudge-actions form {
  margin: 0;
}

.admin-studio-user-project-nudge-actions button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #f8fafc;
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.admin-studio-user-project-nudge-actions button:hover {
  border-color: rgba(99, 102, 241, 0.42);
  background: #111827;
  transform: translateY(-1px);
}

.admin-studio-user-project-nudge-actions svg {
  width: 14px;
  height: 14px;
}

.admin-studio-user-project-email-log {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-studio-user-project-email-log > div {
  display: flex;
  gap: 7px;
  align-items: center;
}

.admin-studio-user-project-email-log > div svg {
  width: 15px;
  height: 15px;
  color: #64748b;
}

.admin-studio-user-project-email-log > div span {
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-user-project-email-log ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-studio-user-project-email-log li {
  display: grid;
  grid-template-columns: minmax(92px, 0.55fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(100, 116, 139, 0.1);
  border-radius: 11px;
  background: rgba(248, 250, 252, 0.7);
}

.admin-studio-user-project-email-log li > span,
.admin-studio-user-project-email-log li small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-user-project-email-log li > span {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 880;
}

.admin-studio-user-project-email-log li strong {
  width: fit-content;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 7px;
  color: #047857;
  font-size: 0.66rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-user-project-email-log li.is-failed strong {
  background: rgba(239, 68, 68, 0.13);
  color: #dc2626;
}

.admin-studio-user-project-email-log li small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
}

.admin-studio-user-project-email-log li em {
  grid-column: 1 / -1;
  color: #dc2626;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-user-project-email-log p {
  margin: 0;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-user-project-production-board .admin-studio-user-project-storyboard-card textarea {
  min-height: 340px;
}

.admin-studio-user-project-production-brief-grid .admin-studio-user-project-storyboard-card textarea {
  min-height: 390px;
}

.admin-studio-user-project-episode-runway form {
  margin: 0;
}

.admin-studio-user-project-episode-runway button {
  cursor: pointer;
  font: inherit;
}

.admin-studio-user-project-production-clock {
  display: block;
  max-width: 680px;
  margin-top: 6px;
  color: rgba(100, 116, 139, 0.92);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.35;
}

.admin-studio-user-project-production-action-guide {
  display: grid;
  max-width: 760px;
  gap: 7px;
  margin-top: 12px;
}

.admin-studio-user-project-production-action-guide span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.62);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.25;
}

.admin-studio-user-project-production-action-guide svg {
  flex: 0 0 auto;
  color: #64748b;
}

.admin-studio-user-project-board-head {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  color: var(--studio-admin-text, #111827);
}

.admin-studio-user-project-board-head > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.admin-studio-user-project-board-head > div:last-child {
  align-items: end;
  text-align: right;
}

.admin-studio-user-project-board-head span {
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-studio-user-project-board-head strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.45rem, 3vw, 2.7rem);
  font-weight: 950;
  line-height: 0.98;
}

.admin-studio-user-project-board-head p {
  max-width: 760px;
  margin: 0;
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.42;
}

.admin-studio-user-project-scene-board {
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  padding-bottom: 0;
}

.admin-studio-user-project-scene-board article {
  isolation: isolate;
}

.admin-studio-user-project-scene-board article.is-ai-bridge {
  border-color: rgba(129, 140, 248, 0.18);
}

.admin-studio-user-project-scene-board article > section {
  gap: 9px;
  padding: 0 0 12px;
}

.admin-studio-user-project-scene-board .admin-studio-episode-media-slot {
  aspect-ratio: 4 / 5;
}

.admin-studio-user-project-scene-board .admin-studio-episode-media-slot.is-empty > div {
  opacity: 1;
  transform: none;
}

.admin-studio-user-project-scene-board .admin-studio-episode-media-slot.is-empty > div svg {
  color: rgba(255, 255, 255, 0.82);
}

.admin-studio-user-project-scene-board .admin-studio-episode-media-slot.is-ai-bridge {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(145deg, rgba(79, 70, 229, 0.32), rgba(14, 165, 233, 0.16) 48%, rgba(15, 23, 42, 0.9));
}

.admin-studio-user-project-scene-board .admin-studio-episode-media-slot.is-ai-bridge b {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
}

.admin-studio-user-project-scene-board .admin-studio-episode-scene-card-title {
  min-height: 0;
}

.admin-studio-user-project-scene-lyric {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  padding: 0 12px;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.admin-studio-user-project-scene-source-note {
  display: -webkit-box;
  min-height: 38px;
  margin: 0;
  overflow: hidden;
  padding: 0 12px;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-user-project-scene-board article small {
  display: -webkit-box;
  min-height: 58px;
  margin: 0;
  overflow: hidden;
  padding: 0 12px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.34;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.admin-studio-user-project-scene-actions {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding: 0 12px;
}

.admin-studio-user-project-scene-actions a,
.admin-studio-user-project-scene-actions > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: #0f172a;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-studio-user-project-scene-actions > span {
  color: #64748b;
}

.admin-studio-user-project-scene-actions a:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}

.admin-studio-user-project-production-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.admin-studio-user-project-production-bottom-grid .admin-studio-user-project-detail-delivery {
  grid-column: 1 / -1;
}

html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-board-head strong,
html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-actions a {
  color: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-board-head p,
html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-lyric,
html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-source-note,
html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-board article small {
  color: rgba(248, 250, 252, 0.68);
}

html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-actions a,
html[data-theme="dark"] .admin-studio-user-project-production-board .admin-studio-user-project-scene-actions > span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .admin-studio-user-project-storage,
html[data-theme="dark"] .admin-studio-user-project-search,
html[data-theme="dark"] .admin-studio-user-project-search label:first-child,
html[data-theme="dark"] .admin-studio-user-project-stats div,
html[data-theme="dark"] .admin-studio-user-project-stage-tabs a,
html[data-theme="dark"] .admin-studio-user-project-card,
html[data-theme="dark"] .admin-studio-user-project-detail-actions a,
html[data-theme="dark"] .admin-studio-user-project-detail-summary > div,
html[data-theme="dark"] .admin-studio-user-project-detail-card,
html[data-theme="dark"] .admin-studio-user-project-storyboard-card,
html[data-theme="dark"] .admin-studio-user-project-order,
html[data-theme="dark"] .admin-studio-user-project-storyboard-actions button,
html[data-theme="dark"] .admin-studio-user-project-storyboard-card textarea,
html[data-theme="dark"] .admin-studio-user-project-delivery-form input,
html[data-theme="dark"] .admin-studio-user-project-delivery-form textarea,
html[data-theme="dark"] .admin-studio-user-project-deliverable,
html[data-theme="dark"] .admin-studio-user-project-deliverable a,
html[data-theme="dark"] .admin-studio-user-project-deliverable button,
html[data-theme="dark"] .admin-studio-user-project-source-cards > div,
html[data-theme="dark"] .admin-studio-user-project-customer-note-panel,
html[data-theme="dark"] .admin-studio-user-project-source-checklist li {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(17, 18, 20, 0.9);
}

html[data-theme="dark"] .admin-studio-user-project-card {
  background:
    linear-gradient(180deg, rgba(23, 24, 27, 0.98), rgba(15, 16, 18, 0.96));
}

html[data-theme="dark"] .admin-studio-user-project-detail-card,
html[data-theme="dark"] .admin-studio-user-project-storyboard-card,
html[data-theme="dark"] .admin-studio-user-project-detail-summary > div {
  background:
    linear-gradient(180deg, rgba(23, 24, 27, 0.98), rgba(15, 16, 18, 0.96));
}

html[data-theme="dark"] .admin-studio-user-project-cover,
html[data-theme="dark"] .admin-studio-user-project-reference-strip img,
html[data-theme="dark"] .admin-studio-user-project-reference-grid a {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(59, 130, 246, 0.08)),
    #18191c;
}

html[data-theme="dark"] .admin-studio-user-project-meta span {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-user-project-meta span.is-email-sent {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.12);
  color: rgba(167, 243, 208, 0.94);
}

html[data-theme="dark"] .admin-studio-user-project-meta span.is-email-failed {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(254, 202, 202, 0.94);
}

html[data-theme="dark"] .admin-studio-user-project-meta span.is-customer-action {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.13);
  color: rgba(254, 240, 138, 0.94);
}

main.is-client-production-console .admin-studio-crumbs,
main.is-client-production-console .admin-studio-crumbs a,
main.is-client-production-console .admin-studio-crumbs strong {
  color: rgba(248, 250, 252, 0.72);
}

main.is-client-production-console .admin-studio-user-project-storage,
main.is-client-production-console .admin-studio-user-project-search,
main.is-client-production-console .admin-studio-user-project-search label:first-child,
main.is-client-production-console .admin-studio-user-project-toggle,
main.is-client-production-console .admin-studio-user-project-stats div,
main.is-client-production-console .admin-studio-user-project-stage-tabs a,
main.is-client-production-console .admin-studio-user-project-card,
main.is-client-production-console .admin-studio-user-project-detail-actions a,
main.is-client-production-console .admin-studio-user-project-detail-summary > div,
main.is-client-production-console .admin-studio-user-project-detail-card,
main.is-client-production-console .admin-studio-user-project-storyboard-card,
main.is-client-production-console .admin-studio-user-project-order,
main.is-client-production-console .admin-studio-user-project-command-list article,
main.is-client-production-console .admin-studio-user-project-storyboard-actions button,
main.is-client-production-console .admin-studio-user-project-storyboard-card textarea,
main.is-client-production-console .admin-studio-user-project-delivery-form input,
main.is-client-production-console .admin-studio-user-project-delivery-form textarea,
main.is-client-production-console .admin-studio-user-project-delivery-modal-panel,
main.is-client-production-console .admin-studio-user-project-deliverable,
main.is-client-production-console .admin-studio-user-project-deliverable a,
main.is-client-production-console .admin-studio-user-project-deliverable button,
main.is-client-production-console .admin-studio-user-project-export-actions a,
main.is-client-production-console .admin-studio-user-project-download-grid a,
main.is-client-production-console .admin-studio-user-project-source-cards > div,
main.is-client-production-console .admin-studio-user-project-customer-note-panel,
main.is-client-production-console .admin-studio-user-project-character-lock-steps,
main.is-client-production-console .admin-studio-user-project-character-lock-empty,
main.is-client-production-console .admin-studio-user-project-free-preview-job,
main.is-client-production-console .admin-studio-user-project-free-preview-steps li,
main.is-client-production-console .admin-studio-user-project-source-checklist li,
main.is-client-production-console .admin-studio-user-project-email-log,
main.is-client-production-console .admin-studio-user-project-email-log li {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(17, 18, 20, 0.9);
}

main.is-client-production-console .admin-studio-user-project-nudge-actions button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-production-action-guide span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(248, 250, 252, 0.72);
}

main.is-client-production-console .admin-studio-user-project-production-action-guide svg {
  color: rgba(248, 250, 252, 0.62);
}

main.is-client-production-console .admin-studio-user-project-free-preview-job-head strong,
main.is-client-production-console .admin-studio-user-project-free-preview-image-review strong,
main.is-client-production-console .admin-studio-user-project-free-preview-steps span,
main.is-client-production-console .admin-studio-user-project-free-preview-board-head strong,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-title strong {
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-free-preview-job-head span,
main.is-client-production-console .admin-studio-user-project-free-preview-job-head small,
main.is-client-production-console .admin-studio-user-project-free-preview-image-review small,
main.is-client-production-console .admin-studio-user-project-free-preview-job-meta span,
main.is-client-production-console .admin-studio-user-project-free-preview-steps small,
main.is-client-production-console .admin-studio-user-project-free-preview-board-head small,
main.is-client-production-console .admin-studio-user-project-free-preview-board-head > span,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-title span,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-title small,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-card p {
  color: rgba(248, 250, 252, 0.64);
}

main.is-client-production-console .admin-studio-user-project-free-preview-job-meta span {
  background: rgba(255, 255, 255, 0.07);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-card {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)),
    rgba(17, 18, 20, 0.9);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-media figure {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-media figure > div {
  color: rgba(248, 250, 252, 0.56);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-media figcaption,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer span,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer a,
main.is-client-production-console .admin-studio-user-project-scene-action-status {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(248, 250, 252, 0.68);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer span.is-running,
main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer span.is-ready {
  background: rgba(255, 200, 0, 0.13);
  color: rgba(255, 232, 137, 0.9);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer span.is-done {
  background: rgba(34, 197, 94, 0.13);
  color: rgba(187, 247, 208, 0.9);
}

main.is-client-production-console .admin-studio-user-project-free-preview-shot-footer span.is-must {
  background: rgba(244, 114, 182, 0.13);
  color: rgba(251, 207, 232, 0.9);
}

main.is-client-production-console .admin-studio-user-project-free-preview-video {
  border-color: rgba(255, 255, 255, 0.1);
  background: #050505;
}

main.is-client-production-console .admin-studio-user-project-free-preview-image-grid figure {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

main.is-client-production-console .admin-studio-user-project-free-preview-image-grid figcaption {
  color: rgba(248, 250, 252, 0.7);
}

main.is-client-production-console .admin-studio-user-project-free-preview-blockers li {
  background: rgba(255, 200, 0, 0.12);
  color: rgba(255, 232, 137, 0.9);
}

main.is-client-production-console .admin-studio-user-project-free-preview-job-head button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
}

main.is-client-production-console .admin-studio-user-project-delivery-modal > summary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-delivery-modal[open] > summary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(248, 250, 252, 0.94);
  color: #0f172a;
}

main.is-client-production-console .admin-studio-user-project-delivery-modal-panel {
  background:
    linear-gradient(180deg, rgba(23, 24, 27, 0.98), rgba(15, 16, 18, 0.96));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

main.is-client-production-console .admin-studio-user-project-download-grid a {
  color: rgba(248, 250, 252, 0.76);
}

main.is-client-production-console .admin-studio-user-project-export-actions a {
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-export-actions a:hover,
main.is-client-production-console .admin-studio-user-project-download-grid a:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-nudge-actions button:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.14);
}

main.is-client-production-console .admin-studio-user-project-card,
main.is-client-production-console .admin-studio-user-project-detail-card,
main.is-client-production-console .admin-studio-user-project-storyboard-card,
main.is-client-production-console .admin-studio-user-project-intake-hero,
main.is-client-production-console .admin-studio-user-project-intake-photos,
main.is-client-production-console .admin-studio-user-project-detail-summary > div {
  background:
    linear-gradient(180deg, rgba(23, 24, 27, 0.98), rgba(15, 16, 18, 0.96));
}

main.is-client-production-console .admin-studio-user-project-intake-hero,
main.is-client-production-console .admin-studio-user-project-intake-photos {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

main.is-client-production-console .admin-studio-user-project-copy .admin-studio-user-project-handoff-note,
main.is-client-production-console .admin-studio-user-project-command-list p,
main.is-client-production-console .admin-studio-user-project-pipeline-card p,
main.is-client-production-console .admin-studio-user-project-brief,
main.is-client-production-console .admin-studio-user-project-source-cards small,
main.is-client-production-console .admin-studio-user-project-customer-note-panel p,
main.is-client-production-console .admin-studio-user-project-character-lock-steps ol,
main.is-client-production-console .admin-studio-user-project-source-checklist small,
main.is-client-production-console .admin-studio-user-project-email-log p,
main.is-client-production-console .admin-studio-user-project-email-log small {
  color: rgba(248, 250, 252, 0.7);
}

main.is-client-production-console .admin-studio-user-project-source-cards strong,
main.is-client-production-console .admin-studio-user-project-source-checklist span,
main.is-client-production-console .admin-studio-user-project-email-log li > span {
  color: rgba(248, 250, 252, 0.94);
}

main.is-client-production-console .admin-studio-user-project-source-cards span,
main.is-client-production-console .admin-studio-user-project-customer-note-panel span,
main.is-client-production-console .admin-studio-user-project-email-log > div span {
  color: rgba(248, 250, 252, 0.48);
}

main.is-client-production-console .admin-studio-user-project-email-log > div svg {
  color: rgba(248, 250, 252, 0.48);
}

main.is-client-production-console .admin-studio-user-project-email-log li strong {
  background: rgba(16, 185, 129, 0.13);
  color: rgba(167, 243, 208, 0.94);
}

main.is-client-production-console .admin-studio-user-project-email-log li.is-failed strong,
main.is-client-production-console .admin-studio-user-project-email-log li em {
  background: rgba(239, 68, 68, 0.14);
  color: rgba(254, 202, 202, 0.94);
}

main.is-client-production-console .admin-studio-user-project-email-log li em {
  width: fit-content;
  border-radius: 10px;
  padding: 5px 7px;
}

main.is-client-production-console .admin-studio-user-project-intake-photo-grid a {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(59, 130, 246, 0.08)),
    #18191c;
}

main.is-client-production-console .admin-studio-user-project-intake-photo-grid a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
}

main.is-client-production-console .admin-studio-user-project-source-cards > div.is-ready {
  border-color: rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.08);
}

main.is-client-production-console .admin-studio-user-project-source-cards > div.is-warning {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

main.is-client-production-console .admin-studio-user-project-source-cards > div.is-missing {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(239, 68, 68, 0.08);
}

main.is-client-production-console .admin-studio-user-project-cover,
main.is-client-production-console .admin-studio-user-project-reference-strip img,
main.is-client-production-console .admin-studio-user-project-reference-grid a {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(59, 130, 246, 0.08)),
    #18191c;
}

main.is-client-production-console .admin-studio-user-project-meta span,
main.is-client-production-console .admin-studio-user-project-stage-tabs a strong,
main.is-client-production-console .admin-studio-user-project-brief,
main.is-client-production-console .admin-studio-user-project-storyboard-card textarea {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-user-project-stage-tabs a strong,
html[data-theme="dark"] .admin-studio-user-project-brief,
html[data-theme="dark"] .admin-studio-user-project-storyboard-card textarea {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-user-project-pipeline-card p {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .admin-studio-user-project-pipeline-actions a,
html[data-theme="dark"] .admin-studio-user-project-pipeline-actions button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
}

@media (max-width: 1180px) {
  .admin-studio-user-project-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-studio-user-project-toolbar.is-client-summary {
    grid-template-columns: 1fr;
  }

  .admin-studio-user-project-stats {
    justify-content: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-user-project-detail-summary,
  .admin-studio-user-project-detail-grid,
  .admin-studio-user-project-production-grid,
  .admin-studio-user-project-intake-board,
  .admin-studio-client-account-strip,
  .admin-studio-client-production-console,
  .admin-studio-production-room-runway,
  .admin-studio-production-room-hero,
  .admin-studio-production-room-layout,
  .admin-studio-production-room-split {
    grid-template-columns: 1fr;
  }

  .admin-studio-client-account-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-production-room-sidebar {
    position: static;
  }

  .admin-studio-user-project-intake-hero {
    position: static;
  }

  .admin-studio-production-room-runway {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-studio-user-project-grid,
  .admin-studio-client-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-user-project-card-main,
  .admin-studio-client-primary-room,
	  .admin-studio-production-room-hero,
	  .admin-studio-client-workspace-project-card,
	  .admin-studio-user-project-delivery-form,
	  .admin-studio-user-project-source-cards {
	    grid-template-columns: 1fr;
	  }

  .admin-studio-user-project-intake-board {
    padding-inline: 14px;
  }

  .admin-studio-user-project-intake-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

	  .admin-studio-user-project-source-checklist li {
	    grid-template-columns: auto minmax(0, 1fr);
	  }

	  .admin-studio-user-project-source-checklist small {
	    grid-column: 2;
	    white-space: normal;
	  }

  .admin-studio-client-production-runway {
    grid-template-columns: 1fr 1fr;
  }

  .admin-studio-client-account-strip {
    grid-template-columns: 1fr;
  }

  .admin-studio-client-production-runway > div {
    min-height: 116px;
  }

  .admin-studio-client-primary-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .admin-studio-production-room-hero-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .admin-studio-production-room-tabs {
    position: static;
  }

  .admin-studio-production-room-runway {
    grid-template-columns: 1fr;
  }

  .admin-studio-production-room-runway a {
    min-height: 104px;
  }

  .admin-studio-user-project-cover,
  .admin-studio-client-workspace-project-cover {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .admin-studio-client-card-media {
    min-height: 214px;
  }

  .admin-studio-client-card-media img,
  .admin-studio-client-card-media b {
    min-height: 214px;
  }

  .admin-studio-user-project-reference-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-studio-user-project-detail-summary {
    grid-template-columns: 1fr;
  }

  .admin-studio-user-project-fact-list div,
  .admin-studio-user-project-order dl div {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

.admin-studio-mini-planner {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-mini-profile-list {
  position: sticky;
  top: 92px;
}

.admin-studio-mini-profile-list h2,
.admin-studio-mini-draft h2 {
  margin: 0;
}

.admin-studio-mini-profile-links,
.admin-studio-mini-idea-list {
  display: grid;
  gap: 10px;
}

.admin-studio-mini-profile-links a,
.admin-studio-mini-idea-list article {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
}

.admin-studio-mini-profile-links a.is-active {
  border-color: rgba(255, 200, 0, 0.62);
  background: rgba(255, 200, 0, 0.14);
}

.admin-studio-mini-profile-links strong,
.admin-studio-mini-idea-list strong {
  color: var(--foreground);
  font-size: 0.96rem;
}

.admin-studio-mini-profile-links span,
.admin-studio-mini-idea-list span,
.admin-studio-mini-idea-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.38;
}

.admin-studio-mini-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 0.9fr);
}

.admin-studio-mini-beats {
  padding-left: 0;
  list-style: none;
}

.admin-studio-mini-beats li {
  display: grid;
  gap: 3px;
}

.admin-studio-mini-beats strong {
  color: var(--foreground);
}

.admin-studio-mini-beats span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-prompt-list p {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.5;
}

.admin-studio-mini-idea-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-studio-mini-idea-list article {
  align-content: start;
}

.admin-studio-mini-idea-list .admin-studio-mini-dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-studio-mini-idea-beat {
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}

.admin-studio-mini-profile-editor {
  margin-top: 4px;
}

.admin-studio-mini-profile-editor h3 {
  margin: 0;
}

.admin-studio-mini-profile-editor p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
}

.admin-studio-mini-profile-editor form {
  display: grid;
  gap: 12px;
}

.admin-studio-mini-character-reference {
  width: min(100%, 420px);
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-mini-profile-editor label {
  display: grid;
  gap: 6px;
}

.admin-studio-mini-profile-editor label span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-mini-profile-editor input,
.admin-studio-mini-profile-editor select,
.admin-studio-mini-profile-editor textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--foreground);
  font: inherit;
}

.admin-studio-mini-profile-editor input,
.admin-studio-mini-profile-editor select {
  min-height: 42px;
  padding: 9px 11px;
}

.admin-studio-mini-profile-editor textarea {
  min-height: 84px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.45;
}

.admin-studio-mini-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-mini-form-grid .is-wide {
  grid-column: 1 / -1;
}

.studio-minis-profile-rule-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-profile-rule-head h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.3rem, 2vw, 1.85rem);
}

.studio-minis-profile-rule-head .button {
  white-space: nowrap;
}

.studio-minis-profile-rule-alerts {
  display: grid;
  gap: 8px;
}

.studio-minis-profile-rule-note,
.studio-minis-profile-rule-warning {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 720;
  line-height: 1.42;
}

.studio-minis-profile-rule-note svg,
.studio-minis-profile-rule-warning svg {
  flex: 0 0 auto;
  margin-top: 1px;
}

.studio-minis-profile-rule-note svg {
  color: #0f766e;
}

.studio-minis-profile-rule-warning {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.06);
  color: #991b1b;
}

.studio-minis-profile-rule-warning svg {
  color: #dc2626;
}

.studio-minis-profile-rule-sections {
  display: grid;
  gap: 12px;
}

.studio-minis-profile-rule-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.028);
}

.studio-minis-profile-rule-section > div:first-child {
  display: grid;
  gap: 3px;
}

.studio-minis-profile-rule-section .eyebrow {
  margin: 0;
}

.studio-minis-profile-rule-section h3 {
  color: var(--foreground);
  font-size: 1rem;
}

.studio-minis-profile-rule-section small {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.45;
}

.studio-minis-profile-rule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-profile-rule-actions span {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-studio-production-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
}

.admin-studio-production-totals span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-studio-production-totals strong {
  color: var(--foreground);
  font-size: 0.82rem;
}

.admin-studio-production-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-production-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-studio-production-rail h2 {
  margin: 5px 0 0;
}

.admin-studio-production-season-list,
.admin-studio-production-episode-list,
.admin-studio-production-main,
.admin-studio-production-scene-list,
.admin-studio-production-prompts {
  display: grid;
  gap: 10px;
}

.admin-studio-production-season-list a,
.admin-studio-production-episode-list a {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
}

.admin-studio-production-season-list a.is-active,
.admin-studio-production-episode-list a.is-active {
  border-color: rgba(255, 200, 0, 0.62);
  background: rgba(255, 200, 0, 0.14);
}

.admin-studio-production-season-list span,
.admin-studio-production-episode-list span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-production-season-list strong,
.admin-studio-production-episode-list strong {
  line-height: 1.25;
}

.admin-studio-production-season-list small,
.admin-studio-production-episode-list small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-production-episode-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-studio-production-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.admin-studio-production-kpis dd {
  margin: 0;
  color: var(--foreground);
  font-size: 1.3rem;
  font-weight: 860;
}

.admin-studio-production-source {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-studio-production-source div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-production-source span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-production-source strong,
.admin-studio-production-source code {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.admin-studio-production-rulebook {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-production-rulebook > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-production-rulebook > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-production-rulebook summary span {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-production-rulebook summary strong {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
}

.admin-studio-production-rulebook-grid {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.admin-studio-production-rulebook-grid article {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-production-rulebook-grid h3 {
  margin: 0;
  font-size: 0.9rem;
}

.admin-studio-production-rulebook-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-studio-production-rulebook-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.5;
}

.admin-studio-production-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.admin-studio-production-style-grid div,
.admin-studio-production-style-note {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.admin-studio-production-style-grid strong,
.admin-studio-production-style-note strong {
  font-size: 0.82rem;
}

.admin-studio-production-style-grid p,
.admin-studio-production-style-note span {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.42;
}

.admin-studio-lyrics-panel {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-lyrics-panel > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-lyrics-panel > summary::-webkit-details-marker,
.admin-studio-lyrics-track > summary::-webkit-details-marker,
.admin-studio-lyrics-copy-pack > summary::-webkit-details-marker,
.admin-studio-lyrics-line > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-lyrics-panel > summary::after,
.admin-studio-lyrics-track > summary::after,
.admin-studio-lyrics-copy-pack > summary::after,
.admin-studio-lyrics-line > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--muted-foreground);
  font-size: 1rem;
  font-weight: 900;
}

.admin-studio-lyrics-panel[open] > summary::after,
.admin-studio-lyrics-track[open] > summary::after,
.admin-studio-lyrics-copy-pack[open] > summary::after,
.admin-studio-lyrics-line[open] > summary::after {
  content: "-";
}

.admin-studio-lyrics-panel > summary div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-lyrics-panel > summary span,
.admin-studio-lyrics-track-grid span,
.admin-studio-lyrics-copy-pack span,
.admin-studio-lyrics-line summary span,
.admin-studio-lyrics-translation-grid span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-lyrics-panel > summary strong,
.admin-studio-lyrics-track-grid strong,
.admin-studio-lyrics-copy-pack strong,
.admin-studio-lyrics-line summary strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  line-height: 1.25;
}

.admin-studio-lyrics-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 14px 14px;
}

.admin-studio-lyrics-track,
.admin-studio-lyrics-copy-pack,
.admin-studio-lyrics-translation-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-lyrics-track > summary,
.admin-studio-lyrics-copy-pack > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 10px;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.admin-studio-lyrics-track > summary span,
.admin-studio-lyrics-track > summary strong,
.admin-studio-lyrics-copy-pack > summary div {
  min-width: 0;
}

.admin-studio-lyrics-track > summary small {
  grid-column: 1 / -1;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 780;
}

.admin-studio-lyrics-track.is-source {
  border-color: rgba(29, 78, 216, 0.34);
  background: rgba(59, 130, 246, 0.08);
}

.admin-studio-lyrics-track.is-empty {
  opacity: 0.72;
}

.admin-studio-lyrics-copy-pack {
  margin: 0 14px 14px;
}

.admin-studio-lyrics-copy-pack > summary div {
  display: grid;
  gap: 3px;
}

.admin-studio-lyrics-track-grid p,
.admin-studio-lyrics-translation-grid p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.45;
}

.admin-studio-lyrics-line-list {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.admin-studio-lyrics-section-marker {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 860;
}

.admin-studio-lyrics-line {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-studio-lyrics-line > summary {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-lyrics-translation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 10px 10px;
}

.admin-studio-lyrics-translation-grid article.is-source {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.12);
}

.admin-studio-lyrics-translation-grid article.is-empty {
  opacity: 0.62;
}

.admin-studio-music-panel {
  gap: 14px;
}

.admin-studio-music-player {
  width: 100%;
}

.admin-studio-music-empty {
  display: grid;
  gap: 4px;
  min-height: 64px;
  align-content: center;
  padding: 14px;
  border: 1px dashed rgba(17, 24, 39, 0.22);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-music-empty span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

.admin-studio-music-upload-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-studio-music-fields {
  display: grid;
  gap: 10px;
}

.admin-studio-production-scene {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-studio-production-scene-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.admin-studio-production-scene-head span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 820;
}

.admin-studio-production-scene-head h3 {
  margin: 5px 0 3px;
}

.admin-studio-production-scene-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-studio-production-scene-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 300px;
}

.admin-studio-production-scene-tags span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.07);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 820;
}

.admin-studio-production-scene-tags .is-background_only {
  background: rgba(86, 207, 174, 0.18);
}

.admin-studio-production-prompts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-studio-production-prompts details {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-studio-production-prompts summary {
  min-height: 40px;
  padding: 10px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 840;
}

.admin-studio-production-prompts pre {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  padding: 0 10px 10px;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-studio-production-board,
.admin-studio-production-shot-list,
.admin-studio-production-shot-main,
.admin-studio-production-shot-review,
.admin-studio-production-prompt-editor {
  display: grid;
  gap: 12px;
}

.admin-studio-production-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-production-board-toolbar .button,
.admin-studio-music-actions .button,
.admin-studio-production-shot-actions .button,
.admin-studio-production-prompt-editor .button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.admin-studio-production-select-all,
.admin-studio-production-shot-check,
.admin-studio-production-style-select {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.admin-studio-production-style-select select {
  min-height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
}

.admin-studio-production-shot {
  display: grid;
  grid-template-columns: minmax(118px, 0.18fr) minmax(0, 1fr) minmax(250px, 0.34fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-production-shot-media {
  display: grid;
  gap: 8px;
}

.admin-studio-production-shot-media img,
.admin-studio-production-shot-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.06);
}

.admin-studio-production-shot-media img {
  display: block;
  object-fit: cover;
}

.admin-studio-production-shot-placeholder {
  display: grid;
  gap: 6px;
  place-items: center;
  align-content: center;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 820;
  text-align: center;
}

.admin-studio-production-shot-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.admin-studio-production-shot-head span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 820;
}

.admin-studio-production-shot-head h3 {
  margin: 4px 0 4px;
  font-size: 1rem;
  line-height: 1.25;
}

.admin-studio-production-shot-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
}

.admin-studio-production-shot-prompts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-production-shot-prompts details {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
}

.admin-studio-production-shot-prompts summary {
  min-height: 36px;
  padding: 9px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 840;
}

.admin-studio-production-shot-prompts pre {
  max-height: 160px;
  margin: 0;
  overflow: auto;
  padding: 0 9px 9px;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.admin-studio-production-prompt-editor {
  padding: 10px;
  border: 1px dashed rgba(17, 24, 39, 0.24);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-production-prompt-editor label,
.admin-studio-production-shot-review label {
  display: grid;
  gap: 6px;
}

.admin-studio-production-prompt-editor label span,
.admin-studio-production-shot-review label span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-production-prompt-editor textarea,
.admin-studio-production-shot-review textarea {
  width: 100%;
  min-height: 82px;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
}

.admin-studio-production-prompt-editor textarea {
  min-height: 118px;
}

.admin-studio-production-shot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-music-actions {
  align-items: center;
}

.admin-studio-music-actions span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 780;
}

@media (max-width: 1180px) {
  .admin-studio-production-shot {
    grid-template-columns: minmax(108px, 0.22fr) minmax(0, 1fr);
  }

  .admin-studio-production-shot-review {
    grid-column: 1 / -1;
  }

  .admin-studio-source-builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-minis-command-main,
  .studio-minis-current-action {
    grid-template-columns: 1fr;
  }

  .studio-minis-builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-minis-command-preview {
    width: min(100%, 320px);
  }

  .studio-minis-command-stepper,
  .studio-minis-command-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-minis-current-action > form,
  .studio-minis-current-action > a {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .admin-studio-production-shot,
  .admin-studio-production-shot-head,
  .admin-studio-production-shot-prompts {
    grid-template-columns: 1fr;
  }

  .admin-studio-production-shot-media {
    max-width: 180px;
  }

  .admin-studio-source-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-source-builder-actions {
    justify-content: stretch;
    min-width: 0;
  }

  .admin-studio-source-builder-actions .button {
    flex: 1 1 160px;
    justify-content: center;
  }

  .admin-studio-source-builder-grid {
    grid-template-columns: 1fr;
  }
}

.admin-studio-character-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-studio-music-fields label {
  display: grid;
  gap: 6px;
}

.admin-studio-music-fields label span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-music-fields input,
.admin-studio-music-fields textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--foreground);
  font: inherit;
}

.admin-studio-music-fields textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.45;
}

.admin-studio-character-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-studio-character-sticky-status {
  position: sticky;
  z-index: 8;
  top: 10px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
}

.admin-studio-character-sticky-thumb {
  display: grid;
  width: 42px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(139, 200, 246, 0.26);
  border-radius: 13px;
  background: rgba(139, 200, 246, 0.1);
  color: #2765b8;
}

.admin-studio-character-sticky-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-sticky-title {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-studio-character-sticky-title strong,
.admin-studio-character-sticky-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-sticky-title strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 920;
}

.admin-studio-character-sticky-title span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
}

.admin-studio-character-sticky-pills,
.admin-studio-character-sticky-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-character-sticky-pills a,
.admin-studio-character-sticky-state span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 820;
  text-decoration: none;
}

.admin-studio-character-sticky-pills a:hover {
  border-color: rgba(39, 101, 184, 0.18);
  background: rgba(139, 200, 246, 0.12);
  color: #2765b8;
}

.admin-studio-character-sticky-state span {
  color: var(--muted-foreground);
  cursor: default;
}

.admin-studio-character-sticky-state span.is-ready {
  border-color: rgba(15, 118, 110, 0.16);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.admin-studio-character-sticky-state span.is-needed {
  border-color: rgba(39, 101, 184, 0.16);
  background: rgba(39, 101, 184, 0.08);
  color: #2765b8;
}

.admin-studio-character-sticky-state span.is-current {
  border-color: rgba(180, 83, 9, 0.18);
  background: rgba(251, 191, 36, 0.12);
  color: #92400e;
}

.admin-studio-character-sticky-state span.is-blocked {
  border-color: rgba(190, 18, 60, 0.16);
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
}

@media (max-width: 980px) {
  .admin-studio-character-sticky-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .admin-studio-character-sticky-pills,
  .admin-studio-character-sticky-state {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .admin-studio-character-sticky-status {
    top: 8px;
    border-radius: 14px;
  }

  .admin-studio-character-sticky-thumb {
    width: 36px;
  }

  .admin-studio-character-sticky-pills a,
  .admin-studio-character-sticky-state span {
    min-height: 30px;
    flex: 1 1 88px;
  }
}

.admin-studio-source-builder {
  display: grid;
  gap: 12px;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(39, 101, 184, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% 0%, rgba(86, 207, 174, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(139, 200, 246, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 12px 34px rgba(39, 101, 184, 0.07);
}

.admin-studio-source-builder-head {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-source-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: min(100%, 260px);
}

.admin-studio-source-builder-selected {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.admin-studio-source-builder-thumb {
  display: grid;
  width: clamp(58px, 6vw, 78px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(139, 200, 246, 0.3);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.14), rgba(86, 207, 174, 0.1)),
    rgba(255, 255, 255, 0.76);
  color: #2765b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.admin-studio-source-builder-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-source-builder-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-studio-source-builder-badges span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-source-builder-badges span.is-ready {
  border-color: rgba(15, 118, 110, 0.16);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.admin-studio-source-builder-badges span.is-current {
  border-color: rgba(180, 83, 9, 0.18);
  background: rgba(251, 191, 36, 0.12);
  color: #92400e;
}

.admin-studio-source-builder-badges span.is-needed {
  border-color: rgba(39, 101, 184, 0.16);
  background: rgba(39, 101, 184, 0.08);
  color: #2765b8;
}

.admin-studio-source-builder-badges span.is-blocked {
  border-color: rgba(190, 18, 60, 0.16);
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
}

.admin-studio-source-builder-head h1 {
  max-width: 860px;
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.32rem, 2.3vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: 0;
}

.admin-studio-source-builder-head p:not(.eyebrow) {
  max-width: 780px;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.42;
}

.admin-studio-source-builder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-source-builder-card {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-content: space-between;
  min-height: 148px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-source-builder-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: "";
  background: rgba(100, 116, 139, 0.68);
}

.admin-studio-source-builder-card.is-ready::before {
  background: linear-gradient(90deg, #0f766e, #56cfae);
}

.admin-studio-source-builder-card.is-current::before,
.admin-studio-source-builder-card.is-needed::before {
  background: linear-gradient(90deg, #2765b8, #5a7cff);
}

.admin-studio-source-builder-card.is-blocked::before {
  background: linear-gradient(90deg, #be123c, #f59e0b);
}

.admin-studio-source-builder-card.is-blocked {
  border-color: rgba(190, 18, 60, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 241, 242, 0.9), rgba(255, 255, 255, 0.66));
}

.admin-studio-source-builder-card.is-waiting {
  opacity: 0.72;
}

.admin-studio-source-builder-icon {
  display: inline-grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(139, 200, 246, 0.28);
  border-radius: 12px;
  background: rgba(139, 200, 246, 0.12);
  color: #2765b8;
}

.admin-studio-source-builder-card > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-source-builder-card > div > span {
  color: #2765b8;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-source-builder-card strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
}

.admin-studio-source-builder-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.79rem;
  line-height: 1.38;
}

.admin-studio-source-builder-card .button {
  justify-content: center;
  width: 100%;
  min-height: 34px;
  white-space: normal;
}

.admin-studio-source-builder-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-source-builder-card-actions .button {
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
}

.admin-studio-character-bind-callout {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(39, 101, 184, 0.26);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 10%, rgba(86, 207, 174, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(139, 200, 246, 0.2), rgba(255, 255, 255, 0.76));
  box-shadow: 0 18px 42px rgba(39, 101, 184, 0.1);
}

.admin-studio-character-bind-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-studio-character-bind-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  letter-spacing: 0;
}

.admin-studio-character-bind-copy p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.42;
}

.admin-studio-character-bind-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-character-bind-actions form {
  display: contents;
}

.admin-studio-character-bind-actions span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 820;
}

@media (max-width: 1180px) {
  .admin-studio-source-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-source-builder-actions {
    justify-content: flex-start;
  }

  .admin-studio-source-builder-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-character-bind-callout {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-character-bind-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .admin-studio-source-builder-selected {
    grid-template-columns: 1fr;
  }

  .admin-studio-source-builder-thumb {
    width: 72px;
  }

  .admin-studio-source-builder-grid {
    grid-template-columns: 1fr;
  }
}

.admin-studio-character-rail {
  align-content: start;
}

.admin-studio-character-rail-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-character-create-chip {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-raised, #ffffff) 84%, transparent);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.admin-studio-character-create-chip:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--brand, #2563eb) 42%, var(--border-soft));
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, var(--surface-raised, #ffffff));
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-flow-embed-card {
  overflow: hidden;
  min-height: min(760px, calc(100dvh - 138px));
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface-raised, #ffffff) 50%, transparent);
}

.admin-studio-character-list,
.admin-studio-character-main,
.admin-studio-character-form,
.admin-studio-character-upload,
.admin-studio-character-asset-grid {
  display: grid;
  gap: 12px;
}

.admin-studio-character-list-section {
  display: grid;
  gap: 8px;
}

.admin-studio-character-list-section + .admin-studio-character-list-section {
  padding-top: 4px;
  border-top: 1px solid var(--border-soft);
}

.admin-studio-character-list-section-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  padding: 0 2px;
}

.admin-studio-character-list-section-head strong {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-studio-character-list-section-head span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 820;
}

.admin-studio-character-list a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
}

.admin-studio-character-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-character-filters a {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
  text-decoration: none;
}

.admin-studio-character-filters a.is-active {
  border-color: rgba(15, 23, 42, 0.15);
  background: rgba(15, 23, 42, 0.055);
  box-shadow: inset 4px 0 0 rgba(255, 200, 0, 0.82);
  color: var(--foreground);
}

.admin-studio-character-filters span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-filters strong {
  flex: 0 0 auto;
  font-size: 0.75rem;
}

.admin-studio-character-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 0.55fr);
  gap: 8px;
}

.admin-studio-character-search input,
.admin-studio-character-search select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font: inherit;
  font-size: 0.84rem;
}

.admin-studio-character-search button,
.admin-studio-character-search a {
  min-height: 34px;
}

.admin-studio-character-list a.is-active {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: inset 4px 0 0 rgba(255, 200, 0, 0.84);
}

.admin-studio-character-list span {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-studio-character-list strong,
.admin-studio-character-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-list small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
}

.admin-studio-character-preview {
  width: 54px;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-character-preview.is-empty {
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-character-link-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-character-link-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-character-link-grid span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 840;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-link-grid strong {
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.admin-studio-character-link-grid p {
  min-height: 42px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-studio-linked-production {
  gap: 0;
}

.admin-studio-linked-production[open] {
  gap: 14px;
}

.admin-studio-linked-production summary {
  cursor: pointer;
  list-style: none;
}

.admin-studio-linked-production summary::-webkit-details-marker {
  display: none;
}

.admin-studio-linked-production summary span {
  display: grid;
  gap: 3px;
}

.admin-studio-linked-production summary strong {
  font-size: 0.94rem;
}

.admin-studio-linked-production summary small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.admin-studio-linked-production-body {
  display: grid;
  gap: 14px;
}

.admin-studio-character-asset-stack {
  display: grid;
  gap: 12px;
}

.admin-studio-character-asset-groups {
  display: grid;
  gap: 14px;
}

.admin-studio-character-asset-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.66));
}

.admin-studio-character-asset-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-asset-group-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-studio-character-asset-group-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 920;
}

.admin-studio-character-asset-group-head span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 740;
}

.admin-studio-character-asset-group-head small {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(39, 101, 184, 0.08);
  color: #2765b8;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-character-asset-empty {
  min-height: 58px;
  padding: 16px;
  border: 1px dashed rgba(15, 23, 42, 0.16);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.025);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
}

html[data-theme="dark"] .admin-studio-character-sticky-status {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(20, 28, 44, 0.94), rgba(15, 23, 42, 0.9));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-character-sticky-thumb,
html[data-theme="dark"] .admin-studio-character-sticky-pills a,
html[data-theme="dark"] .admin-studio-character-sticky-state span,
html[data-theme="dark"] .admin-studio-character-asset-group {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-sticky-pills a:hover {
  border-color: rgba(139, 200, 246, 0.24);
  background: rgba(139, 200, 246, 0.11);
}

html[data-theme="dark"] .admin-studio-character-sticky-state span.is-current {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(180, 83, 9, 0.2);
  color: rgba(254, 243, 199, 0.94);
}

html[data-theme="dark"] .admin-studio-character-sticky-state span.is-blocked {
  border-color: rgba(251, 113, 133, 0.24);
  background: rgba(190, 18, 60, 0.2);
  color: rgba(255, 228, 230, 0.94);
}

html[data-theme="dark"] .admin-studio-character-asset-empty {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.admin-studio-character-asset-library {
  display: grid;
  gap: 14px;
}

.admin-studio-character-asset-status {
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid rgba(39, 101, 184, 0.18);
  border-radius: 14px;
  background: rgba(39, 101, 184, 0.07);
  color: #1f5d99;
  font-size: 0.82rem;
  font-weight: 840;
}

.admin-studio-character-appearance-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-studio-character-appearance-map article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
}

.admin-studio-character-appearance-map span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-appearance-map strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 940;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-studio-character-appearance-map p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.77rem;
  font-weight: 730;
  line-height: 1.42;
}

.admin-studio-character-appearance-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.admin-studio-character-appearance-chip-list span {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(39, 101, 184, 0.16);
  border-radius: 999px;
  background: rgba(39, 101, 184, 0.07);
  color: #1f5d99;
  font-size: 0.68rem;
  font-weight: 880;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-transform: none;
}

.admin-studio-character-reference-group {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.68));
}

.admin-studio-character-reference-group-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-reference-group-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-studio-character-reference-group-head strong {
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 940;
}

.admin-studio-character-reference-group-head span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-studio-character-reference-group-head small {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 920;
}

.admin-studio-character-time-variants {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(39, 101, 184, 0.18);
  border-radius: 16px;
  background: rgba(39, 101, 184, 0.055);
}

.admin-studio-character-time-variants-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-time-variants-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-time-variants-head strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 940;
}

.admin-studio-character-time-variants-head span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-studio-character-time-variants-head small {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid rgba(39, 101, 184, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #1f5d99;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-time-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-time-variant-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-character-time-variant-frame {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.82);
}

.admin-studio-character-time-variant-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-asset-preview-button {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  cursor: zoom-in;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
}

.admin-studio-character-asset-preview-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.admin-studio-character-asset-preview-button span {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.admin-studio-character-asset-preview-button:hover img,
.admin-studio-character-asset-preview-button:focus-visible img {
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.012);
}

.admin-studio-character-asset-preview-button:hover span,
.admin-studio-character-asset-preview-button:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.admin-studio-character-asset-preview-button:focus-visible {
  outline: 3px solid rgba(39, 101, 184, 0.34);
  outline-offset: -3px;
}

.admin-studio-character-time-variant-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 900;
}

.admin-studio-character-time-variant-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-character-time-variant-body span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-time-variant-body strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.12;
}

.admin-studio-character-time-variant-body p,
.admin-studio-character-time-variant-body small,
.admin-studio-character-time-variant-body em {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 730;
  line-height: 1.42;
}

.admin-studio-character-time-variant-body small {
  color: #1f5d99;
  font-weight: 830;
  overflow-wrap: anywhere;
}

.admin-studio-character-current-asset {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
}

.admin-studio-character-current-asset-frame {
  position: relative;
  display: grid;
  min-height: 240px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.94), rgba(255, 255, 255, 0.7));
}

.admin-studio-character-current-asset-frame img {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: contain;
}

.admin-studio-character-current-asset-body {
  display: grid;
  gap: 12px;
  align-content: center;
  min-width: 0;
  padding: 8px 4px 8px 0;
}

.admin-studio-character-current-asset-title {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-character-current-asset-title span,
.admin-studio-character-asset-option-body span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-current-asset-title h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.12rem, 2vw, 1.45rem);
  line-height: 1.08;
}

.admin-studio-character-current-asset-title p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-studio-character-asset-note {
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.78);
}

.admin-studio-character-asset-note summary {
  padding: 9px 11px;
  cursor: pointer;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 860;
  list-style: none;
}

.admin-studio-character-asset-note summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-asset-note pre {
  max-height: 170px;
  margin: 0;
  overflow: auto;
  padding: 0 11px 11px;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-studio-character-asset-history {
  display: grid;
  gap: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.026);
}

.admin-studio-character-asset-history[open] {
  gap: 12px;
}

.admin-studio-character-asset-history summary {
  cursor: pointer;
  list-style: none;
}

.admin-studio-character-asset-history summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-asset-history summary span {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-asset-history summary strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-studio-character-asset-history summary small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
}

.admin-studio-character-asset-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-asset-option {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.64);
}

.admin-studio-character-asset-option-frame {
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.78);
}

.admin-studio-character-asset-option-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-asset-option-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-character-asset-option-body strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-asset-option-body small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.35;
}

.admin-studio-character-asset-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  padding: clamp(14px, 3vw, 36px);
  overflow: auto;
  place-items: center;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(14px);
}

.admin-studio-character-asset-lightbox-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1120px, 100%);
  max-height: calc(100vh - clamp(28px, 6vw, 72px));
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(248, 250, 252, 0.96);
  color: #0f172a;
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.34);
}

.admin-studio-character-asset-lightbox-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-asset-lightbox-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-character-asset-lightbox-head span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-asset-lightbox-head strong {
  color: #0f172a;
  font-size: clamp(1.06rem, 2vw, 1.34rem);
  font-weight: 940;
  line-height: 1.1;
}

.admin-studio-character-asset-lightbox-head small {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 760;
}

.admin-studio-character-asset-lightbox-head button {
  display: inline-grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #0f172a;
}

.admin-studio-character-asset-lightbox-image {
  display: grid;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.11) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.11) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.11) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.11) 75%),
    #f8fafc;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
}

.admin-studio-character-asset-lightbox-image img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 210px);
  object-fit: contain;
}

.admin-studio-character-asset-lightbox-panel > a {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid rgba(39, 101, 184, 0.18);
  border-radius: 999px;
  background: rgba(39, 101, 184, 0.08);
  color: #1f5d99;
  font-size: 0.78rem;
  font-weight: 860;
  text-decoration: none;
}

html[data-theme="dark"] .admin-studio-character-asset-status {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.1);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-reference-group,
html[data-theme="dark"] .admin-studio-character-appearance-map article,
html[data-theme="dark"] .admin-studio-character-current-asset,
html[data-theme="dark"] .admin-studio-character-asset-option,
html[data-theme="dark"] .admin-studio-character-time-variant-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-character-current-asset-frame,
html[data-theme="dark"] .admin-studio-character-asset-option-frame,
html[data-theme="dark"] .admin-studio-character-asset-note,
html[data-theme="dark"] .admin-studio-character-asset-history,
html[data-theme="dark"] .admin-studio-character-time-variants,
html[data-theme="dark"] .admin-studio-character-time-variant-frame {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-studio-character-time-variants-head small,
html[data-theme="dark"] .admin-studio-character-time-variant-badge {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.1);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-time-variant-body small {
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-asset-preview-button span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-panel {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.96);
  color: #eef6ff;
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-head strong,
html[data-theme="dark"] .admin-studio-character-asset-lightbox-head button {
  color: #eef6ff;
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-head span,
html[data-theme="dark"] .admin-studio-character-asset-lightbox-head small {
  color: #9fb1c7;
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-head button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-image {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(148, 163, 184, 0.1) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(148, 163, 184, 0.1) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(148, 163, 184, 0.1) 75%),
    #0f172a;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
}

html[data-theme="dark"] .admin-studio-character-asset-lightbox-panel > a {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.1);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-appearance-chip-list span,
html[data-theme="dark"] .admin-storyboard-binding-variant-list span {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.1);
  color: #bfdbfe;
}

.admin-studio-character-archive-details {
  display: grid;
  gap: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-archive-details[open] {
  gap: 12px;
}

.admin-studio-character-archive-details summary {
  cursor: pointer;
  list-style: none;
}

.admin-studio-character-archive-details summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-archive-details summary span {
  display: grid;
  gap: 3px;
}

.admin-studio-character-archive-details summary strong {
  font-size: 0.9rem;
}

.admin-studio-character-archive-details summary small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
}

.admin-studio-character-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-character-form-grid-main {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-studio-character-form-grid-compact {
  grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.admin-studio-character-optional-names {
  display: grid;
  align-content: start;
  min-height: 42px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-optional-names[open] {
  gap: 10px;
  padding-bottom: 12px;
}

.admin-studio-character-optional-names summary {
  display: flex;
  min-height: 42px;
  align-items: center;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-character-optional-names summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-optional-names summary span {
  display: grid;
  gap: 2px;
}

.admin-studio-character-optional-names summary strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 860;
}

.admin-studio-character-optional-names summary small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 720;
}

.admin-studio-character-optional-names .field {
  margin-inline: 11px;
}

.admin-studio-character-initial-sheet {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: inset 5px 0 0 rgba(255, 200, 0, 0.82);
}

.admin-studio-character-initial-sheet h3,
.admin-studio-character-initial-sheet p {
  margin: 0;
}

.admin-studio-character-initial-sheet p:not(.eyebrow) {
  color: var(--muted-foreground);
  font-size: 0.86rem;
}

.admin-studio-character-season-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-season-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-character-season-head h3,
.admin-studio-character-season-head p {
  margin: 0;
}

.admin-studio-character-season-head > p {
  max-width: 420px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-studio-character-season-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-character-season-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-studio-character-season-card .admin-studio-character-check {
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-studio-character-season-card .admin-studio-character-check span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-studio-character-season-card .admin-studio-character-check strong,
.admin-studio-character-season-card .admin-studio-character-check small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-season-card .admin-studio-character-check strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 860;
}

.admin-studio-character-season-card .admin-studio-character-check small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 740;
}

.admin-studio-character-season-controls {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.admin-studio-character-season-controls select,
.admin-studio-character-season-controls input {
  min-height: 36px;
  font-size: 0.78rem;
}

.admin-studio-character-quick-note {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid rgba(139, 200, 246, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.1), transparent 46%),
    rgba(255, 255, 255, 0.68);
}

.admin-studio-character-quick-note strong {
  color: var(--foreground);
  font-size: 0.88rem;
}

.admin-studio-character-quick-note span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-studio-character-contract {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(86, 207, 174, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(86, 207, 174, 0.1), transparent 48%),
    rgba(255, 255, 255, 0.68);
}

.admin-studio-character-contract-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-character-contract-head h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.16;
}

.admin-studio-character-contract-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.admin-studio-character-contract-status span,
.admin-studio-character-contract-list span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.2;
}

.admin-studio-character-contract-role {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.45;
}

.admin-studio-character-contract-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-studio-character-contract-list strong {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-contract-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-character-contract-list.is-warning span {
  border-color: rgba(180, 83, 9, 0.16);
  background: rgba(251, 191, 36, 0.12);
}

.admin-studio-character-form input,
.admin-studio-character-form select,
.admin-studio-character-form textarea,
.admin-studio-character-upload input,
.admin-studio-character-upload select,
.admin-studio-character-upload textarea,
.admin-studio-character-url-form input,
.admin-studio-character-url-form select,
.admin-studio-character-url-form textarea {
  min-height: 42px;
  padding: 9px 11px;
}

.admin-studio-character-form textarea,
.admin-studio-character-upload textarea,
.admin-studio-character-url-form textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.45;
}

.admin-studio-character-file-picker input {
  display: none;
}

.admin-studio-character-file-picker label {
  display: grid;
  gap: 4px;
  min-height: 86px;
  align-content: center;
  justify-items: center;
  padding: 18px;
  border: 1px dashed rgba(17, 24, 39, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.045), transparent 52%),
    rgba(248, 250, 252, 0.72);
  color: var(--foreground);
  cursor: pointer;
  text-align: center;
}

.admin-studio-character-file-picker label:hover,
.admin-studio-character-file-picker input:focus-visible + label {
  border-color: rgba(15, 23, 42, 0.22);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.065), transparent 56%),
    rgba(248, 250, 252, 0.88);
}

.admin-studio-character-file-picker strong {
  overflow-wrap: anywhere;
  font-size: 0.98rem;
}

.admin-studio-character-file-picker span {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 760;
}

.admin-studio-character-upload-frame,
.admin-studio-character-asset-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    rgba(255, 255, 255, 0.5);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.admin-studio-character-upload-frame {
  min-height: 180px;
  max-height: 340px;
}

.admin-studio-character-upload-mode {
  display: grid;
  gap: 8px;
}

.admin-studio-character-upload-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-character-upload-summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-upload-summary span {
  display: grid;
  gap: 3px;
}

.admin-studio-character-upload-summary strong {
  color: var(--foreground);
  font-size: 0.94rem;
}

.admin-studio-character-upload-summary small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-character-upload-body {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.admin-studio-character-upload-mode > span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 860;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-character-role-field input {
  font-weight: 780;
}

.admin-studio-character-role-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
}

.admin-studio-character-role-picker button {
  display: grid;
  gap: 3px;
  min-width: 0;
  min-height: 64px;
  align-content: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-studio-character-role-picker button.is-active {
  border-color: rgba(255, 200, 0, 0.62);
  background: rgba(255, 200, 0, 0.14);
}

.admin-studio-character-role-picker strong {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
}

.admin-studio-character-role-picker span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  line-height: 1.25;
}

.admin-studio-character-check {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.72);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 760;
}

.admin-studio-character-check input {
  width: 18px;
  height: 18px;
  min-height: auto;
  padding: 0;
}

.admin-studio-character-save-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-studio-character-advanced {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-advanced[open] {
  padding-bottom: 12px;
}

.admin-studio-character-advanced summary {
  padding: 12px;
  cursor: pointer;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 840;
}

.admin-studio-character-advanced > :not(summary) {
  margin-right: 12px;
  margin-left: 12px;
}

.admin-studio-character-settings {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-soft);
}

.admin-studio-character-settings[open] {
  gap: 12px;
}

.admin-studio-character-settings summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  cursor: pointer;
  color: var(--foreground);
}

.admin-studio-character-settings summary span {
  display: grid;
  gap: 3px;
}

.admin-studio-character-settings summary strong {
  font-size: 0.9rem;
}

.admin-studio-character-settings summary small {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 720;
}

.admin-studio-character-upload-advanced {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.68);
}

.admin-studio-character-upload-advanced[open] {
  padding-bottom: 12px;
}

.admin-studio-character-upload-advanced summary {
  padding: 11px 12px;
  cursor: pointer;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 840;
}

.admin-studio-character-upload-advanced > :not(summary) {
  margin-right: 12px;
  margin-left: 12px;
}

.admin-studio-character-reference-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.admin-studio-character-upload,
.admin-studio-character-url-form {
  align-content: start;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.88));
  overflow: hidden;
}

.admin-studio-character-url-form {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-studio-character-url-form[open] {
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-character-url-form summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 2px;
  cursor: pointer;
  color: var(--muted-foreground);
}

.admin-studio-character-url-form[open] summary {
  min-height: auto;
  padding: 0;
  color: var(--foreground);
}

.admin-studio-character-url-form summary span {
  display: grid;
  gap: 4px;
}

.admin-studio-character-url-form summary small {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-character-url-form form {
  display: grid;
  gap: 12px;
}

.admin-studio-character-upload h3,
.admin-studio-character-url-form h3 {
  margin: 4px 0;
}

.admin-studio-character-upload p,
.admin-studio-character-url-form p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-studio-character-upload-preview {
  width: 100%;
  max-height: 340px;
  object-fit: contain;
}

.admin-studio-character-asset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-studio-character-asset-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-studio-character-asset-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
}

.admin-studio-character-asset-card img,
.admin-studio-character-file-placeholder {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-file-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  font-weight: 780;
}

.admin-studio-character-asset-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-character-primary-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(86, 207, 174, 0.48);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.9);
  color: #083f3b;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-asset-card h3 {
  margin: 4px 0;
  font-size: 1.02rem;
}

.admin-studio-character-asset-card p,
.admin-studio-character-asset-card small {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-studio-character-asset-card details {
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-studio-character-asset-card summary {
  padding: 9px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 840;
}

.admin-studio-character-asset-card pre {
  max-height: 180px;
  margin: 0;
  overflow: auto;
  padding: 0 10px 10px;
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.admin-studio-character-create-shell {
  display: grid;
  grid-template-columns: minmax(320px, 0.84fr) minmax(360px, 1fr);
  gap: 12px;
  align-items: start;
}

.admin-studio-character-sticky-progress {
  position: sticky;
  top: 10px;
  z-index: 18;
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.admin-studio-character-progress-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.admin-studio-character-progress-summary strong,
.admin-studio-character-progress-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-progress-summary strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 940;
}

.admin-studio-character-progress-summary span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 780;
}

.admin-studio-character-production-flow {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-production-flow > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-studio-character-production-flow > div > span {
  display: inline-grid;
  grid-row: 1 / 3;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 920;
}

.admin-studio-character-production-flow > div.is-current {
  border-color: rgba(108, 140, 255, 0.34);
  background: rgba(108, 140, 255, 0.09);
}

.admin-studio-character-production-flow > div.is-current > span {
  background: rgba(108, 140, 255, 0.16);
  color: #2765b8;
}

.admin-studio-character-production-flow > div.is-attention {
  border-color: rgba(108, 140, 255, 0.38);
  background: rgba(108, 140, 255, 0.1);
}

.admin-studio-character-production-flow > div.is-attention > span {
  background: rgba(108, 140, 255, 0.16);
  color: #2765b8;
}

.admin-studio-character-production-flow > div.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.1);
}

.admin-studio-character-production-flow > div.is-ready > span {
  background: rgba(86, 207, 174, 0.18);
  color: #0f766e;
}

.admin-studio-character-production-flow > div.is-waiting {
  opacity: 0.78;
}

.admin-studio-character-production-flow strong,
.admin-studio-character-production-flow small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-production-flow strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
}

.admin-studio-character-production-flow small {
  color: var(--muted-foreground);
  font-size: 0.73rem;
  font-weight: 740;
}

.admin-studio-character-create-form,
.admin-studio-character-create-preview {
  display: grid;
  gap: 10px;
  align-content: start;
  grid-auto-rows: max-content;
  min-width: 0;
  padding: clamp(12px, 1.8vw, 16px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.admin-studio-character-create-page .button-primary {
  border-color: rgba(25, 78, 146, 0.9);
  background: #1f5fae;
  color: #f8fbff;
  box-shadow:
    0 12px 24px rgba(31, 95, 174, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.admin-studio-character-create-page .button-primary:hover,
.admin-studio-character-create-page .button-primary:focus-visible {
  border-color: rgba(20, 66, 124, 0.98);
  background: #194f92;
  color: #ffffff;
  box-shadow:
    0 14px 28px rgba(31, 95, 174, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.admin-studio-character-create-page .button-secondary {
  border-color: rgba(100, 116, 139, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: #334155;
  box-shadow: none;
}

.admin-studio-character-create-page .button-secondary:hover,
.admin-studio-character-create-page .button-secondary:focus-visible {
  border-color: rgba(31, 95, 174, 0.28);
  background: rgba(255, 255, 255, 0.92);
  color: #1f5fae;
}

.admin-studio-character-create-page .button:disabled,
.admin-studio-character-create-page .button[aria-disabled="true"] {
  opacity: 0.46;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.admin-studio-character-action-primary {
  font-weight: 920;
}

.admin-studio-character-create-form > .admin-studio-character-action-primary {
  width: 100%;
  min-height: 44px;
  justify-content: center;
}

.admin-studio-character-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  width: 100%;
}

.admin-studio-character-main-actions .admin-studio-character-action-primary {
  flex: 1 1 210px;
  min-height: 44px;
  justify-content: center;
}

.admin-studio-character-main-actions .admin-studio-character-action-secondary {
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
}

.admin-studio-character-main-actions .button.is-loading svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-character-action-secondary,
.admin-studio-character-link-action {
  font-weight: 840;
}

.admin-studio-character-action-disabled {
  background: rgba(241, 245, 249, 0.72);
  color: rgba(100, 116, 139, 0.8);
}

.admin-studio-character-preview-head {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
}

.admin-studio-character-preview-head p,
.admin-studio-character-preview-head h2 {
  margin: 0;
}

.admin-studio-character-preview-head h2 {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: clamp(1.08rem, 1.5vw, 1.35rem);
  line-height: 1.08;
}

.admin-studio-character-create-form-head {
  display: grid;
  gap: 6px;
}

.admin-studio-character-create-form-head h2,
.admin-studio-character-create-form-head p {
  margin: 0;
}

.admin-studio-character-create-form-head h2 {
  color: var(--foreground);
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.admin-studio-character-create-form-head p {
  max-width: 620px;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.48;
}

.admin-studio-character-create-form .field {
  display: grid;
  gap: 7px;
}

.admin-studio-character-create-form .field > span:first-child {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-character-create-form textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.admin-studio-character-setup-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-setup-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.admin-studio-character-setup-head > span:last-child {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px 8px;
  align-items: center;
}

.admin-studio-character-setup-head strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 920;
}

.admin-studio-character-setup-head small {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.84);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
}

.admin-studio-character-render-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(100, 116, 139, 0.12);
}

.admin-studio-character-render-options > span {
  color: var(--muted-foreground);
  font-size: 0.67rem;
  font-weight: 860;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-render-option-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  justify-content: flex-end;
}

.admin-studio-character-note-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: center;
  max-width: min(100%, 260px);
  min-height: 26px;
  padding: 2px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 780;
  box-shadow: none;
}

.admin-studio-character-setting-button {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: min(100%, 260px);
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-studio-character-note-button.has-note,
.admin-studio-character-setting-button.has-value {
  color: #475569;
}

.admin-studio-character-note-button:hover,
.admin-studio-character-note-button:focus-visible,
.admin-studio-character-setting-button:hover,
.admin-studio-character-setting-button:focus-visible {
  background: rgba(15, 23, 42, 0.045);
  outline: none;
}

.admin-studio-character-note-button svg,
.admin-studio-character-setting-button svg {
  color: #64748b;
}

.admin-studio-character-note-button span,
.admin-studio-character-setting-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-note-button span,
.admin-studio-character-setting-button span {
  display: grid;
  gap: 1px;
}

.admin-studio-character-note-button strong,
.admin-studio-character-setting-button strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.69rem;
  font-weight: 820;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-note-button small,
.admin-studio-character-setting-button small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-render-option-buttons .admin-studio-character-note-button,
.admin-studio-character-render-option-buttons .admin-studio-character-setting-button {
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  background: rgba(248, 250, 252, 0.72);
}

.admin-studio-character-render-option-buttons .admin-studio-character-note-button.has-note,
.admin-studio-character-render-option-buttons .admin-studio-character-setting-button.has-value {
  border-color: rgba(31, 95, 174, 0.16);
  background: rgba(239, 246, 255, 0.72);
  color: #1f5fae;
}

.admin-studio-character-work-picker {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(100, 116, 139, 0.12);
}

.admin-studio-character-work-picker > span {
  color: var(--muted-foreground);
  font-size: 0.67rem;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 8px;
}

.admin-studio-character-work-groups {
  display: grid;
  gap: 8px;
}

.admin-studio-character-work-group {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(100, 116, 139, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
}

.admin-studio-character-work-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.admin-studio-character-work-group-head > span {
  display: inline-grid;
  width: 20px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.1);
  color: #1f5fae;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-character-work-group-head strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-work-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  min-height: 62px;
  padding: 10px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.72);
  color: #475569;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.admin-studio-character-work-grid button.is-secondary {
  min-height: 54px;
  background: rgba(248, 250, 252, 0.52);
  color: #64748b;
}

.admin-studio-character-work-grid button.is-secondary svg {
  color: #94a3b8;
}

.admin-studio-character-work-grid button.is-secondary strong {
  font-size: 0.74rem;
}

.admin-studio-character-work-grid button.is-secondary small {
  font-size: 0.64rem;
}

.admin-studio-character-work-grid button svg {
  color: #64748b;
}

.admin-studio-character-work-grid button span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-work-grid button strong,
.admin-studio-character-work-grid button small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-studio-character-work-grid button strong {
  color: inherit;
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.08;
  white-space: nowrap;
}

.admin-studio-character-work-grid button small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.18;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.admin-studio-character-work-grid button:hover,
.admin-studio-character-work-grid button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(31, 95, 174, 0.22);
  background: rgba(255, 255, 255, 0.92);
  color: #1f5fae;
  outline: none;
}

.admin-studio-character-work-grid button.is-active {
  border-color: rgba(31, 95, 174, 0.26);
  background:
    radial-gradient(circle at 96% 0%, rgba(139, 200, 246, 0.18), transparent 42%),
    rgba(239, 246, 255, 0.86);
  color: #1f5fae;
  box-shadow:
    0 0 0 3px rgba(31, 95, 174, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-studio-character-work-grid button.is-secondary.is-active {
  border-color: rgba(31, 95, 174, 0.22);
  background: rgba(239, 246, 255, 0.72);
}

.admin-studio-character-work-grid button.is-active svg {
  color: #1f5fae;
}

.admin-studio-character-work-grid button.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.admin-studio-character-selected-work-help {
  flex: 1 0 100%;
  margin: -2px 0 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-studio-character-selected-target {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(31, 95, 174, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.84), rgba(255, 255, 255, 0.72));
}

.admin-studio-character-selected-target-frame {
  position: relative;
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(31, 95, 174, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.76);
  color: #1f5fae;
}

.admin-studio-character-selected-target-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-selected-target-frame span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  overflow: hidden;
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 0.55rem;
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-selected-target > div:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-selected-target small {
  color: #1f5fae;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-selected-target strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 930;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-selected-target p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.32;
}

.admin-studio-character-instruction-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.admin-studio-character-instruction-card:hover,
.admin-studio-character-instruction-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(31, 95, 174, 0.24);
  background: rgba(255, 255, 255, 0.88);
  outline: none;
}

.admin-studio-character-instruction-card.has-note {
  border-color: rgba(31, 95, 174, 0.2);
  background: rgba(239, 246, 255, 0.76);
}

.admin-studio-character-instruction-card.needs-note {
  border-color: rgba(218, 119, 6, 0.22);
  background: rgba(255, 251, 235, 0.78);
  box-shadow: 0 0 0 3px rgba(218, 119, 6, 0.06);
}

.admin-studio-character-instruction-card > svg {
  color: #1f5fae;
}

.admin-studio-character-instruction-card.needs-note > svg {
  color: #b45309;
}

.admin-studio-character-instruction-card > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-instruction-card small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-instruction-card.needs-note small {
  color: #92400e;
}

.admin-studio-character-instruction-card strong,
.admin-studio-character-instruction-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-instruction-card strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 930;
  line-height: 1.1;
}

.admin-studio-character-instruction-card em {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.2;
}

.admin-studio-character-instruction-card b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.1);
  color: #1f5fae;
  font-size: 0.7rem;
  font-weight: 920;
  line-height: 1;
  white-space: nowrap;
}

.admin-studio-character-instruction-card.needs-note b {
  background: rgba(217, 119, 6, 0.12);
  color: #92400e;
}

.admin-studio-character-filing-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(100, 116, 139, 0.12);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.56);
  color: var(--muted-foreground);
}

.admin-studio-character-filing-card > span {
  display: inline-grid;
  width: 28px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: #64748b;
}

.admin-studio-character-filing-card div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.admin-studio-character-filing-card strong,
.admin-studio-character-filing-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-filing-card strong {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 860;
}

.admin-studio-character-filing-card small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 720;
}

.admin-studio-character-filing-card button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 820;
}

.admin-studio-character-filing-card button:hover,
.admin-studio-character-filing-card button:focus-visible {
  border-color: rgba(31, 95, 174, 0.24);
  background: rgba(255, 255, 255, 0.95);
  color: #1f5fae;
  outline: none;
}

.admin-studio-character-note-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 42px);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.42)),
    linear-gradient(160deg, rgba(108, 140, 255, 0.18), transparent 42%),
    linear-gradient(25deg, transparent 45%, rgba(86, 207, 174, 0.18));
  backdrop-filter: blur(12px);
}

.admin-studio-character-note-modal {
  display: grid;
  gap: 14px;
  width: min(620px, 100%);
  max-height: min(86vh, 680px);
  overflow: auto;
  padding: clamp(18px, 3vw, 24px);
  border: 1px solid rgba(139, 200, 246, 0.32);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.12), transparent 42%),
    linear-gradient(225deg, rgba(86, 207, 174, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
  box-shadow:
    0 30px 90px rgba(15, 23, 42, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-note-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.admin-studio-character-note-modal-head div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-character-note-modal-head span {
  color: #2765b8;
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-character-note-modal-head h3,
.admin-studio-character-note-modal-head p {
  margin: 0;
}

.admin-studio-character-note-modal-head h3 {
  color: var(--foreground);
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  line-height: 1.08;
}

.admin-studio-character-note-modal-head p {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.42;
}

.admin-studio-character-note-modal-head button {
  display: inline-grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  cursor: pointer;
}

.admin-studio-character-note-modal-head button:hover,
.admin-studio-character-note-modal-head button:focus-visible {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  outline: none;
}

.admin-studio-character-note-target {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(31, 95, 174, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
}

.admin-studio-character-note-target-head {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-note-target-head span {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 930;
  line-height: 1.1;
}

.admin-studio-character-note-target-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-character-note-target-current {
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    rgba(255, 255, 255, 0.58);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  color: #64748b;
}

.admin-studio-character-note-target.is-main .admin-studio-character-note-target-current {
  aspect-ratio: 1.12;
}

.admin-studio-character-note-target-current img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-note-target-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  padding: 18px;
  color: #64748b;
  text-align: center;
}

.admin-studio-character-note-target-empty small {
  max-width: 180px;
  color: inherit;
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.25;
}

.admin-studio-character-note-target-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.admin-studio-character-note-target-strip button {
  position: relative;
  display: grid;
  flex: 0 0 82px;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.76);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
}

.admin-studio-character-note-target-strip button:hover,
.admin-studio-character-note-target-strip button:focus-visible {
  border-color: rgba(31, 95, 174, 0.3);
  background: rgba(255, 255, 255, 0.94);
  outline: none;
}

.admin-studio-character-note-target-strip button.is-current {
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.1);
  cursor: default;
}

.admin-studio-character-note-target-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-character-note-target.is-turnaround .admin-studio-character-note-target-strip img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.admin-studio-character-note-target-strip span {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 860;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-note-target-strip button.is-current span {
  color: #0f766e;
}

.admin-studio-character-note-modal textarea {
  min-height: 180px;
  resize: vertical;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 13px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-note-modal textarea:focus {
  border-color: rgba(108, 140, 255, 0.46);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(108, 140, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-modal-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-character-modal-fields .field {
  display: grid;
  gap: 7px;
}

.admin-studio-character-modal-fields .field > span:first-child {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-character-modal-fields .field:only-child,
.admin-studio-character-modal-fields .field:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.admin-studio-character-modal-fields input,
.admin-studio-character-modal-fields select {
  width: 100%;
}

.admin-studio-character-note-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-character-note-modal-actions > span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.admin-studio-character-note-modal-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-main-image-note-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-main-image-note-presets button {
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgba(139, 200, 246, 0.34);
  border-radius: 999px;
  background: rgba(139, 200, 246, 0.12);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 820;
}

.admin-studio-main-image-note-presets button:hover,
.admin-studio-main-image-note-presets button:focus-visible {
  border-color: rgba(108, 140, 255, 0.46);
  background: rgba(108, 140, 255, 0.14);
  outline: none;
}

.admin-studio-character-create-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-character-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, 220px);
  gap: 12px;
  align-items: end;
}

.admin-studio-character-primary-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.admin-studio-character-primary-stack .admin-studio-character-segment {
  justify-self: end;
}

.admin-studio-character-photo-block {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.58);
}

.admin-studio-character-photo-block-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-studio-character-photo-block-head > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-character-photo-block-head strong,
.admin-studio-character-photo-block-head small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-photo-block-head strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 920;
}

.admin-studio-character-photo-block-head small {
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
}

.admin-studio-character-create-page .studio-photo-picker {
  border-color: rgba(139, 200, 246, 0.48);
  background:
    radial-gradient(circle at 92% 0%, rgba(139, 200, 246, 0.2), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.82);
  box-shadow:
    0 18px 42px rgba(39, 101, 184, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-create-page .studio-photo-picker:hover,
.admin-studio-character-create-page .studio-photo-picker:focus-within,
.admin-studio-character-create-page .studio-photo-picker.is-dragging {
  border-color: rgba(108, 140, 255, 0.72);
  box-shadow:
    0 0 0 5px rgba(108, 140, 255, 0.12),
    0 22px 54px rgba(39, 101, 184, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.admin-studio-character-create-page .studio-photo-picker.is-dragging {
  background:
    radial-gradient(circle at 88% 0%, rgba(108, 140, 255, 0.26), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.24), transparent 34%),
    rgba(255, 255, 255, 0.92);
}

.admin-studio-character-create-page .studio-photo-picker-icon {
  background: rgba(139, 200, 246, 0.16);
  color: #2765b8;
  box-shadow: inset 0 0 0 1px rgba(139, 200, 246, 0.28);
}

.admin-studio-character-create-page .studio-photo-picker-action {
  border: 1px solid rgba(31, 95, 174, 0.2);
  background: #1f5fae;
  color: #f8fbff;
}

.admin-studio-character-create-page .studio-photo-picker.has-photo .studio-photo-picker-action {
  border-color: rgba(100, 116, 139, 0.2);
  background: rgba(255, 255, 255, 0.74);
  color: #475569;
}

.admin-studio-character-segment {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: min(100%, 160px);
  padding: 4px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.admin-studio-character-segment button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1;
  padding: 0 10px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.admin-studio-character-species-label {
  min-width: 0;
  overflow: hidden;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-segment button:hover,
.admin-studio-character-segment button:focus-visible {
  background: rgba(255, 255, 255, 0.58);
  color: #334155;
}

.admin-studio-character-segment button.is-active {
  border-color: rgba(31, 95, 174, 0.18);
  background: rgba(255, 255, 255, 0.9);
  color: #1f5fae;
  box-shadow:
    inset 0 -2px 0 rgba(31, 95, 174, 0.82),
    0 1px 2px rgba(15, 23, 42, 0.05);
}

.admin-studio-character-create-disclosure {
  display: grid;
  min-width: 0;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.admin-studio-character-create-disclosure[open] {
  gap: 12px;
  border-color: rgba(17, 24, 39, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.72)),
    rgba(17, 24, 39, 0.035);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.admin-studio-character-create-disclosure > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  outline: none;
}

.admin-studio-character-create-disclosure > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-create-disclosure > summary:hover,
.admin-studio-character-create-disclosure > summary:focus-visible {
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-character-disclosure-icon {
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #17120a;
}

.admin-studio-character-create-disclosure > summary > span:not(.admin-studio-character-disclosure-icon) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-character-create-disclosure > summary strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-create-disclosure > summary small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-create-disclosure > summary > svg {
  color: var(--muted-foreground);
  transition: transform 140ms ease;
}

.admin-studio-character-create-disclosure[open] > summary > svg {
  transform: rotate(180deg);
}

.admin-studio-character-create-disclosure > .admin-studio-character-create-fields,
.admin-studio-character-create-disclosure > .field {
  padding: 0 8px 8px;
}

.admin-studio-character-create-season {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-create-season-head {
  display: grid;
  gap: 5px;
}

.admin-studio-character-create-season-head span {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 880;
}

.admin-studio-character-create-season-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.admin-studio-character-create-disclosure.admin-studio-character-create-season {
  gap: 0;
  padding: 6px;
}

.admin-studio-character-create-disclosure.admin-studio-character-create-season[open] {
  gap: 12px;
}

.admin-studio-character-backgrounds {
  display: grid;
  gap: 8px;
}

.admin-studio-character-backgrounds > span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-character-backgrounds > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-character-backgrounds button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  cursor: pointer;
}

.admin-studio-character-backgrounds button.is-active {
  border-color: rgba(108, 140, 255, 0.58);
  box-shadow:
    0 0 0 3px rgba(108, 140, 255, 0.14),
    inset 0 0 0 1px rgba(23, 18, 10, 0.12);
}

.admin-studio-character-backgrounds i {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 999px;
}

.admin-studio-character-generate-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}

.admin-studio-character-generate-actions .button,
.admin-studio-character-create-form .button-primary {
  justify-content: center;
  min-height: 46px;
}

.admin-studio-character-generate-actions .button-secondary {
  border-color: rgba(39, 101, 184, 0.2);
  background: rgba(139, 200, 246, 0.12);
  color: var(--foreground);
}

.admin-studio-character-create-form .button-primary svg,
.admin-studio-character-generate-actions .button-secondary svg {
  flex: 0 0 auto;
}

.admin-studio-character-create-form .button-primary.is-loading svg,
.admin-studio-character-generate-actions .button-secondary.is-loading svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-character-create-readiness {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--muted-foreground);
}

.admin-studio-character-create-readiness svg {
  color: #2765b8;
}

.admin-studio-character-create-readiness.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.1);
}

.admin-studio-character-create-readiness.is-ready svg {
  color: #0f766e;
}

.admin-studio-character-create-readiness.is-working svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-character-create-readiness span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-character-create-readiness strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-studio-character-create-readiness small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-character-source-change-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(108, 140, 255, 0.36);
  border-radius: 16px;
  background: rgba(108, 140, 255, 0.1);
}

.admin-studio-character-source-change-note > svg {
  margin-top: 2px;
  color: #2765b8;
}

.admin-studio-character-source-change-note div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-character-source-change-note strong,
.admin-studio-character-source-change-note p {
  margin: 0;
}

.admin-studio-character-source-change-note strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 900;
}

.admin-studio-character-source-change-note p {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-character-generation-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 42px);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.42)),
    linear-gradient(160deg, rgba(108, 140, 255, 0.2), transparent 42%),
    linear-gradient(25deg, transparent 45%, rgba(86, 207, 174, 0.2));
  backdrop-filter: blur(12px);
}

.admin-studio-character-generation-overlay.is-turnaround {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.44)),
    radial-gradient(circle at 22% 18%, rgba(139, 200, 246, 0.28), transparent 32%),
    radial-gradient(circle at 78% 74%, rgba(86, 207, 174, 0.22), transparent 34%);
}

.admin-studio-character-generation-progress {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(139, 200, 246, 0.32);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.14), transparent 42%),
    linear-gradient(225deg, rgba(86, 207, 174, 0.1), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.admin-studio-character-generation-progress.is-modal {
  width: min(760px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px);
  border-radius: 24px;
  box-shadow:
    0 30px 90px rgba(15, 23, 42, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.admin-studio-character-generation-progress-head {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-character-generation-badge {
  display: inline-flex;
  width: fit-content;
  gap: 7px;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(139, 200, 246, 0.38);
  border-radius: 999px;
  background: rgba(139, 200, 246, 0.16);
  color: #1e4f8f;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-character-generation-progress svg,
.admin-studio-character-generation-badge svg {
  color: #2765b8;
}

.admin-studio-character-generation-badge svg,
.admin-studio-character-generation-steps li.is-active svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-character-generation-progress-head strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.18;
}

.admin-studio-character-generation-progress-head small,
.admin-studio-character-generation-meter small,
.admin-studio-character-generation-steps small,
.admin-studio-character-generation-note {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.38;
}

.admin-studio-character-generation-meter {
  display: grid;
  gap: 8px;
}

.admin-studio-character-generation-meter > span:first-child {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.admin-studio-character-generation-meter strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 940;
}

.admin-studio-character-generation-meter small {
  text-align: right;
}

.admin-studio-character-generation-track {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.admin-studio-character-generation-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2765b8, #6c8cff 56%, #56cfae);
  transition: width 400ms ease;
}

.admin-studio-character-generation-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-studio-character-generation-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.56);
}

.admin-studio-character-generation-steps li > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-character-generation-steps li > span:first-child {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 2px solid rgba(100, 116, 139, 0.28);
  border-radius: 999px;
}

.admin-studio-character-generation-steps li.is-done {
  border-color: rgba(86, 207, 174, 0.32);
  background: rgba(86, 207, 174, 0.1);
}

.admin-studio-character-generation-steps li.is-done svg {
  color: #0f766e;
}

.admin-studio-character-generation-steps li.is-active {
  border-color: rgba(108, 140, 255, 0.4);
  background: rgba(108, 140, 255, 0.1);
}

.admin-studio-character-generation-steps strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
}

.admin-studio-character-generation-steps small {
  font-size: 0.72rem;
}

.admin-studio-character-generation-note {
  margin: 0;
  padding-top: 2px;
}

@media (max-width: 760px) {
  .admin-studio-character-generation-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .admin-studio-character-generation-meter > span:first-child {
    display: grid;
    gap: 2px;
  }

  .admin-studio-character-generation-meter small {
    text-align: left;
  }

  .admin-studio-character-generation-steps {
    grid-template-columns: 1fr;
  }
}

.admin-studio-character-create-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-create-status span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 860;
  text-align: center;
}

.admin-studio-character-create-status span i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.56);
}

.admin-studio-character-create-status span.is-ready {
  color: var(--foreground);
}

.admin-studio-character-create-status span.is-ready i {
  background: #0f766e;
}

.admin-studio-character-create-status svg {
  color: var(--muted-foreground);
}

.admin-studio-character-production-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-production-line-item {
  display: contents;
}

.admin-studio-character-production-line-item > svg {
  align-self: center;
  color: rgba(100, 116, 139, 0.72);
}

.admin-studio-character-production-line button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 8px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.admin-studio-character-production-line button:hover,
.admin-studio-character-production-line button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(31, 95, 174, 0.24);
  background: rgba(255, 255, 255, 0.9);
  outline: none;
}

.admin-studio-character-production-line button.is-active {
  border-color: rgba(31, 95, 174, 0.3);
  background: rgba(239, 246, 255, 0.86);
  box-shadow: 0 0 0 3px rgba(31, 95, 174, 0.08);
}

.admin-studio-character-production-line button.is-ready .admin-studio-character-production-thumb {
  border-color: rgba(15, 118, 110, 0.22);
}

.admin-studio-character-production-thumb {
  display: grid;
  width: 48px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #64748b;
}

.admin-studio-character-production-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-production-line button > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-studio-character-production-line strong,
.admin-studio-character-production-line small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-production-line strong {
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 920;
}

.admin-studio-character-production-line small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-studio-character-create-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-character-create-compare figure {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
}

.admin-studio-character-create-compare figure > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-character-image-stage {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    rgba(255, 255, 255, 0.5);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
  color: var(--muted-foreground);
  text-align: center;
}

.admin-studio-character-image-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-character-preview-open {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: end center;
  padding: 10px;
  border: 0;
  background: transparent;
  color: var(--foreground);
  cursor: zoom-in;
  font: inherit;
}

.admin-studio-character-preview-open span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
  color: #1f2937;
  font-size: 0.68rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background 160ms ease;
  backdrop-filter: blur(12px);
}

.admin-studio-character-preview-open:hover span,
.admin-studio-character-preview-open:focus-visible span,
.admin-studio-character-image-stage:hover .admin-studio-character-preview-open span,
.admin-studio-turnaround-frame:hover .admin-studio-character-preview-open span {
  opacity: 1;
  transform: translateY(0);
}

.admin-studio-character-preview-open:focus-visible {
  outline: 3px solid rgba(108, 140, 255, 0.24);
  outline-offset: -5px;
}

.admin-studio-character-image-stage strong {
  font-size: 0.86rem;
}

.admin-studio-character-image-history-button {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #1f2937;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(12px);
}

.admin-studio-character-image-history-button:hover,
.admin-studio-character-image-history-button:focus-visible {
  border-color: rgba(31, 95, 174, 0.52);
  background: rgba(255, 255, 255, 0.94);
  color: #1f5fae;
  outline: none;
}

.admin-studio-character-image-history-button:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.admin-studio-character-image-history-button small {
  display: inline-grid;
  min-width: 18px;
  min-height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.12);
  color: #1f5fae;
  font-size: 0.62rem;
  font-weight: 950;
}

.admin-studio-character-create-compare figcaption {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-studio-character-create-compare figcaption strong,
.admin-studio-character-create-compare figcaption small {
  overflow-wrap: anywhere;
}

.admin-studio-character-create-compare figcaption strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-studio-character-create-compare figcaption small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-character-create-analysis,
.admin-studio-character-create-result {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-studio-character-create-analysis span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-character-create-analysis strong {
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.admin-studio-character-create-analysis p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-studio-character-create-result {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
}

.admin-studio-character-create-result > svg {
  color: #0f766e;
}

.admin-studio-character-create-result.is-attention {
  border-color: rgba(108, 140, 255, 0.36);
  background: rgba(108, 140, 255, 0.1);
}

.admin-studio-character-create-result.is-attention > svg {
  color: #2765b8;
}

.admin-studio-character-create-result div {
  display: grid;
  gap: 3px;
}

.admin-studio-character-create-result strong,
.admin-studio-character-create-result p {
  margin: 0;
}

.admin-studio-character-create-result p {
  color: var(--muted-foreground);
  font-size: 0.82rem;
}

.admin-studio-character-revision-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(139, 200, 246, 0.34);
  border-radius: 16px;
  background: rgba(139, 200, 246, 0.12);
}

.admin-studio-character-revision-note > svg {
  margin-top: 2px;
  color: #2765b8;
}

.admin-studio-character-revision-note div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-character-revision-note strong,
.admin-studio-character-revision-note p {
  margin: 0;
}

.admin-studio-character-revision-note strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 900;
}

.admin-studio-character-revision-note p {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-character-main-image-tools {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  min-width: 0;
}

.admin-studio-character-icon-tool {
  display: inline-grid;
  width: 32px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: #64748b;
  cursor: pointer;
}

.admin-studio-character-icon-tool:hover,
.admin-studio-character-icon-tool:focus-visible {
  border-color: rgba(31, 95, 174, 0.28);
  background: rgba(255, 255, 255, 0.92);
  color: #1f5fae;
  outline: none;
}

.admin-studio-character-icon-tool:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.admin-studio-character-icon-tool.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.admin-studio-character-icon-tool svg.is-spinning {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-character-tool-pill {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #475569;
  font-size: 0.76rem;
  font-weight: 860;
  cursor: pointer;
}

.admin-studio-character-tool-pill:hover,
.admin-studio-character-tool-pill:focus-visible {
  border-color: rgba(31, 95, 174, 0.28);
  background: rgba(255, 255, 255, 0.94);
  color: #1f5fae;
  outline: none;
}

.admin-studio-character-tool-pill small {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.1);
  color: #1f5fae;
  font-size: 0.66rem;
  font-weight: 920;
}

.admin-studio-character-tool-pill:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.admin-studio-character-upload-sheet-action {
  position: relative;
  min-width: 118px;
  justify-content: center;
  white-space: nowrap;
}

.admin-studio-character-main-image-modal {
  width: min(760px, 100%);
}

.admin-studio-character-preview-modal {
  width: min(860px, 100%);
}

.admin-studio-character-preview-modal-image {
  display: grid;
  width: 100%;
  max-height: min(58vh, 620px);
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(100, 116, 139, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    rgba(255, 255, 255, 0.62);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.admin-studio-character-preview-modal-image img {
  display: block;
  width: 100%;
  max-height: min(58vh, 620px);
  object-fit: contain;
}

.admin-studio-character-preview-modal-image:not(.is-turnaround) {
  aspect-ratio: 1;
}

.admin-studio-character-preview-modal-image.is-turnaround {
  aspect-ratio: 16 / 8;
}

.admin-studio-character-preview-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-character-preview-modal-actions .button {
  min-height: 40px;
}

.admin-studio-character-help-panel {
  display: grid;
  gap: 10px;
}

.admin-studio-character-help-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.5;
}

.admin-studio-character-hero-history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.admin-studio-character-hero-history-grid button {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(100, 116, 139, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-studio-character-hero-history-grid button:hover,
.admin-studio-character-hero-history-grid button:focus-visible {
  border-color: rgba(31, 95, 174, 0.3);
  background: rgba(255, 255, 255, 0.92);
  outline: none;
}

.admin-studio-character-hero-history-grid button.is-current {
  border-color: rgba(86, 207, 174, 0.38);
  background: rgba(86, 207, 174, 0.1);
  cursor: default;
}

.admin-studio-character-hero-history-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.admin-studio-character-hero-history-grid span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-studio-character-hero-history-grid strong,
.admin-studio-character-hero-history-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-hero-history-grid strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-studio-character-hero-history-grid small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 720;
}

.admin-studio-character-history-labels {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px !important;
  margin-top: 3px;
}

.admin-studio-character-history-labels em {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-studio-character-history-labels em.is-current {
  background: rgba(86, 207, 174, 0.18);
  color: #0f766e;
}

.admin-studio-character-history-labels em.is-production {
  background: rgba(31, 95, 174, 0.12);
  color: #1f5fae;
}

.admin-studio-turnaround-review {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-studio-turnaround-review-head {
  display: grid;
  gap: 4px;
}

.admin-studio-turnaround-review-head span {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 880;
}

.admin-studio-turnaround-review-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.admin-studio-turnaround-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 8;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.035) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.035) 75%),
    rgba(255, 255, 255, 0.5);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

.admin-studio-turnaround-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-studio-turnaround-frame.is-stale {
  border-color: rgba(31, 95, 174, 0.2);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.82), rgba(255, 255, 255, 0.54)),
    rgba(255, 255, 255, 0.5);
}

.admin-studio-turnaround-frame.is-stale img {
  opacity: 0.86;
}

.admin-studio-turnaround-frame > div {
  display: grid;
  gap: 8px;
  place-items: center;
  color: var(--muted-foreground);
  text-align: center;
}

.admin-studio-turnaround-frame > div svg.is-spinning,
.admin-studio-turnaround-actions .button.is-loading svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.admin-studio-turnaround-frame > div strong {
  font-size: 0.88rem;
}

.admin-studio-turnaround-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-turnaround-actions .button {
  flex: 0 1 auto;
  min-height: 38px;
  white-space: nowrap;
}

.admin-studio-turnaround-actions .admin-studio-character-action-primary {
  flex: 1 1 180px;
}

.admin-studio-turnaround-actions .admin-studio-character-action-secondary,
.admin-studio-turnaround-actions .admin-studio-character-action-disabled {
  flex: 0 0 auto;
  min-width: 126px;
}

.admin-studio-turnaround-auto-save {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(86, 207, 174, 0.28);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.12);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-studio-turnaround-auto-save svg {
  color: #0f766e;
}

.admin-studio-turnaround-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 10px 11px;
  border: 1px solid rgba(100, 116, 139, 0.14);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.7);
  color: var(--muted-foreground);
}

.admin-studio-turnaround-status > svg {
  color: #64748b;
}

.admin-studio-turnaround-status span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-turnaround-status strong,
.admin-studio-turnaround-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-turnaround-status strong {
  color: #475569;
  font-size: 0.78rem;
  font-weight: 880;
  line-height: 1.2;
}

.admin-studio-turnaround-status small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.2;
}

.admin-studio-turnaround-status.is-confirmed {
  border-color: rgba(34, 197, 94, 0.22);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent 42%),
    rgba(240, 253, 244, 0.78);
}

.admin-studio-turnaround-status.is-confirmed > svg,
.admin-studio-turnaround-status.is-confirmed strong {
  color: #047857;
}

.admin-studio-turnaround-status.is-refresh-needed {
  border-color: rgba(31, 95, 174, 0.22);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.88), transparent 44%),
    rgba(255, 255, 255, 0.78);
}

.admin-studio-turnaround-status.is-refresh-needed > svg,
.admin-studio-turnaround-status.is-refresh-needed strong {
  color: #1f5fae;
}

.studio-minis-page {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 22px;
  max-width: 100%;
  overflow-x: clip;
  padding-bottom: 48px;
}

.studio-minis-hero,
.studio-minis-daily-queue,
.studio-minis-output,
.studio-minis-panel {
  border: 1px solid rgba(15, 23, 42, 0.09);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
}

.studio-minis-hero {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
}

.studio-minis-hero h1 {
  margin: 6px 0 8px;
  font-size: clamp(2.15rem, 5vw, 4rem);
  letter-spacing: 0;
}

.studio-minis-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.studio-minis-command-center {
  display: grid;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  padding: clamp(16px, 2.6vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.studio-minis-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px);
  gap: clamp(14px, 2.4vw, 22px);
  align-items: stretch;
  max-width: 100%;
  min-width: 0;
}

.studio-minis-command-copy {
  display: grid;
  gap: 12px;
  align-content: center;
  min-width: 0;
}

.studio-minis-command-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-command-kicker .eyebrow {
  margin: 0;
}

.studio-minis-command-character {
  display: grid;
  gap: 4px;
}

.studio-minis-command-character > span,
.studio-minis-command-production-title > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-minis-command-character h1 {
  max-width: 900px;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: clamp(1.85rem, 3.6vw, 3.35rem);
  line-height: 1;
  letter-spacing: 0;
}

.studio-minis-command-character p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 820;
  line-height: 1.35;
}

.studio-minis-command-production-title {
  display: grid;
  gap: 4px;
  max-width: 760px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.studio-minis-command-production-title strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.2;
}

.studio-minis-command-production-title p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.admin-studio-lyrics-track textarea,
.admin-studio-lyrics-copy-pack textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font: 0.82rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: normal;
  white-space: pre;
}

.studio-minis-command-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.studio-minis-command-meta div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
}

.studio-minis-command-meta dt {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-command-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.25;
  text-transform: capitalize;
}

.studio-minis-operator-strip {
  display: grid;
  grid-template-columns: minmax(1.15fr, 1.45fr) repeat(3, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}

.studio-minis-operator-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 68px;
  align-content: center;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.86));
  color: var(--foreground);
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.studio-minis-operator-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    0 10px 24px rgba(15, 23, 42, 0.07);
}

.studio-minis-operator-card > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.studio-minis-operator-card strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  line-height: 1.12;
}

.studio-minis-operator-card small {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.studio-minis-operator-card.is-ready {
  border-color: rgba(20, 184, 166, 0.26);
  background:
    linear-gradient(180deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.88));
}

.studio-minis-operator-card.is-working {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(255, 255, 255, 0.9));
}

.studio-minis-operator-card.is-danger {
  border-color: rgba(239, 68, 68, 0.26);
  background:
    linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(255, 255, 255, 0.9));
}

.studio-minis-purpose-note {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.8);
}

.studio-minis-purpose-note strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 930;
  line-height: 1.15;
}

.studio-minis-purpose-note p {
  max-width: 980px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.studio-minis-control-room,
.studio-minis-queue-panel,
.studio-minis-roster-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 24px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
}

.studio-minis-control-room {
  gap: 10px;
  padding: clamp(12px, 1.8vw, 18px);
  border-radius: 20px;
}

.studio-minis-control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 470px);
  gap: clamp(10px, 1.8vw, 18px);
  align-items: center;
  min-width: 0;
}

.studio-minis-control-hero h1 {
  max-width: 880px;
  margin: 2px 0 5px;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.45vw, 2.1rem);
  line-height: 1;
  letter-spacing: 0;
}

.studio-minis-control-hero p {
  max-width: 820px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: clamp(0.84rem, 1.1vw, 0.94rem);
  font-weight: 680;
  line-height: 1.42;
}

.studio-minis-control-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.studio-minis-control-side div {
  display: grid;
  gap: 3px;
  min-width: 0;
  align-content: center;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 235, 0.66));
}

.studio-minis-control-side span,
.studio-minis-queue-copy span,
.studio-minis-roster-copy span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.studio-minis-control-side strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 930;
  line-height: 1.1;
}

.studio-minis-control-side small,
.studio-minis-queue-copy small,
.studio-minis-roster-copy small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.28;
}

.studio-minis-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.studio-minis-today-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.studio-minis-board-column {
  display: grid;
  gap: 9px;
  min-width: 0;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.86));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.studio-minis-board-head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-board-head span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 930;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.studio-minis-board-head strong {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 930;
}

.studio-minis-board-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.studio-minis-board-card,
.studio-minis-board-empty {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-board-card.is-ready {
  border-color: rgba(20, 184, 166, 0.28);
  background: rgba(240, 253, 250, 0.74);
}

.studio-minis-board-card.is-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.74);
}

.studio-minis-board-card.is-recommended {
  border-color: rgba(20, 184, 166, 0.2);
}

.studio-minis-board-card.is-careful {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(255, 251, 235, 0.72);
}

.studio-minis-board-card.is-cooldown,
.studio-minis-board-card.is-saved {
  opacity: 0.78;
  border-style: dashed;
}

.studio-minis-board-empty {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.35;
}

.studio-minis-board-card-main {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.studio-minis-board-thumb {
  display: grid;
  overflow: hidden;
  width: 48px;
  aspect-ratio: 9 / 12;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(248, 250, 252, 0.92);
}

.studio-minis-board-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-board-thumb span {
  color: var(--muted-foreground);
  font-size: 1rem;
  font-weight: 940;
}

.studio-minis-board-card-main strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-board-card-main small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 780;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.studio-minis-board-reason,
.studio-minis-queue-reason {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-board-reason-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.studio-minis-board-reason-row > span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.studio-minis-queue-reason {
  padding-inline: 2px;
}

.studio-minis-board-card form,
.studio-minis-board-card .button {
  width: 100%;
}

.studio-minis-board-job-state.admin-studio-job-card-state {
  width: 100%;
  justify-content: space-between;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.studio-minis-board-job-state .admin-studio-job-status {
  min-width: 0;
}

.studio-minis-board-card .button {
  justify-content: center;
}

.studio-minis-board-review-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.045);
}

.studio-minis-board-review-actions button {
  width: 100%;
  min-height: 32px;
  padding: 5px 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 880;
}

.studio-minis-board-review-actions button.is-selected {
  background: white;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.1);
}

.studio-minis-board-review-actions button.is-keep {
  color: #0f766e;
}

.studio-minis-board-review-actions button.is-adjust {
  color: #a16207;
}

.studio-minis-board-review-actions button.is-pass {
  color: #dc2626;
}

.studio-minis-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
  min-width: 0;
}

.studio-minis-memory-panel,
.studio-minis-calendar-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.studio-minis-ops-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-ops-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 940;
  line-height: 1.1;
}

.studio-minis-ops-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  white-space: nowrap;
}

.studio-minis-memory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-width: 0;
}

.studio-minis-memory-stats div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.studio-minis-memory-stats strong {
  color: var(--foreground);
  font-size: 1.12rem;
  font-weight: 960;
  line-height: 1;
}

.studio-minis-memory-stats span,
.studio-minis-memory-columns > div > span,
.studio-minis-calendar-column-head span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.studio-minis-memory-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.studio-minis-memory-columns > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.studio-minis-memory-tags b,
.studio-minis-memory-tags small {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.studio-minis-memory-tags small {
  color: var(--muted-foreground);
}

.studio-minis-memory-columns p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-qa-memory-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(254, 242, 242, 0.78), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.studio-minis-qa-memory-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  min-width: 0;
}

.studio-minis-qa-memory-stats div {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-qa-health-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.72), rgba(255, 251, 235, 0.56)),
    rgba(255, 255, 255, 0.62);
}

.studio-minis-qa-health-panel.is-working {
  border-color: rgba(245, 158, 11, 0.2);
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.76), rgba(239, 246, 255, 0.58)),
    rgba(255, 255, 255, 0.62);
}

.studio-minis-qa-health-panel.is-neutral {
  border-color: rgba(59, 130, 246, 0.16);
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.72), rgba(240, 253, 244, 0.54)),
    rgba(255, 255, 255, 0.62);
}

.studio-minis-qa-health-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.studio-minis-qa-health-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-qa-health-head span,
.studio-minis-qa-health-grid span {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.studio-minis-qa-health-head strong {
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 960;
  line-height: 1.12;
}

.studio-minis-qa-health-head small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.34;
}

.studio-minis-qa-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
  min-width: 0;
}

.studio-minis-qa-health-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.studio-minis-qa-health-grid > div.is-working span {
  color: #b45309;
}

.studio-minis-qa-health-grid > div.is-neutral span {
  color: #2563eb;
}

.studio-minis-qa-health-grid strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1;
}

.studio-minis-qa-health-grid small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.28;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-action-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-qa-action-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-qa-action-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-qa-action-head span,
.studio-minis-qa-action-main > div > span {
  color: #b45309;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.studio-minis-qa-action-head strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.12;
}

.studio-minis-qa-action-head small {
  max-width: 420px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.34;
  text-align: right;
}

.studio-minis-qa-action-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.studio-minis-qa-action-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
}

.studio-minis-qa-action-card:hover {
  border-color: rgba(245, 158, 11, 0.32);
  transform: translateY(-1px);
}

.studio-minis-qa-action-card.is-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(254, 242, 242, 0.72);
}

.studio-minis-qa-action-card.is-working {
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(255, 251, 235, 0.72);
}

.studio-minis-qa-action-card.is-neutral {
  border-color: rgba(59, 130, 246, 0.16);
  background: rgba(239, 246, 255, 0.58);
}

.studio-minis-qa-action-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(86px, auto) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-action-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-qa-action-card.is-danger .studio-minis-qa-action-main > div > span {
  color: #dc2626;
}

.studio-minis-qa-action-card.is-neutral .studio-minis-qa-action-main > div > span {
  color: #2563eb;
}

.studio-minis-qa-action-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 920;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-action-card small,
.studio-minis-qa-action-card em {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.69rem;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-action-card em {
  font-style: normal;
  text-align: right;
}

.studio-minis-qa-action-card b {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--foreground);
  color: var(--background);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.studio-minis-qa-action-guide {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 8px;
  border-left: 2px solid rgba(245, 158, 11, 0.38);
}

.studio-minis-qa-action-guide > span {
  color: #a16207;
  font-size: 0.62rem;
  font-weight: 920;
  text-transform: uppercase;
}

.studio-minis-qa-action-guide small {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: visible;
  color: #57534e;
  font-size: 0.65rem;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.studio-minis-qa-action-guide small b {
  color: var(--foreground);
  font-size: inherit;
  font-weight: 920;
  line-height: inherit;
  white-space: nowrap;
}

.studio-minis-qa-action-reasons {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 2px;
}

.studio-minis-qa-action-reasons > span {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-qa-action-reasons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.studio-minis-qa-action-effect,
.studio-minis-qa-action-reasons .admin-studio-action-feedback {
  color: #78716c;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 820;
  line-height: 1.35;
}

.studio-minis-qa-action-reasons .admin-studio-action-feedback.is-pending {
  color: #92400e;
}

.studio-minis-qa-action-reasons form,
.studio-minis-qa-action-reasons .admin-studio-action-submit {
  display: contents;
}

.studio-minis-qa-action-reason-button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(161, 98, 7, 0.2);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.72);
  color: #92400e;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.studio-minis-qa-action-reason-button:hover,
.studio-minis-qa-action-reason-button:focus-visible {
  border-color: rgba(161, 98, 7, 0.38);
  background: rgba(254, 243, 199, 0.9);
  color: #78350f;
  outline: none;
}

.studio-minis-qa-pattern-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-qa-pattern-panel > div:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-qa-pattern-panel > div:first-child span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.studio-minis-qa-pattern-panel > div:first-child small {
  color: #b45309;
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.studio-minis-qa-pattern-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
  gap: 7px;
  min-width: 0;
}

.studio-minis-qa-pattern-card {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-pattern-card:hover {
  border-color: rgba(245, 158, 11, 0.32);
  transform: translateY(-1px);
}

.studio-minis-qa-pattern-card > span {
  color: #b45309;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-qa-pattern-card.is-character > span {
  color: #0f766e;
}

.studio-minis-qa-pattern-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-pattern-card small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.69rem;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-memory-stats strong {
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 960;
  line-height: 1;
}

.studio-minis-qa-memory-stats span,
.studio-minis-qa-memory-grid > div > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.studio-minis-qa-memory-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.studio-minis-qa-memory-grid > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-qa-memory-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.studio-minis-qa-tag-row,
.studio-minis-qa-risk-card,
.studio-minis-qa-memory-list > small {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-tag-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.studio-minis-qa-tag-row:hover,
.studio-minis-qa-risk-card:hover {
  border-color: rgba(239, 68, 68, 0.22);
  transform: translateY(-1px);
}

.studio-minis-qa-risk-main {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-tag-row strong,
.studio-minis-qa-risk-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-tag-row small,
.studio-minis-qa-risk-card small,
.studio-minis-qa-risk-card p,
.studio-minis-qa-memory-list > small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.studio-minis-qa-tag-row span {
  display: inline-grid;
  min-width: 26px;
  min-height: 26px;
  place-items: center;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
  font-size: 0.74rem;
  font-weight: 940;
}

.studio-minis-qa-risk-card.is-danger {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(254, 242, 242, 0.74);
}

.studio-minis-qa-risk-card.is-working {
  border-color: rgba(245, 158, 11, 0.26);
  background: rgba(255, 251, 235, 0.72);
}

.studio-minis-qa-risk-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-qa-risk-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.studio-minis-qa-risk-head em {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-qa-risk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.studio-minis-qa-risk-tags span {
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--foreground);
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.studio-minis-qa-risk-card p {
  margin: 0;
  white-space: nowrap;
}

.studio-minis-qa-risk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding-top: 2px;
}

.studio-minis-qa-risk-actions form {
  display: contents;
}

.studio-minis-qa-risk-actions .button {
  min-height: 32px;
}

.studio-minis-qa-retry-card,
.studio-minis-qa-retry-trace-panel {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-retry-main {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.studio-minis-qa-retry-card.is-ready,
.studio-minis-qa-retry-trace-panel.is-ready {
  border-color: rgba(20, 184, 166, 0.26);
  background: rgba(240, 253, 250, 0.72);
}

.studio-minis-qa-retry-card.is-working,
.studio-minis-qa-retry-trace-panel.is-working {
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(255, 251, 235, 0.72);
}

.studio-minis-qa-retry-card.is-danger,
.studio-minis-qa-retry-trace-panel.is-danger {
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(254, 242, 242, 0.74);
}

.studio-minis-qa-retry-card:hover {
  border-color: rgba(20, 184, 166, 0.3);
  transform: translateY(-1px);
}

.studio-minis-qa-retry-main > div,
.studio-minis-qa-retry-trace-panel > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-qa-retry-card strong,
.studio-minis-qa-retry-trace-panel strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-retry-card small,
.studio-minis-qa-retry-card p,
.studio-minis-qa-retry-main > span,
.studio-minis-qa-retry-trace-panel small,
.studio-minis-qa-retry-trace-panel p,
.studio-minis-qa-retry-trace-panel dd {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.32;
}

.studio-minis-qa-retry-main > span,
.studio-minis-qa-retry-trace-panel > div > span {
  color: #0f766e;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-qa-retry-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-width: 0;
  padding: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.54);
}

.studio-minis-qa-retry-actions form,
.studio-minis-qa-retry-actions .admin-studio-action-submit {
  display: contents;
}

.studio-minis-qa-retry-action-button {
  display: inline-flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 880;
  line-height: 1;
}

.studio-minis-qa-retry-action-button:hover,
.studio-minis-qa-retry-action-button:focus-visible {
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  outline: none;
}

.studio-minis-qa-retry-action-button.is-keep {
  color: #0f766e;
}

.studio-minis-qa-retry-action-button.is-adjust {
  color: #a16207;
}

.studio-minis-qa-retry-action-button.is-pass {
  color: #dc2626;
}

.studio-minis-qa-retry-reasons {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 2px;
}

.studio-minis-qa-retry-reasons > span {
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.studio-minis-qa-retry-reasons > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.studio-minis-qa-retry-reasons form,
.studio-minis-qa-retry-reasons .admin-studio-action-submit {
  display: contents;
}

.studio-minis-qa-retry-reason-button {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 7px;
  border: 1px solid rgba(161, 98, 7, 0.2);
  border-radius: 999px;
  background: rgba(255, 251, 235, 0.72);
  color: #92400e;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
}

.studio-minis-qa-retry-reason-button:hover,
.studio-minis-qa-retry-reason-button:focus-visible {
  border-color: rgba(161, 98, 7, 0.38);
  background: rgba(254, 243, 199, 0.9);
  color: #78350f;
  outline: none;
}

.studio-minis-qa-retry-trace-panel {
  padding: 12px;
}

.studio-minis-qa-retry-trace-panel dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.studio-minis-qa-retry-trace-panel dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.studio-minis-qa-retry-trace-panel dt {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-qa-retry-trace-panel dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-qa-retry-trace-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.32;
}

.studio-minis-calendar-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.studio-minis-calendar-column {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-calendar-column.is-ready {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.68);
}

.studio-minis-calendar-column.is-working {
  border-color: rgba(255, 200, 0, 0.28);
  background: rgba(255, 251, 235, 0.72);
}

.studio-minis-calendar-column.is-danger {
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(254, 242, 242, 0.72);
}

.studio-minis-calendar-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.studio-minis-calendar-column-head strong {
  display: inline-grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 930;
}

.studio-minis-calendar-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-calendar-list a,
.studio-minis-calendar-list > small {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  color: inherit;
  text-decoration: none;
}

.studio-minis-calendar-list a:hover {
  border-color: rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.studio-minis-calendar-list strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-calendar-list span,
.studio-minis-calendar-list small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-performance-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.studio-minis-performance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.studio-minis-performance-grid > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-performance-grid > div > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.studio-minis-performance-list {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-performance-list a,
.studio-minis-performance-list div,
.studio-minis-performance-list > small {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
  color: inherit;
  text-decoration: none;
}

.studio-minis-performance-list a:hover {
  border-color: rgba(15, 23, 42, 0.14);
  transform: translateY(-1px);
}

.studio-minis-performance-list strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 890;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-performance-list small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-batch-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), transparent 45%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.9));
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
}

.studio-minis-batch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.studio-minis-batch-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.68);
}

.studio-minis-batch-grid article.is-auto {
  border-color: rgba(255, 200, 0, 0.28);
  background: rgba(255, 251, 235, 0.74);
}

.studio-minis-batch-grid strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.15;
}

.studio-minis-batch-grid p {
  max-width: 56ch;
  margin: 5px 0 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.35;
}

.studio-minis-batch-grid form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
}

.studio-minis-batch-grid label {
  display: grid;
  gap: 4px;
}

.studio-minis-batch-grid label span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.studio-minis-batch-grid select {
  min-height: 36px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 780;
}

.studio-minis-batch-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-batch-result.is-ready {
  border-color: rgba(20, 184, 166, 0.22);
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.1), transparent 48%),
    rgba(255, 255, 255, 0.74);
}

.studio-minis-batch-result.is-working {
  border-color: rgba(245, 158, 11, 0.24);
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), transparent 48%),
    rgba(255, 255, 255, 0.74);
}

.studio-minis-batch-result.is-danger {
  border-color: rgba(239, 68, 68, 0.24);
  background:
    linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent 48%),
    rgba(255, 255, 255, 0.74);
}

.studio-minis-batch-result-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-batch-result-main span,
.studio-minis-batch-inbox-head span,
.studio-minis-batch-inbox-list a > span,
.studio-minis-batch-log-list div > span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
}

.studio-minis-batch-result-main strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 940;
  line-height: 1.12;
  text-overflow: ellipsis;
}

.studio-minis-batch-result-main small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.25;
}

.studio-minis-batch-result-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 8px;
  min-width: 0;
}

.studio-minis-batch-result-metrics div {
  display: grid;
  place-items: center;
  gap: 2px;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.68);
}

.studio-minis-batch-result-metrics strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1;
}

.studio-minis-batch-result-metrics span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 820;
}

.studio-minis-batch-inbox {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 10px;
  min-width: 0;
}

.studio-minis-batch-inbox-column {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.studio-minis-batch-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.studio-minis-batch-inbox-head strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 920;
}

.studio-minis-batch-inbox-list,
.studio-minis-batch-log-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.studio-minis-batch-inbox-list a,
.studio-minis-batch-log-list div,
.studio-minis-batch-inbox-list > small,
.studio-minis-batch-log-list > small {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 13px;
  background: rgba(248, 250, 252, 0.78);
  color: inherit;
  text-decoration: none;
}

.studio-minis-batch-inbox-list a:hover {
  border-color: rgba(255, 200, 0, 0.38);
  transform: translateY(-1px);
}

.studio-minis-batch-inbox-list strong,
.studio-minis-batch-log-list strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-batch-inbox-list small,
.studio-minis-batch-log-list small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 740;
  line-height: 1.28;
}

.studio-minis-queue-list,
.studio-minis-roster-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.studio-minis-queue-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.studio-minis-roster-list {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.studio-minis-queue-list article,
.studio-minis-roster-list a {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  text-decoration: none;
}

.studio-minis-queue-list article.is-saved,
.studio-minis-roster-list a.is-active {
  border-color: rgba(255, 200, 0, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.76), rgba(255, 255, 255, 0.82));
  box-shadow: inset 4px 0 0 rgba(255, 200, 0, 0.82);
}

.studio-minis-queue-card-main,
.studio-minis-roster-list a {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.studio-minis-queue-card-main {
  color: inherit;
  text-decoration: none;
}

.studio-minis-queue-card-main:hover .studio-minis-queue-copy strong {
  color: var(--accent-strong);
}

.studio-minis-queue-action {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.studio-minis-queue-action form,
.studio-minis-queue-action .button {
  width: 100%;
}

.studio-minis-queue-action .button {
  justify-content: center;
}

.studio-minis-queue-thumb,
.studio-minis-roster-thumb {
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}

.studio-minis-queue-thumb {
  width: 72px;
  aspect-ratio: 9 / 12;
}

.studio-minis-roster-thumb {
  width: 72px;
  aspect-ratio: 1;
}

.studio-minis-queue-thumb img,
.studio-minis-roster-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-queue-thumb span,
.studio-minis-roster-thumb span {
  color: var(--muted-foreground);
  font-size: 1.3rem;
  font-weight: 940;
}

.studio-minis-queue-copy,
.studio-minis-roster-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-queue-copy strong,
.studio-minis-roster-copy strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 920;
  line-height: 1.15;
}

.studio-minis-roster-copy > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-roster-copy > div strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-roster-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.34;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-empty-state {
  display: grid;
  min-height: 120px;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(15, 23, 42, 0.16);
  border-radius: 16px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 780;
  text-align: center;
}

.studio-minis-workbench-command {
  scroll-margin-top: 18px;
}

.studio-minis-command-preview {
  display: grid;
  gap: 8px;
  align-content: start;
  max-width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: #ffffff;
}

.studio-minis-command-preview > span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-command-preview img,
.studio-minis-command-preview video,
.studio-minis-command-preview > div {
  width: 100%;
  max-height: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.92);
}

.studio-minis-command-preview img,
.studio-minis-command-preview video {
  display: block;
  object-fit: contain;
}

.studio-minis-command-preview video {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(46svh, 420px);
  max-height: 420px;
}

.studio-minis-command-preview > div {
  display: grid;
  place-items: center;
  padding: 18px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  font-weight: 820;
  text-align: center;
}

.studio-minis-command-stepper {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
}

.studio-minis-primary-action {
  border-color: rgba(15, 23, 42, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.64));
  box-shadow: inset 5px 0 0 rgba(255, 200, 0, 0.82);
}

.studio-minis-builder {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.94));
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.12);
  color: #ffffff;
}

.studio-minis-builder-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-builder-head h2 {
  margin: 4px 0 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}

.studio-minis-builder-head p {
  max-width: 780px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  line-height: 1.5;
}

.studio-minis-builder-head > span {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-builder .eyebrow {
  color: rgba(255, 200, 0, 0.9);
}

.studio-minis-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px;
}

.studio-minis-builder-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 12px;
  align-content: space-between;
  min-height: 178px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
}

.studio-minis-builder-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: rgba(148, 163, 184, 0.64);
}

.studio-minis-builder-card.is-ready::before {
  background: #14b8a6;
}

.studio-minis-builder-card.is-current::before,
.studio-minis-builder-card.is-needed::before {
  background: #ffc800;
}

.studio-minis-builder-card.is-waiting {
  opacity: 0.78;
}

.studio-minis-builder-card-icon {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}

.studio-minis-builder-card > div:not(.studio-minis-builder-card-icon) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-builder-card > div:not(.studio-minis-builder-card-icon) > span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.studio-minis-builder-card strong {
  overflow-wrap: anywhere;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.18;
}

.studio-minis-builder-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.82rem;
  line-height: 1.42;
}

.studio-minis-builder-card .button,
.studio-minis-builder-card form {
  width: 100%;
  min-width: 0;
}

.studio-minis-builder-card .button {
  justify-content: center;
  white-space: normal;
}

.studio-minis-builder-disabled {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.78rem;
  font-weight: 850;
}

.studio-minis-drawer {
  gap: 0;
}

.studio-minis-drawer[open] {
  gap: 14px;
}

.studio-minis-drawer > summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--foreground);
  font-weight: 900;
  list-style-position: inside;
}

.studio-minis-drawer > summary small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
}

.studio-minis-drawer[open] > summary {
  margin-bottom: 2px;
}

.studio-minis-readiness {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-readiness div {
  display: grid;
  gap: 5px;
  min-height: 74px;
  align-content: center;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.studio-minis-readiness div.is-ready {
  border-color: rgba(86, 207, 174, 0.42);
}

.studio-minis-readiness div.is-blocked {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.07);
}

.studio-minis-readiness span,
.studio-minis-production-meta dt {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-readiness strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.2;
}

.studio-minis-admin-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-admin-flow article {
  display: grid;
  gap: 5px;
  min-height: 70px;
  align-content: center;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.studio-minis-admin-flow article.is-active {
  border-color: rgba(15, 23, 42, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 235, 0.72));
  box-shadow: inset 4px 0 0 rgba(255, 200, 0, 0.82);
}

.studio-minis-admin-flow article.is-done {
  border-color: rgba(86, 207, 174, 0.46);
}

.studio-minis-admin-flow span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-admin-flow strong {
  color: var(--foreground);
  font-size: 0.9rem;
}

.studio-minis-daily-queue {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
}

.studio-minis-daily-queue > .studio-minis-panel-head > span {
  align-self: flex-start;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
}

.studio-minis-daily-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-minis-daily-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
  align-content: start;
  align-items: start;
  justify-content: stretch;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.studio-minis-daily-list article.is-saved {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.08);
}

.studio-minis-suggestion-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.studio-minis-daily-list article > div,
.studio-minis-daily-list dl,
.studio-minis-daily-list form {
  min-width: 0;
}

.studio-minis-daily-list span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.studio-minis-daily-list strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.18;
}

.studio-minis-daily-list p {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.85rem;
  line-height: 1.35;
}

.studio-minis-daily-list small {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.35;
}

.studio-minis-daily-list dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
  margin: 0;
}

.studio-minis-daily-list dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.54);
}

.studio-minis-daily-list dt {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.studio-minis-daily-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.25;
}

.studio-minis-daily-list .button-row {
  width: 100%;
  justify-content: flex-start;
  gap: 8px;
}

.studio-minis-daily-list .button-row > .button {
  flex: 0 1 auto;
  min-width: 0;
}

.studio-minis-daily-list .button-row form {
  display: flex;
  flex: 1 1 138px;
}

.studio-minis-daily-list .button-row form .button {
  width: 100%;
}

.studio-minis-daily-list .button-row .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.studio-minis-workbench {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.05fr) minmax(260px, 0.7fr);
  gap: 16px;
  align-items: start;
}

.studio-minis-workspace {
  display: grid;
  gap: 16px;
}

.studio-minis-panel,
.studio-minis-output {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 22px;
}

.studio-minis-sidebar {
  position: sticky;
  top: 88px;
}

.studio-minis-panel-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-panel-head h2 {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.8rem);
}

.studio-minis-panel-note {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
}

.studio-minis-status-pill {
  align-self: flex-start;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

a.studio-minis-status-pill {
  text-decoration: none;
}

.studio-minis-status-pill.is-ready {
  border-color: rgba(86, 207, 174, 0.44);
  color: #0f766e;
}

.studio-minis-status-pill.is-working {
  border-color: rgba(59, 130, 246, 0.38);
  color: #2563eb;
}

.studio-minis-status-pill.is-danger {
  border-color: rgba(239, 68, 68, 0.44);
  color: #dc2626;
}

.studio-minis-status-pill.is-stale {
  border-color: rgba(245, 158, 11, 0.44);
  color: #b45309;
}

.admin-studio-job-status {
  --studio-job-accent: rgba(100, 116, 139, 0.78);
  --studio-job-bg: rgba(255, 255, 255, 0.8);
  --studio-job-color: #111827;
  position: relative;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--studio-job-accent) 32%, transparent);
  border-radius: 999px;
  background: var(--studio-job-bg);
  color: var(--studio-job-color);
  font-size: 0.72rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px) saturate(135%);
}

.admin-studio-job-status i {
  position: relative;
  z-index: 1;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--studio-job-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--studio-job-accent) 14%, transparent);
}

.admin-studio-job-status strong,
.admin-studio-job-status small {
  position: relative;
  z-index: 1;
  min-width: 0;
  white-space: nowrap;
}

.admin-studio-job-status small {
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-size: 0.68rem;
  font-weight: 760;
}

.admin-studio-job-status.is-compact {
  min-height: 28px;
  gap: 6px;
  padding: 6px 11px;
  font-size: 0.66rem;
}

.admin-studio-job-status.has-progress {
  padding-bottom: 10px;
}

.admin-studio-job-status b {
  position: absolute;
  right: 8px;
  bottom: 5px;
  left: 8px;
  z-index: 0;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.16);
}

.admin-studio-job-status b::after {
  display: block;
  width: var(--studio-job-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--studio-job-accent);
  content: "";
  transition: width 220ms ease;
}

.admin-studio-job-status.is-working,
.admin-studio-job-status.is-queued {
  --studio-job-accent: #60a5fa;
  --studio-job-bg: rgba(239, 246, 255, 0.88);
}

.admin-studio-job-status.is-ready {
  --studio-job-accent: #14b8a6;
  --studio-job-bg: rgba(240, 253, 250, 0.9);
}

.admin-studio-job-status.is-review {
  --studio-job-accent: #8b5cf6;
  --studio-job-bg: rgba(245, 243, 255, 0.9);
}

.admin-studio-job-status.is-approved,
.admin-studio-job-status.is-published {
  --studio-job-accent: #16a34a;
  --studio-job-bg: rgba(240, 253, 244, 0.9);
}

.admin-studio-job-status.is-failed,
.admin-studio-job-status.is-danger {
  --studio-job-accent: #ef4444;
  --studio-job-bg: rgba(254, 242, 242, 0.9);
}

.admin-studio-job-status.is-stale {
  --studio-job-accent: #f59e0b;
  --studio-job-bg: rgba(255, 251, 235, 0.92);
}

.admin-studio-job-status.is-running i,
.admin-studio-job-status.is-queued i {
  animation: admin-studio-job-dot-pulse 1.25s ease-in-out infinite;
}

.admin-studio-job-card-state {
  display: inline-flex;
  max-width: min(100%, 360px);
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

.admin-studio-job-card-state.is-compact {
  gap: 7px;
}

.admin-studio-job-card-state .admin-studio-job-status {
  flex: 0 1 auto;
  min-width: 0;
  box-shadow: none;
}

.admin-studio-job-card-state .admin-studio-job-status strong,
.admin-studio-job-card-state .admin-studio-job-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-job-card-state .admin-studio-job-recovery-actions {
  flex: 0 0 auto;
}

.admin-studio-job-card-state.is-running,
.admin-studio-job-card-state.is-queued {
  isolation: isolate;
}

.admin-studio-jobs-page {
  min-height: 100vh;
  background: var(--admin-studio-page-bg, var(--background));
}

.admin-studio-jobs-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 18px 0 20px;
}

.admin-studio-jobs-hero h1 {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: clamp(2rem, 4vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.admin-studio-jobs-hero p {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
}

.admin-studio-jobs-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-jobs-stats span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.admin-studio-memorial-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.admin-studio-memorial-filters a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 860;
  text-decoration: none;
}

.admin-studio-memorial-filters a.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--foreground);
}

.admin-studio-memorial-filters strong {
  color: inherit;
  font-size: 0.74rem;
}

.admin-studio-memorial-focus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 0 0 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border-soft));
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 14px 16px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-memorial-focus > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-studio-memorial-focus span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-memorial-focus strong {
  color: var(--foreground);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  font-weight: 930;
  line-height: 1.12;
}

.admin-studio-memorial-focus p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.42;
}

.admin-studio-memorial-focus > a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font-size: 0.74rem;
  font-weight: 880;
  text-decoration: none;
  white-space: nowrap;
}

.admin-studio-memorial-comfort-review {
  display: grid;
  gap: 12px;
  margin: 0 0 28px;
}

.admin-studio-memorial-production-review {
  display: grid;
  gap: 0;
  margin: 0 0 28px;
}

.admin-studio-memorial-comfort-review,
.admin-studio-memorial-production-review {
  scroll-margin-top: 92px;
}

.admin-studio-memorial-comfort-review.is-focused,
.admin-studio-memorial-production-review.is-focused {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-soft));
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 14px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-memorial-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 0 10px;
}

.admin-studio-memorial-section-head h2 {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.admin-studio-memorial-section-head > a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font-size: 0.74rem;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
}

.admin-studio-memorial-comfort-list {
  display: grid;
  gap: 10px;
}

.admin-studio-memorial-comfort-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 15px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-memorial-comfort-note.is-pending {
  border-color: color-mix(in srgb, #3b82f6 34%, var(--border-soft));
}

.admin-studio-memorial-comfort-note.is-approved {
  border-color: color-mix(in srgb, #14b8a6 40%, var(--border-soft));
}

.admin-studio-memorial-comfort-note.is-rejected,
.admin-studio-memorial-comfort-note.is-hidden,
.admin-studio-memorial-comfort-note.has-reports {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border-soft));
}

.admin-studio-memorial-comfort-note-main {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.admin-studio-memorial-comfort-note p {
  max-width: 940px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.admin-studio-memorial-comfort-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-memorial-comfort-note-tags span {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--muted-foreground);
}

.admin-studio-memorial-comfort-note-meta {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 760;
}

.admin-studio-jobs-list {
  display: grid;
  gap: 10px;
  padding-bottom: 96px;
}

.admin-studio-memorial-list {
  display: grid;
  gap: 12px;
  padding-bottom: 96px;
}

.admin-studio-memorial-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  gap: 14px;
  align-items: stretch;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 15px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-memorial-row.is-queued,
.admin-studio-memorial-row.is-in_review,
.admin-studio-memorial-row.is-generating {
  border-color: color-mix(in srgb, #3b82f6 34%, var(--border-soft));
}

.admin-studio-memorial-row.is-ready,
.admin-studio-memorial-row.is-published {
  border-color: color-mix(in srgb, #14b8a6 40%, var(--border-soft));
}

.admin-studio-memorial-row.is-failed,
.admin-studio-memorial-row.is-cancelled {
  border-color: color-mix(in srgb, #ef4444 42%, var(--border-soft));
}

.admin-studio-memorial-row-main {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.admin-studio-memorial-row-head {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-studio-memorial-row-head span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-memorial-row-head strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 1.06rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-row p {
  max-width: 920px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 720;
  line-height: 1.48;
}

.admin-studio-memorial-row dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-studio-memorial-row dl div {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 9px 10px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.admin-studio-memorial-row dt,
.admin-studio-memorial-row dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-row dt {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-memorial-row dd {
  margin-top: 3px;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 840;
}

.admin-studio-memorial-image-handoff {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border-soft));
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 70%, var(--accent) 5%);
}

.admin-studio-memorial-image-handoff-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-studio-memorial-image-handoff-head div,
.admin-studio-memorial-image-source-panel,
.admin-studio-memorial-image-prompt-panel {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.admin-studio-memorial-image-handoff-head span,
.admin-studio-memorial-image-source-panel > span,
.admin-studio-memorial-image-prompt-panel > span {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-memorial-image-handoff-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
}

.admin-studio-memorial-image-handoff-head small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 780;
  text-align: right;
  white-space: nowrap;
}

.admin-studio-memorial-image-handoff-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-studio-memorial-image-handoff-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 0.73rem;
  font-weight: 860;
  white-space: nowrap;
  cursor: pointer;
}

.admin-studio-memorial-image-handoff-actions button:not(:disabled):hover,
.admin-studio-memorial-image-handoff-actions button:not(:disabled):focus-visible {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  outline: none;
}

.admin-studio-memorial-image-handoff-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.admin-studio-memorial-image-handoff-actions form:first-child button {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.admin-studio-memorial-image-handoff-actions small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
}

.admin-studio-memorial-image-handoff-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(280px, 1.15fr);
  gap: 10px;
}

.admin-studio-memorial-image-source-panel,
.admin-studio-memorial-image-prompt-panel {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.admin-studio-memorial-image-source-list {
  display: grid;
  gap: 8px;
}

.admin-studio-memorial-image-source-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.admin-studio-memorial-image-source-thumb {
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, var(--foreground) 4%);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 860;
  text-align: center;
  text-decoration: none;
}

.admin-studio-memorial-image-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-memorial-image-source-item div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-studio-memorial-image-source-item strong,
.admin-studio-memorial-image-meta strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-image-source-item small,
.admin-studio-memorial-image-meta small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-image-source-item a:not(.admin-studio-memorial-image-source-thumb) {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 840;
  text-decoration: none;
}

.admin-studio-memorial-image-prompt-panel textarea {
  min-height: 132px;
  resize: vertical;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--foreground);
  padding: 10px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.48;
}

.admin-studio-memorial-image-prompt-panel textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  outline: none;
}

.admin-studio-memorial-image-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-memorial-image-meta span {
  display: grid;
  min-width: 0;
  gap: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.admin-studio-memorial-image-meta span.is-wide {
  grid-column: span 3;
}

.admin-studio-memorial-image-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-memorial-image-steps span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 820;
}

.admin-studio-memorial-image-steps span.is-ready {
  border-color: color-mix(in srgb, #14b8a6 42%, var(--border-soft));
  color: var(--foreground);
}

.admin-studio-memorial-image-steps strong {
  color: inherit;
  font-size: 0.64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-memorial-row .admin-studio-memorial-image-command,
.admin-studio-memorial-image-source-panel p {
  max-width: none;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-studio-memorial-warning {
  color: #dc2626;
  font-size: 0.76rem;
  font-weight: 820;
}

.admin-studio-memorial-result-review {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border-soft));
  border-radius: 16px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 76%, var(--accent) 4%);
}

.admin-studio-memorial-result-preview {
  display: grid;
  min-height: 220px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--foreground) 4%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--foreground) 4%, transparent) 25%, transparent 25%),
    color-mix(in srgb, var(--surface) 70%, var(--foreground) 5%);
  background-position: 0 0, 0 8px;
  background-size: 16px 16px;
}

.admin-studio-memorial-result-preview img,
.admin-studio-memorial-result-preview video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
}

.admin-studio-memorial-result-audio {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 14px;
}

.admin-studio-memorial-result-audio strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 880;
}

.admin-studio-memorial-result-audio audio {
  width: 100%;
}

.admin-studio-memorial-result-review-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 8px;
}

.admin-studio-memorial-result-review-copy > span {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--muted-foreground);
  padding: 4px 8px;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-memorial-result-review-copy strong,
.admin-studio-memorial-result-review-copy p {
  margin: 0;
}

.admin-studio-memorial-result-review-copy > strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 920;
  line-height: 1.16;
}

.admin-studio-memorial-result-review-copy > p {
  max-width: 680px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 730;
  line-height: 1.48;
}

.admin-studio-memorial-result-review-copy .admin-studio-memorial-result-audit {
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent) 5%);
  color: var(--foreground);
  padding: 6px 9px;
  font-size: 0.68rem;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.admin-studio-memorial-result-review-copy dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.admin-studio-memorial-result-review-copy dl div {
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  padding: 7px 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.admin-studio-memorial-result-review-copy dt,
.admin-studio-memorial-result-review-copy dd {
  margin: 0;
}

.admin-studio-memorial-result-review-copy dt {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-memorial-result-review-copy dd {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-result-review-copy ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-studio-memorial-result-review-copy li {
  position: relative;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.32;
  padding-left: 13px;
}

.admin-studio-memorial-result-review-copy li::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 62%, var(--foreground));
  content: "";
}

.admin-studio-memorial-result-review-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-memorial-result-review-copy a,
.admin-studio-memorial-result-preview > a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--foreground);
  padding: 0 11px;
  font-size: 0.72rem;
  font-weight: 850;
  text-decoration: none;
}

.admin-studio-memorial-generated-qc {
  display: grid;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-soft));
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 82%, var(--accent) 5%);
}

.admin-studio-memorial-generated-qc > div {
  display: grid;
  gap: 3px;
}

.admin-studio-memorial-generated-qc > div span {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-memorial-generated-qc > div strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.2;
}

.admin-studio-memorial-generated-qc > div small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-memorial-generated-candidates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-memorial-generated-candidates a {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--foreground);
  padding: 6px;
  text-decoration: none;
}

.admin-studio-memorial-generated-candidates a.is-selected {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border-soft));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
}

.admin-studio-memorial-generated-candidate-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  background: color-mix(in srgb, var(--muted) 70%, transparent);
}

.admin-studio-memorial-generated-candidate-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-studio-memorial-generated-candidates a > span:last-child {
  display: grid;
  gap: 2px;
}

.admin-studio-memorial-generated-candidates a strong,
.admin-studio-memorial-generated-candidates a small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-memorial-generated-candidates a strong {
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-memorial-generated-candidates a small {
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 760;
}

.admin-studio-memorial-generated-qc form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-memorial-generated-qc input[type="text"] {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--foreground);
  padding: 0 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-studio-memorial-generated-qc .admin-studio-memorial-publish-checklist,
.admin-studio-memorial-generated-qc form > div,
.admin-studio-memorial-generated-qc-regenerate {
  grid-column: 1 / -1;
}

.admin-studio-memorial-generated-qc form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-memorial-generated-qc button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 860;
  white-space: nowrap;
  cursor: pointer;
}

.admin-studio-memorial-generated-qc button:hover,
.admin-studio-memorial-generated-qc button:focus-visible,
.admin-studio-memorial-generated-qc input[type="text"]:focus {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  outline: none;
}

.admin-studio-memorial-publish-checklist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-soft));
  border-radius: 13px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 78%, var(--accent) 4%);
}

.admin-studio-memorial-publish-checklist legend {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-memorial-publish-checklist label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.34;
}

.admin-studio-memorial-publish-checklist input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.admin-studio-memorial-result-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.8fr) minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
}

.admin-studio-memorial-result-form input {
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--foreground);
  padding: 0 11px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 760;
}

.admin-studio-memorial-result-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  outline: none;
}

.admin-studio-memorial-result-form > div {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-memorial-result-visibility {
  grid-column: 1 / -1;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-studio-memorial-result-form button,
.admin-studio-memorial-result-form a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.admin-studio-memorial-actions {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-memorial-actions a,
.admin-studio-memorial-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--foreground);
  padding: 0 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.admin-studio-memorial-actions button:hover,
.admin-studio-memorial-actions button:focus-visible,
.admin-studio-memorial-actions a:hover,
.admin-studio-memorial-actions a:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border-soft));
  outline: none;
}

@media (max-width: 820px) {
  .admin-studio-memorial-focus,
  .admin-studio-memorial-section-head,
  .admin-studio-memorial-comfort-note,
  .admin-studio-memorial-row {
    grid-template-columns: 1fr;
  }

  .admin-studio-memorial-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-memorial-section-head > a,
  .admin-studio-memorial-focus > a,
  .admin-studio-memorial-actions {
    justify-content: flex-start;
  }

  .admin-studio-memorial-row dl,
  .admin-studio-memorial-result-review,
  .admin-studio-memorial-result-review-copy dl,
  .admin-studio-memorial-publish-checklist,
  .admin-studio-memorial-generated-qc form,
  .admin-studio-memorial-result-form,
  .admin-studio-memorial-image-handoff-grid,
  .admin-studio-memorial-image-meta {
    grid-template-columns: 1fr;
  }

  .admin-studio-memorial-image-meta span.is-wide {
    grid-column: auto;
  }
}

.admin-studio-jobs-row,
.admin-studio-jobs-empty {
  display: grid;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-jobs-row {
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto) minmax(120px, auto);
}

.admin-studio-jobs-empty {
  grid-template-columns: minmax(0, 1fr);
}

.admin-studio-jobs-row {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-jobs-row:hover {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.admin-studio-jobs-row > div {
  min-width: 0;
}

.admin-studio-jobs-row > div > span {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-jobs-row strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-jobs-row small,
.admin-studio-jobs-row time,
.admin-studio-jobs-empty span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
}

.admin-studio-jobs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-production-queue-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  margin-top: 4px;
}

.admin-studio-production-queue-flags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-production-queue-flags span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
  white-space: nowrap;
}

.admin-studio-production-queue-flags svg {
  flex: 0 0 auto;
}

.admin-studio-production-queue-flags span.is-live {
  border-color: color-mix(in srgb, #14b8a6 44%, var(--border-soft));
  background: color-mix(in srgb, #14b8a6 14%, var(--surface));
  color: var(--foreground);
}

.admin-studio-production-queue-flags span.is-muted {
  border-color: color-mix(in srgb, #f59e0b 38%, var(--border-soft));
  background: color-mix(in srgb, #f59e0b 12%, var(--surface));
  color: var(--foreground);
}

.admin-studio-production-queue-controls > small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-production-queue-controls > small.is-success {
  color: #0f766e;
}

.admin-studio-production-queue-controls > small.is-error {
  color: #dc2626;
}

.admin-studio-production-audit {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
}

.admin-studio-production-audit-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.admin-studio-production-audit-heading h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  letter-spacing: 0;
}

.admin-studio-production-audit-heading > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 860;
  white-space: nowrap;
}

.admin-studio-production-audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.admin-studio-production-audit-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.admin-studio-production-audit-card.is-generated {
  border-left-color: #14b8a6;
}

.admin-studio-production-audit-card.is-blocked {
  border-left-color: #f59e0b;
}

.admin-studio-production-audit-card.is-operation {
  border-left-color: #3b82f6;
}

.admin-studio-production-audit-card.is-failed {
  border-left-color: #ef4444;
}

.admin-studio-production-audit-card-head,
.admin-studio-production-audit-links,
.admin-studio-production-audit-notes {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.admin-studio-production-audit-card-head {
  justify-content: space-between;
}

.admin-studio-production-audit-card-head span,
.admin-studio-production-audit-card-head time {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-production-audit-card strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-production-audit-card p,
.admin-studio-production-audit-card small {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.45;
}

.admin-studio-production-audit-card ul {
  display: grid;
  gap: 5px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.admin-studio-production-audit-card li,
.admin-studio-production-audit-notes span,
.admin-studio-production-audit-links a,
.admin-studio-production-audit-links span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.25;
  text-decoration: none;
}

.admin-studio-production-audit-card li {
  justify-self: start;
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border-soft));
  background: color-mix(in srgb, #f59e0b 10%, var(--surface));
  color: var(--foreground);
}

.admin-studio-production-audit-notes span {
  border-color: color-mix(in srgb, #3b82f6 26%, var(--border-soft));
}

.admin-studio-production-audit-links a:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  color: var(--foreground);
}

.admin-studio-jobs-card-state {
  justify-self: end;
}

.admin-studio-job-recovery-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-job-recovery-actions small {
  flex-basis: 100%;
  color: #ef4444;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: right;
}

.admin-studio-job-recovery-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.admin-studio-job-recovery-action svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke-width: 2.4;
}

.admin-studio-job-recovery-action span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-studio-job-recovery-action:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  transform: translateY(-1px);
}

.admin-studio-job-recovery-action:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.admin-studio-job-recovery-action.is-primary {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--foreground);
}

.admin-studio-job-recovery-action.is-dismiss {
  border-color: color-mix(in srgb, #ef4444 22%, var(--border-soft));
}

.admin-studio-job-recovery-actions.is-compact {
  display: grid;
  grid-auto-flow: column;
  gap: 7px;
}

.admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action {
  min-width: 0;
  min-height: 31px;
  max-width: 112px;
  padding: 0 10px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(15, 23, 42, 0.76);
  color: #ffffff;
  font-size: 0.68rem;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24);
}

.admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action svg {
  width: 13px;
  height: 13px;
}

.admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action span {
  min-width: 0;
}

.admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action.is-primary {
  background: rgba(37, 99, 235, 0.82);
}

.admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action.is-dismiss {
  background: rgba(127, 29, 29, 0.72);
}

.admin-studio-job-recovery-actions.is-compact small {
  position: absolute;
  right: 0;
  bottom: calc(100% + 5px);
  max-width: min(240px, 62vw);
  overflow: hidden;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(127, 29, 29, 0.84);
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.admin-studio-jobs-actions form {
  margin: 0;
}

.admin-studio-jobs-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--foreground);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 860;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.admin-studio-jobs-action svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  stroke-width: 2.4;
}

.admin-studio-jobs-action span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-studio-jobs-action:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.admin-studio-jobs-action.is-primary {
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-soft));
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--foreground);
}

.admin-studio-jobs-row.is-running,
.admin-studio-jobs-row.is-queued {
  border-color: rgba(96, 165, 250, 0.38);
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.1), transparent 46%),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.admin-studio-jobs-row.is-failed,
.admin-studio-jobs-row.is-stale {
  border-color: rgba(245, 158, 11, 0.35);
}

.admin-studio-jobs-row.is-failed {
  border-color: rgba(239, 68, 68, 0.34);
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent 46%),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.admin-studio-jobs-row.is-review {
  border-color: rgba(139, 92, 246, 0.3);
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.08), transparent 46%),
    color-mix(in srgb, var(--surface) 82%, transparent);
}

.admin-studio-jobs-row.is-approved,
.admin-studio-jobs-row.is-published {
  border-color: rgba(22, 163, 74, 0.24);
}

.admin-studio-jobs-empty {
  grid-template-columns: 1fr;
  justify-items: start;
}

@media (max-width: 840px) {
  .admin-studio-production-queue-controls {
    grid-template-columns: 1fr;
  }

  .admin-studio-production-queue-controls .admin-studio-jobs-action {
    justify-self: start;
  }

  .admin-studio-production-audit-heading {
    align-items: start;
    flex-direction: column;
  }

  .admin-studio-production-audit-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-jobs-row,
  .admin-studio-jobs-empty {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .admin-studio-jobs-actions {
    justify-content: flex-start;
  }
}

@keyframes admin-studio-job-dot-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

.studio-minis-character-list,
.studio-minis-character-strip,
.studio-minis-production-list {
  display: grid;
  gap: 9px;
}

.studio-minis-character-strip {
  grid-auto-columns: minmax(232px, 292px);
  grid-auto-flow: column;
  overflow-x: auto;
  padding-bottom: 4px;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
}

.studio-minis-character-list a,
.studio-minis-character-strip a,
.studio-minis-production-list a {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--foreground);
  text-decoration: none;
}

.studio-minis-character-list a,
.studio-minis-character-strip a {
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  min-height: 86px;
}

.studio-minis-character-list a.is-active,
.studio-minis-character-strip a.is-active,
.studio-minis-production-list a.is-active {
  border-color: rgba(255, 200, 0, 0.58);
  background: rgba(255, 200, 0, 0.14);
}

.studio-minis-production-review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-minis-production-review-summary span {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.studio-minis-production-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  scroll-margin-top: 18px;
}

#mini-recent-productions {
  scroll-margin-top: 18px;
}

.studio-minis-production-list article.studio-minis-production-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-production-list article.studio-minis-production-card.is-active {
  border-color: rgba(255, 200, 0, 0.58);
  background: rgba(255, 200, 0, 0.12);
}

.studio-minis-production-list article.studio-minis-production-card.is-liked {
  border-color: rgba(86, 207, 174, 0.46);
}

.studio-minis-production-list article.studio-minis-production-card.is-adjust {
  border-color: rgba(217, 119, 6, 0.38);
  background: rgba(255, 251, 235, 0.5);
}

.studio-minis-production-list article.studio-minis-production-card.is-disliked {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.045);
}

.studio-minis-production-list article.studio-minis-production-card.is-uploaded {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.2);
}

.studio-minis-production-list a.studio-minis-production-card-main {
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.studio-minis-production-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.studio-minis-production-thumb {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  background: rgba(17, 24, 39, 0.08);
}

.studio-minis-production-thumb img,
.studio-minis-production-thumb > span {
  width: 100%;
  aspect-ratio: 9 / 16;
}

.studio-minis-production-thumb img {
  display: block;
  object-fit: cover;
}

.studio-minis-production-thumb > span {
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  font-size: 1.4rem;
  font-weight: 950;
}

.studio-minis-production-thumb em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  min-width: 0;
  padding: 4px 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: white;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-production-card-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-production-card-copy .studio-minis-status-pill {
  justify-self: start;
}

.studio-minis-mini-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.studio-minis-mini-badge.is-uploaded,
.studio-minis-mini-badge.is-liked {
  border-color: rgba(86, 207, 174, 0.44);
  color: #0f766e;
}

.studio-minis-mini-badge.is-not-uploaded,
.studio-minis-mini-badge.is-review {
  border-color: rgba(59, 130, 246, 0.34);
  color: #2563eb;
}

.studio-minis-mini-badge.is-adjust {
  border-color: rgba(217, 119, 6, 0.38);
  color: #a16207;
}

.studio-minis-mini-badge.is-disliked {
  border-color: rgba(239, 68, 68, 0.42);
  color: #dc2626;
}

.studio-minis-production-card-copy strong {
  color: var(--foreground);
  font-size: 0.92rem;
  line-height: 1.22;
}

.studio-minis-production-quick-review {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.5);
}

.studio-minis-production-control-group {
  display: grid;
  gap: 5px;
}

.studio-minis-production-control-group > span {
  color: var(--muted-foreground);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-minis-production-segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.045);
}

.studio-minis-production-segmented form {
  min-width: 0;
}

.studio-minis-production-segmented button {
  display: inline-flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.1;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.studio-minis-production-segmented button svg {
  flex: 0 0 auto;
}

.studio-minis-production-segmented button.is-selected {
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  box-shadow: 0 1px 5px rgba(17, 24, 39, 0.1);
}

.studio-minis-production-segmented button.is-selected.is-keep,
.studio-minis-production-segmented button.is-selected.is-posted {
  color: #0f766e;
}

.studio-minis-production-segmented button.is-selected.is-adjust {
  color: #a16207;
}

.studio-minis-production-segmented button.is-selected.is-pass {
  color: #dc2626;
}

.studio-minis-production-segmented button.is-selected.is-not-posted {
  color: #2563eb;
}

.studio-minis-learning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.studio-minis-learning-tags form {
  display: contents;
}

.studio-minis-learning-tags button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.studio-minis-learning-tags button.is-selected {
  background: rgba(255, 255, 255, 0.95);
  color: var(--foreground);
  box-shadow: 0 1px 5px rgba(17, 24, 39, 0.08);
}

.studio-minis-learning-tags button.is-failure {
  border-color: rgba(220, 38, 38, 0.22);
  color: #dc2626;
}

.studio-minis-learning-tags button.is-success {
  border-color: rgba(15, 118, 110, 0.22);
  color: #0f766e;
}

.studio-minis-production-list span,
.studio-minis-production-list small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.studio-minis-production-list .studio-minis-production-thumb > span {
  color: var(--muted-foreground);
  font-size: 1.4rem;
  line-height: 1;
}

.studio-minis-production-list .studio-minis-mini-badge {
  font-size: 0.66rem;
  line-height: 1.1;
}

.studio-minis-character-thumb {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-character-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-character-thumb span {
  color: var(--muted-foreground);
  font-size: 1rem;
  font-weight: 900;
}

.studio-minis-character-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.studio-minis-character-copy strong,
.studio-minis-character-copy small,
.studio-minis-character-copy p {
  min-width: 0;
}

.studio-minis-character-copy small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.25;
  text-transform: uppercase;
}

.studio-minis-character-copy p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.32;
}

.studio-minis-upload,
.studio-minis-reference-actions,
.studio-minis-action-stack,
.studio-minis-action-stack form {
  display: grid;
  gap: 10px;
}

.studio-minis-admin-collapsible {
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-add-profile {
  display: grid;
  gap: 0;
  padding: 12px;
  border: 1px dashed rgba(17, 24, 39, 0.26);
  border-radius: 15px;
  background: rgba(255, 200, 0, 0.08);
}

.studio-minis-add-profile[open] {
  gap: 12px;
}

.studio-minis-add-profile-inline {
  min-width: min(420px, 100%);
  align-self: flex-start;
}

.studio-minis-add-profile summary {
  cursor: pointer;
  color: var(--foreground);
  font-weight: 880;
}

.studio-minis-add-profile form,
.studio-minis-add-profile label {
  display: grid;
  gap: 8px;
}

.studio-minis-add-profile label span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-add-profile select,
.studio-minis-add-profile textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font: inherit;
}

.studio-minis-add-profile select {
  min-height: 40px;
  padding: 8px 10px;
}

.studio-minis-add-profile textarea {
  min-height: 72px;
  padding: 10px;
  resize: vertical;
  line-height: 1.45;
}

.studio-minis-admin-collapsible summary,
.studio-minis-admin-profile-editor > summary,
.studio-minis-system-readiness > summary {
  cursor: pointer;
  color: var(--foreground);
  font-weight: 850;
}

.studio-minis-admin-collapsible[open] summary {
  margin-bottom: 12px;
}

.studio-minis-system-readiness {
  gap: 0;
}

.studio-minis-system-readiness[open] {
  gap: 12px;
}

.studio-minis-system-readiness > p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.studio-minis-upload label,
.studio-minis-action-stack label {
  display: grid;
  gap: 6px;
}

.studio-minis-upload label span,
.studio-minis-action-stack label span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-upload input,
.studio-minis-upload select,
.studio-minis-action-stack select,
.studio-minis-inline-form input,
.studio-minis-inline-form select,
.studio-minis-publish-form input,
.studio-minis-publish-form select,
.studio-minis-publish-form textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font: inherit;
}

.studio-minis-turnaround-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-minis-turnaround-preview-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-turnaround-preview-head div {
  display: grid;
  gap: 3px;
}

.studio-minis-turnaround-preview-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-turnaround-preview-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.studio-minis-turnaround-preview img,
.studio-minis-turnaround-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.055);
}

.studio-minis-turnaround-preview img {
  display: block;
  object-fit: contain;
}

.studio-minis-turnaround-empty {
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
  text-align: center;
}

.studio-minis-turnaround-preview p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.45;
}

.studio-minis-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.studio-minis-reference-grid figure {
  display: grid;
  gap: 5px;
  margin: 0;
}

.studio-minis-reference-grid figure.is-turnaround-sheet {
  grid-column: 1 / -1;
}

.studio-minis-reference-grid img {
  width: 100%;
  aspect-ratio: 9 / 12;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(17, 24, 39, 0.05);
}

.studio-minis-reference-grid figure.is-turnaround-sheet img {
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.studio-minis-reference-grid figcaption {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 780;
  text-align: center;
}

.studio-minis-idea-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
  gap: 16px;
  align-items: start;
}

.studio-minis-idea-main,
.studio-minis-selected-reference {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.studio-minis-selected-reference {
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-minis-selected-reference > img,
.studio-minis-selected-reference .studio-minis-turnaround-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.055);
}

.studio-minis-selected-reference > img {
  display: block;
  object-fit: contain;
}

.studio-minis-reference-details {
  display: grid;
  gap: 10px;
}

.studio-minis-reference-details summary {
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 840;
  text-transform: uppercase;
}

.studio-minis-logline {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.studio-minis-beat-brief {
  display: grid;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
}

.studio-minis-beat-brief > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.studio-minis-beat-brief > summary span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.studio-minis-beat-brief[open] > summary {
  margin-bottom: 10px;
}

.studio-minis-beat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.studio-minis-beat-grid article {
  display: grid;
  gap: 5px;
  min-height: 132px;
  align-content: start;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-beat-grid span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 860;
}

.studio-minis-beat-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.4;
}

.studio-minis-beat-timeline article {
  min-height: 96px;
}

.studio-minis-beat-timeline p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.studio-minis-prompt-pack {
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-prompt-pack summary {
  cursor: pointer;
  color: var(--foreground);
  font-weight: 820;
}

.studio-minis-prompt-grid {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.studio-minis-prompt-grid article {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-prompt-grid article > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-prompt-grid strong {
  color: var(--foreground);
  font-size: 0.86rem;
}

.studio-minis-prompt-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.52;
}

.studio-minis-prompt-workspace {
  display: grid;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}

.studio-minis-prompt-workspace[open] {
  gap: 16px;
}

.studio-minis-prompt-workspace-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-prompt-workspace-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-prompt-workspace-grid article {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-prompt-workspace-grid article > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-prompt-workspace-grid span,
.studio-minis-prompt-workspace-grid small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.3;
}

.studio-minis-prompt-workspace-grid span {
  text-transform: uppercase;
}

.studio-minis-prompt-workspace-grid strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.2;
}

.studio-minis-prompt-workspace-grid p {
  display: -webkit-box;
  min-height: 7.2em;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}

.studio-minis-external-flow-panel {
  scroll-margin-top: 96px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 246, 218, 0.72), rgba(255, 255, 255, 0.84)),
    rgba(255, 255, 255, 0.82);
}

.studio-minis-external-flow-panel > summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 920;
}

.studio-minis-external-flow-panel > summary::-webkit-details-marker {
  display: none;
}

.studio-minis-external-flow-panel > summary small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.studio-minis-external-flow-panel[open] {
  gap: 14px;
}

.studio-minis-external-prompt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-external-prompt-grid article {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-minis-external-prompt-grid article > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-external-prompt-grid span,
.studio-minis-external-prompt-grid small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.3;
}

.studio-minis-external-prompt-grid span {
  text-transform: uppercase;
}

.studio-minis-external-prompt-grid strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.2;
}

.studio-minis-external-prompt-grid textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.78);
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.45;
  outline: none;
}

.studio-minis-external-prompt-grid textarea:focus {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

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

.studio-minis-external-upload-form {
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
}

.studio-minis-production-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.studio-minis-production-meta div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 13px;
  background: rgba(17, 24, 39, 0.04);
}

.studio-minis-production-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 790;
}

.studio-minis-production-meta .is-wide {
  grid-column: 1 / -1;
}

.studio-minis-lineage-panel {
  display: grid;
  width: min(1180px, calc(100% - 32px));
  gap: 14px;
  margin: 18px auto 0;
}

.studio-minis-lineage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-lineage-grid article,
.studio-minis-lineage-prompts article,
.studio-minis-lineage-references figure {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-lineage-grid article {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.studio-minis-lineage-grid article > span,
.studio-minis-lineage-prompts summary small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-lineage-grid article > strong {
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  line-height: 1.2;
}

.studio-minis-lineage-grid dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.studio-minis-lineage-grid dl div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.studio-minis-lineage-grid dt,
.studio-minis-lineage-references small {
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-weight: 820;
}

.studio-minis-lineage-grid dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.76rem;
  font-weight: 780;
}

.studio-minis-lineage-references {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-lineage-references figure {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 9px;
}

.studio-minis-lineage-references img,
.studio-minis-lineage-references figure > span {
  width: 54px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.08);
  object-fit: cover;
}

.studio-minis-lineage-references figure > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-weight: 900;
}

.studio-minis-lineage-references figcaption {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.studio-minis-lineage-references strong,
.studio-minis-lineage-references code {
  overflow-wrap: anywhere;
}

.studio-minis-lineage-references code {
  color: var(--muted-foreground);
  font-size: 0.66rem;
}

.studio-minis-lineage-warnings {
  display: grid;
  gap: 6px;
}

.studio-minis-lineage-warnings span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.08);
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 820;
}

.studio-minis-targeted-retry-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(79, 70, 229, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(238, 242, 255, 0.82), rgba(240, 253, 250, 0.66)),
    rgba(255, 255, 255, 0.8);
}

.studio-minis-targeted-retry-panel > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-targeted-retry-panel span {
  color: #4338ca;
  font-size: 0.68rem;
  font-weight: 920;
  text-transform: uppercase;
}

.studio-minis-targeted-retry-panel strong {
  overflow-wrap: anywhere;
}

.studio-minis-targeted-retry-panel small,
.studio-minis-targeted-retry-panel p {
  margin: 0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.34;
}

.studio-minis-targeted-retry-panel p {
  padding: 8px;
  border: 1px solid rgba(79, 70, 229, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: #312e81;
}

.studio-minis-targeted-retry-panel ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 0 0 18px;
  color: #312e81;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.36;
}

.studio-minis-lineage-prompts {
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
}

.studio-minis-lineage-prompts summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  cursor: pointer;
  font-weight: 880;
}

.studio-minis-lineage-prompts > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px 12px;
}

.studio-minis-lineage-prompts article {
  display: grid;
  gap: 8px;
  padding: 11px;
}

.studio-minis-lineage-prompts article > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-lineage-prompts p {
  display: -webkit-box;
  min-height: 6.8em;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.studio-minis-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-minis-stepper li {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 82px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-stepper li::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: rgba(17, 24, 39, 0.14);
}

.studio-minis-stepper li > a {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 82px;
  padding: 12px 12px 12px 16px;
  color: inherit;
  text-decoration: none;
}

.studio-minis-stepper li > a:hover {
  background: rgba(255, 255, 255, 0.28);
}

.studio-minis-stepper li > a:focus-visible {
  outline: 3px solid rgba(255, 200, 0, 0.55);
  outline-offset: -3px;
}

.studio-minis-stepper li > a > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.studio-minis-stepper li > a > div {
  grid-column: 2;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-stepper strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.15;
}

.studio-minis-stepper small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.2;
  text-transform: uppercase;
}

.studio-minis-stepper em {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 24px;
  padding: 5px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 920;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-minis-stepper li.is-complete {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.08);
}

.studio-minis-stepper li.is-complete::before {
  background: #0f766e;
}

.studio-minis-stepper li.is-complete em {
  border-color: rgba(15, 118, 110, 0.2);
  background: rgba(15, 118, 110, 0.1);
  color: #0f766e;
}

.studio-minis-stepper li.is-current {
  border-color: rgba(15, 23, 42, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.68));
  box-shadow: inset 0 0 0 2px rgba(255, 200, 0, 0.24), 0 8px 24px rgba(17, 24, 39, 0.07);
}

.studio-minis-stepper li.is-current::before {
  background: #d97706;
}

.studio-minis-stepper li.is-current em {
  border-color: rgba(217, 119, 6, 0.24);
  background: rgba(217, 119, 6, 0.14);
  color: #92400e;
}

.studio-minis-stepper li.is-action-needed {
  border-style: solid;
}

.studio-minis-stepper li.is-action-needed strong {
  font-weight: 930;
}

.studio-minis-stepper li.is-working {
  border-color: rgba(59, 130, 246, 0.46);
  background: rgba(59, 130, 246, 0.09);
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.studio-minis-stepper li.is-working::before {
  background: #2563eb;
}

.studio-minis-stepper li.is-working em {
  border-color: rgba(37, 99, 235, 0.2);
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.studio-minis-stepper li.is-waiting {
  border-style: dashed;
  opacity: 0.86;
}

.studio-minis-stepper li.is-waiting::before {
  background: rgba(100, 116, 139, 0.7);
}

.studio-minis-stepper li.is-waiting strong,
.studio-minis-stepper li.is-waiting small {
  color: var(--muted-foreground);
}

.studio-minis-stepper li.is-waiting em {
  background: rgba(100, 116, 139, 0.08);
}

.studio-minis-stepper li.is-failed {
  border-color: rgba(239, 68, 68, 0.54);
  background: rgba(239, 68, 68, 0.1);
  box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.18), 0 8px 24px rgba(153, 27, 27, 0.08);
}

.studio-minis-stepper li.is-failed::before {
  background: #dc2626;
}

.studio-minis-stepper li.is-failed em {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.studio-minis-stepper li.is-complete > a > span {
  border-color: rgba(15, 118, 110, 0.28);
  background: rgba(15, 118, 110, 0.12);
  color: #0f766e;
}

.studio-minis-stepper li.is-current > a > span {
  border-color: rgba(255, 200, 0, 0.4);
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
}

.studio-minis-stepper li.is-working > a > span {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

.studio-minis-stepper li.is-failed > a > span {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.studio-minis-current-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-left: 6px solid rgba(255, 200, 0, 0.86);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
}

.studio-minis-current-action > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-current-action span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-current-action strong {
  color: var(--foreground);
  font-size: 1rem;
}

.studio-minis-current-action p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.45;
}

.studio-minis-current-action > form,
.studio-minis-current-action > a {
  min-width: 180px;
}

.studio-minis-current-action > .button-row {
  min-width: 0;
  max-width: 100%;
  justify-content: flex-start;
}

.studio-minis-current-action > .button-row .button {
  flex: 1 1 150px;
  min-width: 0;
  white-space: normal;
}

.studio-minis-pipeline-overview {
  display: grid;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  padding: clamp(16px, 2.4vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 251, 235, 0.8), rgba(248, 250, 252, 0.98) 42%, rgba(236, 253, 245, 0.72));
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
}

.studio-minis-pipeline-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 260px);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.studio-minis-pipeline-overview-head h2 {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: 0;
}

.studio-minis-pipeline-overview-head p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.5;
}

.studio-minis-pipeline-next {
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  color: inherit;
  text-decoration: none;
  box-shadow: inset 5px 0 0 rgba(255, 200, 0, 0.78);
}

.studio-minis-pipeline-next.is-danger {
  box-shadow: inset 5px 0 0 rgba(220, 38, 38, 0.82);
}

.studio-minis-pipeline-next.is-ready {
  box-shadow: inset 5px 0 0 rgba(20, 184, 166, 0.78);
}

.studio-minis-pipeline-next.is-neutral {
  box-shadow: inset 5px 0 0 rgba(100, 116, 139, 0.58);
}

.studio-minis-pipeline-next span,
.studio-minis-pipeline-stats span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.studio-minis-pipeline-next strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.15;
}

.studio-minis-pipeline-next small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.3;
}

.studio-minis-pipeline-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-minis-pipeline-step {
  position: relative;
  min-width: 0;
  min-height: 112px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
}

.studio-minis-pipeline-step::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  content: "";
  background: rgba(100, 116, 139, 0.44);
}

.studio-minis-pipeline-step > a {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 112px;
  padding: 13px 13px 13px 16px;
  color: inherit;
  text-decoration: none;
}

.studio-minis-pipeline-step > a:hover {
  background: rgba(255, 255, 255, 0.34);
}

.studio-minis-pipeline-step > a:focus-visible {
  outline: 3px solid rgba(255, 200, 0, 0.55);
  outline-offset: -3px;
}

.studio-minis-pipeline-step > a > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
}

.studio-minis-pipeline-step > a > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.studio-minis-pipeline-step strong {
  color: var(--foreground);
  font-size: 0.93rem;
  line-height: 1.14;
}

.studio-minis-pipeline-step small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-pipeline-step em {
  justify-self: start;
  max-width: 100%;
  padding: 5px 9px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 940;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-pipeline-step.is-complete {
  border-color: rgba(20, 184, 166, 0.32);
  background: rgba(240, 253, 250, 0.82);
}

.studio-minis-pipeline-step.is-complete::before {
  background: #14b8a6;
}

.studio-minis-pipeline-step.is-complete em {
  border-color: rgba(20, 184, 166, 0.2);
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
}

.studio-minis-pipeline-step.is-current {
  border-color: rgba(255, 200, 0, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 251, 235, 0.82));
  box-shadow: 0 10px 26px rgba(113, 63, 18, 0.1);
}

.studio-minis-pipeline-step.is-current::before {
  background: #ffc800;
}

.studio-minis-pipeline-step.is-current em {
  border-color: rgba(217, 119, 6, 0.2);
  background: rgba(255, 200, 0, 0.14);
  color: #92400e;
}

.studio-minis-pipeline-step.is-working {
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.82));
}

.studio-minis-pipeline-step.is-working::before {
  background: #2563eb;
}

.studio-minis-pipeline-step.is-working em {
  border-color: rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.studio-minis-pipeline-step.is-failed {
  border-color: rgba(220, 38, 38, 0.34);
  background: rgba(254, 242, 242, 0.9);
}

.studio-minis-pipeline-step.is-failed::before {
  background: #dc2626;
}

.studio-minis-pipeline-step.is-failed em {
  border-color: rgba(220, 38, 38, 0.2);
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.studio-minis-pipeline-step.is-waiting {
  opacity: 0.82;
}

.studio-minis-pipeline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.studio-minis-pipeline-stats div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-pipeline-stats strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.16;
}

.studio-minis-pipeline-stats small {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
}

.studio-minis-auto-action-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(160px, 0.7fr);
  gap: 10px;
  align-items: end;
  min-width: min(420px, 100%);
}

.studio-minis-auto-action-grid form {
  min-width: 0;
}

.studio-minis-auto-action-grid .admin-studio-action-submit,
.studio-minis-auto-action-grid .button {
  width: 100%;
}

.studio-minis-failure-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(153, 27, 27, 0.24);
  border-left: 7px solid #dc2626;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(220, 38, 38, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 55px rgba(127, 29, 29, 0.12);
}

.studio-minis-failure-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-failure-head h2 {
  margin: 4px 0 0;
  color: #7f1d1d;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}

.studio-minis-failure-head p,
.studio-minis-failure-error p,
.studio-minis-failure-next p {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.studio-minis-failure-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.studio-minis-failure-meta div,
.studio-minis-failure-error,
.studio-minis-failure-next {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(127, 29, 29, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
}

.studio-minis-failure-meta .is-wide {
  grid-column: 1 / -1;
}

.studio-minis-failure-meta dt,
.studio-minis-failure-error span,
.studio-minis-failure-next span {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-minis-failure-next {
  border-color: rgba(217, 119, 6, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), transparent 58%),
    rgba(255, 251, 235, 0.92);
}

.studio-minis-failure-next strong {
  color: #7c2d12;
  font-size: 0.98rem;
  font-weight: 920;
  line-height: 1.18;
}

.studio-minis-failure-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
}

.studio-minis-failure-error p {
  overflow-wrap: anywhere;
  color: #991b1b;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
  font-size: 0.82rem;
}

.studio-minis-failure-error {
  border-color: rgba(220, 38, 38, 0.26);
  background: rgba(254, 242, 242, 0.92);
}

.studio-minis-failure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.studio-minis-failure-actions form {
  display: flex;
}

.studio-minis-failure-primary-action,
.studio-minis-failure-secondary-action,
.studio-minis-failure-ghost-action {
  border-color: rgba(153, 27, 27, 0.24);
  box-shadow: none;
}

.studio-minis-failure-primary-action {
  background: #991b1b;
  color: white;
}

.studio-minis-failure-primary-action:hover {
  background: #7f1d1d;
}

.studio-minis-failure-secondary-action {
  background: rgba(153, 27, 27, 0.1);
  color: #7f1d1d;
}

.studio-minis-failure-ghost-action {
  background: rgba(255, 255, 255, 0.78);
  color: #7f1d1d;
}

.studio-minis-more-actions {
  gap: 0;
}

.studio-minis-more-actions[open] {
  gap: 12px;
}

.studio-minis-more-actions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-minis-production-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-flow-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-flow-card-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.studio-minis-flow-card-head > span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.12);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.studio-minis-flow-card-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.studio-minis-flow-card-head strong {
  color: var(--foreground);
}

.studio-minis-flow-card-head small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  line-height: 1.32;
}

.studio-minis-flow-card-head em {
  align-self: start;
  padding: 5px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-flow-frame {
  display: grid;
  gap: 6px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 780;
  text-decoration: none;
}

.studio-minis-flow-frame img {
  width: 100%;
  max-height: 170px;
  object-fit: contain;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.06);
}

.studio-minis-flow-settings {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.54);
}

.studio-minis-flow-settings summary {
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-flow-actions,
.studio-minis-flow-actions form {
  display: grid;
  gap: 8px;
}

.studio-minis-operation {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.4;
}

.studio-minis-error {
  display: grid;
  gap: 5px;
  padding: 11px;
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: 14px;
  background: rgba(239, 68, 68, 0.08);
}

.studio-minis-error p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.45;
}

.studio-minis-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.72fr);
  gap: 16px;
  align-items: start;
}

#mini-next-action,
#mini-character-switch,
#mini-keyframe-work,
#mini-video-work,
#mini-failure-details {
  scroll-margin-top: 96px;
}

.studio-minis-keyframe-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-keyframe-gallery article {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-keyframe-gallery article.is-selected {
  border-color: rgba(255, 200, 0, 0.68);
  background: rgba(255, 200, 0, 0.12);
}

.studio-minis-keyframe-gallery article.is-review-best {
  border-color: rgba(15, 118, 110, 0.46);
}

.studio-minis-keyframe-gallery article.is-review-needs_fix {
  border-color: rgba(217, 119, 6, 0.42);
}

.studio-minis-keyframe-gallery article.is-review-reject {
  opacity: 0.72;
}

.studio-minis-keyframe-edit-link {
  display: block;
  border-radius: 12px;
  outline: none;
}

.studio-minis-keyframe-edit-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.28);
}

.studio-minis-keyframe-gallery img {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(17, 24, 39, 0.06);
}

.studio-minis-keyframe-gallery article > div {
  display: grid;
  gap: 2px;
}

.studio-minis-keyframe-gallery span {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.72rem;
}

.studio-minis-keyframe-gallery em {
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 860;
  line-height: 1;
  text-transform: uppercase;
}

.studio-minis-keyframe-gallery form {
  display: grid;
}

.studio-minis-keyframe-review {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: rgba(17, 24, 39, 0.045);
}

.studio-minis-keyframe-review form {
  min-width: 0;
}

.studio-minis-keyframe-review button {
  display: inline-flex;
  width: 100%;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
}

.studio-minis-keyframe-review button.is-selected {
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  box-shadow: 0 1px 5px rgba(17, 24, 39, 0.1);
}

.studio-minis-keyframe-review button.is-selected.is-best {
  color: #0f766e;
}

.studio-minis-keyframe-review button.is-selected.is-needs_fix {
  color: #b45309;
}

.studio-minis-keyframe-review button.is-selected.is-reject {
  color: #dc2626;
}

.studio-minis-video-stage {
  display: grid;
  gap: 12px;
}

.studio-minis-video-stage video,
.studio-minis-video-empty {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.92);
}

.studio-minis-video-stage video {
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: min(68svh, 640px);
  max-height: calc(100svh - 220px);
  object-fit: contain;
}

.studio-minis-chain-panel {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(255, 255, 255, 0.78)),
    rgba(255, 255, 255, 0.8);
}

.studio-minis-chain-panel > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-chain-panel span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  width: fit-content;
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-chain-panel strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.studio-minis-chain-panel p {
  max-width: 520px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}

.studio-minis-chain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.studio-minis-video-empty {
  display: grid;
  place-items: center;
  align-content: center;
  padding: 18px;
  color: white;
  text-align: center;
}

.studio-minis-video-empty p {
  max-width: 280px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
}

.studio-minis-asset-empty-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
}

.studio-minis-asset-empty-keyframes {
  grid-column: 1 / -1;
  min-height: 420px;
  align-content: center;
  border-style: dashed;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.1), rgba(255, 255, 255, 0.78)),
    repeating-linear-gradient(90deg, rgba(17, 24, 39, 0.04) 0 1px, transparent 1px 18px);
}

.studio-minis-asset-empty-video {
  min-height: 520px;
  align-content: center;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.04), rgba(17, 24, 39, 0.02)),
    rgba(255, 255, 255, 0.78);
}

.studio-minis-empty-step-number {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 200, 0, 0.52);
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 940;
}

.studio-minis-asset-empty-card > div:not(.studio-minis-empty-step-number) {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-asset-empty-card > div:not(.studio-minis-empty-step-number) > span,
.studio-minis-asset-checklist span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.studio-minis-asset-empty-card strong {
  color: var(--foreground);
  font-size: 1.06rem;
  line-height: 1.2;
}

.studio-minis-asset-empty-card p {
  max-width: 520px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
}

.studio-minis-asset-empty-card .studio-minis-inline-form,
.studio-minis-asset-empty-card form:not(.studio-minis-inline-form) {
  max-width: 360px;
}

.studio-minis-asset-checklist {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-minis-asset-checklist li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.035);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 800;
}

.studio-minis-asset-checklist li.is-complete {
  border-color: rgba(15, 118, 110, 0.22);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.studio-minis-asset-checklist li.is-current {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
}

.studio-minis-asset-checklist span {
  order: 2;
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  line-height: 1;
}

.studio-minis-production-tools {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
}

.studio-minis-tool-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.035);
}

.studio-minis-tool-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-tool-head h3 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}

.studio-minis-tool-head > span,
.studio-minis-muted {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.45;
}

.studio-minis-inline-form,
.studio-minis-publish-form {
  display: grid;
  gap: 10px;
}

.studio-minis-instagram-panel {
  display: grid;
  gap: 14px;
}

.studio-minis-setup-pill {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 880;
}

.studio-minis-setup-pill.is-ready {
  border-color: rgba(30, 129, 84, 0.22);
  background: rgba(230, 247, 238, 0.78);
  color: #176f49;
}

.studio-minis-setup-pill.is-needed {
  border-color: rgba(191, 89, 21, 0.24);
  background: rgba(255, 241, 219, 0.78);
  color: #985112;
}

.studio-minis-instagram-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-instagram-status-grid > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 10px 26px rgba(31, 25, 16, 0.05);
}

.studio-minis-instagram-status-grid span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-minis-instagram-status-grid strong {
  color: var(--foreground);
  font-size: 0.98rem;
}

.studio-minis-instagram-status-grid small {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.75rem;
  line-height: 1.45;
}

.studio-minis-instagram-status-grid .is-ready {
  border-color: rgba(30, 129, 84, 0.2);
  background: rgba(230, 247, 238, 0.72);
}

.studio-minis-instagram-status-grid .is-working {
  border-color: rgba(82, 116, 210, 0.2);
  background: rgba(231, 236, 255, 0.72);
}

.studio-minis-instagram-status-grid .is-waiting {
  border-color: rgba(209, 151, 38, 0.24);
  background: rgba(255, 246, 218, 0.78);
}

.studio-minis-instagram-status-grid .is-danger {
  border-color: rgba(184, 58, 58, 0.22);
  background: rgba(255, 235, 235, 0.72);
}

.studio-minis-instagram-checklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.studio-minis-instagram-checklist > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-minis-instagram-checklist > div.is-ready {
  border-color: rgba(30, 129, 84, 0.18);
  background: rgba(230, 247, 238, 0.58);
}

.studio-minis-instagram-checklist > div.is-needed {
  border-color: rgba(209, 151, 38, 0.24);
  background: rgba(255, 246, 218, 0.7);
}

.studio-minis-instagram-checklist svg {
  color: var(--muted-foreground);
}

.studio-minis-instagram-checklist > div.is-ready svg {
  color: #1e8154;
}

.studio-minis-instagram-checklist > div.is-needed svg {
  color: #b7791f;
}

.studio-minis-instagram-checklist span {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
}

.studio-minis-instagram-checklist small {
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 740;
  line-height: 1.32;
}

.studio-minis-publish-workbench {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-publish-video {
  display: grid;
  gap: 8px;
}

.studio-minis-publish-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 260px;
  border-radius: 14px;
  background: #111;
  object-fit: cover;
  box-shadow: 0 14px 34px rgba(25, 19, 10, 0.12);
}

.studio-minis-publish-video span {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.73rem;
  line-height: 1.35;
}

.studio-minis-publish-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.studio-minis-publish-form .is-wide {
  grid-column: 1 / -1;
}

.studio-minis-inline-form label,
.studio-minis-publish-form label {
  display: grid;
  gap: 6px;
}

.studio-minis-inline-form label span,
.studio-minis-publish-form label span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.studio-minis-publish-form textarea {
  min-height: 90px;
  resize: vertical;
}

.studio-minis-publish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.studio-minis-manual-post-log {
  display: grid;
  gap: 12px;
  scroll-margin-top: 96px;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.52);
}

.studio-minis-manual-post-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-manual-post-head > div {
  display: grid;
  gap: 3px;
}

.studio-minis-manual-post-head span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-minis-manual-post-head strong {
  color: var(--foreground);
  font-size: 0.98rem;
}

.studio-minis-manual-post-head small {
  padding: 6px 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
}

.studio-minis-manual-post-form {
  align-items: end;
}

.studio-minis-manual-post-dialog {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
}

.studio-minis-manual-post-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: none;
  cursor: pointer;
}

.studio-minis-manual-post-modal {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 720px);
  max-height: min(760px, calc(100vh - 36px));
  gap: 14px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 18px;
  background: #f3efe6;
  color: #111827;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}

.studio-minis-manual-post-modal.is-saving {
  overflow: hidden;
}

.studio-minis-manual-post-modal.is-saving .studio-minis-manual-post-modal-head,
.studio-minis-manual-post-modal.is-saving .studio-minis-manual-post-dialog-form {
  pointer-events: none;
  opacity: 0.24;
  filter: blur(1.5px);
}

.studio-minis-manual-post-saving {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 24px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.78), transparent 42%),
    rgba(248, 250, 252, 0.88);
  color: #111827;
  text-align: center;
  backdrop-filter: blur(18px);
}

.studio-minis-manual-post-saving strong {
  color: #111827;
  font-size: 0.98rem;
  font-weight: 950;
}

.studio-minis-manual-post-saving span {
  max-width: 280px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.studio-minis-manual-post-modal-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-minis-manual-post-modal-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.studio-minis-manual-post-modal-head span,
.studio-minis-manual-post-dialog-form label span {
  color: #6b7280;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-minis-manual-post-modal-head strong {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 950;
  line-height: 1.15;
}

.studio-minis-manual-post-modal-head small {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 760;
}

.studio-minis-manual-post-modal-head > button,
.studio-minis-manual-post-modal-actions > button {
  appearance: none;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.studio-minis-manual-post-modal-head > button {
  width: 36px;
  padding: 0;
}

.studio-minis-manual-post-dialog-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-manual-post-dialog-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-manual-post-dialog-form .is-wide,
.studio-minis-manual-post-modal-actions {
  grid-column: 1 / -1;
}

.studio-minis-manual-post-picker {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.studio-minis-manual-post-picker > span {
  color: #6b7280;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-minis-manual-post-picker-toggle {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.studio-minis-manual-post-picker-toggle span {
  color: #6b7280;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-minis-manual-post-picker-toggle strong {
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-manual-post-picker-toggle:is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.24);
  background: #ffffff;
  outline: none;
}

.studio-minis-manual-post-picker > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 2px;
}

.studio-minis-manual-post-picker > div button {
  appearance: none;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 7px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.studio-minis-manual-post-picker > div button:is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.22);
  background: #ffffff;
  outline: none;
}

.studio-minis-manual-post-picker > div button.is-selected {
  border-color: rgba(17, 24, 39, 0.78);
  background: #e8e4dc;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.18), 0 12px 28px rgba(15, 23, 42, 0.1);
}

.studio-minis-manual-post-picker-thumb {
  overflow: hidden;
  display: grid;
  aspect-ratio: 9 / 12;
  place-items: center;
  border-radius: 9px;
  background: #e8e4dc;
}

.studio-minis-manual-post-picker-thumb img,
.studio-minis-manual-post-picker-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: none;
}

.studio-minis-manual-post-picker-thumb i {
  color: #6b7280;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 950;
}

.studio-minis-manual-post-picker > div button strong {
  overflow: hidden;
  color: #111827;
  font-size: 0.78rem;
  font-weight: 930;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-manual-post-picker > div button small {
  overflow: hidden;
  color: #6b7280;
  font-size: 0.69rem;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-manual-post-dialog-form input,
.studio-minis-manual-post-dialog-form select,
.studio-minis-manual-post-dialog-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  font-size: 0.84rem;
  outline: none;
}

.studio-minis-manual-post-dialog-form textarea {
  min-height: 92px;
  resize: vertical;
}

.studio-minis-manual-post-dialog-form input:focus,
.studio-minis-manual-post-dialog-form select:focus,
.studio-minis-manual-post-dialog-form textarea:focus {
  border-color: rgba(17, 24, 39, 0.24);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.studio-minis-manual-post-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 2px;
}

.studio-minis-manual-post-modal-actions > button {
  padding: 0 13px;
}

.studio-minis-manual-post-submit {
  appearance: none;
  display: inline-flex;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 940;
  cursor: pointer;
}

.studio-minis-manual-post-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.studio-minis-manual-post-modal-head > button:disabled,
.studio-minis-manual-post-modal-actions > button:disabled,
.studio-minis-manual-post-picker-toggle:disabled,
.studio-minis-manual-post-picker > div button:disabled {
  cursor: wait;
  opacity: 0.56;
}

.studio-minis-external-upload-dialog {
  position: fixed;
  inset: 0;
  z-index: 121;
  display: grid;
  place-items: center;
  padding: 18px;
}

.studio-minis-external-upload-modal {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 920px);
  max-height: min(820px, calc(100vh - 36px));
  gap: 14px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 246, 218, 0.96), rgba(247, 244, 236, 0.94)),
    #f2eee5;
  color: #111827;
  box-shadow: 0 34px 96px rgba(15, 23, 42, 0.3);
}

.studio-minis-external-upload-body {
  display: grid;
  gap: 12px;
}

.studio-minis-external-upload-prompts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}

.studio-minis-external-upload-prompts article {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.46);
}

.studio-minis-external-upload-prompts article > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-external-upload-prompts span,
.studio-minis-external-upload-prompts small,
.studio-minis-external-upload-forms label span {
  color: #6b7280;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-minis-external-upload-prompts strong,
.studio-minis-external-upload-forms form > div > strong {
  color: #111827;
  font-size: 0.88rem;
  font-weight: 940;
  line-height: 1.2;
}

.studio-minis-external-upload-prompts textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.78);
  color: #6b7280;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.45;
  outline: none;
  white-space: pre-wrap;
}

.studio-minis-external-upload-prompts textarea:focus {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.studio-minis-external-upload-forms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-external-upload-forms form {
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.5);
}

.studio-minis-external-upload-forms form > div {
  display: grid;
  gap: 3px;
}

.studio-minis-external-upload-forms form > div > small {
  color: #6b7280;
  font-size: 0.76rem;
  line-height: 1.35;
}

.studio-minis-external-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 0.35fr);
  gap: 8px;
}

.studio-minis-external-upload-forms label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.studio-minis-external-upload-forms input,
.studio-minis-external-upload-forms select {
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
  color: #111827;
  font: inherit;
  font-size: 0.82rem;
  outline: none;
}

.studio-minis-external-upload-submit {
  appearance: none;
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 940;
  cursor: pointer;
}

.studio-minis-external-upload-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.studio-minis-frame-list {
  display: grid;
  gap: 10px;
}

.studio-minis-frame-list article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-frame-list article.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
}

.studio-minis-frame-list img {
  width: 64px;
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  object-fit: cover;
}

.studio-minis-frame-list div,
.studio-minis-publish-list article {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.studio-minis-frame-list span,
.studio-minis-publish-list span,
.studio-minis-publish-list small,
.studio-minis-publish-list a {
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.76rem;
}

.studio-minis-publish-list {
  display: grid;
  gap: 8px;
}

.studio-minis-publish-list article {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.studio-minis-publish-list article.is-ready {
  border-color: rgba(30, 129, 84, 0.22);
  background: rgba(230, 247, 238, 0.64);
}

.studio-minis-publish-list article.is-working {
  border-color: rgba(82, 116, 210, 0.22);
  background: rgba(231, 236, 255, 0.64);
}

.studio-minis-publish-list article.is-waiting {
  border-color: rgba(209, 151, 38, 0.24);
  background: rgba(255, 246, 218, 0.74);
}

.studio-minis-publish-list article.is-danger {
  border-color: rgba(184, 58, 58, 0.22);
  background: rgba(255, 235, 235, 0.68);
}

.studio-minis-publish-list article.is-muted {
  opacity: 0.72;
}

.studio-minis-publish-list article > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.button.is-disabled {
  pointer-events: none;
  opacity: 0.48;
}

.studio-minis-recent {
  box-shadow: none;
}

.studio-minis-production-list:not(.studio-minis-production-card-grid) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.studio-animation-qa-shell {
  display: grid;
  gap: 18px;
}

.studio-animation-qa-hero,
.studio-animation-live-panel,
.studio-animation-inspector,
.studio-animation-card,
.studio-animation-command {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.studio-animation-qa-hero {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 24px;
}

.studio-animation-qa-hero h1,
.studio-animation-panel-head h2,
.studio-animation-command h2 {
  margin: 0;
  color: var(--foreground);
}

.studio-animation-qa-hero p,
.studio-animation-frame-preview p,
.studio-animation-checklist p,
.studio-motion-candidate-list p {
  color: var(--muted-foreground);
}

.studio-animation-status-card {
  display: grid;
  min-width: 220px;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 200, 0, 0.38);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 46%),
    rgba(255, 255, 255, 0.76);
}

.studio-animation-status-card span,
.studio-animation-status-card small {
  color: var(--muted-foreground);
  font-weight: 760;
}

.studio-animation-status-card strong {
  color: var(--foreground);
  font-size: 1.08rem;
}

.studio-animation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 18px;
  align-items: stretch;
}

.studio-animation-live-panel,
.studio-animation-inspector,
.studio-animation-card,
.studio-animation-command {
  padding: 18px;
}

.studio-animation-panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.studio-animation-panel-head > span {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-animation-preview-scene .studio-room-canvas-wrap {
  height: clamp(420px, 52vw, 560px);
  min-height: 420px;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: none;
}

.studio-animation-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.studio-animation-timeline button,
.studio-animation-frame-grid button {
  border: 1px solid rgba(33, 33, 33, 0.1);
  color: var(--foreground);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.92) 100%);
  box-shadow: 0 8px 18px rgba(78, 58, 24, 0.06);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.studio-animation-timeline button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 999px;
  font-weight: 820;
}

.studio-animation-timeline button span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: var(--foreground);
  font-size: 0.76rem;
}

.studio-animation-timeline button.is-active,
.studio-animation-frame-grid button.is-active {
  border-color: rgba(255, 200, 0, 0.68);
  background:
    linear-gradient(135deg, #fff0a6 0%, #fff8d8 48%, #fffdf5 100%);
  box-shadow:
    0 16px 34px rgba(78, 58, 24, 0.12),
    0 0 0 3px rgba(255, 200, 0, 0.18);
}

.studio-animation-timeline button:hover,
.studio-animation-timeline button:focus-visible,
.studio-animation-frame-grid button:hover,
.studio-animation-frame-grid button:focus-visible {
  border-color: rgba(255, 200, 0, 0.46);
  transform: translateY(-1px);
}

.studio-animation-inspector {
  display: grid;
  gap: 14px;
  align-content: start;
}

.studio-animation-frame-preview {
  display: grid;
  gap: 12px;
}

.studio-animation-frame-stage {
  display: grid;
  min-height: 300px;
  place-items: center;
  border-radius: 20px;
  background:
    linear-gradient(45deg, rgba(17, 24, 39, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(17, 24, 39, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(17, 24, 39, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(17, 24, 39, 0.05) 75%);
  background-color: #ffffff;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
  background-size: 20px 20px;
}

.studio-animation-frame-stage img {
  width: min(80%, 250px);
  height: auto;
  object-fit: contain;
}

.studio-animation-frame-preview code,
.studio-animation-command code {
  display: block;
  width: 100%;
  overflow-x: auto;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.05);
  color: var(--foreground);
  font-size: 0.82rem;
}

.studio-animation-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.studio-animation-frame-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.studio-animation-frame-grid button {
  display: grid;
  gap: 8px;
  min-height: 190px;
  padding: 12px;
  border-radius: 18px;
}

.studio-animation-frame-grid button span {
  color: var(--foreground);
  font-weight: 860;
  text-align: left;
}

.studio-animation-frame-grid img {
  width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.studio-animation-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
}

.studio-animation-checklist,
.studio-motion-candidate-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.studio-animation-checklist article,
.studio-motion-candidate-list article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.9) 100%);
  box-shadow: 0 8px 18px rgba(78, 58, 24, 0.05);
}

.studio-animation-checklist article > span,
.studio-motion-candidate-list article span,
.studio-motion-candidate-list article small {
  width: max-content;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.studio-animation-checklist article.is-watch > span,
.studio-motion-candidate-list article small {
  background: rgba(255, 200, 0, 0.18);
}

.studio-animation-checklist strong,
.studio-motion-candidate-list strong {
  color: var(--foreground);
}

.studio-motion-candidate-list article {
  grid-template-columns: minmax(0, 1fr) auto;
}

.studio-motion-candidate-list article p {
  grid-column: 1 / -1;
  margin: 0;
}

.studio-motion-candidate-list article div {
  display: grid;
  gap: 5px;
}

.studio-animation-command {
  display: grid;
  gap: 12px;
}

.admin-studio-living-page {
  gap: 18px;
}

.admin-studio-qa-status {
  display: grid;
  min-width: 220px;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(86, 207, 174, 0.34);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.18), transparent 46%),
    rgba(255, 255, 255, 0.82);
}

.admin-studio-qa-status.is-error {
  border-color: rgba(239, 68, 68, 0.36);
  background:
    radial-gradient(circle at top right, rgba(239, 68, 68, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.82);
}

.admin-studio-qa-status span,
.admin-studio-qa-status small {
  color: var(--muted-foreground);
  font-weight: 780;
}

.admin-studio-qa-status strong {
  color: var(--foreground);
  font-size: 1.18rem;
}

.admin-studio-qa-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-qa-stats div,
.admin-studio-qa-preview,
.admin-studio-qa-card {
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.admin-studio-qa-stats div {
  display: grid;
  gap: 5px;
  padding: 15px 16px;
}

.admin-studio-qa-stats span,
.admin-studio-qa-stats small {
  color: var(--muted-foreground);
  font-weight: 760;
}

.admin-studio-qa-stats strong {
  color: var(--foreground);
  font-size: 1.9rem;
  line-height: 1;
}

.admin-studio-qa-preview,
.admin-studio-qa-card {
  padding: 18px;
}

.admin-studio-qa-preview .studio-living-lobby-shell {
  margin-top: 12px;
}

.admin-studio-qa-preview .studio-living-lobby-canvas-wrap {
  height: clamp(430px, 54vw, 620px);
  min-height: 430px;
}

.admin-studio-generated-preview-scene .studio-living-lobby-canvas-wrap {
  height: clamp(340px, 34vw, 460px);
  min-height: 340px;
}

.admin-studio-generated-preview-scene .studio-living-lobby-caption {
  display: none;
}

.admin-studio-qa-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-qa-section-head h2 {
  margin: 0;
  color: var(--foreground);
}

.admin-studio-qa-section-head > span {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-qa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.admin-studio-qa-grid.is-wide {
  align-items: start;
}

.admin-studio-qa-empty {
  margin-top: 12px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground);
  font-weight: 820;
}

.admin-studio-qa-issue-list,
.admin-studio-qa-row-list,
.admin-studio-qa-table,
.admin-studio-qa-asset-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.admin-studio-qa-issue-list > div,
.admin-studio-qa-issue-list > li,
.admin-studio-qa-row-list > div,
.admin-studio-qa-table > div,
.admin-studio-qa-asset-list > div {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-qa-table > div {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.75fr) minmax(0, 0.75fr) auto;
  align-items: center;
}

.admin-studio-qa-table > div.is-error {
  border-color: rgba(239, 68, 68, 0.34);
  background: rgba(239, 68, 68, 0.08);
}

.admin-studio-qa-issue-list span,
.admin-studio-qa-pill-row span {
  width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 880;
  text-transform: uppercase;
}

.admin-studio-qa-issue-list .is-warning span {
  background: rgba(255, 200, 0, 0.2);
}

.admin-studio-qa-issue-list .is-error span {
  background: rgba(239, 68, 68, 0.14);
}

.admin-studio-qa-row-list strong,
.admin-studio-qa-table strong,
.admin-studio-qa-asset-list strong {
  color: var(--foreground);
}

.admin-studio-qa-row-list span,
.admin-studio-qa-row-list small,
.admin-studio-qa-table span,
.admin-studio-qa-table small,
.admin-studio-qa-asset-list span,
.admin-studio-qa-asset-list code,
.admin-studio-qa-issue-list p {
  color: var(--muted-foreground);
}

.admin-studio-qa-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-qa-asset-list code {
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .studio-hero,
  .studio-detail-layout,
  .studio-create-hero,
  .studio-create-inspiration,
  .studio-pass-layout,
  .studio-lounge-hero,
  .studio-room-info-grid {
    grid-template-columns: 1fr;
  }

  .studio-create-console-copy {
    grid-template-columns: 1fr;
  }

  .studio-create-console-copy .studio-create-budget-note {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
  }

  .studio-hero {
    min-height: auto;
  }

  .studio-hero-stage-first {
    gap: 16px;
  }

  .studio-hero-room {
    order: -1;
  }

  .studio-tier-grid,
  .studio-wall-grid,
  .studio-home-cameos-grid,
  .studio-short-cameo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-home-cameos-preview .studio-section-head {
    grid-template-columns: 1fr;
  }

  .studio-home-cameos-preview .studio-section-head .eyebrow,
  .studio-home-cameos-preview .studio-section-head h2,
  .studio-home-cameos-preview .studio-section-head .button {
    grid-column: auto;
    grid-row: auto;
  }

  .studio-auto-match-grid,
  .studio-template-card-grid,
  .studio-create-proof-grid,
  .studio-pass-preview,
  .admin-studio-generation-grid,
  .admin-studio-mini-planner,
  .admin-studio-mini-idea-list,
  .admin-studio-mini-form-grid,
  .admin-studio-character-layout,
  .admin-studio-character-form-grid,
  .admin-studio-character-season-grid,
  .admin-studio-character-link-grid,
  .admin-studio-character-reference-panel,
  .admin-studio-character-asset-grid,
  .admin-studio-character-role-picker,
  .admin-studio-character-create-shell,
  .admin-studio-character-primary-row,
  .admin-studio-character-create-fields,
  .admin-studio-character-create-compare,
  .admin-studio-production-layout,
  .admin-studio-production-episode-list,
  .admin-studio-production-source,
  .admin-studio-lyrics-track-grid,
  .admin-studio-lyrics-translation-grid,
  .admin-studio-production-prompts,
  .admin-studio-music-upload-grid,
  .admin-studio-review-brief {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-create-status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    border-radius: 14px;
  }

  .admin-studio-character-production-line {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-current-asset,
  .admin-studio-character-appearance-map,
  .admin-studio-character-time-variant-grid,
  .admin-studio-character-asset-history-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-contract-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-studio-character-contract-status {
    justify-content: flex-start;
  }

  .admin-studio-character-time-variants-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-studio-character-current-asset-frame {
    min-height: 220px;
  }

  .admin-studio-character-current-asset-body {
    padding: 0;
  }

  .admin-studio-character-sticky-progress {
    top: 0;
    margin-inline: -2px;
    border-radius: 16px;
  }

  .admin-studio-character-progress-summary {
    display: grid;
    gap: 3px;
  }

  .admin-studio-character-progress-summary span {
    white-space: normal;
  }

  .admin-studio-character-production-line-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-studio-character-production-line-item > svg {
    display: none;
  }

  .admin-studio-character-season-head {
    flex-direction: column;
  }

  .admin-studio-character-create-status > svg {
    display: none;
  }

  .admin-studio-character-create-status span {
    min-height: 30px;
    padding: 5px 6px;
    border: 1px solid rgba(100, 116, 139, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.56);
    font-size: 0.68rem;
  }

  .admin-studio-character-create-compare {
    display: flex;
    gap: 10px;
    margin-inline: -2px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .admin-studio-character-create-compare figure {
    flex: 0 0 min(72vw, 260px);
    scroll-snap-align: start;
  }

  .admin-studio-character-create-compare figcaption {
    padding: 8px;
  }

  .admin-studio-character-create-compare figcaption small {
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .admin-studio-character-main-image-tools {
    justify-content: flex-start;
  }

  .admin-studio-character-work-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-work-grid button {
    min-height: 56px;
  }

  .admin-studio-character-selected-target {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 9px;
  }

  .admin-studio-character-selected-target-frame {
    width: 52px;
  }

  .admin-studio-character-main-actions {
    gap: 7px;
  }

  .admin-studio-character-main-actions .admin-studio-character-action-primary {
    flex: 1 1 100%;
  }

  .admin-studio-character-main-actions .admin-studio-character-action-secondary {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 132px;
  }

  .admin-studio-turnaround-review {
    gap: 9px;
    padding: 11px;
    border-radius: 15px;
  }

  .admin-studio-turnaround-review-head {
    gap: 2px;
  }

  .admin-studio-turnaround-review-head span {
    font-size: 0.84rem;
  }

  .admin-studio-turnaround-review-head p {
    font-size: 0.74rem;
    line-height: 1.3;
  }

  .admin-studio-turnaround-frame {
    aspect-ratio: 16 / 9;
    border-radius: 13px;
  }

  .admin-studio-turnaround-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
  }

  .admin-studio-turnaround-actions .button,
  .admin-studio-turnaround-actions .admin-studio-character-action-primary,
  .admin-studio-turnaround-actions .admin-studio-character-action-secondary,
  .admin-studio-turnaround-actions .admin-studio-character-action-disabled {
    flex: none;
    padding-inline: 10px;
    white-space: nowrap;
  }

  .admin-studio-turnaround-actions .admin-studio-character-action-primary,
  .admin-studio-turnaround-actions .admin-studio-character-action-secondary {
    min-width: 126px;
  }

  .admin-studio-turnaround-actions .admin-studio-character-upload-sheet-action {
    min-width: 112px;
  }

  .admin-studio-turnaround-actions .admin-studio-character-action-disabled {
    min-width: 76px;
  }

  .admin-studio-turnaround-auto-save {
    min-height: 34px;
    padding-inline: 9px;
  }

  .admin-studio-turnaround-status {
    padding: 9px;
  }

  .admin-studio-turnaround-status small {
    white-space: normal;
  }

  .admin-studio-character-production-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-mini-profile-list,
  .admin-studio-character-rail,
  .admin-studio-production-rail {
    position: static;
  }

  .admin-studio-lyrics-line > summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-studio-lyrics-line > summary span {
    grid-column: 1 / -1;
  }

  .admin-studio-submission-card {
    grid-template-columns: 1fr;
  }

  .studio-animation-layout,
  .studio-animation-lower-grid,
  .admin-studio-qa-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-submission-copy dl {
    grid-template-columns: 1fr;
  }

  .admin-studio-qa-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-qa-table > div {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 821px) and (max-width: 1120px) {
  body:has(.admin-studio-character-create-page) .site-main {
    padding-top: 6px;
  }

  .admin-studio-character-create-page {
    width: min(calc(100% - 16px), 1760px);
    gap: 6px;
  }

  .admin-studio-character-create-page .admin-studio-character-create-shell {
    grid-template-columns: minmax(286px, 0.82fr) minmax(330px, 1.18fr);
    gap: 8px;
    align-items: start;
  }

  .admin-studio-character-create-page .admin-studio-character-create-form,
  .admin-studio-character-create-page .admin-studio-character-create-preview {
    gap: 8px;
    padding: 12px;
    border-radius: 14px;
  }

  .admin-studio-character-create-page .studio-photo-picker {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 92px;
    padding: 12px;
    border-radius: 16px;
  }

  .admin-studio-character-create-page .studio-photo-picker-icon {
    width: 42px;
    border-radius: 13px;
  }

  .admin-studio-character-create-page .studio-photo-picker strong {
    font-size: 0.96rem;
  }

  .admin-studio-character-create-page .studio-photo-picker small {
    font-size: 0.78rem;
  }

  .admin-studio-character-create-page .admin-studio-character-create-compare {
    gap: 8px;
  }

  .admin-studio-character-create-page .admin-studio-character-create-compare figcaption {
    padding: 8px;
  }
}

@media (orientation: portrait) and (min-width: 821px) and (min-height: 1100px) {
  body:has(.admin-studio-character-create-page) .site-main {
    padding-top: 6px;
  }

  .admin-studio-character-create-page {
    width: min(calc(100% - 18px), 1320px);
  }

  .admin-studio-character-create-page .admin-studio-character-create-shell {
    min-height: calc(100svh - 28px);
    align-items: start;
  }

  .admin-studio-character-create-page .admin-studio-character-create-preview {
    position: sticky;
    top: 8px;
    max-height: calc(100svh - 18px);
    overflow: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 820px) {
  .admin-studio-character-create-page {
    width: min(calc(100% - 16px), 1760px);
    gap: 8px;
    padding-bottom: 24px;
  }

  .admin-studio-character-create-page .admin-studio-page-header {
    padding: 0;
  }

  .admin-studio-builder-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .admin-studio-builder-title-row {
    gap: 7px;
  }

  .admin-studio-builder-title-row h1 {
    white-space: normal;
  }

  .admin-studio-builder-status,
  .admin-studio-builder-header-action {
    justify-content: flex-start;
  }

  .admin-studio-character-create-page .admin-studio-character-create-shell {
    gap: 8px;
    align-items: start;
  }

  .admin-studio-character-create-page .admin-studio-character-create-form,
  .admin-studio-character-create-page .admin-studio-character-create-preview {
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .admin-studio-character-create-page .studio-photo-picker {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    min-height: 84px;
    padding: 10px;
    border-radius: 14px;
  }

  .admin-studio-character-create-page .studio-photo-picker-icon {
    width: 40px;
    border-radius: 12px;
  }

  .admin-studio-character-create-page .studio-photo-picker-action {
    grid-column: 1 / -1;
    justify-self: stretch;
    min-height: 32px;
  }

  .admin-studio-character-primary-stack {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .admin-studio-character-primary-stack .admin-studio-character-segment {
    justify-self: stretch;
    width: 100%;
  }

  .admin-studio-character-setup-panel {
    padding: 10px;
    border-radius: 15px;
  }

  .admin-studio-character-create-page .admin-studio-character-render-options,
  .admin-studio-character-create-page .admin-studio-character-render-option-buttons {
    justify-content: flex-start;
  }

  .admin-studio-character-create-page .admin-studio-character-render-options > span {
    flex: 1 0 100%;
  }

  .admin-studio-character-create-page .admin-studio-character-setting-button,
  .admin-studio-character-create-page .admin-studio-character-note-button {
    max-width: 100%;
  }
}

@media (max-width: 620px) {
  .admin-studio-character-production-flow {
    grid-template-columns: 1fr;
  }

  .studio-template-card-grid,
  .studio-preview-pose-strip,
  .admin-studio-pose-grid,
  .admin-studio-mini-dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-generation-head {
    display: grid;
  }

  .admin-studio-generation-meta {
    text-align: left;
  }

  .admin-studio-review-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-production-scene-head {
    grid-template-columns: 1fr;
  }

  .admin-studio-production-scene-tags {
    justify-content: flex-start;
    max-width: none;
  }

  .studio-global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    width: calc(100vw - 20px);
    top: 8px;
    padding: 8px;
    border-radius: 24px;
  }

  .studio-global-rescue-link {
    display: none;
  }

  .studio-global-brand {
    position: static;
    width: 48px;
    height: 48px;
    padding: 3px;
  }

  .studio-global-brand-mark {
    width: auto;
  }

  .studio-global-nav {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    order: 2;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .studio-global-nav::-webkit-scrollbar {
    display: none;
  }

  .studio-global-actions {
    grid-column: 3;
    justify-self: end;
  }

  .studio-standalone-shell:has(.studio-motion-hero) .studio-global-header,
  .studio-standalone-shell:has(.studio-cameos-page) .studio-global-header {
    width: calc(100vw - 22px);
    margin-bottom: -116px;
    padding: 7px;
    border-radius: 24px;
  }

  .studio-standalone-shell:has(.studio-motion-hero) .studio-global-brand,
  .studio-standalone-shell:has(.studio-cameos-page) .studio-global-brand {
    padding: 3px;
  }

  .studio-standalone-shell:has(.studio-motion-hero) .studio-global-nav,
  .studio-standalone-shell:has(.studio-cameos-page) .studio-global-nav {
    gap: 4px;
    padding: 4px;
  }

  .studio-standalone-shell:has(.studio-motion-hero) .studio-global-link,
  .studio-standalone-shell:has(.studio-cameos-page) .studio-global-link {
    min-height: 32px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .studio-standalone-shell:has(.studio-create-page) .studio-global-header,
  .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-header {
    width: calc(100vw - 22px);
    margin-bottom: -116px;
    padding: 7px;
    border-radius: 24px;
  }

  .studio-standalone-shell:has(.studio-create-page) .studio-global-brand,
  .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-brand {
    padding: 3px;
  }

  .studio-standalone-shell:has(.studio-create-page) .studio-global-nav,
  .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-nav {
    gap: 4px;
    padding: 4px;
  }

  .studio-standalone-shell:has(.studio-create-page) .studio-global-link,
  .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-link {
    min-height: 32px;
    padding: 7px 10px;
    white-space: nowrap;
  }

  .studio-standalone-main {
    padding-top: 0;
  }

  .studio-actor-stage-hero {
    min-height: calc(100svh - 94px);
    padding: 0 10px 16px;
  }

  .studio-room-stage .studio-room-canvas-wrap {
    height: min(60svh, 560px);
    min-height: 500px;
    border-radius: 24px;
  }

  .studio-actor-stage-panel {
    position: static;
    display: grid;
    margin-top: 12px;
  }

  .studio-actor-stage-panel > div:first-child {
    max-width: none;
    padding: 16px;
  }

  .studio-actor-stage-panel p:not(.eyebrow) {
    display: none;
  }

  .studio-actor-stage-panel .button-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .studio-page {
    width: calc(100vw - 20px);
    max-width: 520px;
    overflow-x: hidden;
    padding-top: 10px;
  }

  .studio-page.studio-create-page {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .studio-create-console {
    min-height: 100svh;
    padding: 112px 14px 26px;
    border-radius: 0;
  }

  .studio-create-video-tile {
    width: clamp(96px, 31vw, 154px);
    opacity: 0.42;
  }

  .studio-create-video-tile:nth-child(1) {
    left: -7%;
    top: 13%;
  }

  .studio-create-video-tile:nth-child(2) {
    right: -8%;
    top: 12%;
  }

  .studio-create-video-tile:nth-child(3) {
    left: 4%;
    bottom: 4%;
  }

  .studio-create-video-tile:nth-child(4) {
    right: 4%;
    bottom: 5%;
  }

  .studio-create-video-tile:nth-child(n + 5) {
    display: none;
  }

  .studio-create-console .studio-pass-layout.is-checkout {
    width: min(430px, calc(100vw - 24px));
  }

  .studio-membership-note {
    grid-template-columns: 1fr;
  }

  .studio-create-hero {
    min-height: auto;
    padding: 18px;
    border-radius: 26px;
  }

  .studio-create-hero-copy h1 {
    font-size: clamp(2.2rem, 12vw, 3.2rem);
  }

  .studio-create-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .studio-create-budget-note {
    width: 100%;
    border-radius: 18px;
  }

  .studio-create-showcase-main {
    width: min(100%, 340px);
    transform: none;
  }

  .studio-create-showcase-main .studio-card {
    min-height: 430px;
  }

  .studio-create-showcase-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-create-inspiration {
    padding: 16px;
    border-radius: 24px;
  }

  .studio-page.studio-monthly-care-page {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .studio-home-page {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .studio-home-page > .studio-section,
  .studio-home-page > .studio-safety-note {
    width: calc(100% - 20px);
    max-width: 520px;
    margin-inline: auto;
  }

  .studio-motion-hero {
    width: 100vw;
    max-width: none;
    height: clamp(320px, 86vw, 480px);
    min-height: 0;
    margin-inline: calc(50% - 50vw);
  }

  .studio-motion-hero-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .studio-motion-hero-copy {
    left: 50%;
    bottom: 18px;
    width: calc(100vw - 28px);
    justify-items: center;
    gap: 9px;
    padding: 0;
    border-radius: 0;
    text-align: center;
    transform: translateX(-50%);
  }

  .studio-motion-hero-copy h1 {
    font-size: clamp(1.55rem, 8vw, 2.4rem);
  }

  .studio-motion-hero-copy p:not(.eyebrow) {
    font-size: 0.84rem;
    line-height: 1.38;
  }

  .studio-motion-hero-cta {
    min-height: 44px;
    padding: 10px 13px 10px 17px;
    font-size: 0.9rem;
  }

  .studio-hero-stage-first .studio-hero-copy {
    width: calc(100% - 20px);
    max-width: none;
    margin-inline: auto;
  }

  .studio-hero-stage-first .studio-hero-copy h1 {
    font-size: clamp(1.72rem, 7vw, 2.2rem);
    line-height: 0.98;
  }

  .studio-hero-stage-first .studio-hero-copy h1 span {
    display: block;
  }

  .studio-hero-stage-first .studio-hero-copy p:not(.eyebrow):not(.studio-budget-note) {
    max-width: 29ch;
  }

  .studio-home-stage .studio-room-canvas-wrap {
    height: min(62svh, 590px);
    min-height: 500px;
    border-radius: 0 0 26px 26px;
  }

  .studio-home-living-scene .studio-living-lobby-canvas-wrap {
    height: min(68svh, 620px);
    min-height: 500px;
    border-radius: 0 0 26px 26px;
  }

  .studio-deferred-scene-placeholder,
  .studio-deferred-scene-loading {
    height: min(68svh, 620px);
    min-height: 500px;
    border-radius: 0 0 26px 26px;
  }

  .studio-home-living-scene .studio-living-lobby-caption {
    width: calc(100% - 20px);
  }

  .studio-hero-copy,
  .studio-section,
  .studio-safety-note,
  .studio-pass-form,
  .studio-pass-preview-panel,
  .studio-detail-copy,
  .admin-studio-hero,
  .admin-studio-character-create-form,
  .admin-studio-character-create-preview {
    border-radius: 20px;
    padding: 18px;
  }

  .studio-pass-card-preview {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .studio-pass-preview-stage .studio-room-canvas-wrap {
    min-height: 360px;
  }

  .studio-pass-step-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-pass-readiness {
    grid-template-columns: 1fr;
  }

  .studio-hero-wall,
  .studio-tier-grid,
  .studio-wall-grid,
  .studio-room-kit-grid,
  .studio-fame-hero,
  .studio-fame-feature,
  .studio-fame-grid,
  .studio-fame-workflow-grid,
  .studio-decoration-slot-grid,
  .studio-monthly-support-grid,
  .studio-background-options,
  .admin-studio-stats {
    grid-template-columns: 1fr;
  }

  .studio-hall-hero,
  .admin-studio-hero,
  .studio-animation-qa-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-animation-frame-grid {
    grid-template-columns: 1fr;
  }

  .admin-animation-preview-scene .studio-room-canvas-wrap {
    min-height: 420px;
  }

  .studio-card {
    min-height: 330px;
  }

  .studio-card-large {
    min-height: 500px;
  }

  .studio-room-canvas-wrap {
    min-height: min(74svh, 560px);
  }

  .studio-living-lobby-canvas-wrap {
    min-height: min(78svh, 620px);
    border-radius: 24px;
  }

  .studio-monthly-care-scene .studio-living-lobby-canvas-wrap {
    min-height: calc(100svh - 96px);
    border-radius: 0;
  }

  .studio-fame-hero-copy,
  .studio-fame-feature-copy {
    padding: 18px;
    border-radius: 20px;
  }

  .studio-fame-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px;
    border-radius: 20px;
  }

  .studio-fame-stats div {
    min-height: 76px;
  }

  .studio-fame-video-card.is-featured {
    padding: 8px;
    border-radius: 22px;
  }

  .studio-fame-video-embed {
    min-height: min(72svh, 560px);
  }

  .studio-fame-entry-card .studio-fame-video-embed,
  .studio-fame-entry-card .studio-fame-video-placeholder {
    min-height: 340px;
  }

  .studio-monthly-stage-panel {
    display: grid;
    width: calc(100% - 20px);
    padding: 12px;
    border-radius: 20px;
  }

  .studio-monthly-stage-switcher {
    grid-template-columns: 1fr;
  }

  .studio-monthly-stage-switcher a {
    min-height: 58px;
  }

  .studio-actor-page {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .studio-lounge-copy,
  .studio-lounge-side {
    padding: 20px;
  }

  .studio-lounge-copy h1 {
    font-size: clamp(2rem, 9vw, 2.65rem);
  }

  .studio-lounge-copy p,
  .studio-lounge-side span {
    max-width: 31ch;
  }
}

html[data-theme="dark"] .studio-hero-copy,
html[data-theme="dark"] .studio-create-console,
html[data-theme="dark"] .studio-create-inspiration,
html[data-theme="dark"] .studio-create-hero,
html[data-theme="dark"] .studio-create-start,
html[data-theme="dark"] .studio-hall-hero,
html[data-theme="dark"] .studio-fame-hero-copy,
html[data-theme="dark"] .studio-fame-stats,
html[data-theme="dark"] .studio-fame-feature-copy,
html[data-theme="dark"] .studio-fame-entry-card,
html[data-theme="dark"] .studio-fame-workflow-card,
html[data-theme="dark"] .studio-section,
html[data-theme="dark"] .studio-safety-note,
html[data-theme="dark"] .studio-pass-form,
html[data-theme="dark"] .studio-detail-copy,
html[data-theme="dark"] .studio-lounge-copy,
html[data-theme="dark"] .studio-lounge-side,
html[data-theme="dark"] .admin-studio-hero,
html[data-theme="dark"] .admin-studio-mode-nav,
html[data-theme="dark"] .admin-studio-page-header,
html[data-theme="dark"] .admin-studio-submission-card,
html[data-theme="dark"] .admin-studio-qa-preview,
html[data-theme="dark"] .admin-studio-qa-card,
html[data-theme="dark"] .studio-minis-hero,
html[data-theme="dark"] .studio-minis-control-room,
html[data-theme="dark"] .studio-minis-queue-panel,
html[data-theme="dark"] .studio-minis-roster-panel,
html[data-theme="dark"] .studio-minis-command-center,
html[data-theme="dark"] .studio-minis-pipeline-overview,
html[data-theme="dark"] .studio-minis-daily-queue,
html[data-theme="dark"] .studio-minis-panel,
html[data-theme="dark"] .studio-minis-output,
html[data-theme="dark"] .studio-animation-qa-hero,
html[data-theme="dark"] .studio-animation-live-panel,
html[data-theme="dark"] .studio-animation-inspector,
html[data-theme="dark"] .studio-animation-card,
html[data-theme="dark"] .studio-animation-command {
  background: var(--surface);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-character-create-page .admin-studio-page-header {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-character-create-page .admin-studio-page-header .eyebrow {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-builder-header {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.72)),
    var(--surface);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .admin-studio-builder-kicker {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-builder-meta span,
html[data-theme="dark"] .admin-studio-builder-status span {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-builder-status span.is-ready {
  border-color: rgba(74, 222, 128, 0.22);
  background: rgba(34, 197, 94, 0.11);
  color: #bbf7d0;
}

html[data-theme="dark"] .admin-studio-mode-nav {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-studio-mode-nav-head {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 44%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
}

html[data-theme="dark"] .admin-studio-mode-link {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .admin-studio-mode-link:hover {
  background: rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .admin-studio-mode-link-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .admin-studio-mode-link.is-active {
  background: rgba(255, 200, 0, 0.11);
  border-color: rgba(255, 200, 0, 0.42);
}

html[data-theme="dark"] .admin-studio-mode-link.is-active .admin-studio-mode-link-icon {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(255, 200, 0, 0.36);
}

html[data-theme="dark"] .admin-studio-source-builder,
html[data-theme="dark"] .admin-studio-source-builder-card {
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-source-builder {
  background:
    radial-gradient(circle at 94% 0%, rgba(86, 207, 174, 0.09), transparent 30%),
    linear-gradient(135deg, rgba(139, 200, 246, 0.1), transparent 36%),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-studio-source-builder-card {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-source-builder-head h1,
html[data-theme="dark"] .admin-studio-source-builder-card strong {
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-source-builder-icon,
html[data-theme="dark"] .admin-studio-source-builder-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-source-builder-badges span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-source-builder-badges span.is-ready {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.15);
  color: rgba(204, 251, 241, 0.94);
}

html[data-theme="dark"] .admin-studio-source-builder-badges span.is-current {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(180, 83, 9, 0.2);
  color: rgba(254, 243, 199, 0.94);
}

html[data-theme="dark"] .admin-studio-source-builder-badges span.is-needed {
  border-color: rgba(147, 197, 253, 0.24);
  background: rgba(37, 99, 235, 0.18);
  color: rgba(219, 234, 254, 0.94);
}

html[data-theme="dark"] .admin-studio-source-builder-badges span.is-blocked {
  border-color: rgba(251, 113, 133, 0.24);
  background: rgba(190, 18, 60, 0.2);
  color: rgba(255, 228, 230, 0.94);
}

html[data-theme="dark"] .admin-studio-source-builder-card > div > span {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-character-bind-callout {
  border-color: rgba(125, 211, 252, 0.28);
  background:
    radial-gradient(circle at 90% 10%, rgba(86, 207, 174, 0.12), transparent 36%),
    linear-gradient(135deg, rgba(139, 200, 246, 0.1), rgba(255, 255, 255, 0.045));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-studio-character-bind-actions span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .studio-minis-readiness div,
html[data-theme="dark"] .studio-minis-admin-flow article,
html[data-theme="dark"] .studio-minis-daily-list article,
html[data-theme="dark"] .studio-minis-daily-list dl div,
html[data-theme="dark"] .studio-minis-board-column,
html[data-theme="dark"] .studio-minis-board-card,
html[data-theme="dark"] .studio-minis-board-empty,
html[data-theme="dark"] .studio-minis-board-thumb,
html[data-theme="dark"] .studio-minis-board-head strong,
html[data-theme="dark"] .studio-minis-board-review-actions,
html[data-theme="dark"] .studio-minis-memory-panel,
html[data-theme="dark"] .studio-minis-qa-memory-panel,
html[data-theme="dark"] .studio-minis-calendar-panel,
html[data-theme="dark"] .studio-minis-performance-panel,
html[data-theme="dark"] .studio-minis-memory-stats div,
html[data-theme="dark"] .studio-minis-memory-columns > div,
html[data-theme="dark"] .studio-minis-memory-tags b,
html[data-theme="dark"] .studio-minis-memory-tags small,
html[data-theme="dark"] .studio-minis-qa-memory-stats div,
html[data-theme="dark"] .studio-minis-qa-health-panel,
html[data-theme="dark"] .studio-minis-qa-health-grid > div,
html[data-theme="dark"] .studio-minis-qa-action-panel,
html[data-theme="dark"] .studio-minis-qa-action-card,
html[data-theme="dark"] .studio-minis-qa-action-guide,
html[data-theme="dark"] .studio-minis-qa-pattern-panel,
html[data-theme="dark"] .studio-minis-qa-pattern-card,
html[data-theme="dark"] .studio-minis-qa-memory-grid > div,
html[data-theme="dark"] .studio-minis-qa-tag-row,
html[data-theme="dark"] .studio-minis-qa-risk-card,
html[data-theme="dark"] .studio-minis-qa-retry-card,
html[data-theme="dark"] .studio-minis-qa-retry-trace-panel,
html[data-theme="dark"] .studio-minis-qa-retry-trace-panel dl div,
html[data-theme="dark"] .studio-minis-qa-memory-list > small,
html[data-theme="dark"] .studio-minis-qa-risk-tags span,
html[data-theme="dark"] .studio-minis-ops-head > span,
html[data-theme="dark"] .studio-minis-calendar-column,
html[data-theme="dark"] .studio-minis-calendar-column-head strong,
html[data-theme="dark"] .studio-minis-calendar-list a,
html[data-theme="dark"] .studio-minis-calendar-list > small,
html[data-theme="dark"] .studio-minis-performance-grid > div,
html[data-theme="dark"] .studio-minis-performance-list a,
html[data-theme="dark"] .studio-minis-performance-list div,
html[data-theme="dark"] .studio-minis-performance-list > small,
html[data-theme="dark"] .studio-minis-batch-panel,
html[data-theme="dark"] .studio-minis-batch-grid article,
html[data-theme="dark"] .studio-minis-batch-grid select,
html[data-theme="dark"] .studio-minis-batch-result,
html[data-theme="dark"] .studio-minis-batch-result-metrics div,
html[data-theme="dark"] .studio-minis-batch-inbox-column,
html[data-theme="dark"] .studio-minis-batch-inbox-list a,
html[data-theme="dark"] .studio-minis-batch-log-list div,
html[data-theme="dark"] .studio-minis-batch-inbox-list > small,
html[data-theme="dark"] .studio-minis-batch-log-list > small,
html[data-theme="dark"] .studio-minis-control-side div,
html[data-theme="dark"] .studio-minis-queue-list article,
html[data-theme="dark"] .studio-minis-queue-thumb,
html[data-theme="dark"] .studio-minis-roster-list a,
html[data-theme="dark"] .studio-minis-roster-thumb,
html[data-theme="dark"] .studio-minis-command-meta div,
html[data-theme="dark"] .studio-minis-operator-card,
html[data-theme="dark"] .studio-minis-purpose-note,
html[data-theme="dark"] .studio-minis-command-production-title,
html[data-theme="dark"] .studio-minis-command-preview,
html[data-theme="dark"] .studio-minis-pipeline-next,
html[data-theme="dark"] .studio-minis-pipeline-step,
html[data-theme="dark"] .studio-minis-pipeline-step > a > span,
html[data-theme="dark"] .studio-minis-pipeline-step em,
html[data-theme="dark"] .studio-minis-pipeline-stats div,
html[data-theme="dark"] .studio-minis-character-list a,
html[data-theme="dark"] .studio-minis-character-strip a,
html[data-theme="dark"] .studio-minis-character-thumb,
html[data-theme="dark"] .studio-minis-production-review-summary span,
html[data-theme="dark"] .studio-minis-production-list article.studio-minis-production-card,
html[data-theme="dark"] .studio-minis-production-list a,
html[data-theme="dark"] .studio-minis-production-thumb,
html[data-theme="dark"] .studio-minis-room-search,
html[data-theme="dark"] .studio-minis-room-filter,
html[data-theme="dark"] .studio-minis-production-quick-review,
html[data-theme="dark"] .studio-minis-production-segmented,
html[data-theme="dark"] .studio-minis-selected-reference,
html[data-theme="dark"] .studio-minis-stepper li,
html[data-theme="dark"] .studio-minis-current-action,
html[data-theme="dark"] .studio-minis-beat-brief,
html[data-theme="dark"] .studio-minis-beat-grid article,
html[data-theme="dark"] .studio-minis-prompt-pack,
html[data-theme="dark"] .studio-minis-prompt-grid article,
html[data-theme="dark"] .studio-minis-prompt-workspace,
html[data-theme="dark"] .studio-minis-prompt-workspace summary,
html[data-theme="dark"] .studio-minis-prompt-workspace-grid article,
html[data-theme="dark"] .studio-minis-external-flow-panel,
html[data-theme="dark"] .studio-minis-external-prompt-grid article,
html[data-theme="dark"] .studio-minis-external-prompt-grid textarea,
html[data-theme="dark"] .studio-minis-external-upload-form,
html[data-theme="dark"] .studio-minis-chain-panel,
html[data-theme="dark"] .studio-minis-lineage-grid article,
html[data-theme="dark"] .studio-minis-lineage-prompts,
html[data-theme="dark"] .studio-minis-lineage-prompts article,
html[data-theme="dark"] .studio-minis-lineage-references figure,
html[data-theme="dark"] .studio-minis-targeted-retry-panel,
html[data-theme="dark"] .studio-minis-asset-empty-card,
html[data-theme="dark"] .studio-minis-asset-checklist li,
html[data-theme="dark"] .studio-minis-flow-card,
html[data-theme="dark"] .studio-minis-flow-frame img,
html[data-theme="dark"] .studio-minis-flow-settings,
html[data-theme="dark"] .studio-minis-admin-collapsible,
html[data-theme="dark"] .studio-minis-add-profile,
html[data-theme="dark"] .studio-minis-production-meta div,
html[data-theme="dark"] .studio-minis-keyframe-gallery article,
html[data-theme="dark"] .studio-minis-keyframe-review,
html[data-theme="dark"] .studio-minis-tool-card,
html[data-theme="dark"] .studio-minis-turnaround-preview,
html[data-theme="dark"] .studio-minis-turnaround-empty,
html[data-theme="dark"] .studio-minis-frame-list article,
html[data-theme="dark"] .studio-minis-manual-post-log,
html[data-theme="dark"] .studio-minis-external-upload-modal,
html[data-theme="dark"] .studio-minis-external-upload-prompts article,
html[data-theme="dark"] .studio-minis-external-upload-forms form,
html[data-theme="dark"] .studio-minis-publish-list article,
html[data-theme="dark"] .studio-minis-upload input,
html[data-theme="dark"] .studio-minis-upload select,
html[data-theme="dark"] .studio-minis-add-profile select,
html[data-theme="dark"] .studio-minis-add-profile textarea,
html[data-theme="dark"] .studio-minis-action-stack select,
html[data-theme="dark"] .studio-minis-inline-form input,
html[data-theme="dark"] .studio-minis-inline-form select,
html[data-theme="dark"] .studio-minis-publish-form input,
html[data-theme="dark"] .studio-minis-publish-form select,
html[data-theme="dark"] .studio-minis-publish-form textarea,
html[data-theme="dark"] .studio-minis-external-upload-forms input,
html[data-theme="dark"] .studio-minis-external-upload-forms select {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-minis-room-search input {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-minis-external-upload-prompts strong,
html[data-theme="dark"] .studio-minis-external-upload-forms form > div > strong {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-minis-external-upload-prompts textarea {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .studio-minis-room-search input::placeholder {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-minis-room-filter-trigger,
html[data-theme="dark"] .studio-minis-room-filter-menu button,
html[data-theme="dark"] .studio-minis-room-action-trigger,
html[data-theme="dark"] .studio-minis-room-action-menu-panel :is(a, button) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-minis-room-filter-trigger em,
html[data-theme="dark"] .studio-minis-room-filter-menu button em {
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-minis-room-filter-menu,
html[data-theme="dark"] .studio-minis-room-action-menu-panel {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(24, 24, 27, 0.92), rgba(15, 15, 16, 0.88)),
    rgba(10, 10, 11, 0.92);
}

html[data-theme="dark"] .studio-minis-room-filter-trigger:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-room-filter.is-open .studio-minis-room-filter-trigger,
html[data-theme="dark"] .studio-minis-room-filter-menu button:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-room-action-trigger:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-room-action-menu.is-open .studio-minis-room-action-trigger,
html[data-theme="dark"] .studio-minis-room-action-menu-panel :is(a, button):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-minis-room-filter-menu button.is-selected {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
}

html[data-theme="dark"] .studio-minis-room-filter-menu button.is-selected em {
  background: rgba(17, 24, 39, 0.12);
  color: #111827;
}

html[data-theme="dark"] .studio-minis-pipeline-step.is-complete {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .studio-minis-pipeline-step.is-current {
  border-color: rgba(250, 204, 21, 0.26);
  background: rgba(113, 63, 18, 0.16);
}

html[data-theme="dark"] .studio-minis-pipeline-step.is-working {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(30, 64, 175, 0.14);
}

html[data-theme="dark"] .studio-minis-pipeline-step.is-failed {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.16);
}

html[data-theme="dark"] .studio-minis-board-card.is-ready {
  border-color: rgba(45, 212, 191, 0.24);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .studio-minis-board-card.is-danger {
  border-color: rgba(248, 113, 113, 0.26);
  background: rgba(127, 29, 29, 0.16);
}

html[data-theme="dark"] .studio-minis-board-card.is-recommended {
  border-color: rgba(45, 212, 191, 0.22);
}

html[data-theme="dark"] .studio-minis-board-card.is-careful {
  border-color: rgba(250, 204, 21, 0.24);
  background: rgba(113, 63, 18, 0.16);
}

html[data-theme="dark"] .studio-minis-board-reason-row > span {
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .studio-minis-calendar-column.is-ready {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .studio-minis-calendar-column.is-working {
  border-color: rgba(250, 204, 21, 0.22);
  background: rgba(113, 63, 18, 0.18);
}

html[data-theme="dark"] .studio-minis-calendar-column.is-danger {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.16);
}

html[data-theme="dark"] .studio-minis-batch-grid article.is-auto {
  border-color: rgba(250, 204, 21, 0.24);
  background: rgba(113, 63, 18, 0.16);
}

html[data-theme="dark"] .studio-minis-batch-result.is-ready {
  border-color: rgba(45, 212, 191, 0.22);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .studio-minis-batch-result.is-working {
  border-color: rgba(250, 204, 21, 0.24);
  background: rgba(113, 63, 18, 0.16);
}

html[data-theme="dark"] .studio-minis-batch-result.is-danger {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(127, 29, 29, 0.16);
}

html[data-theme="dark"] .studio-minis-batch-result-main span,
html[data-theme="dark"] .studio-minis-batch-inbox-head span,
html[data-theme="dark"] .studio-minis-batch-inbox-list a > span,
html[data-theme="dark"] .studio-minis-batch-log-list div > span {
  background: rgba(255, 255, 255, 0.09);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-minis-board-review-actions button.is-selected {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .studio-minis-setup-pill,
html[data-theme="dark"] .studio-minis-instagram-status-grid > div,
html[data-theme="dark"] .studio-minis-instagram-checklist > div,
html[data-theme="dark"] .studio-minis-publish-workbench,
html[data-theme="dark"] .studio-minis-publish-list article {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .studio-minis-setup-pill.is-ready,
html[data-theme="dark"] .studio-minis-instagram-status-grid .is-ready,
html[data-theme="dark"] .studio-minis-instagram-checklist .is-ready,
html[data-theme="dark"] .studio-minis-publish-list article.is-ready {
  background: rgba(22, 101, 52, 0.16);
  border-color: rgba(74, 222, 128, 0.22);
  color: #86efac;
}

html[data-theme="dark"] .studio-minis-setup-pill.is-needed,
html[data-theme="dark"] .studio-minis-instagram-status-grid .is-waiting,
html[data-theme="dark"] .studio-minis-instagram-checklist .is-needed,
html[data-theme="dark"] .studio-minis-publish-list article.is-waiting {
  background: rgba(180, 83, 9, 0.14);
  border-color: rgba(251, 191, 36, 0.22);
  color: #facc15;
}

html[data-theme="dark"] .studio-minis-instagram-status-grid .is-working,
html[data-theme="dark"] .studio-minis-publish-list article.is-working {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(96, 165, 250, 0.22);
}

html[data-theme="dark"] .studio-minis-instagram-status-grid .is-danger,
html[data-theme="dark"] .studio-minis-publish-list article.is-danger {
  background: rgba(127, 29, 29, 0.18);
  border-color: rgba(248, 113, 113, 0.24);
}

html[data-theme="dark"] .studio-minis-character-list a.is-active,
html[data-theme="dark"] .studio-minis-character-strip a.is-active,
html[data-theme="dark"] .studio-minis-production-list article.studio-minis-production-card.is-active,
html[data-theme="dark"] .studio-minis-production-list a.is-active,
html[data-theme="dark"] .studio-minis-admin-flow article.is-active,
html[data-theme="dark"] .studio-minis-keyframe-gallery article.is-selected,
html[data-theme="dark"] .studio-minis-stepper li.is-current,
html[data-theme="dark"] .studio-minis-production-segmented button.is-selected {
  background: rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.44);
}

html[data-theme="dark"] .studio-minis-status-pill.is-ready {
  color: #5eead4;
}

html[data-theme="dark"] .studio-minis-status-pill.is-working {
  color: #93c5fd;
}

html[data-theme="dark"] .studio-minis-status-pill.is-danger {
  color: #fca5a5;
}

html[data-theme="dark"] .studio-minis-status-pill.is-stale {
  color: #fbbf24;
}

html[data-theme="dark"] .admin-studio-job-status {
  --studio-job-bg: rgba(17, 24, 39, 0.78);
  --studio-job-color: #f8fafc;
  border-color: color-mix(in srgb, var(--studio-job-accent) 38%, rgba(255, 255, 255, 0.12));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-studio-job-status.is-working,
html[data-theme="dark"] .admin-studio-job-status.is-queued {
  --studio-job-bg: rgba(30, 41, 59, 0.86);
}

html[data-theme="dark"] .admin-studio-job-status.is-ready {
  --studio-job-bg: rgba(20, 184, 166, 0.14);
}

html[data-theme="dark"] .admin-studio-job-status.is-failed,
html[data-theme="dark"] .admin-studio-job-status.is-danger {
  --studio-job-bg: rgba(127, 29, 29, 0.24);
}

html[data-theme="dark"] .admin-studio-job-status.is-stale {
  --studio-job-bg: rgba(120, 53, 15, 0.28);
}

html[data-theme="dark"] .admin-studio-jobs-action {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-job-recovery-action {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-jobs-action:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-job-recovery-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-jobs-action.is-primary {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] .admin-studio-job-recovery-action.is-primary {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] .admin-studio-job-recovery-action.is-dismiss {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(127, 29, 29, 0.18);
}

html[data-theme="dark"] .studio-minis-operator-card.is-ready {
  border-color: rgba(45, 212, 191, 0.26);
  background: rgba(20, 184, 166, 0.1);
}

html[data-theme="dark"] .studio-minis-operator-card.is-working {
  border-color: rgba(255, 200, 0, 0.32);
  background: rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .studio-minis-operator-card.is-danger {
  border-color: rgba(248, 113, 113, 0.3);
  background: rgba(248, 113, 113, 0.1);
}

html[data-theme="dark"] .studio-minis-failure-panel {
  border-color: rgba(248, 113, 113, 0.34);
  border-left-color: #ef4444;
  background:
    linear-gradient(90deg, rgba(239, 68, 68, 0.16), transparent 30%),
    rgba(24, 24, 27, 0.94);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-minis-failure-head h2 {
  color: #fecaca;
}

html[data-theme="dark"] .studio-minis-failure-meta div,
html[data-theme="dark"] .studio-minis-failure-error,
html[data-theme="dark"] .studio-minis-failure-next {
  border-color: rgba(248, 113, 113, 0.18);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .studio-minis-failure-next {
  border-color: rgba(250, 204, 21, 0.2);
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.12), transparent 58%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .studio-minis-failure-next strong {
  color: #fde68a;
}

html[data-theme="dark"] .studio-minis-failure-error {
  background: rgba(127, 29, 29, 0.22);
}

html[data-theme="dark"] .studio-minis-failure-error p {
  color: #fecaca;
}

html[data-theme="dark"] .studio-minis-failure-primary-action {
  background: #ef4444;
  color: #fff;
}

html[data-theme="dark"] .studio-minis-failure-secondary-action,
html[data-theme="dark"] .studio-minis-failure-ghost-action {
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

html[data-theme="dark"] .studio-minis-asset-checklist li.is-complete {
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
}

html[data-theme="dark"] .studio-minis-asset-checklist li.is-current {
  background: rgba(255, 200, 0, 0.12);
  color: #facc15;
}

html[data-theme="dark"] .studio-standalone-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.16), transparent 34%),
    linear-gradient(180deg, #111714 0%, #171d1a 58%, #101412 100%);
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-actor-page) {
  background: #101412;
}

html[data-theme="dark"] .studio-create-hero {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 200, 0, 0.18), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(86, 207, 174, 0.12), transparent 30%),
    linear-gradient(135deg, #151b18 0%, #101512 56%, #1d180e 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .studio-create-console {
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 200, 0, 0.18), transparent 32%),
    radial-gradient(circle at 92% 16%, rgba(86, 207, 174, 0.12), transparent 30%),
    linear-gradient(135deg, #151b18 0%, #101512 56%, #1d180e 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .studio-create-inspiration {
  background: var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-create-hero-copy p:not(.eyebrow),
html[data-theme="dark"] .studio-create-console-copy > p:not(.studio-create-budget-note, .eyebrow),
html[data-theme="dark"] .studio-create-inspiration-copy p:not(.eyebrow),
html[data-theme="dark"] .studio-create-start-copy p:not(.eyebrow),
html[data-theme="dark"] .studio-create-proof-grid p {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-create-budget-note {
  background: rgba(86, 207, 174, 0.1);
  border-color: rgba(86, 207, 174, 0.24);
  color: #b9f1d9 !important;
}

html[data-theme="dark"] .studio-create-avatar-link img {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-pass-layout.is-checkout .studio-pass-form {
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 200, 0, 0.1), transparent 32%),
    var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-pass-kicker-row span {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(255, 200, 0, 0.32);
  color: #ffe48a;
}

html[data-theme="dark"] .studio-pass-preview-panel {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 200, 0, 0.14), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(86, 207, 174, 0.1), transparent 30%),
    linear-gradient(145deg, #151b18 0%, #111714 100%);
  border-color: var(--border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-pass-preview-head > span,
html[data-theme="dark"] .studio-pass-preview-foot span,
html[data-theme="dark"] .studio-pass-card-preview {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-pass-preview-foot span {
  color: #b9f1d9;
}

html[data-theme="dark"] .studio-pass-preview-stage {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-pass-preview-stage .studio-room-canvas-wrap {
  background: #ffffff;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .studio-global-header {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-global-brand,
html[data-theme="dark"] .studio-global-link {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-global-nav {
  background: rgba(23, 29, 26, 0.76);
  border-color: var(--border);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-global-header {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .studio-global-link:not(.is-active) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-motion-hero) .studio-global-header,
html[data-theme="dark"] .studio-standalone-shell:has(.studio-cameos-page) .studio-global-header {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-motion-hero) .studio-global-link:not(.is-active),
html[data-theme="dark"] .studio-standalone-shell:has(.studio-cameos-page) .studio-global-link:not(.is-active) {
  color: rgba(255, 248, 223, 0.76);
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-create-page) .studio-global-header,
html[data-theme="dark"] .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-header,
html[data-theme="dark"] .studio-standalone-shell:has(.studio-character-page) .studio-global-header {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-create-page) .studio-global-link:not(.is-active),
html[data-theme="dark"] .studio-standalone-shell:has(.studio-monthly-care-page) .studio-global-link:not(.is-active),
html[data-theme="dark"] .studio-standalone-shell:has(.studio-character-page) .studio-global-link:not(.is-active) {
  color: rgba(255, 248, 223, 0.76);
}

html[data-theme="dark"] .studio-global-link:hover,
html[data-theme="dark"] .studio-global-link.is-active {
  color: #17120a;
  background: var(--brand);
}

html[data-theme="dark"] .studio-global-theme {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-global-actions {
  background: rgba(23, 29, 26, 0.76);
  border-color: var(--border);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-global-brand:hover,
html[data-theme="dark"] .studio-global-rescue-link.button {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-global-rescue-link.button {
  color: var(--foreground);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-global-rescue-link.button:hover {
  background: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .studio-room-stage .studio-room-canvas-wrap {
  background: #141a17;
  border-color: var(--border);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .studio-home-stage .studio-room-canvas-wrap {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.1);
  box-shadow: none;
}

html[data-theme="dark"] .studio-home-living-hero,
html[data-theme="dark"] .studio-home-living-stage,
html[data-theme="dark"] .studio-home-living-scene {
  background: #ffffff;
}

html[data-theme="dark"] .studio-deferred-scene-placeholder,
html[data-theme="dark"] .studio-deferred-scene-loading {
  background: #ffffff;
}

html[data-theme="dark"] .studio-home-living-scene .studio-living-lobby-canvas-wrap {
  background: #ffffff;
  border-color: rgba(17, 24, 39, 0.1);
  box-shadow: none;
}

html[data-theme="dark"] .studio-actor-stage-panel > div:first-child {
  background: rgba(23, 29, 26, 0.78);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-tier-card,
html[data-theme="dark"] .studio-create-proof-grid article,
html[data-theme="dark"] .studio-create-showcase-strip,
html[data-theme="dark"] .studio-pass-step-strip li,
html[data-theme="dark"] .admin-studio-stats div,
html[data-theme="dark"] .admin-studio-filter-chip,
html[data-theme="dark"] .admin-studio-generation-card,
html[data-theme="dark"] .admin-studio-production-rulebook,
html[data-theme="dark"] .admin-studio-production-rulebook-grid article,
html[data-theme="dark"] .admin-studio-production-style-grid div,
html[data-theme="dark"] .admin-studio-production-style-note,
html[data-theme="dark"] .admin-studio-generation-panel,
html[data-theme="dark"] .admin-studio-generation-debug,
html[data-theme="dark"] .admin-studio-mini-profile-links a,
html[data-theme="dark"] .admin-studio-mini-idea-list article,
html[data-theme="dark"] .admin-studio-review-brief,
html[data-theme="dark"] .admin-studio-review-note,
html[data-theme="dark"] .studio-template-picker,
html[data-theme="dark"] .studio-auto-match-panel,
html[data-theme="dark"] .studio-auto-match-grid > div,
html[data-theme="dark"] .studio-template-card,
html[data-theme="dark"] .studio-preview-pose-strip div,
html[data-theme="dark"] .admin-studio-qa-stats div,
html[data-theme="dark"] .admin-studio-qa-status,
html[data-theme="dark"] .studio-background-options label,
html[data-theme="dark"] .studio-pass-account-note,
html[data-theme="dark"] .studio-photo-picker,
html[data-theme="dark"] .studio-membership-note a,
html[data-theme="dark"] .studio-pass-readiness,
html[data-theme="dark"] .studio-pass-readiness span,
html[data-theme="dark"] .studio-payment-note,
html[data-theme="dark"] .studio-filter-row span,
html[data-theme="dark"] .studio-room-cat-list div,
html[data-theme="dark"] .studio-room-moment-list span,
html[data-theme="dark"] .studio-room-kit-card,
html[data-theme="dark"] .studio-decoration-slot-card,
html[data-theme="dark"] .admin-studio-submission-copy dl div,
html[data-theme="dark"] .studio-animation-status-card,
html[data-theme="dark"] .studio-animation-timeline button,
html[data-theme="dark"] .studio-animation-frame-grid button,
html[data-theme="dark"] .studio-animation-checklist article,
html[data-theme="dark"] .studio-motion-candidate-list article,
html[data-theme="dark"] .admin-studio-qa-empty,
html[data-theme="dark"] .admin-studio-qa-issue-list > div,
html[data-theme="dark"] .admin-studio-qa-issue-list > li,
html[data-theme="dark"] .admin-studio-qa-row-list > div,
html[data-theme="dark"] .admin-studio-qa-table > div,
html[data-theme="dark"] .admin-studio-qa-asset-list > div,
html[data-theme="dark"] .studio-animation-frame-preview code,
html[data-theme="dark"] .studio-animation-command code {
  background: var(--surface);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-optional-note-toggle small,
html[data-theme="dark"] .studio-membership-note small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-membership-note strong {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-photo-picker {
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 200, 0, 0.34);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-photo-picker:hover,
html[data-theme="dark"] .studio-photo-picker:focus-within,
html[data-theme="dark"] .studio-photo-picker.is-dragging {
  border-color: rgba(255, 200, 0, 0.7);
  box-shadow:
    0 0 0 5px rgba(255, 200, 0, 0.1),
    0 22px 54px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .studio-photo-picker.has-photo {
  border-color: rgba(86, 207, 174, 0.48);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .studio-photo-picker-icon {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.22);
}

html[data-theme="dark"] .studio-photo-picker.has-photo .studio-photo-picker-icon {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.2);
}

html[data-theme="dark"] .studio-photo-picker-action {
  background: #ffc800;
  color: #17120a;
}

html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker {
  border-color: rgba(139, 200, 246, 0.3);
  background:
    radial-gradient(circle at 92% 0%, rgba(139, 200, 246, 0.12), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker:hover,
html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker:focus-within,
html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker.is-dragging {
  border-color: rgba(108, 140, 255, 0.5);
  box-shadow:
    0 0 0 5px rgba(108, 140, 255, 0.1),
    0 22px 54px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker-icon {
  background: rgba(139, 200, 246, 0.12);
  color: #cfe3ff;
  box-shadow: inset 0 0 0 1px rgba(139, 200, 246, 0.2);
}

html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker-action {
  border-color: rgba(147, 197, 253, 0.28);
  background: #2563b8;
  color: #f8fbff;
}

html[data-theme="dark"] .admin-studio-character-create-page .studio-photo-picker.has-photo .studio-photo-picker-action {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.075);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-production-style-select select {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
}

html[data-theme="dark"] .photo-upload-queue {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .photo-upload-queue.is-uploading {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .photo-upload-queue-item {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .photo-upload-queue-item.is-primary {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.09), transparent 36%),
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .photo-upload-preview {
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .photo-upload-state {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .photo-upload-action {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .photo-upload-action:hover,
html[data-theme="dark"] .photo-upload-action:focus-visible {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.12);
  color: #ffe48a;
}

html[data-theme="dark"] .photo-upload-action.is-remove:hover,
html[data-theme="dark"] .photo-upload-action.is-remove:focus-visible {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.13);
  color: #fecaca;
}

html[data-theme="dark"] .photo-upload-queue.is-uploading .photo-upload-state {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

html[data-theme="dark"] .admin-studio-filter-chip strong,
html[data-theme="dark"] .admin-studio-review-kpis div,
html[data-theme="dark"] .admin-studio-mini-dl div,
html[data-theme="dark"] .admin-studio-mini-profile-editor input,
html[data-theme="dark"] .admin-studio-mini-profile-editor select,
html[data-theme="dark"] .admin-studio-mini-profile-editor textarea,
html[data-theme="dark"] .studio-minis-profile-rule-note,
html[data-theme="dark"] .studio-minis-profile-rule-section,
html[data-theme="dark"] .admin-studio-readiness,
html[data-theme="dark"] .admin-studio-delivery-plan,
html[data-theme="dark"] .admin-studio-pose-tile,
html[data-theme="dark"] .admin-studio-gate,
html[data-theme="dark"] .admin-studio-prompt-list details {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .admin-studio-page .button-secondary {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.075);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-page .button-secondary:hover,
html[data-theme="dark"] .admin-studio-page .button-secondary:focus-visible {
  border-color: rgba(255, 200, 0, 0.45);
  background: rgba(255, 200, 0, 0.12);
  color: #ffe48a;
}

html[data-theme="dark"] .admin-studio-character-create-page .button-secondary:hover,
html[data-theme="dark"] .admin-studio-character-create-page .button-secondary:focus-visible {
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(147, 197, 253, 0.1);
  color: #dbeafe;
}

html[data-theme="dark"] .admin-studio-page .button-primary {
  border-color: rgba(255, 200, 0, 0.58);
  background: #ffc800;
  color: #17120a;
}

html[data-theme="dark"] .admin-studio-character-create-page .button-primary {
  border-color: rgba(147, 197, 253, 0.38);
  background: #2563b8;
  color: #f8fbff;
  box-shadow:
    0 14px 30px rgba(37, 99, 184, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .admin-studio-character-create-page .button-primary:hover,
html[data-theme="dark"] .admin-studio-character-create-page .button-primary:focus-visible {
  border-color: rgba(147, 197, 253, 0.52);
  background: #1d4f9a;
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-production-rail,
html[data-theme="dark"] .admin-studio-lyrics-panel,
html[data-theme="dark"] .admin-studio-lyrics-copy-pack,
html[data-theme="dark"] .admin-studio-production-totals span,
html[data-theme="dark"] .admin-studio-character-upload,
html[data-theme="dark"] .admin-studio-character-url-form,
html[data-theme="dark"] .admin-studio-character-asset-card,
html[data-theme="dark"] .admin-studio-character-advanced,
html[data-theme="dark"] .admin-studio-character-initial-sheet,
html[data-theme="dark"] .admin-studio-character-season-panel,
html[data-theme="dark"] .admin-studio-character-upload-advanced,
html[data-theme="dark"] .admin-studio-character-create-form,
html[data-theme="dark"] .admin-studio-character-create-preview {
  border-color: var(--border-soft);
  background: var(--surface);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-character-list a,
html[data-theme="dark"] .admin-studio-character-check,
html[data-theme="dark"] .admin-studio-character-search input,
html[data-theme="dark"] .admin-studio-character-search select,
html[data-theme="dark"] .admin-studio-character-season-card,
html[data-theme="dark"] .admin-studio-character-season-card input,
html[data-theme="dark"] .admin-studio-character-season-card select,
html[data-theme="dark"] .admin-studio-character-role-picker button,
html[data-theme="dark"] .admin-studio-character-segment,
html[data-theme="dark"] .admin-studio-character-photo-block,
html[data-theme="dark"] .admin-studio-character-create-disclosure,
html[data-theme="dark"] .admin-studio-character-create-season,
html[data-theme="dark"] .admin-studio-character-backgrounds button,
html[data-theme="dark"] .admin-studio-character-create-status,
html[data-theme="dark"] .admin-studio-character-create-analysis,
html[data-theme="dark"] .admin-studio-character-create-result,
html[data-theme="dark"] .admin-studio-turnaround-review,
html[data-theme="dark"] .admin-studio-character-file-picker label,
html[data-theme="dark"] .admin-studio-character-upload-frame,
html[data-theme="dark"] .admin-studio-character-asset-frame,
html[data-theme="dark"] .admin-studio-character-file-placeholder,
html[data-theme="dark"] .admin-studio-lyrics-track,
html[data-theme="dark"] .admin-studio-lyrics-line,
html[data-theme="dark"] .admin-studio-lyrics-translation-grid article,
html[data-theme="dark"] .admin-studio-music-empty {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-lyrics-track textarea,
html[data-theme="dark"] .admin-studio-lyrics-copy-pack textarea {
  border-color: var(--border-soft);
  background: rgba(2, 6, 23, 0.52);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-lyrics-track.is-source {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-file-picker label {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.11), transparent 54%),
    rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-studio-character-file-picker label:hover,
html[data-theme="dark"] .admin-studio-character-file-picker input:focus-visible + label {
  border-color: rgba(255, 200, 0, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.16), transparent 58%),
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .admin-studio-character-list a.is-active,
html[data-theme="dark"] .admin-studio-character-role-picker button.is-active,
html[data-theme="dark"] .admin-studio-character-backgrounds button.is-active {
  border-color: rgba(255, 200, 0, 0.55);
  background: rgba(255, 200, 0, 0.13);
}

html[data-theme="dark"] .admin-studio-character-segment button.is-active {
  border-color: rgba(125, 211, 252, 0.26);
  background: rgba(125, 211, 252, 0.1);
  color: #dbeafe;
  box-shadow: inset 0 -2px 0 rgba(125, 211, 252, 0.72);
}

html[data-theme="dark"] .admin-studio-character-segment button:hover,
html[data-theme="dark"] .admin-studio-character-segment button:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
}

html[data-theme="dark"] .admin-studio-character-create-disclosure[open],
html[data-theme="dark"] .admin-studio-character-create-disclosure > summary:hover,
html[data-theme="dark"] .admin-studio-character-create-disclosure > summary:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-studio-main-image-note-presets button {
  border-color: rgba(139, 200, 246, 0.22);
  background: rgba(139, 200, 246, 0.1);
}

html[data-theme="dark"] .admin-studio-main-image-note-presets button:hover,
html[data-theme="dark"] .admin-studio-main-image-note-presets button:focus-visible {
  border-color: rgba(108, 140, 255, 0.34);
  background: rgba(108, 140, 255, 0.13);
}

html[data-theme="dark"] .admin-studio-character-note-button {
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-setup-panel {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .admin-studio-character-setup-head small,
html[data-theme="dark"] .admin-studio-character-photo-block-head small {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-render-options {
  border-top-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .admin-studio-character-work-picker {
  border-top-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] .admin-studio-character-work-grid button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-work-grid button.is-secondary {
  background: rgba(255, 255, 255, 0.035);
  color: #94a3b8;
}

html[data-theme="dark"] .admin-studio-character-work-grid button:hover,
html[data-theme="dark"] .admin-studio-character-work-grid button:focus-visible {
  border-color: rgba(147, 197, 253, 0.24);
  background: rgba(147, 197, 253, 0.08);
  color: #dbeafe;
}

html[data-theme="dark"] .admin-studio-character-work-grid button.is-active {
  border-color: rgba(125, 211, 252, 0.3);
  background:
    radial-gradient(circle at 96% 0%, rgba(125, 211, 252, 0.12), transparent 42%),
    rgba(125, 211, 252, 0.1);
  color: #dbeafe;
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.08);
}

html[data-theme="dark"] .admin-studio-character-work-grid button.is-secondary.is-active {
  border-color: rgba(125, 211, 252, 0.22);
  background: rgba(125, 211, 252, 0.08);
}

html[data-theme="dark"] .admin-studio-character-work-grid button svg,
html[data-theme="dark"] .admin-studio-character-work-grid button.is-active svg {
  color: currentColor;
}

html[data-theme="dark"] .admin-studio-character-work-group {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .admin-studio-character-work-group-head > span {
  background: rgba(147, 197, 253, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-selected-target,
html[data-theme="dark"] .admin-studio-character-production-line {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-sticky-progress {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.84));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-studio-character-instruction-card {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-studio-character-instruction-card:hover,
html[data-theme="dark"] .admin-studio-character-instruction-card:focus-visible {
  border-color: rgba(147, 197, 253, 0.28);
  background: rgba(147, 197, 253, 0.08);
}

html[data-theme="dark"] .admin-studio-character-instruction-card.has-note {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(147, 197, 253, 0.08);
}

html[data-theme="dark"] .admin-studio-character-instruction-card.needs-note {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(251, 191, 36, 0.08);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.04);
}

html[data-theme="dark"] .admin-studio-character-instruction-card > svg {
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-instruction-card.needs-note > svg,
html[data-theme="dark"] .admin-studio-character-instruction-card.needs-note small,
html[data-theme="dark"] .admin-studio-character-instruction-card.needs-note b {
  color: #fde68a;
}

html[data-theme="dark"] .admin-studio-character-instruction-card b {
  background: rgba(147, 197, 253, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-instruction-card.needs-note b {
  background: rgba(251, 191, 36, 0.12);
}

html[data-theme="dark"] .admin-studio-character-selected-target-frame,
html[data-theme="dark"] .admin-studio-character-production-thumb {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-selected-target small {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-character-production-line button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-studio-character-production-line button:hover,
html[data-theme="dark"] .admin-studio-character-production-line button:focus-visible {
  border-color: rgba(147, 197, 253, 0.28);
  background: rgba(147, 197, 253, 0.08);
}

html[data-theme="dark"] .admin-studio-character-production-line button.is-active {
  border-color: rgba(125, 211, 252, 0.3);
  background: rgba(125, 211, 252, 0.1);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.08);
}

html[data-theme="dark"] .admin-studio-character-render-option-buttons .admin-studio-character-note-button,
html[data-theme="dark"] .admin-studio-character-render-option-buttons .admin-studio-character-setting-button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-setting-button {
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-note-button.has-note,
html[data-theme="dark"] .admin-studio-character-setting-button.has-value {
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-render-option-buttons .admin-studio-character-note-button.has-note,
html[data-theme="dark"] .admin-studio-character-render-option-buttons .admin-studio-character-setting-button.has-value {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.08);
  color: #dbeafe;
}

html[data-theme="dark"] .admin-studio-character-note-button:hover,
html[data-theme="dark"] .admin-studio-character-note-button:focus-visible,
html[data-theme="dark"] .admin-studio-character-setting-button:hover,
html[data-theme="dark"] .admin-studio-character-setting-button:focus-visible {
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .admin-studio-character-filing-card {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .admin-studio-character-filing-card > span {
  background: rgba(255, 255, 255, 0.065);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-filing-card strong {
  color: #e2e8f0;
}

html[data-theme="dark"] .admin-studio-character-filing-card button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-filing-card button:hover,
html[data-theme="dark"] .admin-studio-character-filing-card button:focus-visible {
  border-color: rgba(147, 197, 253, 0.24);
  background: rgba(147, 197, 253, 0.09);
  color: #dbeafe;
}

html[data-theme="dark"] .admin-studio-character-note-modal-backdrop {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.74), rgba(15, 23, 42, 0.62)),
    linear-gradient(160deg, rgba(108, 140, 255, 0.18), transparent 44%),
    linear-gradient(25deg, transparent 44%, rgba(86, 207, 174, 0.16));
}

html[data-theme="dark"] .admin-studio-character-note-modal {
  border-color: rgba(139, 200, 246, 0.24);
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.11), transparent 48%),
    linear-gradient(225deg, rgba(86, 207, 174, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .admin-studio-character-note-modal-head button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-studio-character-note-modal-head button:hover,
html[data-theme="dark"] .admin-studio-character-note-modal-head button:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .admin-studio-character-note-target {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-note-target-current {
  border-color: var(--border-soft);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    rgba(255, 255, 255, 0.055);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

html[data-theme="dark"] .admin-studio-character-note-target-strip button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-studio-character-note-target-strip button:hover,
html[data-theme="dark"] .admin-studio-character-note-target-strip button:focus-visible {
  border-color: rgba(147, 197, 253, 0.28);
  background: rgba(147, 197, 253, 0.08);
}

html[data-theme="dark"] .admin-studio-character-note-target-strip button.is-current {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-note-target-strip button.is-current span {
  color: #99f6e4;
}

html[data-theme="dark"] .admin-studio-character-note-modal textarea {
  border-color: var(--border-soft);
  background: rgba(2, 6, 23, 0.44);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-character-preview-open span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.78);
  color: #e2e8f0;
}

html[data-theme="dark"] .admin-studio-character-preview-modal-image {
  border-color: var(--border-soft);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    rgba(255, 255, 255, 0.055);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

html[data-theme="dark"] .admin-studio-character-create-readiness,
html[data-theme="dark"] .admin-studio-character-revision-note,
html[data-theme="dark"] .admin-studio-character-source-change-note {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-character-create-readiness.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-production-flow > div {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-production-flow > div > span {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-studio-character-production-flow > div.is-current {
  border-color: rgba(108, 140, 255, 0.3);
  background: rgba(108, 140, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-production-flow > div.is-attention {
  border-color: rgba(108, 140, 255, 0.3);
  background: rgba(108, 140, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-production-flow > div.is-ready {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-generation-overlay {
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.74), rgba(15, 23, 42, 0.62)),
    linear-gradient(160deg, rgba(108, 140, 255, 0.18), transparent 44%),
    linear-gradient(25deg, transparent 44%, rgba(86, 207, 174, 0.16));
}

html[data-theme="dark"] .admin-studio-character-generation-progress {
  border-color: rgba(139, 200, 246, 0.24);
  background:
    linear-gradient(135deg, rgba(139, 200, 246, 0.11), transparent 48%),
    linear-gradient(225deg, rgba(86, 207, 174, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .admin-studio-character-generation-steps li {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .admin-studio-character-generation-badge {
  border-color: rgba(139, 200, 246, 0.25);
  background: rgba(139, 200, 246, 0.13);
  color: #cfe3ff;
}

html[data-theme="dark"] .admin-studio-character-generation-steps li.is-active {
  border-color: rgba(108, 140, 255, 0.34);
  background: rgba(108, 140, 255, 0.12);
}

html[data-theme="dark"] .admin-studio-character-generation-steps li.is-done {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-generation-track {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-icon-tool {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-icon-tool:hover,
html[data-theme="dark"] .admin-studio-character-icon-tool:focus-visible {
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(147, 197, 253, 0.1);
  color: #dbeafe;
}

html[data-theme="dark"] .admin-studio-character-hero-history-grid button {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-character-hero-history-grid button:hover,
html[data-theme="dark"] .admin-studio-character-hero-history-grid button:focus-visible {
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(147, 197, 253, 0.1);
}

html[data-theme="dark"] .admin-studio-character-hero-history-grid button.is-current {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-history-labels em {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

html[data-theme="dark"] .admin-studio-character-history-labels em.is-current {
  background: rgba(86, 207, 174, 0.16);
  color: #99f6e4;
}

html[data-theme="dark"] .admin-studio-character-history-labels em.is-production {
  background: rgba(147, 197, 253, 0.14);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-hero-history-grid img {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-character-disclosure-icon {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: #fff8df;
}

html[data-theme="dark"] .admin-studio-character-preview,
html[data-theme="dark"] .admin-studio-character-upload-frame,
html[data-theme="dark"] .admin-studio-character-asset-frame,
html[data-theme="dark"] .admin-studio-character-image-stage,
html[data-theme="dark"] .admin-studio-character-create-compare figcaption,
html[data-theme="dark"] .admin-studio-turnaround-frame {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    rgba(255, 255, 255, 0.055);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}

html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame {
  background: var(--studio-character-canvas, #050506);
}

html[data-theme="dark"] .admin-studio-character-image-history-button {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-studio-character-image-history-button:hover,
html[data-theme="dark"] .admin-studio-character-image-history-button:focus-visible {
  border-color: rgba(147, 197, 253, 0.5);
  background: rgba(15, 23, 42, 0.88);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-character-image-history-button small {
  background: rgba(147, 197, 253, 0.16);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-turnaround-frame.is-stale {
  border-color: rgba(147, 197, 253, 0.24);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent 44%),
    rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-studio-character-quick-note {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-character-contract {
  border-color: rgba(86, 207, 174, 0.22);
  background: rgba(86, 207, 174, 0.08);
}

html[data-theme="dark"] .admin-studio-character-contract-status span,
html[data-theme="dark"] .admin-studio-character-contract-list span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .admin-studio-character-contract-list.is-warning span {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.08);
}

html[data-theme="dark"] .admin-studio-character-settings {
  border-color: var(--border-soft);
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-url-form {
  border-color: transparent;
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-url-form[open] {
  border-color: var(--border-soft);
  background: var(--surface);
}

html[data-theme="dark"] .admin-studio-turnaround-status {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-studio-turnaround-status strong {
  color: #e2e8f0;
}

html[data-theme="dark"] .admin-studio-turnaround-status.is-confirmed {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    linear-gradient(135deg, rgba(86, 207, 174, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-studio-turnaround-status.is-confirmed > svg,
html[data-theme="dark"] .admin-studio-turnaround-status.is-confirmed strong {
  color: #56cfae;
}

html[data-theme="dark"] .admin-studio-turnaround-status.is-refresh-needed {
  border-color: rgba(147, 197, 253, 0.22);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, 0.12), transparent 44%),
    rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-studio-turnaround-status.is-refresh-needed > svg,
html[data-theme="dark"] .admin-studio-turnaround-status.is-refresh-needed strong {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-character-create-result.is-attention {
  border-color: rgba(108, 140, 255, 0.3);
  background: rgba(108, 140, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-archive-details {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-studio-character-asset-card details {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-studio-filter-chip.is-active,
html[data-theme="dark"] .admin-studio-mini-profile-links a.is-active,
html[data-theme="dark"] .admin-studio-review-brief.is-work {
  border-color: rgba(255, 200, 0, 0.55);
  background: rgba(255, 200, 0, 0.11);
}

html[data-theme="dark"] .admin-studio-filter-chip.is-active {
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-studio-pipeline-step-chip.is-active {
  background:
    linear-gradient(90deg, rgba(255, 200, 0, 0.14), transparent 46%),
    var(--surface);
}

html[data-theme="dark"] .admin-studio-pipeline-step-chip.is-active::before,
html[data-theme="dark"] .admin-studio-pipeline-step-chip.is-active strong {
  background: #ffc800;
}

html[data-theme="dark"] .admin-studio-pipeline-step-chip.is-active strong {
  color: #17120a;
}

html[data-theme="dark"] .admin-studio-review-brief.is-ready {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .admin-studio-review-brief.is-blocked {
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(248, 113, 113, 0.09);
}

html[data-theme="dark"] .admin-studio-review-next {
  background: var(--accent);
  color: #17130b;
}

html[data-theme="dark"] .studio-background-options small {
  background: rgba(148, 224, 194, 0.16);
  color: #b9f1d9;
}

html[data-theme="dark"] .studio-background-options label,
html[data-theme="dark"] .studio-template-card,
html[data-theme="dark"] .studio-animation-timeline button,
html[data-theme="dark"] .studio-animation-frame-grid button,
html[data-theme="dark"] .studio-animation-checklist article,
html[data-theme="dark"] .studio-motion-candidate-list article {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-background-options label:not(.is-selected):hover,
html[data-theme="dark"] .studio-background-options label:not(.is-selected):focus-within,
html[data-theme="dark"] .studio-template-card:not(.is-selected):hover,
html[data-theme="dark"] .studio-template-card:not(.is-selected):focus-visible,
html[data-theme="dark"] .studio-animation-timeline button:not(.is-active):hover,
html[data-theme="dark"] .studio-animation-timeline button:not(.is-active):focus-visible,
html[data-theme="dark"] .studio-animation-frame-grid button:not(.is-active):hover,
html[data-theme="dark"] .studio-animation-frame-grid button:not(.is-active):focus-visible {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.1) 0%, rgba(255, 255, 255, 0.055) 100%);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .studio-background-options label.is-selected,
html[data-theme="dark"] .studio-template-card.is-selected,
html[data-theme="dark"] .studio-animation-timeline button.is-active,
html[data-theme="dark"] .studio-animation-frame-grid button.is-active {
  border-color: rgba(255, 200, 0, 0.64);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.28) 0%, rgba(255, 200, 0, 0.12) 48%, rgba(86, 207, 174, 0.1) 100%);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 0 3px rgba(255, 200, 0, 0.14),
    inset 0 1px 0 rgba(255, 244, 194, 0.08);
}

html[data-theme="dark"] .studio-animation-checklist article.is-passed {
  border-color: rgba(86, 207, 174, 0.32);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12) 0%, rgba(255, 255, 255, 0.045) 100%);
}

html[data-theme="dark"] .studio-animation-checklist article.is-watch {
  border-color: rgba(255, 200, 0, 0.38);
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.14) 0%, rgba(255, 255, 255, 0.045) 100%);
}

html[data-theme="dark"] .studio-animation-checklist article.is-todo {
  border-color: rgba(120, 183, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1) 0%, rgba(255, 255, 255, 0.045) 100%);
}

html[data-theme="dark"] .studio-pass-readiness span.is-ready {
  background: rgba(86, 207, 174, 0.12);
  color: #a8f1dc;
}

html[data-theme="dark"] .studio-pass-readiness i {
  background: rgba(247, 245, 234, 0.32);
}

html[data-theme="dark"] .studio-match-summary,
html[data-theme="dark"] .admin-studio-mini-dl div,
html[data-theme="dark"] .admin-studio-pose-tile,
html[data-theme="dark"] .admin-studio-pose-placeholder,
html[data-theme="dark"] .admin-studio-gate,
html[data-theme="dark"] .admin-studio-prompt-list details,
html[data-theme="dark"] .admin-studio-readiness,
html[data-theme="dark"] .admin-studio-delivery-plan {
  background: var(--surface);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-studio-match-pill-row span {
  background: rgba(255, 200, 0, 0.18);
}

html[data-theme="dark"] .studio-template-card span {
  background: rgba(86, 207, 174, 0.18);
}

html[data-theme="dark"] .studio-pass-review-summary {
  background: rgba(86, 207, 174, 0.14);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .studio-template-card.is-recommended span {
  background: var(--brand);
  color: #17120a;
}

html[data-theme="dark"] .admin-studio-qa-table > div.is-error,
html[data-theme="dark"] .admin-studio-qa-status.is-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.36);
}

.admin-studio-qa-table > div.is-warning {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .admin-studio-qa-table > div.is-warning {
  background: rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .studio-animation-frame-stage {
  background-color: #171d1a;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
}

html[data-theme="dark"] .studio-tier-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    var(--surface);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .studio-budget-note,
html[data-theme="dark"] .studio-opt-in,
html[data-theme="dark"] .studio-submission-result {
  background: rgba(255, 200, 0, 0.12);
  color: var(--foreground) !important;
}

html[data-theme="dark"] .studio-card {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .studio-card:not(.is-charcoal) {
  color: #16120a;
}

html[data-theme="dark"] .studio-loading-page {
  background:
    linear-gradient(90deg, rgba(255, 242, 196, 0.04) 1px, transparent 1px) center / 92px 100%,
    radial-gradient(ellipse at 50% 30%, rgba(255, 221, 114, 0.22), transparent 34%),
    radial-gradient(ellipse at 46% 106%, rgba(255, 200, 0, 0.18), transparent 38%),
    radial-gradient(circle at 12% 12%, rgba(255, 152, 118, 0.09), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(86, 207, 174, 0.1), transparent 27%),
    linear-gradient(180deg, #24160d 0%, #14100d 48%, #0f1412 100%);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-loading-page::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 247, 218, 0.32), rgba(255, 210, 74, 0.13) 30%, transparent 69%);
}

html[data-theme="dark"] .studio-loading-page::after {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 200, 0, 0.13), transparent 54%),
    linear-gradient(180deg, rgba(255, 248, 223, 0.06), transparent);
}

html[data-theme="dark"] .studio-loading-backlights {
  mix-blend-mode: screen;
}

html[data-theme="dark"] .studio-loading-backlights .is-key {
  background: linear-gradient(180deg, rgba(255, 248, 223, 0.42), rgba(255, 200, 0, 0.1) 46%, transparent 82%);
}

html[data-theme="dark"] .studio-loading-backlights .is-fill {
  background: linear-gradient(180deg, rgba(255, 230, 175, 0.34), rgba(86, 207, 174, 0.08) 48%, transparent 82%);
}

html[data-theme="dark"] .studio-loading-backlights .is-practical {
  background: linear-gradient(180deg, rgba(255, 152, 118, 0.2), rgba(255, 248, 223, 0.06) 42%, transparent 78%);
}

html[data-theme="dark"] .studio-loading-backlights .is-bloom-one {
  background:
    radial-gradient(circle, rgba(255, 248, 223, 0.3), rgba(255, 200, 0, 0.11) 42%, transparent 70%);
}

html[data-theme="dark"] .studio-loading-backlights .is-bloom-two {
  background:
    radial-gradient(circle, rgba(255, 248, 223, 0.22), rgba(86, 207, 174, 0.09) 46%, transparent 72%);
}

html[data-theme="dark"] .studio-brand-mark {
  --studio-brand-ink: #f5f2e3;
  color: #f5f2e3;
}

html[data-theme="dark"] .studio-brand-symbol {
  border-color: rgba(255, 200, 0, 0.14);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.3),
    inset 0 -12px 18px rgba(133, 92, 0, 0.12);
}

html[data-theme="dark"] .studio-brand-wordmark-kicker {
  color: rgba(245, 242, 227, 0.58);
}

html[data-theme="dark"] .studio-loading-mark {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 248, 223, 0.16), transparent 38%),
    radial-gradient(circle at 50% 72%, rgba(255, 200, 0, 0.1), transparent 36%),
    linear-gradient(180deg, rgba(255, 250, 232, 0.08), rgba(255, 250, 232, 0.03));
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .studio-loading-mark::before {
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-loading-mark::after {
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 200, 0, 0.1), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 38%, rgba(86, 207, 174, 0.07) 68%, transparent 100%);
}

html[data-theme="dark"] .studio-loading-brand .studio-brand-logo-frame {
  filter:
    drop-shadow(0 24px 34px rgba(0, 0, 0, 0.42))
    drop-shadow(0 2px 0 rgba(255, 229, 150, 0.08));
}

html[data-theme="dark"] .studio-loading-logo-stage::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 200, 0, 0.14), rgba(86, 207, 174, 0.08) 52%, transparent 72%);
}

html[data-theme="dark"] .studio-loading-logo-stage::after {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 10px rgba(255, 255, 255, 0.04),
    0 18px 44px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-loading-logo-halo {
  opacity: 0.44;
}

html[data-theme="dark"] .studio-loading-logo-aperture {
  background:
    conic-gradient(
      from 18deg,
      transparent 0deg 32deg,
      rgba(255, 200, 0, 0.42) 34deg 43deg,
      transparent 45deg 92deg,
      rgba(86, 207, 174, 0.2) 94deg 101deg,
      transparent 103deg 164deg,
      rgba(255, 152, 118, 0.22) 166deg 174deg,
      transparent 176deg 242deg,
      rgba(245, 242, 227, 0.24) 244deg 251deg,
      transparent 253deg 360deg
    );
}

html[data-theme="dark"] .studio-loading-logo-aperture::before {
  border-color: rgba(255, 200, 0, 0.16);
}

html[data-theme="dark"] .studio-loading-logo-aperture::after {
  border-color: rgba(245, 242, 227, 0.08);
}

html[data-theme="dark"] .studio-loading-logo-aperture span {
  background: rgba(245, 242, 227, 0.78);
  box-shadow:
    0 0 0 4px rgba(245, 242, 227, 0.08),
    0 0 16px rgba(255, 200, 0, 0.18);
}

html[data-theme="dark"] .studio-loading-scan {
  background: linear-gradient(
    112deg,
    transparent 0%,
    transparent 42%,
    rgba(255, 231, 161, 0.18) 50%,
    transparent 58%,
    transparent 100%
  );
  opacity: 0.72;
}

html[data-theme="dark"] .studio-loading-film-strip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(245, 242, 227, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-loading-film-strip span {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%),
    rgba(245, 242, 227, 0.2);
}

html[data-theme="dark"] .studio-loading-cue-dots span {
  box-shadow:
    0 0 0 8px rgba(255, 200, 0, 0.08),
    0 10px 20px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .studio-loading-room-card {
  border-color: rgba(255, 255, 255, 0.12);
  background: #151d18;
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .studio-loading-wall {
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 200, 0, 0.18), transparent 28%),
    linear-gradient(180deg, #18221d 0%, #131a16 100%);
}

html[data-theme="dark"] .studio-loading-floor {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 200, 0, 0.06)),
    #101713;
}

html[data-theme="dark"] .studio-loading-window {
  border-color: rgba(245, 242, 227, 0.78);
  background: linear-gradient(180deg, #26423f, #5c5127);
}

html[data-theme="dark"] .studio-loading-shelf {
  border-bottom-color: rgba(245, 242, 227, 0.74);
}

html[data-theme="dark"] .studio-loading-copy p {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-loading-status {
  color: rgba(245, 242, 227, 0.62);
}

html[data-theme="dark"] .studio-room-canvas-wrap {
  border-color: var(--border);
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 200, 0, 0.12), transparent 30%),
    var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .studio-room-loading,
html[data-theme="dark"] .studio-room-fallback {
  background: rgba(16, 22, 20, 0.62);
}

html[data-theme="dark"] .studio-room-loading p,
html[data-theme="dark"] .studio-living-lobby-loading p {
  color: var(--foreground);
}

html[data-theme="dark"] .studio-living-lobby-canvas-wrap {
  border-color: var(--border);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.12), transparent 32%),
    var(--surface);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
}

.studio-loading-page,
html[data-theme="dark"] .studio-loading-page {
  min-height: 100svh;
  padding: clamp(22px, 4vw, 46px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 120px),
    #000000;
  color: #ffffff;
}

.studio-loading-page::before,
html[data-theme="dark"] .studio-loading-page::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%);
  opacity: 0.42;
  filter: none;
  transform: none;
}

.studio-loading-page::after,
html[data-theme="dark"] .studio-loading-page::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  opacity: 0.7;
  filter: none;
}

.studio-loading-backlights {
  display: none;
}

.studio-loading-topwordmark {
  position: absolute;
  top: clamp(18px, 3vw, 34px);
  left: clamp(18px, 4vw, 48px);
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.88rem, 1.2vw, 1.02rem);
  font-weight: 790;
  letter-spacing: 0;
  line-height: 1;
}

.studio-loading-topwordmark span:last-child {
  color: rgba(255, 255, 255, 0.54);
  font-weight: 650;
}

.studio-loading-topwordmark.is-single-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 790;
}

.studio-loading-shell {
  width: min(560px, 100%);
  gap: 18px;
}

.studio-loading-mark,
html[data-theme="dark"] .studio-loading-mark {
  width: min(660px, 90vw);
  min-height: 168px;
  overflow: visible;
  padding: 30px 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.studio-loading-mark::before,
.studio-loading-mark::after,
html[data-theme="dark"] .studio-loading-mark::before,
html[data-theme="dark"] .studio-loading-mark::after {
  display: none;
}

.studio-loading-mark.is-compact,
html[data-theme="dark"] .studio-loading-mark.is-compact {
  width: clamp(154px, 24vw, 230px);
  min-height: 86px;
  padding: 14px;
  border-radius: 0;
  box-shadow: none;
}

.studio-loading-logo-stage,
html[data-theme="dark"] .studio-loading-logo-stage {
  width: min(660px, 86vw);
  aspect-ratio: auto;
  min-height: 96px;
  border-radius: 0;
}

.studio-loading-mark.is-compact .studio-loading-logo-stage,
html[data-theme="dark"] .studio-loading-mark.is-compact .studio-loading-logo-stage {
  width: 100%;
  min-height: 66px;
}

.studio-loading-logo-stage::before,
.studio-loading-logo-stage::after,
html[data-theme="dark"] .studio-loading-logo-stage::before,
html[data-theme="dark"] .studio-loading-logo-stage::after {
  display: none;
}

.studio-loading-wordmark {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: clamp(9px, 2vw, 16px);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(2rem, 5.8vw, 4.8rem);
  font-weight: 790;
  letter-spacing: 0;
  line-height: 0.88;
  white-space: nowrap;
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.74);
}

.studio-loading-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.48);
  font-weight: 620;
}

.studio-loading-mark.is-single-wordmark .studio-loading-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 790;
}

.studio-loading-mark.is-compact .studio-loading-wordmark {
  gap: 6px;
  font-size: clamp(1.05rem, 4vw, 1.6rem);
}

.studio-loading-wordmark-rule {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  z-index: 2;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
}

.studio-loading-wordmark-rule::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
  content: "";
  animation: studioLoadingWordmarkRule 1.65s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

.studio-loading-scan,
html[data-theme="dark"] .studio-loading-scan {
  inset: auto 28px 20px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
  animation: none;
}

.studio-loading-mark.is-compact .studio-loading-scan {
  inset: auto 14px 8px;
}

.studio-loading-status,
html[data-theme="dark"] .studio-loading-status {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: none;
}

.studio-global-loading-page.rescue-loading-page {
  background:
    linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px) center / 96px 100%,
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.13), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(86, 207, 174, 0.1), transparent 26%),
    #fafafa;
  color: #172033;
}

.studio-global-loading-page.rescue-loading-page::before {
  background:
    linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.1), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), transparent 44%);
  opacity: 0.5;
}

.studio-global-loading-page.rescue-loading-page::after {
  background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.12), transparent);
  opacity: 0.5;
}

.studio-global-loading-page.rescue-loading-page .studio-loading-topwordmark,
.studio-global-loading-page.rescue-loading-page .studio-loading-topwordmark.is-single-wordmark span:last-child {
  color: rgba(23, 32, 51, 0.86);
}

.studio-global-loading-page.rescue-loading-page .studio-loading-mark {
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    0 18px 52px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.studio-global-loading-page.rescue-loading-page .studio-loading-logo-stage {
  min-height: 108px;
}

.studio-global-loading-page.rescue-loading-page .studio-loading-wordmark {
  color: #172033;
  text-shadow: none;
}

.studio-global-loading-page.rescue-loading-page .studio-loading-mark.is-single-wordmark .studio-loading-wordmark span:last-child {
  color: #172033;
}

.studio-global-loading-page.rescue-loading-page .studio-loading-wordmark-rule {
  background: rgba(15, 23, 42, 0.1);
}

.studio-global-loading-page.rescue-loading-page .studio-loading-wordmark-rule::after {
  background: linear-gradient(90deg, transparent, rgba(23, 32, 51, 0.66), transparent);
}

.studio-global-loading-page.rescue-loading-page .studio-loading-scan {
  background: rgba(15, 23, 42, 0.1);
}

.studio-global-loading-page.rescue-loading-page .studio-loading-status {
  color: rgba(23, 32, 51, 0.52);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 24%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 120px),
    #000000;
  color: #ffffff;
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 38%);
  opacity: 0.42;
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  opacity: 0.7;
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-topwordmark,
html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-topwordmark.is-single-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-mark {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-wordmark,
html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-mark.is-single-wordmark .studio-loading-wordmark span:last-child {
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 24px 80px rgba(0, 0, 0, 0.74);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-wordmark-rule {
  background: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-wordmark-rule::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-scan {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .studio-global-loading-page.rescue-loading-page .studio-loading-status {
  color: rgba(255, 255, 255, 0.48);
}

@keyframes studioLoadingWordmarkRule {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(385%);
  }
}

html[data-theme="dark"] .studio-monthly-care-scene .studio-living-lobby-canvas-wrap,
html[data-theme="dark"] .studio-home-living-scene .studio-living-lobby-canvas-wrap {
  background: #fffdf7;
}

html[data-theme="dark"] .studio-monthly-stage-panel {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.12), transparent 38%),
    var(--surface);
  border-color: rgba(255, 200, 0, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-monthly-stage-switcher a {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-monthly-stage-switcher a.is-active {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.94), rgba(255, 221, 88, 0.88));
  border-color: rgba(255, 200, 0, 0.7);
}

html[data-theme="dark"] .studio-fame-video-card.is-featured {
  background:
    radial-gradient(circle at 30% 10%, rgba(255, 200, 0, 0.16), transparent 34%),
    var(--surface);
  border-color: var(--border);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .studio-fame-stats div,
html[data-theme="dark"] .studio-fame-entry-topline span,
html[data-theme="dark"] .studio-fame-guest-row a,
html[data-theme="dark"] .studio-fame-guest-row span,
html[data-theme="dark"] .studio-fame-production-note {
  background: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .studio-fame-guest-row a:hover {
  background: var(--brand);
  color: #17120a;
}

html[data-theme="dark"] .studio-fame-footnote {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .studio-cameos-page {
  --studio-spotlight-bg:
    radial-gradient(900px 440px at 50% -120px, rgba(255, 213, 82, 0.34), transparent 62%),
    radial-gradient(700px 420px at 4% 16%, rgba(255, 125, 86, 0.15), transparent 58%),
    radial-gradient(760px 460px at 96% 20%, rgba(146, 210, 255, 0.1), transparent 58%),
    linear-gradient(180deg, #100a07 0%, #1a110b 48%, #0e1110 100%);
  --studio-spotlight-ink: #fff8df;
  --studio-spotlight-muted: rgba(255, 248, 223, 0.72);
  --studio-spotlight-panel: rgba(18, 14, 9, 0.5);
  --studio-spotlight-panel-strong: rgba(18, 14, 9, 0.68);
  --studio-spotlight-border: rgba(255, 248, 223, 0.16);
  --studio-spotlight-fade: rgba(20, 13, 8, 0.96);
  --studio-spotlight-button-bg:
    linear-gradient(180deg, rgba(255, 248, 223, 0.2), rgba(255, 248, 223, 0.08)),
    rgba(15, 12, 9, 0.72);
  --studio-spotlight-button-color: #fff8df;
  --studio-spotlight-grid: rgba(255, 248, 223, 0.04);
  --studio-spotlight-glow: rgba(255, 200, 0, 0.14);
  --studio-spotlight-accent: #ffc800;
  background: var(--studio-spotlight-bg);
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-cameos-page) {
  background:
    radial-gradient(900px 440px at 50% -120px, rgba(255, 213, 82, 0.34), transparent 62%),
    radial-gradient(700px 420px at 4% 16%, rgba(255, 125, 86, 0.15), transparent 58%),
    radial-gradient(760px 460px at 96% 20%, rgba(146, 210, 255, 0.1), transparent 58%),
    linear-gradient(180deg, #100a07 0%, #1a110b 48%, #0e1110 100%);
}

html[data-theme="dark"] .studio-appearances-rail-head {
  background: transparent;
}

.studio-cameos-page .studio-fame-footnote {
  color: var(--studio-spotlight-muted, rgba(255, 248, 223, 0.7));
}

html[data-theme="dark"] .studio-fame-pin {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .studio-fame-pin-overlay .studio-fame-entry-topline span,
html[data-theme="dark"] .studio-fame-pin-overlay .studio-fame-guest-row a,
html[data-theme="dark"] .studio-fame-pin-overlay .studio-fame-guest-row span {
  background: rgba(255, 255, 255, 0.14);
  color: #fff8df;
}

html[data-theme="dark"] .studio-short-cameo-section {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 34%),
    var(--surface);
  border-color: var(--border);
}

html[data-theme="dark"] .studio-living-lobby-loading,
html[data-theme="dark"] .studio-living-lobby-fallback {
  background: rgba(16, 22, 20, 0.62);
}

html[data-theme="dark"] .studio-monthly-care-card,
html[data-theme="dark"] .studio-decoration-slot-card {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 44%),
    var(--surface);
}

html[data-theme="dark"] .studio-decoration-slot-card span {
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
}

.home-feature-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.home-feature-kicker {
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-feature-date {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-feature-card h2 {
  font-size: clamp(1.55rem, 2.45vw, 2.2rem);
  line-height: 1.08;
}

.home-feature-tags {
  gap: 8px;
}

.home-feature-tags .tag-chip {
  min-height: 30px;
  border-color: rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.home-feature-copy {
  --home-feature-copy-line-height: 1.62;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: var(--home-feature-copy-line-height);
}

.home-feature-card-pet .home-feature-copy {
  display: -webkit-box;
  overflow: hidden;
  max-height: calc(5em * var(--home-feature-copy-line-height));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.home-feature-note {
  padding-top: 12px;
  border-top: 1px solid rgba(33, 33, 33, 0.08);
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.55;
}

.home-feature-actions {
  gap: 8px;
}

.home-feature-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.home-feature-linkline a {
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.home-feature-linkline a:hover {
  text-decoration: underline;
}

.home-feature-caption {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.home-hero-actions {
  gap: 8px;
}

.home-hero-action {
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 16px;
  box-shadow: none;
  font-size: 0.92rem;
}

.home-hero-actions .button-ghost,
.home-intro-card .button-ghost {
  background: rgba(255, 255, 255, 0.82);
}

.home-intro-card {
  gap: 12px;
}

.home-intro-card h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.52rem);
  line-height: 1.18;
}

.home-intro-card p {
  font-size: 0.95rem;
  line-height: 1.58;
}

.home-project-brief {
  gap: 14px;
}

.home-project-brief-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-project-brief-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.home-project-brief-item strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.16;
}

.home-story-empty {
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.home-story-empty p {
  max-width: 52ch;
}

.home-story-empty .button-row {
  margin-top: 2px;
}

.home-content-card {
  gap: 12px;
  overflow: hidden;
}

.home-content-card .media-thumb {
  height: 180px;
  margin-bottom: 12px;
}

.home-content-card .content-card-body {
  gap: 10px;
}

.home-content-card h3 {
  font-size: clamp(1.22rem, 1.6vw, 1.48rem);
  line-height: 1.14;
}

.home-card-tags {
  order: 2;
  gap: 8px;
}

.home-content-card .tag {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.home-card-description {
  order: 3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.95rem;
  line-height: 1.58;
}

.home-pet-card .home-card-description {
  -webkit-line-clamp: 2;
}

.home-card-meta {
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.home-card-meta .meta-row-icon {
  margin-top: 2px;
}

.home-card-meta > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-project-meter {
  order: 4;
  margin-top: 2px;
}

.project-intro-summary {
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.1), transparent 26%),
    linear-gradient(180deg, #fff9df 0%, #ffffff 100%);
}

.project-intro-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-intro-metric {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.project-intro-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-intro-metric strong {
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  line-height: 1.14;
}

.project-intro-list-card {
  gap: 14px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.project-intro-feature-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(11, 105, 183, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 236, 0.96) 100%);
}

.project-intro-feature-shell {
  display: grid;
  gap: 0;
}

.project-intro-feature-media {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.96) 0%, rgba(242, 247, 255, 0.96) 100%);
}

.project-intro-feature-art {
  position: relative;
  width: 100%;
  min-height: 240px;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 248, 226, 0.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.project-intro-feature-media img {
  object-fit: contain;
  object-position: center;
}

.project-intro-feature-copy {
  display: grid;
  gap: 14px;
  padding: 20px 20px 22px;
}

.project-intro-feature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-intro-feature-card h2 {
  font-size: clamp(1.48rem, 2.1vw, 2rem);
  line-height: 1.1;
}

.project-intro-feature-summary {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.6;
}

.project-intro-feature-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-intro-feature-metric {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.project-intro-feature-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-intro-feature-metric strong {
  font-size: 1rem;
  line-height: 1.2;
}

.project-intro-list {
  display: grid;
  gap: 10px;
}

.project-intro-link {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.project-intro-link:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.project-intro-link-head,
.project-intro-link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-intro-link-head strong {
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.project-intro-link-copy {
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.project-intro-link-meta {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.project-intro-remaining {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.45);
  background: #fff3c4;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-hub-stack {
  gap: 24px;
}

.story-hub-hero {
  background: #ffffff;
}

.story-hub-hero > * {
  min-width: 0;
}

.story-hub-hero-copy {
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.story-hub-hero-copy-panel {
  min-height: 100%;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.story-hub-hero-copy .hero-lead {
  max-width: none;
}

.story-hub-hero .page-intro-support {
  min-width: 0;
}

.story-hub-hero .story-feature-card-public {
  width: 100%;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.story-hub-hero .story-feature-media {
  width: 100%;
  min-height: 216px;
  margin: 0 0 2px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
}

.story-hub-hero .story-feature-card-public .inline-note {
  background: rgba(255, 255, 255, 0.74);
}

.story-hub-highlight-row {
  row-gap: 10px;
}

.story-hub-primary-action {
  margin-top: 2px;
}

.story-feature-meta {
  margin: 0;
  color: rgba(33, 33, 33, 0.58);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.story-feature-actions {
  margin-top: 2px;
}

.story-page-nav {
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 24%),
    rgba(255, 255, 255, 0.96);
}

.story-page-nav-grid,
.story-track-grid,
.story-gallery-grid {
  display: grid;
  gap: 14px;
}

.story-page-nav-link {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-page-nav-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-page-nav-label,
.story-page-nav-count {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-page-nav-label {
  color: var(--accent);
}

.story-page-nav-count {
  color: var(--muted);
}

.story-track-strip {
  background: rgba(255, 255, 255, 0.96);
}

.story-series-spotlight {
  display: grid;
  gap: 18px;
  background: #ffffff;
}

.story-series-main,
.story-series-panel,
.story-series-action-card,
.story-series-library,
.story-series-route-grid {
  display: grid;
  gap: 16px;
}

.story-series-panel,
.story-series-action-card,
.story-series-library,
.story-series-episode-card,
.story-series-route-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.story-series-panel-media {
  align-content: start;
}

.story-series-episode-grid {
  display: grid;
  gap: 12px;
}

.story-series-route-grid {
  grid-template-columns: minmax(0, 1fr);
}

.story-series-route-card {
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-series-route-card.is-latest {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.story-series-route-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-series-route-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.story-series-route-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.story-series-route-label,
.story-series-episode-kicker {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-series-episode-card {
  display: grid;
  gap: 6px;
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-series-episode-card.is-latest {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.story-series-episode-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-series-episode-media {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.06);
  aspect-ratio: 9 / 16;
}

.story-series-episode-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-series-episode-badge {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-series-episode-meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.story-series-more {
  display: grid;
  gap: 14px;
}

.story-series-more summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--foreground);
}

.story-series-more[open] summary {
  margin-bottom: 2px;
}

.story-video-card {
  display: grid;
  gap: 18px;
  background: #ffffff;
}

.story-video-embed {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #111;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-soft);
}

.story-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lazy-embed-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(12, 16, 24, 0.94) 0%, rgba(12, 16, 24, 0.98) 100%);
}

.lazy-embed-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: saturate(1.08) contrast(1.02);
}

.lazy-embed-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.1) 0%, rgba(10, 12, 18, 0.52) 100%),
    radial-gradient(circle at center, transparent 0%, rgba(10, 12, 18, 0.34) 82%);
}

.lazy-embed-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 3vw, 22px);
  text-align: left;
}

.lazy-embed-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  gap: 11px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 16px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #121212;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    transform 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.lazy-embed-play:hover,
.lazy-embed-play:focus-visible {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34);
}

.lazy-embed-play-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #111;
}

.lazy-embed-play-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 2.8;
  transform: translateX(1px);
}

.lazy-embed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.58);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.lazy-embed-link:hover,
.lazy-embed-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(12, 16, 24, 0.76);
}

.lazy-embed-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.story-video-embed-short {
  width: min(100%, 340px);
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
}

.story-track-link {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-track-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-track-link strong {
  font-size: 0.96rem;
  line-height: 1.4;
}

.story-track-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-feature-card {
  align-content: start;
}

.story-feature-media {
  position: relative;
  overflow: hidden;
  width: calc(100% + 48px);
  min-height: 244px;
  margin: -24px -24px 0;
  border-radius: 24px 24px 18px 18px;
  background: var(--surface-soft);
}

.story-feature-media img {
  object-fit: cover;
}

.story-feature-card-public {
  gap: 18px;
  background: #ffffff;
}

.story-library-section {
  gap: 18px;
}

.story-library-section-public {
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.98);
}

.story-library-section-instagram {
  background: #ffffff;
}

#stories-instagram-records,
#stories-short-form,
#stories-public-records,
#stories-live-context {
  scroll-margin-top: 92px;
}

.story-record-shelf {
  display: grid;
  gap: 16px;
}

.story-record-shelf + .story-record-shelf {
  padding-top: 4px;
  border-top: 1px solid rgba(11, 18, 32, 0.08);
}

.story-record-shelf-header {
  max-width: 68ch;
}

.story-record-shelf-header h4 {
  margin: 0;
}

.story-record-card {
  background: #ffffff;
}

.story-record-card-instagram {
  background: #ffffff;
}

.instagram-record-preview {
  gap: 14px;
  overflow: hidden;
  background: #ffffff;
}

.instagram-record-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% + 48px);
  height: 198px;
  margin: -24px -24px 16px;
  border-radius: 24px 24px 18px 18px;
  border-bottom: 1px solid rgba(11, 18, 32, 0.08);
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.98), transparent 20%),
    linear-gradient(135deg, #f1f5f9 0%, #ffffff 48%, #eef2f7 100%);
}

.instagram-record-visual-large {
  width: 100%;
  min-height: 360px;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
}

.instagram-record-visual-photo {
  background: #0b1220;
}

.instagram-record-real-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.instagram-record-real-media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.instagram-record-real-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.05) 0%, rgba(11, 18, 32, 0.18) 56%, rgba(11, 18, 32, 0.56) 100%),
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.24), transparent 30%);
}

.instagram-record-glow,
.instagram-record-phone,
.instagram-record-floating-badge,
.instagram-record-title-chip {
  position: absolute;
  z-index: 1;
}

.instagram-record-glow {
  border-radius: 999px;
  filter: blur(2px);
}

.instagram-record-glow-one {
  top: -60px;
  right: -42px;
  width: 180px;
  height: 180px;
  background: rgba(148, 163, 184, 0.22);
}

.instagram-record-glow-two {
  bottom: -76px;
  left: -46px;
  width: 190px;
  height: 190px;
  background: rgba(94, 224, 184, 0.22);
}

.instagram-record-phone {
  top: 20px;
  left: 50%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(48%, 178px);
  min-width: 136px;
  height: calc(100% - 34px);
  padding: 10px;
  transform: translateX(-50%) rotate(-2deg);
  border: 3px solid rgba(11, 18, 32, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 36px rgba(11, 18, 32, 0.18);
}

.instagram-record-visual-large .instagram-record-phone {
  top: 36px;
  width: min(36%, 240px);
  min-width: 190px;
  height: calc(100% - 60px);
  padding: 14px;
  border-radius: 30px;
  border-width: 4px;
}

.instagram-record-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
}

.instagram-record-phone-top span:first-child {
  width: 42%;
  height: 7px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.12);
}

.instagram-record-phone-top span:last-child {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 126, 101, 0.86);
}

.instagram-record-scene {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 56%, rgba(238, 242, 247, 0.98) 100%);
}

.instagram-record-sun {
  position: absolute;
  top: 15%;
  right: 16%;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: 0 0 0 10px rgba(148, 163, 184, 0.16);
}

.instagram-record-cat {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 72px;
  height: 58px;
  transform: translateX(-50%);
  border: 3px solid rgba(11, 18, 32, 0.94);
  border-radius: 48% 48% 42% 42%;
  background: #ffffff;
}

.instagram-record-cat-ear {
  position: absolute;
  top: -19px;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(11, 18, 32, 0.94);
  border-bottom: 0;
  background: #ffffff;
}

.instagram-record-cat-ear-left {
  left: 8px;
  transform: rotate(45deg);
  border-radius: 7px 0 0;
}

.instagram-record-cat-ear-right {
  right: 8px;
  transform: rotate(45deg);
  border-radius: 0 7px 0 0;
}

.instagram-record-cat-eye,
.instagram-record-cat-nose {
  position: absolute;
  background: rgba(11, 18, 32, 0.94);
}

.instagram-record-cat-eye {
  top: 23px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.instagram-record-cat-eye-left {
  left: 21px;
}

.instagram-record-cat-eye-right {
  right: 21px;
}

.instagram-record-cat-nose {
  top: 34px;
  left: 50%;
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px 999px 6px 6px;
}

.instagram-record-cat-mouth {
  position: absolute;
  top: 41px;
  left: 50%;
  width: 22px;
  height: 9px;
  transform: translateX(-50%);
  border-bottom: 3px solid rgba(11, 18, 32, 0.94);
  border-radius: 0 0 999px 999px;
}

.instagram-record-caption-lines {
  display: grid;
  gap: 6px;
  padding-top: 9px;
}

.instagram-record-caption-lines span {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.12);
}

.instagram-record-caption-lines span:nth-child(2) {
  width: 74%;
}

.instagram-record-caption-lines span:nth-child(3) {
  width: 52%;
}

.instagram-record-floating-badge,
.instagram-record-title-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(72%, 320px);
  border: 1px solid rgba(11, 18, 32, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  box-shadow: 0 12px 26px rgba(11, 18, 32, 0.12);
  backdrop-filter: blur(14px);
}

.instagram-record-floating-badge {
  top: 22px;
  left: 18px;
  gap: 7px;
  padding: 8px 11px;
  font-size: 0.72rem;
  font-weight: 900;
}

.instagram-record-floating-badge svg {
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.instagram-record-title-chip {
  right: 18px;
  bottom: 18px;
  padding: 9px 12px;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-record-visual-large .instagram-record-floating-badge {
  top: 28px;
  left: 28px;
  padding: 10px 13px;
  font-size: 0.82rem;
}

.instagram-record-visual-large .instagram-record-title-chip {
  right: 28px;
  bottom: 28px;
  max-width: min(62%, 520px);
  padding: 12px 16px;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.story-instagram-detail-hero {
  background:
    radial-gradient(circle at top right, rgba(15, 23, 42, 0.06), transparent 26%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 54%, rgba(238, 242, 247, 0.98) 100%);
}

.story-record-card .content-card-body {
  gap: 12px;
}

.story-record-card-partner .media-thumb {
  background: rgba(255, 255, 255, 0.98);
}

.story-record-card-partner .media-thumb img {
  object-fit: contain;
  padding: 18px;
}

.story-detail-media {
  min-height: 360px;
}

.story-instagram-embed-card {
  gap: 18px;
  background: #ffffff;
}

.story-instagram-embed {
  position: relative;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(11, 18, 32, 0.08);
  background: rgba(255, 255, 255, 0.98);
}

.story-instagram-embed iframe {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
}

.story-instagram-embed .lazy-embed-poster {
  min-height: 760px;
}

.story-quote {
  margin: 0;
  padding-left: 16px;
  border-left: 4px solid rgba(11, 105, 183, 0.24);
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.7;
}

.story-body {
  display: grid;
  gap: 14px;
}

.story-body p {
  color: var(--foreground);
  line-height: 1.75;
}

.story-gallery-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.story-gallery-media {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}

.proof-section-card {
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11, 105, 183, 0.12);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 24%),
    linear-gradient(180deg, #fff9e4 0%, #ffffff 100%);
  box-shadow: var(--shadow-soft);
}

.proof-feature-grid,
.trust-logo-grid {
  display: grid;
  gap: 16px;
}

.proof-feature-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.proof-feature-card:hover,
.trust-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.proof-feature-media,
.trust-archive-media {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
}

.proof-feature-media {
  min-height: 208px;
}

.proof-feature-media img,
.trust-archive-media img {
  object-fit: cover;
}

.proof-feature-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.proof-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.trust-logo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-logo-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 100%);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.trust-logo-card:hover {
  border-color: rgba(15, 23, 42, 0.16);
}

.trust-logo-card strong,
.trust-archive-card strong {
  color: var(--foreground);
  line-height: 1.3;
}

.trust-logo-card span {
  font-size: 0.94rem;
  line-height: 1.55;
}

.trust-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: var(--surface-muted);
}

.trust-logo-mark img {
  width: 100%;
  height: auto;
  max-width: 144px;
  object-fit: contain;
}

.trust-archive-card {
  align-content: start;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.16), transparent 22%),
    linear-gradient(180deg, #fff5d7 0%, #ffffff 100%);
}

.trust-archive-media {
  min-height: 280px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.trust-note-card {
  gap: 18px;
  background: #ffffff;
}

.trust-entry-card {
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
}

.cats-discovery-panel {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.cats-discovery-layout,
.cats-discovery-main {
  display: grid;
  min-width: 0;
}

.cats-discovery-layout {
  align-items: stretch;
}

.cats-discovery-main {
  gap: 14px;
  align-content: start;
  padding: 22px;
}

.cats-discovery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 16px;
  max-width: none;
}

.cats-discovery-head .eyebrow {
  margin-bottom: 2px;
}

.cats-discovery-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 62ch;
}

.cats-discovery-copy h1 {
  max-width: 100%;
  font-size: clamp(1.46rem, 2vw, 2rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.cats-discovery-copy p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cats-discovery-count {
  display: grid;
  gap: 2px;
  min-width: min(100%, 152px);
  padding: 9px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

.cats-discovery-count strong {
  font-size: 0.94rem;
  line-height: 1.16;
}

.cats-discovery-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  min-width: min(100%, 260px);
}

.cats-discovery-form-button {
  min-height: 42px;
  gap: 8px;
  padding-inline: 14px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.cats-discovery-form-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.cats-discovery-form-icon svg {
  width: 18px;
  height: 18px;
}

.cats-discovery-controls {
  display: grid;
  gap: 12px;
  align-items: flex-end;
  min-width: 0;
}

.cats-search-field {
  gap: 10px;
}

.cats-search-field,
.cats-sort-field,
.cats-filter-row,
.cats-results-status {
  min-width: 0;
}

.cats-search-shell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: white;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cats-search-shell svg {
  color: var(--accent);
}

.cats-search-icon {
  color: var(--accent-strong);
}

.cats-search-shell:focus-within {
  border-color: rgba(11, 105, 183, 0.3);
  box-shadow: 0 0 0 4px rgba(11, 105, 183, 0.08);
}

.cats-search-shell input {
  width: 100%;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foreground);
}

.cats-search-shell input:focus {
  outline: 0;
}

.cats-filter-row {
  display: grid;
  gap: 8px;
}

.cats-results-status {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 105, 183, 0.12);
}

.cats-results-status strong {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.16;
}

.cats-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cats-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.cats-filter-chip > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-filter-chip:hover {
  transform: translateY(-1px);
}

.cats-filter-chip:disabled {
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.cats-filter-chip:disabled:hover {
  transform: none;
}

.cats-filter-chip.is-active[data-filter="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="all"] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #ffffff;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.34);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.16);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="medical"],
.cats-filter-chip.is-active[data-filter="kittens"] {
  background: #fff3e8;
  border-color: rgba(255, 122, 102, 0.28);
  color: #9d3a20;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="pairs"] {
  background: #f2f0ff;
  border-color: rgba(138, 111, 255, 0.28);
  color: #4f3fba;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.78rem;
}

.cats-sticky-toolbar {
  position: sticky;
  top: 8px;
  z-index: 16;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(33, 33, 33, 0.1);
  backdrop-filter: blur(18px) saturate(1.1);
  animation: cats-sticky-toolbar-in 150ms ease-out;
}

@keyframes cats-sticky-toolbar-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

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

.cats-sticky-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.84);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.cats-sticky-search:focus-within {
  border-color: rgba(255, 200, 0, 0.58);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

.cats-sticky-search input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 720;
}

.cats-sticky-search input:focus {
  outline: 0;
}

.cats-quick-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cats-quick-tabs::-webkit-scrollbar {
  display: none;
}

.cats-quick-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.cats-quick-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}

.cats-quick-tab:disabled {
  opacity: 0.46;
  transform: none;
}

.cats-quick-tab span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.72rem;
}

.cats-quick-tab.is-active[data-filter="all"] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: white;
}

.cats-quick-tab.is-active[data-filter="adoptable"] {
  background: var(--brand);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--brand-ink);
}

.cats-quick-tab.is-active[data-filter="foster"] {
  background: #e7f3ff;
  border-color: rgba(11, 105, 183, 0.34);
  color: var(--accent-strong);
}

.cats-quick-tab.is-active[data-filter="support"] {
  background: #eafaf4;
  border-color: rgba(38, 159, 125, 0.32);
  color: #0f6f55;
}

.cats-feature-card {
  display: grid;
  grid-template-rows: minmax(200px, auto) auto;
  min-height: 100%;
  min-width: 0;
  border-top: 1px solid rgba(11, 105, 183, 0.12);
  background: #ffffff;
  color: var(--foreground);
  text-decoration: none;
  overflow: hidden;
  transition: background 120ms ease;
}

.cats-feature-card:hover {
  background: #f7f9fc;
}

.cats-feature-media {
  position: relative;
  isolation: isolate;
  min-height: 200px;
  background: var(--surface-soft);
  overflow: hidden;
}

.cats-feature-media img {
  object-fit: cover;
  transition: transform 180ms ease;
}

.cats-feature-card:hover .cats-feature-media img {
  transform: scale(1.025);
}

.cats-feature-photo-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: calc(100% - 28px);
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(33, 33, 33, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cats-feature-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 24px 18px 18px;
  border-top: 1px solid var(--border-soft);
  background: #ffffff;
}

.cats-feature-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 10px;
}

.cats-feature-body h3 {
  font-size: clamp(1.34rem, 2vw, 1.9rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.cats-feature-location,
.cats-feature-chip {
  min-width: 0;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font-weight: 900;
}

.cats-feature-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cats-feature-location span:last-child,
.cats-feature-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-feature-copy {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.54;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cats-feature-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cats-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cats-feature-chip[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
}

.cats-feature-chip[data-priority="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.28);
  color: var(--accent-strong);
}

.cats-feature-chip[data-priority="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.12);
}

.cats-feature-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.cats-feature-chip-icon svg {
  width: 100%;
  height: 100%;
}

.cats-results-grid {
  display: grid;
  gap: 18px;
}

.cats-results-actions {
  justify-content: center;
}

.cats-directory-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.cats-directory-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 23, 42, 0.16);
}

.cats-directory-media {
  position: relative;
  min-height: 192px;
  background: var(--surface-soft);
}

.cats-directory-media img {
  object-fit: cover;
}

.cats-directory-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.cats-directory-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cats-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cats-priority-badge[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
}

.cats-priority-badge[data-priority="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.28);
  color: var(--accent-strong);
}

.cats-priority-badge[data-priority="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.08);
}

.cats-priority-badge[data-priority="medical"] {
  background: #fff3e8;
  border-color: rgba(255, 122, 102, 0.28);
  color: #9d3a20;
}

.cats-priority-badge[data-priority="recovery"] {
  background: #eafaf4;
  border-color: rgba(38, 159, 125, 0.28);
  color: #0f6f55;
}

.cats-directory-status {
  display: grid;
  gap: 4px;
  margin: 0;
}

.cats-directory-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-weight: 700;
}

.cats-directory-copy {
  margin: 0;
  color: var(--foreground);
  line-height: 1.65;
}

.cats-directory-need {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cats-directory-need-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-weight: 800;
}

.cats-directory-need p {
  margin: 0;
  line-height: 1.6;
  color: var(--foreground);
}

.cats-directory-action-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.cats-recent-strip {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 28%),
    rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.cats-recent-copy {
  display: grid;
  gap: 2px;
}

.cats-recent-copy strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
}

.cats-recent-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.cats-recent-item {
  display: grid;
  grid-template-columns: 42px minmax(96px, 1fr);
  align-items: center;
  gap: 9px;
  flex: 0 0 min(212px, 72vw);
  min-height: 58px;
  padding: 7px 10px 7px 7px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.8);
  color: inherit;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.cats-recent-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}

.cats-recent-photo {
  position: relative;
  width: 42px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-soft);
}

.cats-recent-photo img {
  object-fit: cover;
}

.cats-recent-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cats-recent-text strong,
.cats-recent-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-recent-text strong {
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.08;
}

.cats-recent-text small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
}

.recent-media-rail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.recent-media-copy {
  display: grid;
  gap: 2px;
}

.recent-media-copy strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
}

.recent-media-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.recent-media-card {
  display: grid;
  gap: 8px;
  flex: 0 0 min(158px, 58vw);
  color: inherit;
  text-decoration: none;
}

.recent-media-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 12;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(86, 207, 174, 0.16)),
    var(--surface-soft);
}

.recent-media-thumb img {
  object-fit: cover;
}

.recent-media-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 200, 0, 0.36), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(86, 207, 174, 0.22), transparent 26%),
    rgba(255, 255, 255, 0.7);
}

.recent-media-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recent-media-text small,
.recent-media-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-media-text small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1;
  white-space: nowrap;
}

.recent-media-text strong {
  color: var(--foreground);
  font-size: 0.86rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cats-empty-state {
  gap: 14px;
}

.account-nav-shell,
.admin-section-shell,
.admin-toolbar-card {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.account-nav-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.notification-summary-card strong {
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.notification-flow-card,
.notification-section-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.97);
}

.notification-pref-grid {
  gap: 16px;
}

.notification-pref-card {
  background:
    linear-gradient(180deg, rgba(255, 251, 239, 0.96) 0%, rgba(255, 255, 255, 0.98) 42%),
    rgba(255, 255, 255, 0.98);
}

.notification-pref-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.saved-page-intro {
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.07), transparent 26%),
    radial-gradient(circle at bottom left, rgba(11, 105, 183, 0.07), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.saved-mobile-card {
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
}

.saved-mobile-card h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.18;
}

.saved-summary-card {
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.06), transparent 24%),
    rgba(255, 255, 255, 0.97);
}

.saved-watchlist-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.saved-watchlist-card {
  min-height: 100%;
  align-content: start;
}

.saved-watchlist-summary,
.saved-watchlist-meta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.saved-watchlist-summary {
  -webkit-line-clamp: 3;
}

.saved-watchlist-meta {
  -webkit-line-clamp: 2;
}

.notification-pref-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(245, 247, 250, 0.96);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notification-pref-status.is-enabled {
  border-color: rgba(255, 200, 0, 0.38);
  background: #fff2be;
  color: var(--foreground);
}

.notification-empty-card {
  gap: 14px;
}

.admin-section-shell {
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
}

.admin-section-shell.is-compact {
  gap: 10px;
  padding: 16px 18px;
}

.admin-section-shell.is-collapsible {
  display: grid;
  gap: 10px;
  padding: 8px 12px;
}

.admin-section-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  cursor: pointer;
  list-style: none;
}

.admin-section-summary::-webkit-details-marker {
  display: none;
}

.admin-section-summary span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-section-summary strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-section-shell.is-collapsible:not([open]) .admin-section-list {
  display: none;
}

.admin-toolbar-card {
  gap: 14px;
}

.admin-current-editor-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  line-height: 1.08;
}

.admin-current-editor-title span {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 800;
}

.admin-current-editor-title strong {
  color: var(--foreground);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 950;
  overflow-wrap: anywhere;
}

.admin-cat-library-card {
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.admin-cat-library-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.admin-cat-library-name {
  color: var(--foreground);
  font-size: clamp(1.32rem, 2vw, 1.74rem);
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.admin-cat-library-card:hover .admin-cat-library-name {
  color: var(--accent-strong);
}

.account-nav-list,
.admin-section-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-section-list {
  align-items: stretch;
  gap: 14px;
}

.admin-section-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: min(100%, 180px);
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.055);
  background: rgba(255, 255, 255, 0.58);
}

.admin-section-group-label {
  padding: 0 5px;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-section-group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-nav-link,
.admin-section-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--foreground);
  font-weight: 800;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.account-nav-link:hover,
.admin-section-link:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.account-nav-link.is-active {
  border-color: rgba(15, 23, 42, 0.16);
  background: var(--background-faint);
}

.admin-section-link.is-active {
  border-color: rgba(255, 200, 0, 0.52);
  background: var(--background-faint);
}

.pawpi-economy-grant-form {
  display: grid;
  gap: 20px;
}

.pawpi-economy-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pawpi-economy-form-grid .field {
  gap: 8px;
}

.pawpi-economy-form-grid .field span {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.pawpi-economy-form-grid input,
.pawpi-economy-form-grid select,
.pawpi-economy-form-grid textarea {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: #ffffff;
  color: var(--foreground);
  font-weight: 760;
}

.pawpi-economy-form-grid input,
.pawpi-economy-form-grid select {
  min-height: 48px;
  padding: 0 14px;
}

.pawpi-economy-form-grid textarea {
  resize: vertical;
  min-height: 112px;
  padding: 14px;
}

.pawpi-economy-form-reason {
  grid-column: 1 / -1;
}

.pawpi-economy-result {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.92);
}

.pawpi-economy-result.is-success {
  border-color: rgba(0, 168, 151, 0.22);
  background: rgba(0, 168, 151, 0.08);
}

.pawpi-economy-result.is-error {
  border-color: rgba(255, 0, 0, 0.22);
  background: rgba(255, 0, 0, 0.055);
}

.pawpi-economy-result strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.pawpi-economy-result-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.pawpi-economy-result-grid div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.pawpi-economy-result-grid dt {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pawpi-economy-result-grid dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.pawpi-economy-refund-queue {
  display: grid;
  gap: 18px;
}

.pawpi-economy-refund-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pawpi-economy-refund-item {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.78);
}

.pawpi-economy-refund-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.pawpi-economy-refund-copy h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.15rem;
  font-weight: 950;
}

.pawpi-economy-refund-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.pawpi-economy-refund-facts div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: #ffffff;
}

.pawpi-economy-refund-facts dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pawpi-economy-refund-facts dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.pawpi-economy-refund-error {
  margin: 0;
  color: #d60000;
  font-size: 0.86rem;
  font-weight: 850;
}

.pawpi-economy-refund-item .button-row span {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 850;
}

.pawpi-economy-refund-form {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.pawpi-economy-refund-form .field {
  gap: 6px;
}

.pawpi-economy-refund-form .field span {
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.pawpi-economy-refund-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  font-weight: 760;
}

.pawpi-economy-empty-state {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px dashed rgba(15, 23, 42, 0.16);
}

.pawpi-economy-empty-state strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.pawpi-economy-empty-state p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.92rem;
}

.pawpi-economy-restrictions {
  display: grid;
  gap: 18px;
}

.pawpi-economy-restrictions .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.pawpi-economy-restrictions .status-pill.is-success {
  background: rgba(0, 180, 180, 0.14);
  color: #087b7b;
}

.pawpi-economy-restrictions .status-pill.is-danger {
  background: rgba(214, 0, 0, 0.1);
  color: #d60000;
}

.pawpi-economy-restriction-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pawpi-account-restriction-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: #ffffff;
}

.pawpi-account-restriction-form .field,
.pawpi-account-restriction-release-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pawpi-account-restriction-form .field span,
.pawpi-account-restriction-release-form .field span {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 950;
}

.pawpi-account-restriction-form input,
.pawpi-account-restriction-form select,
.pawpi-account-restriction-release-form input {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  font-weight: 780;
}

.pawpi-account-restriction-form-note {
  grid-column: span 2;
}

.pawpi-account-restriction-form .button {
  align-self: end;
  min-height: 42px;
}

.pawpi-economy-restriction-item {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(214, 0, 0, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 247, 247, 0.92), rgba(255, 255, 255, 0.96));
}

.pawpi-economy-restriction-item h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.pawpi-economy-restriction-item p {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 750;
}

.pawpi-account-restriction-release-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, 180px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.pawpi-appeals-panel {
  display: grid;
  gap: 18px;
}

.pawpi-appeal-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pawpi-appeal-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
}

.pawpi-appeal-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.pawpi-appeal-header h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 950;
}

.pawpi-appeal-header p {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pawpi-appeal-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pawpi-appeal-restriction-note,
.pawpi-appeal-response-note {
  margin: 0;
  padding: 12px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pawpi-appeal-restriction-note {
  background: rgba(214, 0, 0, 0.07);
  color: #9f1239;
}

.pawpi-appeal-response-note {
  background: rgba(0, 180, 180, 0.12);
  color: #075985;
}

.pawpi-appeal-review-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1.4fr) minmax(130px, 0.35fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.84);
}

.pawpi-appeal-review-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pawpi-appeal-review-form .field span {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 950;
}

.pawpi-appeal-review-form input,
.pawpi-appeal-review-form select,
.pawpi-appeal-review-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  font-weight: 780;
}

.pawpi-appeal-review-form textarea {
  min-height: 88px;
  padding-top: 10px;
  resize: vertical;
}

.pawpi-safety-report-list {
  display: grid;
  gap: 16px;
}

.pawpi-safety-report-card {
  display: grid;
  gap: 16px;
}

.pawpi-safety-report-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.pawpi-safety-report-header h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.28rem;
  font-weight: 950;
}

.pawpi-safety-report-header p {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.55;
}

.pawpi-safety-report-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pawpi-safety-report-status .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 950;
}

.pawpi-safety-report-status .status-pill.is-danger {
  background: rgba(214, 0, 0, 0.1);
  color: #d60000;
}

.pawpi-safety-report-status .status-pill.is-success {
  background: rgba(0, 180, 180, 0.14);
  color: #087b7b;
}

.pawpi-safety-report-status .status-pill.is-waiting {
  background: rgba(255, 186, 0, 0.16);
  color: #946200;
}

.pawpi-safety-report-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.pawpi-safety-report-facts div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
}

.pawpi-safety-report-facts dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pawpi-safety-report-facts dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.pawpi-safety-report-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px;
}

.pawpi-safety-report-status-form,
.pawpi-safety-report-restriction-form {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.82);
}

.pawpi-safety-report-restriction-form {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.pawpi-safety-report-status-form .field,
.pawpi-safety-report-restriction-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.pawpi-safety-report-status-form .field span,
.pawpi-safety-report-restriction-form .field span {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 950;
}

.pawpi-safety-report-status-form input,
.pawpi-safety-report-status-form select,
.pawpi-safety-report-restriction-form input,
.pawpi-safety-report-restriction-form select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  font-weight: 780;
}

.pawpi-safety-report-restriction-note {
  grid-column: span 2;
}

.pawpi-safety-empty {
  display: grid;
  gap: 8px;
}

.pawpi-safety-empty strong {
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 950;
}

.pawpi-safety-empty p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.94rem;
}

.pawpi-economy-reconciliation {
  display: grid;
  gap: 18px;
}

.pawpi-economy-reconciliation .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.pawpi-economy-reconciliation .status-pill.is-success {
  background: rgba(0, 168, 151, 0.12);
  color: #006b50;
}

.pawpi-economy-reconciliation .status-pill.is-danger {
  background: rgba(255, 0, 0, 0.1);
  color: #b00020;
}

.pawpi-economy-reconciliation-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pawpi-economy-reconciliation-stats div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.pawpi-economy-reconciliation-stats span,
.pawpi-economy-reconciliation-stats small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 850;
}

.pawpi-economy-reconciliation-stats strong {
  color: var(--foreground);
  font-size: 1.7rem;
  font-weight: 950;
  line-height: 1;
}

.pawpi-economy-reconciliation-alert {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(255, 0, 0, 0.18);
  border-radius: 18px;
  background: rgba(255, 0, 0, 0.045);
}

.pawpi-economy-reconciliation-alert strong {
  color: #b00020;
  font-size: 0.92rem;
  font-weight: 950;
}

.pawpi-economy-reconciliation-alert p {
  margin: 0;
  color: #6f1d1d;
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.55;
}

.pawpi-economy-reconciliation-alert ol,
.pawpi-economy-reconciliation-panel ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pawpi-economy-reconciliation-alert li,
.pawpi-economy-reconciliation-panel li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.07);
}

.pawpi-economy-reconciliation-alert li span,
.pawpi-economy-reconciliation-panel li span,
.pawpi-economy-reconciliation-panel li small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.pawpi-economy-reconciliation-alert li span:first-child,
.pawpi-economy-reconciliation-panel li strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 930;
  overflow-wrap: anywhere;
}

.pawpi-economy-reversal-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed rgba(15, 23, 42, 0.14);
}

.pawpi-economy-reversal-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.pawpi-economy-reversal-form label span {
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.pawpi-economy-reversal-form input,
.pawpi-economy-reversal-form select {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: #ffffff;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.pawpi-economy-reconciliation-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pawpi-economy-reconciliation-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.pawpi-economy-reconciliation-panel h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.pawpi-economy-reconciliation-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 820;
}

.pawpi-provider-event-inbox {
  display: grid;
  gap: 18px;
}

.pawpi-provider-event-inbox .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.pawpi-provider-event-inbox .status-pill.is-success,
.pawpi-provider-event-inbox .status-pill.is-provider-processed {
  background: rgba(0, 168, 151, 0.12);
  color: #006b50;
}

.pawpi-provider-event-inbox .status-pill.is-danger,
.pawpi-provider-event-inbox .status-pill.is-provider-failed {
  background: rgba(255, 0, 0, 0.1);
  color: #b00020;
}

.pawpi-provider-event-inbox .status-pill.is-provider-received {
  background: rgba(0, 128, 255, 0.1);
  color: #0b4f8a;
}

.pawpi-provider-event-inbox .status-pill.is-provider-ignored {
  background: rgba(15, 23, 42, 0.08);
  color: var(--muted-foreground);
}

.pawpi-provider-event-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pawpi-provider-event-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 20px;
  background: rgba(248, 250, 252, 0.78);
}

.pawpi-provider-event-copy {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.pawpi-provider-event-title {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.pawpi-provider-event-title h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.pawpi-provider-event-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.pawpi-provider-event-facts div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: #ffffff;
}

.pawpi-provider-event-facts dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pawpi-provider-event-facts dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 860;
  overflow-wrap: anywhere;
}

.pawpi-provider-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pawpi-provider-event-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
  overflow-wrap: anywhere;
}

.pawpi-provider-event-error {
  margin: 0;
  color: #b00020;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.45;
}

.pawpi-provider-event-actions {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.pawpi-provider-event-actions form {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
}

.pawpi-provider-event-actions label {
  display: grid;
  gap: 5px;
}

.pawpi-provider-event-actions label span {
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.pawpi-provider-event-actions input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: #ffffff;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.pawpi-canonical-review-list {
  display: grid;
  gap: 18px;
}

.pawpi-canonical-review-item {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.pawpi-canonical-review-main {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
}

.pawpi-canonical-review-photo,
.pawpi-canonical-candidate-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #f4f5f6;
}

.pawpi-canonical-review-photo {
  aspect-ratio: 3 / 4;
  border-radius: 20px;
}

.pawpi-canonical-review-photo img,
.pawpi-canonical-candidate-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pawpi-canonical-review-photo span,
.pawpi-canonical-candidate-photo span {
  padding: 12px;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 850;
  text-align: center;
}

.pawpi-canonical-review-copy {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.pawpi-canonical-review-title {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.pawpi-canonical-review-title h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 950;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.pawpi-canonical-review-facts {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}

.pawpi-canonical-review-facts div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  background: #f7f8fa;
}

.pawpi-canonical-review-facts dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pawpi-canonical-review-facts dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 880;
  overflow-wrap: anywhere;
}

.pawpi-canonical-review-owner,
.pawpi-canonical-candidate-meta,
.pawpi-canonical-candidate-reasons,
.pawpi-canonical-visual-meter,
.pawpi-canonical-ai-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pawpi-canonical-review-owner span,
.pawpi-canonical-candidate-meta span,
.pawpi-canonical-candidate-reasons span,
.pawpi-canonical-visual-meter span,
.pawpi-canonical-ai-meter span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.pawpi-canonical-candidates {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: #f8fafc;
}

.pawpi-canonical-candidates-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.pawpi-canonical-candidates-head strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.pawpi-canonical-candidates-head span,
.pawpi-canonical-no-candidates {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
}

.pawpi-canonical-candidate-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pawpi-canonical-candidate {
  display: grid;
  gap: 12px;
  grid-template-columns: 104px minmax(0, 1fr);
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
}

.pawpi-canonical-candidate.is-high {
  border-color: rgba(255, 0, 51, 0.24);
  background: linear-gradient(180deg, rgba(255, 0, 51, 0.045), #ffffff 62%);
}

.pawpi-canonical-candidate.is-medium {
  border-color: rgba(0, 128, 255, 0.18);
}

.pawpi-canonical-candidate-photo {
  aspect-ratio: 3 / 4;
  border-radius: 15px;
}

.pawpi-canonical-candidate-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.pawpi-canonical-candidate-title {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.pawpi-canonical-candidate-title strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.pawpi-canonical-candidate-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 30px;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 950;
}

.pawpi-canonical-candidate-copy p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 850;
}

.pawpi-canonical-candidate-reasons span {
  background: rgba(255, 0, 51, 0.075);
}

.pawpi-canonical-visual-meter span {
  background: rgba(0, 128, 255, 0.075);
  color: #0b4f8a;
}

.pawpi-canonical-ai-meter span {
  background: rgba(111, 66, 193, 0.09);
  color: #4c1d95;
}

.pawpi-canonical-no-candidates {
  padding: 12px 14px;
  border-radius: 18px;
  background: #f7f8fa;
}

.pawpi-canonical-generation-panel {
  display: grid;
  gap: 14px;
  grid-template-columns: 112px minmax(0, 1fr);
  padding: 14px;
  border: 1px solid rgba(0, 128, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 128, 255, 0.045), #ffffff);
}

.pawpi-canonical-generation-media {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: #f4f5f6;
}

.pawpi-canonical-generation-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pawpi-canonical-generation-media span {
  padding: 10px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 860;
  text-align: center;
}

.pawpi-canonical-generation-copy {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.pawpi-canonical-generation-title {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.pawpi-canonical-generation-title h4 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.pawpi-canonical-generation-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.5;
}

.pawpi-canonical-generation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pawpi-canonical-generation-meta span,
.pawpi-canonical-review-item .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.pawpi-canonical-review-item .status-pill.is-success {
  background: rgba(0, 166, 126, 0.12);
  color: #006b50;
}

.pawpi-canonical-review-item .status-pill.is-waiting {
  background: rgba(0, 128, 255, 0.11);
  color: #0b4f8a;
}

.pawpi-canonical-review-item .status-pill.is-danger {
  background: rgba(255, 0, 51, 0.11);
  color: #b00020;
}

.pawpi-canonical-policy-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 128, 255, 0.14);
  border-radius: 16px;
  background: rgba(0, 128, 255, 0.045);
}

.pawpi-canonical-policy-note strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
}

.pawpi-canonical-policy-note span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
}

.pawpi-canonical-generation-actions {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 0, 51, 0.16);
  border-radius: 16px;
  background: rgba(255, 0, 51, 0.04);
}

.pawpi-canonical-generation-actions > div:first-child {
  display: grid;
  gap: 4px;
}

.pawpi-canonical-generation-actions strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
}

.pawpi-canonical-generation-actions span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.45;
}

.pawpi-canonical-audit-strip {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.035);
}

.pawpi-exact-location-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255, 0, 51, 0.14);
  border-radius: 18px;
  background: rgba(255, 0, 51, 0.035);
}

.pawpi-exact-location-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.pawpi-canonical-audit-strip strong,
.admin-inline-form-title-row strong,
.pawpi-exact-location-head strong,
.pawpi-exact-location-log strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 930;
}

.pawpi-exact-location-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
}

.pawpi-exact-location-reason {
  margin: 0;
}

.pawpi-exact-location-reason input {
  width: 100%;
}

.pawpi-exact-location-result,
.pawpi-exact-location-log {
  display: grid;
  gap: 8px;
}

.pawpi-exact-location-result span {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 930;
}

.pawpi-exact-location-result a {
  justify-self: start;
  color: #d1002a;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.pawpi-exact-location-result small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.45;
}

.pawpi-canonical-audit-strip div,
.pawpi-exact-location-log div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pawpi-canonical-audit-strip span,
.pawpi-exact-location-log span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-inline-form-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.pawpi-first-finder-policy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
  border-color: rgba(255, 0, 51, 0.12);
  background: linear-gradient(135deg, rgba(255, 0, 51, 0.045), #ffffff 55%);
}

.pawpi-first-finder-policy h2 {
  margin: 3px 0 0;
  color: var(--foreground);
  font-size: 1.1rem;
  font-weight: 950;
}

.pawpi-first-finder-policy p {
  max-width: 78ch;
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.5;
}

.pawpi-first-finder-list {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.pawpi-first-finder-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
}

.pawpi-first-finder-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.pawpi-first-finder-header h2 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 950;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.pawpi-first-finder-header p {
  margin: 5px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 780;
}

.pawpi-first-finder-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.pawpi-first-finder-status .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 920;
}

.pawpi-first-finder-status .status-pill.is-success {
  background: rgba(0, 168, 151, 0.12);
  color: #006b50;
}

.pawpi-first-finder-status .status-pill.is-waiting {
  background: rgba(255, 186, 0, 0.16);
  color: #946200;
}

.pawpi-first-finder-status .status-pill.is-danger {
  background: rgba(255, 0, 0, 0.1);
  color: #b00020;
}

.pawpi-first-finder-eligibility-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 10px 12px;
  border: 1px solid rgba(255, 186, 0, 0.18);
  border-radius: 16px;
  background: rgba(255, 251, 235, 0.72);
}

.pawpi-first-finder-eligibility-note strong {
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 950;
}

.pawpi-first-finder-eligibility-note span {
  color: #7a4d00;
  font-size: 0.8rem;
  font-weight: 820;
}

.pawpi-first-finder-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.pawpi-first-finder-facts div {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  background: #f7f8fa;
}

.pawpi-first-finder-facts dt {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pawpi-first-finder-facts dd {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 860;
  overflow-wrap: anywhere;
}

.pawpi-first-finder-review-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #f8fafc;
}

.pawpi-first-finder-review-form .field {
  min-width: 0;
}

.pawpi-first-finder-review-form select,
.pawpi-first-finder-review-form input {
  width: 100%;
}

.pawpi-first-finder-note {
  grid-column: span 2;
}

.pawpi-first-finder-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  text-align: center;
}

.pawpi-first-finder-empty strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.pawpi-first-finder-empty p {
  margin: 0 auto;
  max-width: 56ch;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .pawpi-economy-form-grid,
  .pawpi-economy-result-grid,
  .pawpi-account-restriction-form,
  .pawpi-account-restriction-release-form,
  .pawpi-economy-refund-item,
  .pawpi-economy-refund-facts,
  .pawpi-economy-restriction-item,
  .pawpi-safety-report-header,
  .pawpi-safety-report-facts,
  .pawpi-safety-report-actions,
  .pawpi-safety-report-restriction-form,
  .pawpi-economy-reconciliation-stats,
  .pawpi-economy-reconciliation-grid,
  .pawpi-provider-event-item,
  .pawpi-provider-event-facts,
  .pawpi-first-finder-policy,
  .pawpi-first-finder-facts,
  .pawpi-first-finder-review-form {
    grid-template-columns: 1fr;
  }

  .pawpi-account-restriction-form-note {
    grid-column: auto;
  }

  .pawpi-safety-report-status {
    justify-content: flex-start;
  }

  .pawpi-safety-report-restriction-note {
    grid-column: auto;
  }

  .pawpi-first-finder-note {
    grid-column: auto;
  }

  .pawpi-canonical-review-main,
  .pawpi-canonical-candidate-grid,
  .pawpi-canonical-generation-panel,
  .pawpi-canonical-candidate {
    grid-template-columns: 1fr;
  }

  .pawpi-canonical-review-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pawpi-canonical-candidate-photo {
    width: min(100%, 168px);
  }

  .pawpi-canonical-generation-media {
    width: min(100%, 168px);
  }
}

@media (max-width: 520px) {
  .pawpi-canonical-review-item {
    padding: 14px;
    border-radius: 18px;
  }

  .pawpi-canonical-review-facts {
    grid-template-columns: 1fr;
  }

  .pawpi-first-finder-card {
    padding: 14px;
    border-radius: 18px;
  }

  .pawpi-first-finder-status {
    justify-content: flex-start;
  }
}

.account-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

.account-nav-icon svg {
  width: 100%;
  height: 100%;
}

.account-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.82rem;
}

.record-card {
  gap: 14px;
}

.record-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-header {
  display: grid;
  gap: 6px;
}

.record-meta-list,
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.record-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.record-status-note,
.record-secondary-copy {
  font-size: 0.94rem;
  line-height: 1.58;
}

.record-note {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background: #f6fbff;
}

.admin-workbench-band {
  padding-top: 24px;
}

.admin-workbench {
  display: grid;
  gap: 14px;
}

.admin-workbench-header,
.admin-workbench-status-bar,
.admin-workbench-list-panel,
.admin-application-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.admin-workbench-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
}

.admin-workbench-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.admin-workbench-title span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-workbench-title h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.42rem, 2.4vw, 2rem);
  line-height: 1;
}

.admin-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-workbench-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 20px;
}

.admin-workbench-status-bar span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  overflow: hidden;
}

.admin-workbench-status-bar strong {
  color: var(--foreground);
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-card-admin-command-center {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.field-card-admin-command-copy {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.field-card-admin-command-copy > span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: #fff2f2;
  color: #c9181f;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-card-admin-command-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.28rem, 2.3vw, 2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.field-card-admin-command-copy p {
  max-width: 620px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.55;
}

.field-card-admin-queue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.field-card-admin-queue-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 18px;
  background: #f7f8f9;
}

.field-card-admin-queue-card > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.field-card-admin-queue-card > strong {
  color: var(--foreground);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 950;
  line-height: 1;
}

.field-card-admin-queue-card h3,
.field-card-admin-queue-card p {
  margin: 0;
}

.field-card-admin-queue-card h3 {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 930;
}

.field-card-admin-queue-card p {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.45;
}

.field-card-admin-queue-card.is-urgent {
  border-color: rgba(201, 24, 31, 0.24);
  background: #fff4f4;
}

.field-card-admin-queue-card.is-warning {
  border-color: rgba(245, 181, 68, 0.28);
  background: #fff8e8;
}

.field-card-admin-primary-metrics {
  padding: 8px;
}

.field-card-admin-primary-metrics span {
  min-height: 40px;
  padding: 0 14px;
  background: #fff;
}

.field-card-admin-primary-metrics strong {
  font-size: 1rem;
}

.field-card-admin-secondary-metrics {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.field-card-admin-secondary-metrics summary {
  min-height: 42px;
  padding: 12px 14px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 900;
}

.field-card-admin-secondary-metrics .admin-workbench-status-bar {
  margin: 0 10px 10px;
  border: 0;
  box-shadow: none;
}

.admin-workbench-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.32fr);
  gap: 14px;
  align-items: start;
}

.admin-workbench-grid.is-cats {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
}

.admin-workbench-grid.is-shorts {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.42fr);
}

.admin-workbench-editor {
  min-width: 0;
}

.admin-workbench-list-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border-radius: 22px;
  position: sticky;
  top: 88px;
}

.admin-workbench-library {
  min-width: 0;
}

.admin-workbench-grid.is-cats .admin-workbench-library {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 24;
  align-self: start;
}

.admin-workbench-grid.is-cats .admin-workbench-editor {
  max-width: 100%;
  overflow: visible;
}

.admin-cat-library-panel {
  position: static;
  max-height: calc(100vh - 16px);
}

.admin-cat-library-list.is-scrollable {
  max-height: calc(100vh - 138px);
  min-height: min(420px, calc(100vh - 138px));
}

.admin-cat-library-record {
  grid-template-columns: 58px minmax(0, 1fr);
  min-height: 84px;
  align-items: start;
  padding: 10px;
}

.admin-cat-library-record .admin-workbench-record-thumb {
  width: 58px;
  height: 58px;
  border-radius: 14px;
}

.admin-cat-library-record .admin-workbench-record-copy {
  gap: 5px;
}

.admin-cat-library-record .admin-workbench-record-copy strong {
  font-size: 0.94rem;
}

.admin-cat-library-record .admin-workbench-record-copy > span:not(.admin-workbench-record-kicker):not(.admin-workbench-record-meta) {
  -webkit-line-clamp: 1;
}

.admin-cat-library-record .admin-workbench-record-meta {
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  padding-top: 1px;
}

.admin-cat-library-record .admin-workbench-record-meta small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-cat-library-hint {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  background: #f6fbff;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
}

.admin-workbench-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--border-soft);
}

.admin-workbench-panel-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.1;
}

.admin-workbench-panel-head > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.35);
  background: #fff4c6;
  color: var(--foreground);
  font-weight: 950;
}

.outreach-panel-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.76);
}

.outreach-panel-count {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.admin-workbench-record-list {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
}

.admin-workbench-record-list.is-scrollable {
  max-height: calc(100vh - 260px);
  min-height: 360px;
  overflow: auto;
  padding-right: 2px;
}

.admin-workbench-record {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  align-self: start;
  min-height: 94px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.admin-workbench-record:hover,
.admin-workbench-record:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.26);
  box-shadow: var(--shadow-card);
}

.admin-workbench-record.is-active {
  border-color: rgba(255, 200, 0, 0.58);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 34%),
    #fffaf0;
}

.admin-workbench-record.is-video {
  grid-template-columns: 104px minmax(0, 1fr);
}

.admin-workbench-record-thumb {
  position: relative;
  display: block;
  width: 74px;
  height: 74px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
}

.admin-workbench-record.is-video .admin-workbench-record-thumb {
  width: 104px;
  height: 58px;
  border-radius: 14px;
}

.admin-workbench-record-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-workbench-record-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-workbench-record-kicker,
.admin-workbench-record-copy > span:not(.admin-workbench-record-meta) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-workbench-record-kicker {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-workbench-record-copy strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-workbench-record-copy > span:not(.admin-workbench-record-kicker):not(.admin-workbench-record-meta) {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-workbench-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-workbench-record-meta small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.055);
  color: var(--foreground);
  font-size: 0.7rem;
  font-weight: 850;
}

.admin-workbench-record-meta .outreach-reply-state-pill {
  border: 1px solid rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.14);
  color: var(--foreground);
}

.admin-workbench-record-meta .outreach-reply-state-pill.is-new {
  border-color: rgba(11, 105, 183, 0.22);
  background: rgba(11, 105, 183, 0.12);
}

.admin-workbench-record-meta .outreach-reply-state-pill.is-drafted {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.18);
}

.admin-workbench-record-meta .outreach-reply-state-pill.is-replied {
  border-color: rgba(86, 207, 174, 0.26);
  background: rgba(86, 207, 174, 0.16);
}

.admin-workbench-record-meta .outreach-reply-state-pill.is-muted {
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(148, 163, 184, 0.13);
  color: var(--muted-foreground);
}

.admin-workbench-alert {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 122, 102, 0.28);
  background: #fff5f2;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 780;
}

.admin-workbench-search {
  display: grid;
  gap: 8px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.055), transparent 30%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045);
}

.admin-workbench-search span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-workbench-search input {
  width: 100%;
  min-height: 42px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 820;
  outline: 0;
}

.admin-workbench-search input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.76;
}

.admin-workbench-search:focus-within {
  border-color: rgba(11, 105, 183, 0.24);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(11, 105, 183, 0.09);
}

.outreach-status-menu {
  position: relative;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.outreach-status-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px 0 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.outreach-status-menu summary:hover,
.outreach-status-menu summary:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(11, 105, 183, 0.08);
  outline: 0;
}

.outreach-status-menu summary::-webkit-details-marker {
  display: none;
}

.outreach-status-menu summary > span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.outreach-status-menu summary strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.outreach-status-menu summary::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid var(--muted-foreground);
}

.outreach-status-menu[open] summary::after {
  transform: rotate(180deg);
}

.outreach-status-menu-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 180px;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.outreach-status-menu-options button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.outreach-status-menu-options button:hover,
.outreach-status-menu-options button:focus-visible,
.outreach-status-menu-options button.is-active {
  background: rgba(255, 200, 0, 0.16);
  outline: 0;
}

.outreach-status-menu-options button > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  font-weight: 950;
}

.outreach-status-menu-options button strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-application-queue {
  display: grid;
  gap: 12px;
}

.admin-application-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
}

.field-card-admin-case.is-urgent {
  border-color: rgba(201, 24, 31, 0.16);
}

.field-card-admin-case.is-warning {
  border-color: rgba(245, 181, 68, 0.22);
}

.field-card-operator-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  background: #f7f8f9;
}

.field-card-operator-task > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-card-operator-task strong,
.field-card-operator-task p {
  margin: 0;
}

.field-card-operator-task strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 940;
}

.field-card-operator-task p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.field-card-operator-task.is-urgent {
  border-color: rgba(201, 24, 31, 0.2);
  background: #fff4f4;
}

.field-card-operator-task.is-urgent > span {
  background: #c9181f;
  color: #fff;
}

.field-card-operator-task.is-warning {
  border-color: rgba(245, 181, 68, 0.28);
  background: #fff8e8;
}

.field-card-operator-task.is-warning > span {
  background: #ffc800;
  color: #111;
}

.field-card-operator-task.is-ready {
  border-color: rgba(44, 219, 200, 0.28);
  background: #e9fbfa;
}

.field-card-operator-task.is-ready > span {
  background: #2cdbc8;
  color: #063c39;
}

.admin-application-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.admin-application-kind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.42);
  background: #fff2be;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-application-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-application-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.08rem, 1.6vw, 1.34rem);
  line-height: 1.12;
}

.admin-application-copy p,
.admin-application-note {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-application-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-application-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-application-note {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  background: #f6fbff;
}

.field-card-review-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  width: 72px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(25, 25, 25, 0.1);
  border-radius: 18px;
  background: #f2f4f5;
  box-shadow: 0 10px 24px rgba(25, 25, 25, 0.08);
}

.field-card-review-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-card-review-thumb.is-empty {
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: repeating-linear-gradient(
    -45deg,
    #f4f6f7,
    #f4f6f7 8px,
    #eceff1 8px,
    #eceff1 16px
  );
}

.field-card-source-photo-placeholder {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
}

.field-card-review-gate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(11, 105, 183, 0.24);
  background: #eaf6ff;
}

.field-card-review-gate p {
  margin: 4px 0 0;
}

.field-card-review-checks {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 420px;
}

.field-card-review-checks span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-review-checks span.is-ok {
  border-color: rgba(44, 219, 200, 0.44);
  background: #e9fbfa;
  color: var(--foreground);
}

.field-card-review-checks span.is-waiting {
  border-color: rgba(245, 181, 68, 0.44);
  background: #fff8e8;
  color: var(--foreground);
}

.field-card-generated-review-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(25, 25, 25, 0.08);
  background: #fff;
}

.field-card-generated-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.field-card-generated-review-heading p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
}

.field-card-generated-review-heading span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0f0;
  color: #c9181f;
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-generated-review-heading span.is-approved {
  background: #e9fbfa;
  color: #087b7b;
}

.field-card-generated-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.field-card-generated-review-grid figure {
  display: grid;
  gap: 8px;
  margin: 0;
}

.field-card-generated-review-grid figure > span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-generated-review-grid img,
.field-card-generated-review-empty,
.field-card-source-photo-missing {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 18px;
  background: #f4f6f7;
}

.field-card-source-photo-missing {
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 18px;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 22%, rgba(201, 24, 31, 0.08), transparent 34%),
    #f7f8f9;
  color: var(--muted-foreground);
  text-align: center;
}

.field-card-source-photo-missing strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 940;
}

.field-card-source-photo-missing span,
.field-card-source-photo-missing small {
  font-size: 0.75rem;
  font-weight: 820;
  line-height: 1.35;
}

.field-card-source-photo-missing small {
  opacity: 0.72;
}

.field-card-generated-review-grid img {
  display: block;
  height: auto;
  object-fit: cover;
}

.field-card-generated-review-grid .is-generated img {
  object-fit: contain;
  background: #f7f7f7;
}

.field-card-generated-review-empty {
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 900;
}

.field-card-generated-review-checks {
  justify-content: flex-start;
  max-width: none;
}

.field-card-generated-review-actions {
  display: grid;
  gap: 10px;
}

.field-card-generated-review-action-guide {
  padding: 12px;
  border: 1px solid rgba(44, 219, 200, 0.24);
  border-radius: 16px;
  background: #f1fffd;
}

.field-card-generated-review-action-guide strong,
.field-card-generated-review-action-guide p {
  margin: 0;
}

.field-card-generated-review-action-guide strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 930;
}

.field-card-generated-review-action-guide p {
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 730;
  line-height: 1.45;
}

.field-card-generated-review-primary-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 16px;
  background: #fff;
}

.field-card-generated-review-primary-action .button {
  min-height: 42px;
  border-color: rgba(44, 219, 200, 0.52);
  background: #2cdbc8;
  color: #071f1d;
}

.field-card-generated-review-secondary-actions {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 16px;
  background: #fff;
}

.field-card-generated-review-secondary-actions summary {
  min-height: 40px;
  padding: 11px 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.field-card-generated-review-secondary-actions > div {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.field-card-generated-review-actions .button-row,
.field-card-generated-review-primary-action {
  justify-content: flex-start;
}

.field-card-generated-review-actions input,
.field-card-generated-review-actions select {
  min-height: 38px;
  border: 1px solid rgba(25, 25, 25, 0.12);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.field-card-generated-review-actions input {
  width: min(190px, 34vw);
  padding: 0 10px;
}

.field-card-generated-review-actions select {
  width: min(230px, 48vw);
  padding: 0 30px 0 10px;
}

.field-card-admin-advanced-actions {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 16px;
  background: #fff;
}

.field-card-admin-advanced-actions summary {
  min-height: 40px;
  padding: 11px 13px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 930;
}

.field-card-admin-advanced-actions > .button-row {
  padding: 0 12px 12px;
}

.field-card-payout-event-panel {
  display: grid;
  gap: 8px;
}

.field-card-payout-event-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-card-payout-event-row {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid rgba(11, 105, 183, 0.1);
}

.field-card-payout-event-main,
.field-card-payout-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.field-card-payout-event-main span,
.field-card-payout-event-meta span {
  overflow-wrap: anywhere;
}

.field-card-payout-event-main span {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 880;
}

.field-card-payout-event-meta span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
}

.field-card-generation-command {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.field-card-generation-command > div:first-child {
  display: grid;
  gap: 5px;
}

.field-card-generation-command h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.field-card-generation-command p {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.55;
}

.field-card-generation-command .is-ready,
.field-card-generation-command .is-blocked {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.field-card-generation-command .is-ready {
  background: #e9fbfa;
  color: #007f78;
}

.field-card-generation-command .is-blocked {
  background: #fff2f2;
  color: #b42318;
}

.field-card-generation-command-stats,
.field-card-generation-command-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-card-generation-command-stats span,
.field-card-generation-command-warnings span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f7f8f9;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
}

.field-card-generation-command-stats strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.field-card-generation-command-warnings span {
  background: #fff8e8;
  color: #92400e;
}

.field-card-generation-failures {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-card-generation-failures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.field-card-generation-failure-copy,
.field-card-generation-failure-actions,
.field-card-generation-failure-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.field-card-generation-failure-actions {
  justify-content: flex-end;
}

.field-card-generation-failure-actions input {
  width: min(190px, 34vw);
}

.field-card-generation-failures strong,
.field-card-generation-failures span,
.field-card-generation-failures small {
  overflow-wrap: anywhere;
}

.field-card-generation-failures strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.field-card-generation-failures span,
.field-card-generation-failures small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 760;
}

.field-card-generation-failures .field-card-generation-failure-status {
  color: #0b69b7;
  font-weight: 900;
}

.field-card-generation-refund-button {
  border-color: rgba(180, 35, 24, 0.24);
  color: #b42318;
}

.field-card-generation-provider-refund-button {
  border-color: rgba(11, 105, 183, 0.24);
  color: #0b69b7;
}

@media (max-width: 760px) {
  .field-card-generation-failures li {
    grid-template-columns: 1fr;
  }

  .field-card-generation-failure-actions {
    justify-content: flex-start;
  }

  .field-card-generation-failure-actions input {
    width: min(100%, 220px);
  }
}

.outreach-console {
  display: grid;
  gap: 14px;
}

.outreach-grid {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.42fr);
}

.outreach-list-panel {
  top: 88px;
}

.outreach-record {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.outreach-record-avatar {
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 200, 0, 0.32);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(11, 105, 183, 0.11));
  color: var(--foreground);
  font-size: 1.2rem;
  font-weight: 950;
}

.outreach-record-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outreach-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.outreach-campaign-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.outreach-campaign-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.055), transparent 30%),
    rgba(255, 255, 255, 0.94);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.outreach-campaign-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-campaign-card strong {
  color: var(--foreground);
  font-size: 1.45rem;
  font-weight: 960;
  line-height: 1;
}

.outreach-campaign-card small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.4);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.17), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-create-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.outreach-create-card summary::-webkit-details-marker {
  display: none;
}

.outreach-create-card summary span,
.outreach-note-grid span,
.outreach-revision-form span,
.outreach-form-grid label > span,
.outreach-draft-generator label > span,
.outreach-message-editor label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-create-card summary strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
  text-align: right;
}

.outreach-form-grid,
.outreach-draft-generator {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.outreach-form-grid label,
.outreach-draft-generator label,
.outreach-message-editor label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-field-help {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-form-grid input,
.outreach-form-grid select,
.outreach-form-grid textarea,
.outreach-draft-generator input,
.outreach-draft-generator select,
.outreach-draft-generator textarea,
.outreach-message-editor input,
.outreach-message-editor textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.outreach-form-grid textarea,
.outreach-draft-generator textarea,
.outreach-message-editor textarea {
  resize: vertical;
  line-height: 1.5;
}

.outreach-field-wide,
.outreach-form-grid .button,
.outreach-draft-generator .button {
  grid-column: 1 / -1;
}

.outreach-detail-head,
.outreach-message-head,
.outreach-send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.outreach-detail-head h2,
.outreach-message-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.2rem, 2vw, 1.64rem);
  line-height: 1.08;
}

.outreach-detail-head p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.outreach-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.outreach-note-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
}

.outreach-note-grid p {
  margin: 0;
  color: var(--foreground);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.outreach-research-card {
  border-color: rgba(11, 105, 183, 0.14);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 28%),
    rgba(255, 255, 255, 0.96);
}

.outreach-research-runs {
  display: grid;
  gap: 8px;
}

.outreach-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.outreach-prompt-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.outreach-prompt-chip strong {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-prompt-chip span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 820;
  text-transform: capitalize;
}

.outreach-prompt-chip.is-active {
  border-color: rgba(255, 200, 0, 0.42);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-research-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
}

.outreach-research-run > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-research-run span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: capitalize;
}

.outreach-research-run strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-research-run small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
}

.outreach-message-editor {
  display: grid;
  gap: 13px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.outreach-detail-card.has-draft .outreach-contact-hero {
  order: 1;
}

.outreach-detail-card.has-draft .outreach-message-editor {
  order: 2;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(86, 207, 174, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.outreach-detail-card.has-draft .outreach-next-step {
  order: 3;
}

.outreach-detail-card.has-draft .outreach-contact-summary {
  order: 4;
}

.outreach-detail-card.has-draft .outreach-draft-generator {
  display: none;
}

.outreach-detail-card.has-draft .outreach-message-head {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.outreach-detail-card.has-draft .outreach-message-head h3 {
  font-size: clamp(1.36rem, 2.3vw, 1.9rem);
}

.outreach-detail-card.has-draft .outreach-message-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.45;
}

.outreach-detail-card.has-draft #outreach-body {
  min-height: clamp(360px, 46vh, 560px);
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.6;
}

.outreach-detail-card.has-draft #outreach-subject {
  font-size: 1rem;
  font-weight: 880;
}

.outreach-editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.86fr);
  gap: 12px;
}

.outreach-editor-tool-card,
.outreach-editor-approve-card {
  display: grid;
  gap: 12px;
  align-content: space-between;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-editor-approve-card {
  border-color: rgba(86, 207, 174, 0.32);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.14), transparent 34%),
    rgba(246, 253, 250, 0.96);
}

.outreach-editor-tool-card > div:first-child,
.outreach-editor-approve-card > div:first-child {
  display: grid;
  gap: 5px;
}

.outreach-editor-tool-card span,
.outreach-editor-approve-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-editor-tool-card strong,
.outreach-editor-approve-card strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-editor-tool-card p,
.outreach-editor-approve-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-editor-tool-card .button-row {
  justify-content: flex-start;
}

.outreach-autosave-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-top: 4px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 850;
}

.outreach-autosave-pill > span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.68);
}

.outreach-autosave-pill strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-autosave-pill.is-dirty > span {
  background: #d99700;
}

.outreach-autosave-pill.is-saving > span {
  animation: outreach-autosave-pulse 1s ease-in-out infinite;
  background: #0b69b7;
}

.outreach-autosave-pill.is-saved > span {
  background: #35b78f;
}

.outreach-autosave-pill.is-error > span {
  background: #d84d4d;
}

@keyframes outreach-autosave-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.outreach-editor-approve-card .button {
  justify-self: start;
}

.outreach-review-helper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-queue-helper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-queue-helper > div,
.outreach-review-helper > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 36%),
    rgba(248, 250, 252, 0.92);
}

.outreach-queue-helper span,
.outreach-review-helper span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.18);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
}

.outreach-queue-helper strong,
.outreach-queue-helper p,
.outreach-review-helper strong,
.outreach-review-helper p {
  margin: 0;
}

.outreach-queue-helper strong,
.outreach-review-helper strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-queue-helper p,
.outreach-review-helper p {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-draft-generator.is-queue-primary {
  border-color: rgba(86, 207, 174, 0.26);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(248, 250, 252, 0.94);
}

.outreach-revision-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-revision-form > div {
  display: grid;
  gap: 4px;
}

.outreach-revision-form strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 930;
}

.outreach-revision-form p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.4;
}

.outreach-revision-form textarea {
  width: 100%;
  min-height: 86px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
  line-height: 1.5;
  resize: vertical;
}

.outreach-revise-pill {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
  color: var(--foreground);
}

.outreach-revise-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
}

.outreach-revise-modal {
  display: grid;
  width: min(560px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  gap: 14px;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.outreach-revise-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.outreach-revise-modal-head span,
.outreach-revise-modal-form label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-revise-modal-head h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.18rem, 2.2vw, 1.54rem);
  line-height: 1.05;
}

.outreach-revise-modal-form {
  display: grid;
  gap: 12px;
}

.outreach-revise-modal-form label {
  display: grid;
  gap: 8px;
}

.outreach-revise-working {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-revise-working strong,
.outreach-revise-working p {
  margin: 0;
}

.outreach-revise-working strong {
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 950;
}

.outreach-revise-working p {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.42;
}

.outreach-revise-modal-form textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
  line-height: 1.5;
  resize: vertical;
}

.outreach-revise-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.outreach-revise-examples button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 880;
}

.outreach-revise-examples button:hover {
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.12);
}

.outreach-revise-examples button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.outreach-send-row {
  justify-content: flex-start;
  padding-top: 4px;
}

.outreach-approved-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-approved-next > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-approved-next span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-approved-next strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-approved-next p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-toast {
  min-height: 24px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 820;
}

html[data-theme="dark"] .admin-workbench-header,
html[data-theme="dark"] .admin-workbench-status-bar,
html[data-theme="dark"] .admin-workbench-list-panel,
html[data-theme="dark"] .admin-application-card,
html[data-theme="dark"] .outreach-filter-drawer,
html[data-theme="dark"] .outreach-campaign-card,
html[data-theme="dark"] .outreach-card {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .admin-workbench-status-bar span,
html[data-theme="dark"] .admin-workbench-record,
html[data-theme="dark"] .admin-application-meta span,
html[data-theme="dark"] .admin-application-note,
html[data-theme="dark"] .admin-cat-library-hint,
html[data-theme="dark"] .admin-workbench-search,
html[data-theme="dark"] .outreach-panel-head-actions,
html[data-theme="dark"] .outreach-panel-count,
html[data-theme="dark"] .outreach-status-menu,
html[data-theme="dark"] .outreach-status-menu summary > span,
html[data-theme="dark"] .outreach-status-menu-options,
html[data-theme="dark"] .outreach-status-menu-options button > span,
html[data-theme="dark"] .outreach-note-grid > div,
html[data-theme="dark"] .outreach-form-grid input,
html[data-theme="dark"] .outreach-form-grid select,
html[data-theme="dark"] .outreach-form-grid textarea,
html[data-theme="dark"] .outreach-draft-generator input,
html[data-theme="dark"] .outreach-draft-generator select,
html[data-theme="dark"] .outreach-draft-generator textarea,
html[data-theme="dark"] .outreach-message-editor input,
html[data-theme="dark"] .outreach-message-editor textarea,
html[data-theme="dark"] .outreach-queue-helper > div,
html[data-theme="dark"] .outreach-review-helper > div,
html[data-theme="dark"] .outreach-revision-form,
html[data-theme="dark"] .outreach-revision-form textarea,
html[data-theme="dark"] .outreach-revise-modal,
html[data-theme="dark"] .outreach-decision-modal,
html[data-theme="dark"] .outreach-revise-modal-form textarea,
html[data-theme="dark"] .outreach-revise-examples button,
html[data-theme="dark"] .outreach-revise-working,
html[data-theme="dark"] .outreach-decision-form select,
html[data-theme="dark"] .outreach-decision-form textarea,
html[data-theme="dark"] .outreach-decision-warning,
html[data-theme="dark"] .outreach-contact-summary-meta span,
html[data-theme="dark"] .outreach-queue-decision-bar,
html[data-theme="dark"] .outreach-decision-card,
html[data-theme="dark"] .outreach-contact-route,
html[data-theme="dark"] .outreach-editor-tool-card,
html[data-theme="dark"] .outreach-autosave-pill,
html[data-theme="dark"] .outreach-editor-approve-card,
html[data-theme="dark"] .outreach-approved-next {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .outreach-revise-overlay {
  background: rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] .outreach-revise-modal {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.98);
}

html[data-theme="dark"] .outreach-detail-card.has-draft .outreach-message-editor {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(15, 20, 18, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .outreach-detail-card.has-draft #outreach-body {
  background: rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-editor-approve-card {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-filter-drawer summary::after {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .admin-workbench-record.is-active,
html[data-theme="dark"] .admin-application-kind,
html[data-theme="dark"] .outreach-status-menu-options button.is-active,
html[data-theme="dark"] .outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 200, 0, 0.11);
}

html[data-theme="dark"] .outreach-research-run {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-prompt-chip {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-prompt-chip.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .outreach-research-run span {
  background: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .admin-workbench-search:focus-within {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(8, 12, 10, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .admin-workbench-record-thumb {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .admin-workbench-panel-head {
  border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .admin-workbench-panel-head span,
html[data-theme="dark"] .admin-workbench-record-meta small {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.1);
  color: var(--foreground);
}

html[data-theme="dark"] .admin-workbench-alert {
  border-color: rgba(255, 122, 102, 0.32);
  background: rgba(68, 28, 24, 0.62);
}

@media (max-width: 980px) {
  .admin-workbench-grid,
  .admin-workbench-grid.is-cats,
  .admin-workbench-grid.is-shorts {
    grid-template-columns: 1fr;
  }

  .admin-workbench-grid.is-cats .admin-workbench-library {
    position: static;
  }

  .admin-workbench-list-panel {
    position: static;
  }

  .admin-workbench-record-list.is-scrollable {
    max-height: none;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .admin-workbench-band {
    padding-top: 14px;
  }

  .admin-workbench-header,
  .admin-workbench-status-bar,
  .admin-workbench-list-panel,
  .admin-application-card {
    border-radius: 18px;
  }

  .admin-workbench-header {
    padding: 12px;
  }

  .admin-workbench-actions,
  .admin-workbench-actions .button-row,
  .admin-workbench-actions .button {
    width: 100%;
  }

  .field-card-admin-command-center,
  .field-card-admin-queue-grid {
    grid-template-columns: 1fr;
  }

  .field-card-operator-task {
    grid-template-columns: 1fr;
  }

  .outreach-revision-form {
    grid-template-columns: 1fr;
  }

  .outreach-queue-helper,
  .outreach-review-helper {
    grid-template-columns: 1fr;
  }

  .admin-workbench-record,
  .admin-workbench-record.is-video {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .outreach-record {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .outreach-record-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .admin-workbench-record-thumb,
  .admin-workbench-record.is-video .admin-workbench-record-thumb {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }

  .admin-application-main {
    flex-direction: column;
  }

  .field-card-review-gate {
    flex-direction: column;
  }

  .field-card-review-checks {
    justify-content: flex-start;
    max-width: none;
  }

  .field-card-generated-review-heading,
  .field-card-generated-review-grid {
    grid-template-columns: 1fr;
  }

  .field-card-generated-review-heading {
    flex-direction: column;
  }

  .field-card-generated-review-primary-action,
  .field-card-generated-review-primary-action input,
  .field-card-generated-review-primary-action .button,
  .field-card-generated-review-secondary-actions .button-row,
  .field-card-generated-review-secondary-actions input,
  .field-card-generated-review-secondary-actions select,
  .field-card-generated-review-secondary-actions .button {
    width: 100%;
  }
}

body:has(.outreach-console),
.site-main-shell:has(.outreach-console),
.site-main:has(.outreach-console),
.site-main:has(.outreach-console) + .site-footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.16), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(86, 207, 174, 0.12), transparent 24%),
    linear-gradient(180deg, #f7f8fb 0%, #fffdf7 52%, #f7f8fb 100%);
}

.site-main-shell:has(.outreach-console) {
  min-height: 100dvh;
}

.admin-workbench-band:has(.outreach-console) {
  padding-top: 12px;
}

.outreach-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.94));
  box-shadow: var(--shadow-soft);
}

.outreach-command-card.is-simple-home {
  grid-template-columns: minmax(0, 1fr);
  padding: 22px;
}

.outreach-command-card.is-simple-home .outreach-command-copy {
  justify-items: start;
}

.outreach-command-card.is-simple-home h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.outreach-command-card.is-simple-home p {
  max-width: 560px;
}

.outreach-command-copy {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

.outreach-command-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.5rem, 2.8vw, 2.32rem);
  line-height: 1.04;
}

.outreach-command-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.55;
}

.outreach-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-workflow-step {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.outreach-workflow-step:hover,
.outreach-workflow-step:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
  outline: 0;
}

.outreach-workflow-step span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.08);
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 950;
}

.outreach-workflow-step strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.1;
}

.outreach-workflow-step small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-workflow-step.is-active span {
  background: rgba(255, 200, 0, 0.28);
}

.outreach-workflow-step.is-ready span {
  background: rgba(86, 207, 174, 0.22);
}

.outreach-workflow-step.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 36%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(255, 200, 0, 0.14);
}

.outreach-workspace-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.outreach-workspace-link {
  display: grid;
  gap: 3px;
  min-height: 64px;
  align-content: center;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.outreach-workspace-link:hover,
.outreach-workspace-link:focus-visible {
  background: rgba(255, 200, 0, 0.13);
  color: var(--foreground);
  outline: 0;
  transform: translateY(-1px);
}

.outreach-workspace-link strong {
  color: inherit;
  font-size: 0.9rem;
  font-weight: 950;
}

.outreach-workspace-link span {
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.25;
}

.outreach-workspace-link.is-active {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.36);
}

.outreach-filter-drawer {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.56);
}

.outreach-filter-drawer summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.outreach-filter-drawer summary::-webkit-details-marker {
  display: none;
}

.outreach-filter-drawer summary::after {
  content: "+";
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.065);
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-filter-drawer[open] summary::after {
  content: "-";
}

.outreach-filter-drawer summary small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 840;
}

.outreach-filter-drawer summary strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-filter-drawer-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.outreach-filter-drawer .outreach-campaign-strip {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.outreach-filter-drawer .outreach-campaign-card {
  min-height: 72px;
  padding: 10px;
  border-radius: 14px;
  box-shadow: none;
}

.outreach-filter-drawer .outreach-campaign-card span {
  font-size: 0.66rem;
}

.outreach-filter-drawer .outreach-campaign-card strong {
  font-size: 1.08rem;
}

.outreach-filter-drawer .outreach-campaign-card small {
  font-size: 0.68rem;
}

.outreach-simple-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.outreach-simple-guide > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.outreach-simple-guide ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outreach-simple-guide li {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 830;
  line-height: 1.35;
}

.outreach-gmail-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  user-select: text;
}

.outreach-gmail-reconnect-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 122, 102, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.12), transparent 32%),
    rgba(255, 250, 247, 0.98);
  box-shadow: var(--shadow-soft);
}

.outreach-gmail-reconnect-card > div {
  display: grid;
  min-width: min(100%, 440px);
  gap: 4px;
}

.outreach-gmail-reconnect-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-gmail-reconnect-card strong {
  color: var(--foreground);
  font-size: clamp(1.08rem, 2vw, 1.36rem);
  font-weight: 950;
  line-height: 1.08;
}

.outreach-gmail-reconnect-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-home-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.outreach-home-action {
  display: grid;
  gap: 10px;
  min-height: 188px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.outreach-home-action:hover,
.outreach-home-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 200, 0, 0.44);
  box-shadow: var(--shadow-soft);
  outline: 0;
}

.outreach-home-action.is-primary {
  border-color: rgba(86, 207, 174, 0.32);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.98);
}

.outreach-home-action span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.07);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 930;
}

.outreach-home-action strong {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 950;
  line-height: 1.15;
}

.outreach-home-action p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-overview-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.outreach-overview-primary {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding: 4px;
}

.outreach-overview-primary span,
.outreach-overview-stats span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-overview-primary strong {
  color: var(--foreground);
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  font-weight: 960;
  line-height: 1.05;
}

.outreach-overview-primary p,
.outreach-overview-stats p,
.outreach-overview-note {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.45;
}

.outreach-overview-primary .button {
  width: fit-content;
  margin-top: 2px;
}

.outreach-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-overview-stats > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-overview-stats strong {
  color: var(--foreground);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 960;
  line-height: 0.95;
}

.outreach-overview-stats p {
  font-size: 0.82rem;
}

.outreach-overview-note {
  grid-column: 1 / -1;
  padding-top: 2px;
  font-size: 0.86rem;
}

.outreach-campaign-performance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.outreach-performance-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.outreach-performance-card span,
.outreach-performance-card small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 880;
}

.outreach-performance-card strong {
  color: var(--foreground);
  font-size: 1.55rem;
  font-weight: 960;
  line-height: 0.95;
}

.outreach-performance-card p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 820;
  line-height: 1.35;
}

.outreach-advanced-fields {
  padding: 8px 2px;
  border: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0;
  background: transparent;
}

.outreach-advanced-fields summary {
  display: flex;
  width: fit-content;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.72);
  cursor: pointer;
  color: var(--muted-foreground);
}

.outreach-advanced-fields summary span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-advanced-fields summary strong {
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-advanced-fields > .outreach-form-grid {
  margin-top: 12px;
}

.outreach-manual-form {
  display: grid;
  gap: 14px;
}

.outreach-required-block {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 34%),
    rgba(248, 250, 252, 0.78);
}

.outreach-required-block p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-contact-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-manual-form > label,
.outreach-contact-route-grid label {
  display: grid;
  gap: 7px;
}

.outreach-manual-form input,
.outreach-manual-form select,
.outreach-manual-form textarea {
  min-height: 44px;
  width: 100%;
}

.outreach-live-status {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(11, 105, 183, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-live-status.is-active {
  border-color: rgba(255, 200, 0, 0.46);
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-live-status strong,
.outreach-live-status p {
  margin: 0;
}

.outreach-live-status strong {
  display: block;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
}

.outreach-live-status p {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 780;
}

.outreach-progress-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.outreach-progress-list li {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.065);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.outreach-progress-list li.is-active {
  background: rgba(255, 200, 0, 0.24);
  color: var(--foreground);
}

.outreach-live-dot,
.outreach-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.outreach-live-dot {
  background: rgba(86, 207, 174, 0.72);
  box-shadow: 0 0 0 6px rgba(86, 207, 174, 0.16);
}

.outreach-spinner {
  border: 3px solid rgba(255, 200, 0, 0.22);
  border-top-color: #ffc800;
  animation: outreach-spin 820ms linear infinite;
}

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

.outreach-schedule-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-schedule-panel > .button-row {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.outreach-schedule-panel > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-schedule-panel span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 900;
}

.outreach-schedule-panel > div:first-child > span {
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-schedule-panel strong {
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 950;
}

.outreach-schedule-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.42;
}

.outreach-schedule-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.outreach-schedule-stats span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.1);
  color: var(--foreground);
}

.outreach-automation-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  cursor: pointer;
}

.outreach-automation-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #087a62;
}

.outreach-automation-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.outreach-automation-toggle span {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.outreach-grid {
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.48fr);
}

.outreach-console.is-mode-dashboard .outreach-campaign-strip,
.outreach-console.is-mode-dashboard .outreach-grid {
  display: none;
}

.outreach-console:not(.is-mode-research) .outreach-research-card {
  display: none;
}

.outreach-console.is-mode-research .outreach-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(1280px, 100%);
  width: 100%;
  margin-inline: auto;
}

.outreach-console.is-mode-research .outreach-campaign-strip,
.outreach-console.is-mode-research .outreach-list-panel,
.outreach-console.is-mode-research .outreach-detail-card {
  display: none;
}

.outreach-console.is-mode-drafts .outreach-campaign-strip,
.outreach-console.is-mode-drafts .outreach-create-card,
.outreach-console.is-mode-drafts .outreach-draft-generator,
.outreach-console.is-mode-send .outreach-create-card,
.outreach-console.is-mode-sent .outreach-create-card,
.outreach-console.is-mode-send .outreach-draft-generator,
.outreach-console.is-mode-sent .outreach-draft-generator {
  display: none;
}

.outreach-console.is-mode-sent .outreach-message-head .button-row,
.outreach-console.is-mode-sent .outreach-revision-form,
.outreach-console.is-mode-sent .outreach-send-panel,
.outreach-console.is-mode-sent .outreach-muted-actions {
  display: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-next-step,
.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-contact-summary {
  display: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-contact-hero {
  order: 1;
}

.outreach-console.is-mode-sent .outreach-replies-panel.is-sent-primary {
  order: 2;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-message-editor {
  order: 3;
  gap: 11px;
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.06), transparent 34%),
    rgba(248, 250, 252, 0.84);
  box-shadow: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-message-head h3 {
  font-size: 1.08rem;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft #outreach-body {
  min-height: 260px;
  background: rgba(255, 255, 255, 0.72);
}

.outreach-console.is-mode-send .outreach-list-panel,
.outreach-console.is-mode-sent .outreach-list-panel {
  align-self: start;
}

.outreach-console.is-mode-send .admin-workbench-record-list.is-scrollable,
.outreach-console.is-mode-sent .admin-workbench-record-list.is-scrollable {
  max-height: min(460px, calc(100vh - 260px));
  min-height: 0;
}

.outreach-list-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.94));
}

.outreach-card {
  border-color: rgba(226, 232, 240, 0.9);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(255, 255, 255, 0.98);
}

.outreach-campaign-strip {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.outreach-campaign-card {
  min-height: 126px;
  border-color: rgba(226, 232, 240, 0.92);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.96);
}

.outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.56);
  box-shadow: 0 14px 30px rgba(255, 200, 0, 0.14);
}

.outreach-campaign-all {
  border-color: rgba(86, 207, 174, 0.24);
}

.outreach-record {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  min-height: 124px;
  padding: 12px;
  overflow: hidden;
}

.outreach-record-selectable {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

.outreach-record-selectable.is-selected {
  border-color: rgba(86, 207, 174, 0.48);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.18), transparent 34%),
    rgba(248, 250, 252, 0.96);
}

.outreach-record-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.outreach-record-main:focus-visible {
  border-radius: 16px;
  outline: 3px solid rgba(11, 105, 183, 0.18);
  outline-offset: 3px;
}

.outreach-record-check {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: start;
  border-radius: 999px;
  cursor: pointer;
}

.outreach-record-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.outreach-record-check span {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(11, 105, 183, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7);
}

.outreach-record-check input:checked + span {
  border-color: rgba(86, 207, 174, 0.72);
  background: rgba(86, 207, 174, 0.88);
}

.outreach-record-check input:checked + span::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  margin: 5px auto 0;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.outreach-record-check.is-disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.outreach-record-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 1rem;
}

.outreach-record .admin-workbench-record-copy {
  gap: 6px;
  overflow: hidden;
}

.outreach-record .admin-workbench-record-kicker {
  display: -webkit-box;
  white-space: normal;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.outreach-record .admin-workbench-record-copy strong {
  white-space: normal;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.outreach-record .admin-workbench-record-copy > span:not(.admin-workbench-record-kicker):not(.admin-workbench-record-meta) {
  max-width: 100%;
  min-height: 2.6em;
  overflow-wrap: anywhere;
}

.outreach-record .admin-workbench-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.outreach-record .admin-workbench-record-meta small {
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-research-card {
  overflow: hidden;
}

.outreach-batch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.07), transparent 34%),
    rgba(248, 250, 252, 0.82);
}

.outreach-batch-bar.has-selection {
  justify-content: space-between;
  border-color: rgba(86, 207, 174, 0.34);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.outreach-batch-bar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-batch-bar strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.outreach-batch-bar span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.35;
}

.outreach-batch-bar .button-row {
  display: grid;
  grid-template-columns: auto auto minmax(104px, auto);
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.outreach-batch-bar .button {
  min-width: 0;
  white-space: nowrap;
}

.outreach-batch-bar .button-ghost {
  min-height: 34px;
  padding-inline: 11px;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.68);
}

.outreach-write-drafts-button {
  min-height: 38px;
  padding-inline: 16px;
}

.outreach-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.outreach-prompt-chip {
  min-height: 104px;
  align-content: start;
  padding: 15px;
  text-align: left;
  white-space: normal;
}

.outreach-prompt-chip strong {
  font-size: 0.95rem;
}

.outreach-prompt-chip span {
  line-height: 1.35;
}

.outreach-big-action {
  min-height: 62px;
  width: min(360px, 100%);
  min-width: 220px;
  justify-self: center;
  border-radius: 999px;
  font-size: 1.08rem;
  box-shadow: 0 18px 38px rgba(11, 105, 183, 0.18);
}

.outreach-research-submit-row {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}

.outreach-console.is-mode-research .outreach-card {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 28px;
}

.outreach-console.is-mode-research .outreach-form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.outreach-console.is-mode-research .outreach-form-grid input[name="query"] {
  min-height: 58px;
  padding-inline: 16px;
  font-size: 1rem;
  line-height: 1.45;
}

.outreach-console.is-mode-research .outreach-advanced-fields > .outreach-form-grid,
.outreach-console.is-mode-research .outreach-manual-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outreach-console.is-mode-research .outreach-research-runs,
.outreach-console.is-mode-research .outreach-create-card {
  max-width: none;
}

.outreach-console.is-mode-research .outreach-required-block,
.outreach-console.is-mode-research .outreach-contact-route-grid,
.outreach-console.is-mode-research .outreach-manual-form .outreach-field-wide,
.outreach-console.is-mode-research .outreach-manual-form details,
.outreach-console.is-mode-research .outreach-manual-form .outreach-big-action {
  grid-column: 1 / -1;
}

.outreach-research-working {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.92);
}

.outreach-research-working strong,
.outreach-research-working p {
  margin: 0;
}

.outreach-research-working strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
}

.outreach-research-working p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-research-runs {
  border: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.72);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px 0;
}

.outreach-research-runs summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.72);
  cursor: pointer;
  color: var(--muted-foreground);
}

.outreach-research-runs summary span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 920;
  text-transform: uppercase;
}

.outreach-research-runs summary strong {
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-research-runs-help {
  margin: 10px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-research-runs .outreach-research-run:first-of-type {
  margin-top: 12px;
}

.outreach-research-runs .outreach-research-run + .outreach-research-run {
  margin-top: 10px;
}

.outreach-form-grid input:focus,
.outreach-form-grid select:focus,
.outreach-form-grid textarea:focus,
.outreach-draft-generator input:focus,
.outreach-draft-generator select:focus,
.outreach-draft-generator textarea:focus,
.outreach-message-editor input:focus,
.outreach-message-editor textarea:focus,
.outreach-revision-form textarea:focus {
  border-color: rgba(11, 105, 183, 0.28);
  box-shadow: 0 0 0 3px rgba(11, 105, 183, 0.08);
  outline: 0;
}

.outreach-contact-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.outreach-contact-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.55rem;
}

.outreach-contact-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-contact-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.46rem, 2.5vw, 2.15rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.outreach-contact-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 780;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.outreach-contact-summary {
  display: grid;
  gap: 10px;
}

.outreach-queue-decision-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78)),
    rgba(248, 250, 252, 0.84);
}

.outreach-queue-decision-bar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-queue-decision-bar span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-queue-decision-bar strong {
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.2;
}

.outreach-queue-decision-bar p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 720;
  line-height: 1.45;
}

.outreach-queue-decision-bar .button-row {
  flex-shrink: 0;
}

.outreach-contact-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.outreach-contact-summary-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.88);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1;
  text-transform: capitalize;
}

.outreach-contact-summary-meta span:nth-child(2) {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.11);
  color: var(--foreground);
}

.outreach-decision-card,
.outreach-contact-route {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.82);
}

.outreach-decision-card span,
.outreach-contact-route span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-decision-card p,
.outreach-contact-route strong {
  margin: 0;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 790;
  line-height: 1.52;
  overflow-wrap: anywhere;
}

.outreach-contact-route {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-block: 12px;
}

.outreach-contact-route strong {
  font-weight: 890;
  text-align: right;
}

.outreach-quality-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 34%),
    rgba(248, 250, 252, 0.84);
}

.outreach-quality-panel > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-quality-panel > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.outreach-quality-panel article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.outreach-quality-panel small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.outreach-quality-panel strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-quality-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-help-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 950;
}

.outreach-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(10px);
}

.outreach-help-modal {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.outreach-help-modal-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.outreach-help-modal-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outreach-help-modal h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.05;
}

.outreach-help-modal ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outreach-help-modal li {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
}

.outreach-help-modal strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.outreach-help-modal p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-batch-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(12px);
}

.outreach-batch-modal {
  display: grid;
  gap: 14px;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.outreach-batch-modal-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.outreach-batch-modal-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.outreach-batch-modal-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outreach-batch-modal h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.outreach-batch-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.075);
}

.outreach-batch-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(86, 207, 174, 0.92), rgba(255, 200, 0, 0.9));
  transition: width 180ms ease;
}

.outreach-batch-note {
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 780;
  line-height: 1.5;
}

.outreach-batch-list {
  display: grid;
  gap: 9px;
}

.outreach-batch-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-batch-item > span {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.22);
}

.outreach-batch-item.is-running > span {
  background: rgba(255, 200, 0, 0.9);
  box-shadow: 0 0 0 5px rgba(255, 200, 0, 0.14);
}

.outreach-batch-item.is-done > span {
  background: rgba(86, 207, 174, 0.92);
}

.outreach-batch-item.is-failed > span {
  background: rgba(255, 122, 102, 0.9);
}

.outreach-batch-item strong,
.outreach-batch-item p {
  margin: 0;
}

.outreach-batch-item strong {
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 930;
}

.outreach-batch-item p {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-status-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(33, 33, 33, 0.055);
  color: var(--foreground);
  font-size: 0.73rem;
  font-weight: 950;
}

.outreach-status-pill.is-working {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.16);
}

.outreach-status-pill.is-ready {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.16);
}

.outreach-status-pill.is-done {
  border-color: rgba(11, 105, 183, 0.18);
  background: rgba(11, 105, 183, 0.1);
}

.outreach-status-pill.is-muted {
  color: var(--muted-foreground);
}

.outreach-next-step,
.outreach-step-card,
.outreach-send-panel {
  border: 1px solid rgba(11, 105, 183, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.06), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-next-step {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
}

.outreach-next-step span,
.outreach-step-card-head span,
.outreach-send-panel span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-next-step strong,
.outreach-step-card-head strong,
.outreach-send-panel strong {
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 950;
}

.outreach-next-step p,
.outreach-step-card-head p,
.outreach-send-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-step-card {
  padding: 14px;
}

.outreach-step-card-head {
  display: grid;
  gap: 5px;
}

.outreach-message-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
}

.outreach-send-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.outreach-send-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.outreach-replies-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(248, 250, 252, 0.94);
}

.outreach-replies-panel.is-sent-primary {
  gap: 14px;
  padding: 16px;
  border-color: rgba(11, 105, 183, 0.18);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.15), transparent 32%),
    radial-gradient(circle at bottom left, rgba(255, 200, 0, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.outreach-replies-panel.is-sent-primary .outreach-replies-head strong {
  font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.outreach-follow-up-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.4fr);
  gap: 8px 18px;
  align-items: start;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.outreach-follow-up-status > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.outreach-follow-up-status span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-follow-up-status strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 950;
}

.outreach-follow-up-status.is-sent strong {
  color: #1f7a62;
}

.outreach-follow-up-status.is-failed strong,
.outreach-follow-up-status.is-unknown strong {
  color: #b84635;
}

.outreach-follow-up-status p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.5;
}

.outreach-follow-up-status pre {
  grid-column: 1 / -1;
  max-height: 260px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--border-soft);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 710;
  line-height: 1.55;
  white-space: pre-wrap;
}

.outreach-replies-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.outreach-replies-head > div:first-child,
.outreach-reply-draft {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.outreach-replies-head span,
.outreach-reply-draft span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-replies-head strong,
.outreach-reply-draft strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-replies-head p,
.outreach-replies-note,
.outreach-replies-empty {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-reply-list {
  display: grid;
  gap: 10px;
}

.outreach-reply-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.outreach-reply-card.has-ai-draft {
  border-color: rgba(86, 207, 174, 0.28);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.outreach-reply-card.is-archived {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.76);
}

.outreach-reply-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.outreach-reply-meta strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 950;
}

.outreach-reply-meta span,
.outreach-reply-meta small {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.outreach-reply-match {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(11, 105, 183, 0.15);
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.06);
  color: #0b69b7;
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1.25;
}

.outreach-reply-snippet {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 730;
  line-height: 1.56;
  white-space: pre-wrap;
}

.outreach-reply-draft {
  padding: 12px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 34%),
    rgba(248, 250, 252, 0.96);
}

.outreach-reply-draft pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.58;
  white-space: pre-wrap;
}

.outreach-muted-actions {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.outreach-muted-actions summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.outreach-muted-actions .button-row {
  margin-top: 10px;
}

.outreach-decision-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
}

.outreach-decision-modal {
  display: grid;
  gap: 18px;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}

.outreach-decision-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.outreach-decision-modal-head > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-decision-modal-head span,
.outreach-decision-form label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-decision-modal-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.35rem;
  line-height: 1.08;
}

.outreach-decision-modal-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 720;
  line-height: 1.48;
}

.outreach-decision-form {
  display: grid;
  gap: 14px;
}

.outreach-decision-form label,
.outreach-decision-warning {
  display: grid;
  gap: 8px;
}

.outreach-decision-form select,
.outreach-decision-form textarea {
  width: 100%;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.outreach-decision-form select {
  min-height: 46px;
  padding: 0 12px;
}

.outreach-decision-form textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.outreach-decision-warning {
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.84);
}

.outreach-decision-warning strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.outreach-decision-warning p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
}

.outreach-empty-detail h2,
.outreach-empty-detail p {
  margin: 0;
}

.outreach-empty-detail p {
  color: var(--muted-foreground);
  line-height: 1.55;
}

html[data-theme="dark"] .site-main:has(.outreach-console) {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.09), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(86, 207, 174, 0.08), transparent 24%),
    linear-gradient(180deg, #0f1412 0%, #121915 54%, #0b0f0d 100%);
}

html[data-theme="dark"] .outreach-command-card,
html[data-theme="dark"] .outreach-live-status,
html[data-theme="dark"] .outreach-workspace-nav,
html[data-theme="dark"] .outreach-simple-guide,
html[data-theme="dark"] .outreach-list-panel,
html[data-theme="dark"] .outreach-card {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(15, 20, 18, 0.98);
  color: var(--foreground);
}

html[data-theme="dark"] .outreach-workflow-step,
html[data-theme="dark"] .outreach-workspace-link.is-active,
html[data-theme="dark"] .outreach-simple-guide li,
html[data-theme="dark"] .outreach-home-action,
html[data-theme="dark"] .outreach-overview-panel,
html[data-theme="dark"] .outreach-overview-stats > div,
html[data-theme="dark"] .outreach-performance-card,
html[data-theme="dark"] .outreach-advanced-fields,
html[data-theme="dark"] .outreach-required-block,
html[data-theme="dark"] .outreach-research-working,
html[data-theme="dark"] .outreach-research-runs,
html[data-theme="dark"] .outreach-batch-bar,
html[data-theme="dark"] .outreach-gmail-reconnect-card,
html[data-theme="dark"] .outreach-schedule-panel,
html[data-theme="dark"] .outreach-schedule-stats span,
html[data-theme="dark"] .outreach-next-step,
html[data-theme="dark"] .outreach-step-card,
html[data-theme="dark"] .outreach-send-panel,
html[data-theme="dark"] .outreach-replies-panel,
html[data-theme="dark"] .outreach-reply-card,
html[data-theme="dark"] .outreach-reply-draft,
html[data-theme="dark"] .outreach-quality-panel,
html[data-theme="dark"] .outreach-quality-panel article,
html[data-theme="dark"] .outreach-reply-meta span,
html[data-theme="dark"] .outreach-reply-meta small {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-status-pill,
html[data-theme="dark"] .outreach-gmail-status,
html[data-theme="dark"] .outreach-muted-actions {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .outreach-batch-bar.has-selection {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-gmail-status {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-help-overlay {
  background: rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] .outreach-help-modal {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.075), transparent 32%),
    rgba(15, 20, 18, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .outreach-help-modal li {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-record-selectable.is-selected {
  border-color: rgba(86, 207, 174, 0.42);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-record-check span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .outreach-batch-overlay {
  background: rgba(0, 0, 0, 0.56);
}

html[data-theme="dark"] .outreach-batch-modal {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 32%),
    rgba(15, 20, 18, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .outreach-batch-note,
html[data-theme="dark"] .outreach-batch-item {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 980px) {
  .outreach-command-card,
  .outreach-schedule-panel,
  .outreach-send-panel,
  .outreach-editor-actions {
    grid-template-columns: 1fr;
  }

  .outreach-overview-panel {
    grid-template-columns: 1fr;
  }

  .outreach-workspace-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .outreach-simple-guide,
  .outreach-home-actions,
  .outreach-contact-route-grid {
    grid-template-columns: 1fr;
  }

  .outreach-simple-guide ul {
    grid-template-columns: 1fr;
  }

  .outreach-workflow {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .outreach-contact-hero {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .outreach-contact-hero .button-row {
    grid-column: 1 / -1;
  }

  .outreach-queue-decision-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .outreach-queue-decision-bar .button-row {
    width: 100%;
  }

  .outreach-queue-decision-bar .button-row .button {
    flex: 1 1 0;
  }
}

@media (max-width: 640px) {
  .outreach-command-card,
  .outreach-card,
  .outreach-live-status {
    border-radius: 20px;
  }

  .outreach-command-card {
    padding: 14px;
  }

  .outreach-workspace-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .outreach-workspace-link {
    flex: 0 0 132px;
  }

  .outreach-overview-stats {
    grid-template-columns: 1fr;
  }

  .outreach-schedule-panel .button-row,
  .outreach-schedule-stats {
    justify-content: stretch;
  }

  .outreach-schedule-panel .button-row .button,
  .outreach-schedule-stats span {
    flex: 1 1 auto;
    justify-content: center;
  }

  .outreach-follow-up-status {
    grid-template-columns: 1fr;
  }

  .outreach-home-action {
    min-height: 132px;
  }

  .outreach-campaign-strip {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .outreach-campaign-card {
    flex: 0 0 176px;
  }

  .outreach-form-grid,
  .outreach-draft-generator {
    grid-template-columns: 1fr;
  }

  .outreach-contact-avatar {
    width: 64px;
    height: 64px;
  }
}

.report-admin-toolbar,
.report-period-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.report-admin-toolbar {
  justify-content: space-between;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 200, 0, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 248, 214, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .report-admin-toolbar {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.11), transparent 44%),
    linear-gradient(180deg, rgba(32, 40, 35, 0.96), rgba(23, 29, 26, 0.96));
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .report-admin-toolbar .field input {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(15, 20, 18, 0.82);
  color: var(--foreground);
}

html[data-theme="dark"] .report-admin-toolbar .field input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.74;
}

html[data-theme="dark"] .report-admin-toolbar .button-ghost {
  border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
}

html[data-theme="dark"] .report-admin-toolbar .button-ghost:hover {
  border-color: rgba(255, 200, 0, 0.36);
  background: rgba(255, 200, 0, 0.14);
}

.report-period-form .field {
  min-width: min(220px, 100%);
}

.report-status-card {
  border-color: rgba(86, 207, 174, 0.38);
  background: #f3fffb;
  color: var(--foreground);
  font-weight: 800;
}

html[data-theme="dark"] .report-status-card {
  border-color: rgba(86, 207, 174, 0.26);
  background: rgba(32, 40, 35, 0.9);
  color: var(--foreground);
}

.report-status-card.is-error {
  border-color: rgba(255, 122, 102, 0.42);
  background: #fff4f1;
}

html[data-theme="dark"] .report-status-card.is-error {
  border-color: rgba(255, 122, 102, 0.34);
  background: rgba(68, 28, 24, 0.7);
}

.report-share-created-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.report-share-created-card a {
  overflow-wrap: anywhere;
  color: #0b69b7;
}

html[data-theme="dark"] .report-share-created-card a {
  color: var(--accent);
}

.report-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-source-card {
  align-content: start;
}

.report-compact-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.report-input-form {
  gap: 20px;
}

.report-quick-metrics {
  max-width: 760px;
}

.admin-form-hint {
  max-width: 760px;
  margin: -8px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.5;
}

.report-share-manager,
.report-share-list {
  display: grid;
  gap: 14px;
}

.report-share-create-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.report-share-create-form .field {
  min-width: 180px;
}

.report-share-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-row);
}

.report-share-row p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
}

html[data-theme="dark"] .report-share-row {
  border-color: var(--border-soft);
  background: var(--surface-row);
  color: var(--foreground);
}

.report-public-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 200, 0, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.92);
}

.report-public-toolbar .report-print-hint {
  display: block;
  max-width: 560px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

html[data-theme="dark"] .report-public-toolbar {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), transparent 44%),
    rgba(28, 29, 25, 0.92);
  color: var(--foreground);
}

.monthly-report-document {
  display: grid;
  gap: 22px;
  width: min(980px, 100%);
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: #fffdf8;
  color: #1f2933;
  box-shadow: var(--shadow-soft);
}

.monthly-report-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 4px solid var(--brand);
}

.monthly-report-header h2 {
  color: #1f2933;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1;
}

.monthly-report-header p {
  color: #4b5563;
}

.monthly-report-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  line-height: 1.55;
}

.monthly-report-linkline a {
  color: #0b69b7;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.monthly-report-linkline a:hover {
  color: #074f8b;
}

.monthly-report-kicker {
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.monthly-report-mark {
  display: inline-grid;
  place-items: center;
  width: 76px;
  min-width: 76px;
  height: 66px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 14px;
  background: var(--brand);
}

.monthly-report-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
}

.monthly-report-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.monthly-report-section h3 {
  color: #1f2933;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.monthly-report-section p,
.monthly-report-section li {
  color: #374151;
  line-height: 1.62;
}

.monthly-report-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.monthly-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.monthly-report-metrics div {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  text-align: center;
}

.monthly-report-metrics span {
  color: #5d6674;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-metrics strong {
  color: #1f2933;
  font-size: 1.32rem;
  letter-spacing: 0;
}

.monthly-report-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monthly-report-split-head h3 {
  margin: 0;
}

.monthly-report-split-head p {
  margin: 3px 0 0;
  color: #5d6674;
  font-size: 0.88rem;
  line-height: 1.5;
}

.monthly-report-media-coverage {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 183, 5, 0.12), transparent 40%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-media-grid {
  display: grid;
  gap: 10px;
}

.monthly-report-media-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.94);
}

.monthly-report-media-card span {
  color: #5d6674;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.monthly-report-media-card strong {
  color: #1f2933;
  font-size: 0.98rem;
  line-height: 1.28;
}

.monthly-report-media-card p {
  margin: 0;
  color: #374151;
  font-size: 0.82rem;
  line-height: 1.48;
}

.monthly-report-media-card a {
  color: #0b69b7;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.monthly-report-impact-snapshot,
.monthly-report-proof-section {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  break-inside: avoid;
}

.monthly-report-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.monthly-report-impact-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(46, 64, 87, 0.05);
  text-align: center;
}

.monthly-report-impact-grid span,
.monthly-report-proof-card span {
  color: #5d6674;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-impact-grid strong {
  color: #1f2933;
  font-size: 1.18rem;
  line-height: 1.1;
}

.monthly-report-impact-grid small {
  color: #5d6674;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.35;
}

.monthly-report-cat-wall {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    radial-gradient(circle at top left, rgba(242, 183, 5, 0.14), transparent 28%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-cat-wall-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monthly-report-cat-wall-head h3 {
  margin: 0;
}

.monthly-report-cat-wall-head p {
  margin: 3px 0 0;
  color: #5d6674;
  font-size: 0.88rem;
  line-height: 1.5;
}

.monthly-report-cat-wall-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(242, 183, 5, 0.18);
  color: #1f2933;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.monthly-report-cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.monthly-report-cat-badge {
  display: inline-flex;
  max-width: 168px;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #1f2933;
  font-size: 0.72rem;
  font-weight: 850;
}

.monthly-report-cat-badge--studio {
  border-color: rgba(242, 183, 5, 0.52);
  background: rgba(255, 246, 213, 0.96);
}

.monthly-report-cat-badge img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.15);
}

.monthly-report-cat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-cat-studio-mark {
  flex: 0 0 auto;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(242, 183, 5, 0.2);
  color: #5f4600;
  font-size: 0.56rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.monthly-report-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-report-proof-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.92);
}

.monthly-report-proof-card > img {
  width: 54px;
  height: 54px;
  border: 2px solid #ffffff;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.14);
}

.monthly-report-proof-card div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.monthly-report-proof-card h4 {
  margin: 0;
  color: #1f2933;
  font-size: 1rem;
  line-height: 1.1;
}

.monthly-report-proof-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #374151;
  font-size: 0.78rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.monthly-report-proof-card p strong {
  color: #1f2933;
}

.monthly-report-funnel-section {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(135deg, rgba(11, 105, 183, 0.07), transparent 38%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.monthly-report-funnel-stage {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  align-content: start;
  justify-items: center;
  min-height: 178px;
  padding: 12px 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.94);
  text-align: center;
}

.monthly-report-funnel-stage-top {
  display: grid;
  gap: 5px;
  justify-items: center;
  width: 100%;
}

.monthly-report-funnel-stage span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: #0b69b7;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.monthly-report-funnel-stage em {
  color: #8a7284;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.monthly-report-funnel-stage strong {
  color: #1f2933;
  font-size: 1.28rem;
  line-height: 1.1;
}

.monthly-report-funnel-stage small {
  color: #5d6674;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.32;
}

.monthly-report-funnel-stage p {
  margin: 0;
  color: #6c7480;
  font-size: 0.67rem;
  font-weight: 650;
  line-height: 1.36;
}

.monthly-report-funnel-stage i {
  position: absolute;
  top: 50%;
  right: -18px;
  z-index: 1;
  width: 16px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.28);
  pointer-events: none;
  transform: translateY(-50%);
}

.monthly-report-funnel-stage i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(11, 105, 183, 0.34);
  border-right: 2px solid rgba(11, 105, 183, 0.34);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.monthly-report-shorts-appendix {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  break-inside: avoid;
}

.monthly-report-short-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-report-short-card {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  color: inherit;
  text-decoration: none;
}

.monthly-report-short-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(46, 64, 87, 0.08);
}

.monthly-report-short-card span {
  color: #0b69b7;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.monthly-report-short-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #1f2933;
  font-size: 0.78rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.monthly-report-short-card small {
  color: #6c7480;
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.2;
}

.monthly-report-trend-section {
  gap: 14px;
}

.monthly-report-trend-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  min-height: 210px;
  padding: 18px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.monthly-report-trend-column {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.monthly-report-trend-bar-shell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 132px;
  border-bottom: 1px solid rgba(46, 64, 87, 0.2);
}

.monthly-report-trend-bar {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  width: min(38px, 72%);
  min-height: 0;
  border-radius: 8px 8px 3px 3px;
  background: #edf2f7;
}

.monthly-report-trend-segment {
  display: block;
  width: 100%;
}

.monthly-report-trend-segment.is-patreon,
.monthly-report-trend-legend i.is-patreon {
  background: #cf1616;
}

.monthly-report-trend-segment.is-paypal,
.monthly-report-trend-legend i.is-paypal {
  background: #2e4057;
}

.monthly-report-trend-value {
  color: #1f2933;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.monthly-report-trend-label {
  color: #5d6674;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.monthly-report-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #4b5563;
  font-size: 0.82rem;
  font-weight: 800;
}

.monthly-report-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.monthly-report-trend-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.monthly-report-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.monthly-report-trend-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: #374151;
  font-size: 0.86rem;
}

.monthly-report-trend-table th,
.monthly-report-trend-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(33, 33, 33, 0.08);
  text-align: left;
  white-space: nowrap;
}

.monthly-report-trend-table th {
  color: #1f2933;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(46, 64, 87, 0.05);
}

.monthly-report-trend-table tr:last-child td {
  border-bottom: 0;
}

.monthly-report-note {
  color: #5d6674;
  font-size: 0.84rem;
}

.monthly-report-audience-trend-section {
  gap: 14px;
}

.monthly-report-audience-line-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  overflow: hidden;
}

.monthly-report-audience-series-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.monthly-report-audience-series-header strong {
  color: #1f2933;
  font-size: 0.94rem;
}

.monthly-report-audience-series-header span {
  color: #5d6674;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-audience-line-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 210px;
}

.monthly-report-audience-grid-line {
  stroke: rgba(46, 64, 87, 0.12);
  stroke-width: 1;
}

.monthly-report-audience-axis-line {
  stroke: rgba(46, 64, 87, 0.26);
  stroke-width: 1.4;
}

.monthly-report-audience-axis-value,
.monthly-report-audience-axis-label {
  fill: #5d6674;
  font-size: 0.7rem;
  font-weight: 800;
}

.monthly-report-audience-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.monthly-report-audience-line.is-main-instagram,
.monthly-report-audience-point.is-main-instagram {
  stroke: #0b69b7;
}

.monthly-report-audience-line.is-studio-instagram,
.monthly-report-audience-point.is-studio-instagram {
  stroke: #f2b705;
}

.monthly-report-audience-point {
  fill: #fffdf8;
  stroke-width: 3;
}

.monthly-report-audience-point-label {
  fill: #1f2933;
  font-size: 0.68rem;
  font-weight: 900;
}

.monthly-report-audience-point-label.is-studio-instagram {
  fill: #7c5a00;
}

.monthly-report-audience-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #374151;
  font-size: 0.84rem;
  font-weight: 850;
}

.monthly-report-audience-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.monthly-report-audience-legend i {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #0b69b7;
}

.monthly-report-audience-legend i.is-studio-instagram {
  background: #f2b705;
}

@media screen {
  html[data-theme="dark"] .monthly-report-document {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
      linear-gradient(180deg, rgba(28, 36, 31, 0.98), rgba(18, 25, 21, 0.98));
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-header {
    border-bottom-color: rgba(255, 200, 0, 0.72);
  }

  html[data-theme="dark"] .monthly-report-header h2,
  html[data-theme="dark"] .monthly-report-section h3,
  html[data-theme="dark"] .monthly-report-proof-card h4,
  html[data-theme="dark"] .monthly-report-proof-card p strong,
  html[data-theme="dark"] .monthly-report-metrics strong,
  html[data-theme="dark"] .monthly-report-impact-grid strong,
  html[data-theme="dark"] .monthly-report-funnel-stage strong,
  html[data-theme="dark"] .monthly-report-trend-value,
  html[data-theme="dark"] .monthly-report-audience-series-header strong,
  html[data-theme="dark"] .monthly-report-audience-point-label,
  html[data-theme="dark"] .monthly-report-trend-table th {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-header p,
  html[data-theme="dark"] .monthly-report-section p,
  html[data-theme="dark"] .monthly-report-section li,
  html[data-theme="dark"] .monthly-report-proof-card p,
  html[data-theme="dark"] .monthly-report-trend-table,
  html[data-theme="dark"] .monthly-report-trend-table td {
    color: rgba(247, 245, 234, 0.82);
  }

  html[data-theme="dark"] .monthly-report-linkline a {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-linkline a:hover {
    color: var(--accent);
  }

  html[data-theme="dark"] .monthly-report-kicker {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-metrics div,
  html[data-theme="dark"] .monthly-report-media-coverage,
  html[data-theme="dark"] .monthly-report-impact-snapshot,
  html[data-theme="dark"] .monthly-report-proof-section,
  html[data-theme="dark"] .monthly-report-funnel-section,
  html[data-theme="dark"] .monthly-report-cat-wall,
  html[data-theme="dark"] .monthly-report-shorts-appendix,
  html[data-theme="dark"] .monthly-report-trend-chart,
  html[data-theme="dark"] .monthly-report-table-wrap,
  html[data-theme="dark"] .monthly-report-audience-line-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 20, 18, 0.62);
  }

  html[data-theme="dark"] .monthly-report-metrics span,
  html[data-theme="dark"] .monthly-report-split-head p,
  html[data-theme="dark"] .monthly-report-media-card span,
  html[data-theme="dark"] .monthly-report-impact-grid span,
  html[data-theme="dark"] .monthly-report-impact-grid small,
  html[data-theme="dark"] .monthly-report-proof-card span,
  html[data-theme="dark"] .monthly-report-funnel-stage small,
  html[data-theme="dark"] .monthly-report-funnel-stage p,
  html[data-theme="dark"] .monthly-report-short-card small,
  html[data-theme="dark"] .monthly-report-cat-wall-head p,
  html[data-theme="dark"] .monthly-report-trend-label,
  html[data-theme="dark"] .monthly-report-trend-legend,
  html[data-theme="dark"] .monthly-report-audience-series-header span,
  html[data-theme="dark"] .monthly-report-audience-axis-value,
  html[data-theme="dark"] .monthly-report-audience-axis-label,
  html[data-theme="dark"] .monthly-report-note {
    color: rgba(247, 245, 234, 0.62);
    fill: rgba(247, 245, 234, 0.62);
  }

  html[data-theme="dark"] .monthly-report-cat-wall-head strong {
    background: rgba(255, 200, 0, 0.16);
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-cat-badge {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(247, 245, 234, 0.88);
  }

  html[data-theme="dark"] .monthly-report-cat-badge--studio {
    border-color: rgba(255, 200, 0, 0.48);
    background: rgba(255, 200, 0, 0.12);
  }

  html[data-theme="dark"] .monthly-report-cat-studio-mark {
    background: rgba(255, 200, 0, 0.18);
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-impact-grid div,
  html[data-theme="dark"] .monthly-report-media-card,
  html[data-theme="dark"] .monthly-report-proof-card,
  html[data-theme="dark"] .monthly-report-funnel-stage,
  html[data-theme="dark"] .monthly-report-short-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
  }

  html[data-theme="dark"] .monthly-report-media-card strong {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-media-card a {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-funnel-stage span {
    background: rgba(255, 200, 0, 0.12);
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-short-card span {
    background: transparent;
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-short-card strong {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-funnel-stage em {
    color: rgba(247, 245, 234, 0.5);
  }

  html[data-theme="dark"] .monthly-report-trend-bar-shell {
    border-bottom-color: rgba(255, 255, 255, 0.18);
  }

  html[data-theme="dark"] .monthly-report-trend-bar {
    background: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] .monthly-report-trend-table th,
  html[data-theme="dark"] .monthly-report-trend-table td {
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="dark"] .monthly-report-trend-table th {
    background: rgba(255, 255, 255, 0.06);
  }

  html[data-theme="dark"] .monthly-report-audience-grid-line,
  html[data-theme="dark"] .monthly-report-audience-axis-line {
    stroke: rgba(255, 255, 255, 0.14);
  }

  html[data-theme="dark"] .monthly-report-audience-point {
    fill: rgba(15, 20, 18, 0.96);
  }

  html[data-theme="dark"] .monthly-report-audience-point-label,
  html[data-theme="dark"] .monthly-report-audience-legend {
    color: rgba(247, 245, 234, 0.86);
    fill: rgba(247, 245, 234, 0.86);
  }

  html[data-theme="dark"] .monthly-report-audience-point-label.is-studio-instagram {
    fill: #ffd65a;
  }
}

.admin-link-card {
  display: grid;
  gap: 12px;
  min-height: 100%;
}

.admin-link-card .button-row {
  margin-top: auto;
}

.admin-inline-form-stack,
.admin-inline-form {
  display: grid;
  gap: 10px;
}

.admin-inline-form-stack {
  min-width: 220px;
}

.admin-inline-form {
  grid-template-columns: minmax(130px, 1fr) auto;
  align-items: end;
}

.admin-inline-form-stack .field {
  margin: 0;
}

.admin-inline-form-stack input {
  width: 100%;
}

.admin-inline-form-stack .button-row {
  gap: 8px;
}

.admin-home-groups {
  display: grid;
  gap: 34px;
}

.admin-home-group {
  display: grid;
  gap: 16px;
}

.admin-home-group-header {
  display: grid;
  grid-template-columns: minmax(180px, 0.44fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.admin-home-group-header h2,
.admin-home-group-header p {
  margin: 0;
}

.admin-home-group-header h2 {
  color: var(--foreground);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.admin-home-group-header > p {
  max-width: 780px;
  color: var(--muted-foreground);
  font-weight: 780;
  line-height: 1.5;
}

.admin-home-group.is-studio {
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 30%),
    linear-gradient(180deg, rgba(255, 250, 226, 0.72), rgba(255, 255, 255, 0.72));
}

.admin-home-group.is-studio .admin-card {
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.97);
}

html[data-theme="dark"] .admin-home-group.is-studio,
html[data-theme="dark"] .admin-section-group {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .admin-home-group.is-studio .admin-card {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.075), transparent 30%),
    rgba(15, 20, 18, 0.98);
}

@media (max-width: 720px) {
  .admin-home-group-header {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-home-group.is-studio {
    padding: 14px;
    border-radius: 22px;
  }

  .admin-section-group {
    min-width: 100%;
  }
}

.command-center {
  display: grid;
  gap: 22px;
}

.command-hero,
.command-status,
.command-attention,
.command-panel,
.command-cockpit-card,
.command-template-panel,
.command-growth-lab,
.command-suggestions,
.command-stat-grid > div,
.command-signal-strip article {
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(45, 32, 14, 0.08);
}

.command-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 28px;
}

.command-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.command-hero h2,
.command-hero p,
.command-section-head h3,
.command-section-head p,
.command-item-card p,
.command-brief-card p,
.command-empty p {
  margin: 0;
}

.command-hero h2 {
  color: var(--foreground);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.command-hero p {
  max-width: 760px;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.5;
}

.command-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 18px;
  color: var(--muted-foreground);
}

.command-status span,
.command-section-head span,
.command-item-topline,
.command-item-meta,
.command-brief-card > span,
.command-add-form strong {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-status strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.command-status.is-error {
  border-color: rgba(190, 75, 75, 0.36);
  background: rgba(255, 245, 242, 0.96);
}

.command-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.command-stat-grid > div {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 22px;
}

.command-stat-grid span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-stat-grid strong {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 0.95;
}

.command-signal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.command-signal-strip article {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 22px;
}

.command-signal-strip span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.command-signal-strip strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.command-signal-strip p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.32;
}

.command-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(300px, 0.84fr);
  gap: 16px;
  align-items: stretch;
}

.command-cockpit-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 260px;
  padding: 18px;
  border-radius: 26px;
}

.command-cockpit-card.is-primary {
  border-color: rgba(218, 143, 36, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.96);
}

.command-today-list,
.command-goal-mini-list,
.command-signal-list {
  display: grid;
  gap: 10px;
}

.command-today-list div,
.command-goal-mini-list div,
.command-signal-list div {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.78);
}

.command-today-list span,
.command-goal-mini-list span,
.command-signal-list span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-today-list strong,
.command-goal-mini-list strong,
.command-signal-list strong {
  color: var(--foreground);
  line-height: 1.16;
}

.command-signal-list strong {
  font-size: 1.28rem;
}

.command-today-list p,
.command-goal-mini-list p,
.command-signal-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-attention,
.command-panel,
.command-template-panel,
.command-growth-lab,
.command-suggestions {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 26px;
}

.command-template-panel.is-collapsed {
  padding: 12px;
}

.command-workflow-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.82);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  padding: 14px 16px;
  text-align: left;
}

.command-workflow-toggle span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-workflow-toggle strong {
  color: var(--foreground);
  font-size: 0.94rem;
}

.command-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}

.command-section-head h3 {
  color: var(--foreground);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.05;
}

.command-section-head p {
  max-width: 460px;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: right;
}

.command-attention-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.command-template-grid,
.command-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.command-template-grid button,
.command-suggestion-grid article {
  display: grid;
  gap: 9px;
  min-height: 160px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 252, 243, 0.82);
  color: inherit;
  text-align: left;
}

.command-template-grid button {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-template-grid button:hover,
.command-template-grid button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 143, 36, 0.34);
  background: rgba(255, 248, 226, 0.94);
  outline: none;
}

.command-template-grid button:disabled,
.command-template-grid button.is-running {
  cursor: default;
  opacity: 0.72;
}

.command-template-grid button:disabled:hover {
  transform: none;
}

.command-template-grid span,
.command-suggestion-grid span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-template-grid strong,
.command-suggestion-grid strong {
  color: var(--foreground);
  line-height: 1.14;
}

.command-template-grid p,
.command-suggestion-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-suggestion-grid .button {
  align-self: end;
  width: 100%;
}

.command-growth-lab {
  border-color: rgba(59, 130, 246, 0.18);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.95);
}

.command-growth-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-kpi-grid > div {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.command-growth-kpi-grid span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-growth-kpi-grid strong {
  color: var(--foreground);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1;
}

.command-growth-kpi-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 730;
  line-height: 1.34;
}

.command-growth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-grid > div {
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 252, 243, 0.78);
}

.command-growth-grid span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-growth-grid strong {
  color: var(--foreground);
  line-height: 1.14;
}

.command-growth-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-growth-analytics-grid,
.command-growth-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-analytics-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 252, 243, 0.76);
}

.command-growth-funnel {
  display: grid;
  gap: 9px;
}

.command-growth-funnel > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.5fr) 44px minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
}

.command-growth-funnel span,
.command-growth-target-list span,
.command-economics-list span,
.command-competitor-table span,
.command-checklist-list span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-growth-funnel strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 920;
  text-align: right;
}

.command-growth-funnel i {
  display: block;
  min-width: 8px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.68), rgba(218, 143, 36, 0.62));
}

.command-growth-target-list,
.command-economics-list,
.command-contract-list,
.command-competitor-table,
.command-checklist-list,
.command-video-review-list {
  display: grid;
  gap: 10px;
}

.command-growth-target-list > div,
.command-economics-list > form,
.command-contract-list > form,
.command-competitor-table > div,
.command-checklist-list > div,
.command-video-review-list > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.command-economics-list > form > div:first-child,
.command-growth-row-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.command-growth-target-list strong,
.command-economics-list strong,
.command-contract-list strong,
.command-competitor-table strong,
.command-checklist-list strong,
.command-video-review-list strong {
  color: var(--foreground);
  line-height: 1.16;
}

.command-growth-target-list p,
.command-economics-list p,
.command-contract-list p,
.command-competitor-table p,
.command-checklist-list p,
.command-video-review-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 730;
  line-height: 1.38;
}

.command-growth-target-list small,
.command-economics-list small,
.command-contract-list small,
.command-competitor-table small,
.command-video-check-grid small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.command-growth-row-topline select,
.command-video-check-grid select {
  width: auto;
  min-width: 112px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 840;
  padding: 7px 9px;
}

.command-growth-score-grid,
.command-economics-input-grid,
.command-video-check-grid {
  display: grid;
  gap: 8px;
}

.command-growth-score-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.command-economics-input-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding-top: 4px;
}

.command-video-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}

.command-growth-score-grid label,
.command-economics-input-grid label,
.command-video-check-grid label {
  display: grid;
  gap: 5px;
}

.command-growth-score-grid label > span,
.command-economics-input-grid label > span,
.command-video-check-grid label > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-growth-score-grid input,
.command-economics-input-grid input {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  padding: 8px 9px;
}

.command-economics-input-grid button {
  border: 1px solid rgba(218, 143, 36, 0.3);
  border-radius: 12px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 9px 11px;
}

.command-video-cost-form {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.command-growth-add-form {
  background: rgba(255, 255, 255, 0.58);
}

.command-growth-analytics-card.is-video-review {
  grid-column: 1 / -1;
}

.command-competitor-table span,
.command-checklist-list span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
}

.command-competitor-table span.is-high,
.command-checklist-list span.is-high {
  background: rgba(190, 75, 75, 0.12);
  color: #9f3434;
}

.command-competitor-table span.is-medium,
.command-checklist-list span.is-medium {
  background: rgba(218, 143, 36, 0.14);
}

.command-attention-list article,
.command-item-card,
.command-brief-card,
.command-focus-stage,
.command-empty,
.command-add-form {
  border: 1px solid var(--border-soft);
  background: rgba(255, 252, 243, 0.82);
}

.command-focus-stage {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(45, 32, 14, 0.08);
}

.command-focus-list {
  display: grid;
  gap: 14px;
}

.command-focus-list article {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(218, 143, 36, 0.22);
  border-radius: 24px;
  background: rgba(255, 252, 243, 0.86);
}

.command-focus-list span {
  color: var(--accent-foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-focus-list strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.command-focus-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.45;
}

.command-focus-actions,
.command-task-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.command-focus-actions button,
.command-task-status-actions button {
  border: 1px solid rgba(218, 143, 36, 0.3);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 920;
  padding: 8px 12px;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-focus-actions button:hover,
.command-focus-actions button:focus-visible,
.command-task-status-actions button:hover,
.command-task-status-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.52);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

.command-attention-list article {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border-radius: 20px;
}

.command-attention-list span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-attention-list strong,
.command-item-card strong,
.command-empty strong {
  color: var(--foreground);
  line-height: 1.18;
}

.command-attention-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.74fr);
  gap: 18px;
  align-items: start;
}

.command-panel.is-goals {
  grid-column: 1 / -1;
}

.command-goal-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  gap: 14px;
  align-items: start;
}

.command-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.command-column-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-column-head strong {
  display: inline-flex;
  min-width: 32px;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
}

.command-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: start;
}

.command-card-list {
  display: grid;
  gap: 12px;
}

.command-card-list.is-compact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.command-item-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 20px;
}

.command-item-card.is-high {
  border-color: rgba(218, 143, 36, 0.36);
  background: linear-gradient(180deg, rgba(255, 248, 226, 0.94), rgba(255, 255, 255, 0.86));
}

.command-item-card p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.42;
}

.command-item-topline,
.command-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.command-item-meta {
  justify-content: flex-start;
  letter-spacing: 0;
  text-transform: none;
}

.command-item-meta span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.command-link-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-link-stack span {
  display: inline-flex;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.13);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.command-linked-list {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.command-linked-list small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.command-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 920;
}

.command-item-card select,
.command-add-form input,
.command-add-form select,
.command-add-form textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.command-item-card select {
  width: auto;
  min-width: 108px;
  padding: 7px 10px;
  font-size: 0.78rem;
}

.command-done-tasks {
  display: grid;
  gap: 12px;
}

.command-done-tasks > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.74);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  text-align: left;
}

.command-done-tasks > button span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-done-tasks > button strong {
  font-size: 0.9rem;
}

.command-add-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
}

.command-add-form input,
.command-add-form select,
.command-add-form textarea {
  padding: 11px 12px;
}

.command-add-form textarea {
  min-height: 78px;
  resize: vertical;
}

.command-add-form.is-horizontal {
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1fr) minmax(180px, 0.74fr) auto;
  align-items: center;
}

.command-goal-wizard-shell {
  display: grid;
  gap: 10px;
}

.command-add-form label {
  display: grid;
  gap: 7px;
}

.command-add-form label > span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-brief-card,
.command-empty {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
}

.command-brief-card h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.05;
}

.command-brief-card p,
.command-brief-card li {
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.5;
}

.command-brief-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.command-brief-actions {
  display: grid;
  gap: 9px;
}

.command-brief-actions > strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-brief-actions div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.command-brief-actions span {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.42;
}

.command-brief-actions button {
  border: 1px solid rgba(218, 143, 36, 0.32);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 8px 11px;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-brief-actions button:hover,
.command-brief-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.52);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

.command-weekly-review {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(218, 143, 36, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 252, 243, 0.86);
}

.command-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-review-list {
  display: grid;
  gap: 8px;
  min-height: 130px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.command-review-list > strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-review-list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.command-review-list li,
.command-review-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 740;
  line-height: 1.4;
}

.command-risk-note {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 236, 189, 0.46);
}

.command-task-link {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(218, 143, 36, 0.28);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.86);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-task-link:hover,
.command-task-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.48);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

html[data-theme="dark"] .command-hero,
html[data-theme="dark"] .command-status,
html[data-theme="dark"] .command-attention,
html[data-theme="dark"] .command-panel,
html[data-theme="dark"] .command-cockpit-card,
html[data-theme="dark"] .command-template-panel,
html[data-theme="dark"] .command-growth-lab,
html[data-theme="dark"] .command-suggestions,
html[data-theme="dark"] .command-stat-grid > div,
html[data-theme="dark"] .command-signal-strip article {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(15, 20, 18, 0.96);
  box-shadow: none;
}

html[data-theme="dark"] .command-cockpit-card.is-primary {
  border-color: rgba(255, 214, 90, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 90, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.96);
}

html[data-theme="dark"] .command-attention-list article,
html[data-theme="dark"] .command-today-list div,
html[data-theme="dark"] .command-goal-mini-list div,
html[data-theme="dark"] .command-signal-list div,
html[data-theme="dark"] .command-workflow-toggle,
html[data-theme="dark"] .command-template-grid button,
html[data-theme="dark"] .command-suggestion-grid article,
html[data-theme="dark"] .command-growth-grid > div,
html[data-theme="dark"] .command-growth-kpi-grid > div,
html[data-theme="dark"] .command-growth-analytics-card,
html[data-theme="dark"] .command-growth-target-list > div,
html[data-theme="dark"] .command-economics-list > form,
html[data-theme="dark"] .command-contract-list > form,
html[data-theme="dark"] .command-competitor-table > div,
html[data-theme="dark"] .command-checklist-list > div,
html[data-theme="dark"] .command-video-review-list > div,
html[data-theme="dark"] .command-item-card,
html[data-theme="dark"] .command-brief-card,
html[data-theme="dark"] .command-focus-stage,
html[data-theme="dark"] .command-focus-list article,
html[data-theme="dark"] .command-empty,
html[data-theme="dark"] .command-add-form {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-item-card.is-high {
  border-color: rgba(255, 214, 90, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 90, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .command-item-card select,
html[data-theme="dark"] .command-add-form input,
html[data-theme="dark"] .command-add-form select,
html[data-theme="dark"] .command-add-form textarea,
html[data-theme="dark"] .command-growth-row-topline select,
html[data-theme="dark"] .command-video-check-grid select,
html[data-theme="dark"] .command-growth-score-grid input,
html[data-theme="dark"] .command-economics-input-grid input,
html[data-theme="dark"] .command-item-meta span,
html[data-theme="dark"] .command-link-stack span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .command-risk-note {
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .command-task-link {
  border-color: rgba(255, 214, 90, 0.24);
  background: rgba(255, 214, 90, 0.1);
}

html[data-theme="dark"] .command-focus-actions button,
html[data-theme="dark"] .command-task-status-actions button,
html[data-theme="dark"] .command-done-tasks > button,
html[data-theme="dark"] .command-weekly-review,
html[data-theme="dark"] .command-review-list {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-brief-actions div {
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-brief-actions button {
  border-color: rgba(255, 214, 90, 0.24);
  background: rgba(255, 214, 90, 0.1);
}

@media (max-width: 1180px) {
  .command-main-grid,
  .command-secondary-grid,
  .command-cockpit,
  .command-signal-strip,
  .command-growth-grid,
  .command-growth-kpi-grid,
  .command-growth-analytics-grid,
  .command-growth-decision-grid,
  .command-economics-input-grid,
  .command-video-check-grid,
  .command-template-grid,
  .command-suggestion-grid,
  .command-attention-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-panel.is-brief {
    grid-column: 1 / -1;
  }

  .command-goal-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .command-hero,
  .command-section-head,
  .command-status {
    align-items: stretch;
    flex-direction: column;
  }

  .command-section-head p {
    text-align: left;
  }

  .command-stat-grid,
  .command-cockpit,
  .command-signal-strip,
  .command-growth-grid,
  .command-growth-kpi-grid,
  .command-growth-analytics-grid,
  .command-growth-decision-grid,
  .command-growth-score-grid,
  .command-economics-input-grid,
  .command-video-check-grid,
  .command-template-grid,
  .command-suggestion-grid,
  .command-main-grid,
  .command-secondary-grid,
  .command-card-list.is-compact-list,
  .command-attention-list,
  .command-add-form.is-horizontal {
    grid-template-columns: 1fr;
  }

  .command-hero .button {
    width: 100%;
  }

  .command-hero-actions {
    width: 100%;
  }

  .command-brief-actions div {
    grid-template-columns: 1fr;
  }

  .command-growth-funnel > div {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .command-growth-funnel i {
    grid-column: 1 / -1;
  }

  .command-brief-actions button {
    width: 100%;
  }

  .command-review-grid {
    grid-template-columns: 1fr;
  }
}

.brand-board-grid,
.brand-context-grid,
.brand-swatch-grid {
  display: grid;
  gap: 18px;
}

.brand-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.brand-board-card,
.brand-board-section,
.brand-context-preview {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.brand-board-card,
.brand-board-section {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.brand-board-card-head {
  display: grid;
  gap: 8px;
}

.brand-board-card-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  letter-spacing: 0;
}

.brand-logo-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brand-logo-tile,
.brand-studio-main-tile,
.brand-studio-mini-tile,
.brand-context-card,
.brand-context-preview,
.brand-swatch-card {
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
}

.brand-logo-tile,
.brand-studio-main-tile,
.brand-studio-mini-tile {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 18px;
}

.brand-logo-tile span,
.brand-studio-mini-tile span,
.brand-context-card span,
.brand-context-preview > span,
.brand-swatch-card small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo-tile img {
  width: min(112px, 68%);
  height: auto;
}

.brand-logo-tile.is-light {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 200, 0, 0.14), transparent 34%),
    #fffdf5;
}

.brand-logo-tile.is-dark,
.brand-studio-mini-tile.is-dark {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 200, 0, 0.16), transparent 34%),
    #101612;
}

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

.brand-studio-logo-options {
  overflow: hidden;
}

.brand-studio-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-studio-logo-option {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.1), transparent 38%),
    rgba(255, 255, 255, 0.72);
}

.brand-studio-logo-option.is-recommended {
  border-color: rgba(255, 200, 0, 0.48);
  box-shadow: 0 18px 42px rgba(255, 200, 0, 0.13);
}

.brand-studio-logo-option-head {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-studio-logo-option-head span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.18);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-studio-logo-option-head strong {
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: right;
}

.brand-studio-logo-stage {
  display: grid;
  min-height: 190px;
  place-items: center;
  overflow: hidden;
  padding: 22px;
  border-radius: 20px;
}

.brand-studio-logo-stage .studio-brand-mark:not(.is-compact) .studio-brand-wordmark-kicker {
  font-size: clamp(2rem, 5.4vw, 3.25rem);
}

.brand-studio-logo-stage .studio-brand-mark:not(.is-compact) .studio-brand-wordmark-main {
  font-size: clamp(0.78rem, 2vw, 1.04rem);
}

.brand-studio-logo-stage.is-warm {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 200, 0, 0.24), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(86, 207, 174, 0.16), transparent 34%),
    #fff8df;
}

.brand-studio-logo-stage.is-night {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 200, 0, 0.16), transparent 34%),
    radial-gradient(circle at 84% 84%, rgba(86, 207, 174, 0.12), transparent 34%),
    #111813;
}

.brand-studio-logo-stage.is-night .studio-brand-mark {
  --studio-brand-ink: #fff8df;
  color: #fff8df;
}

.brand-studio-logo-stage.is-night .studio-brand-wordmark-kicker {
  text-shadow: none;
}

.brand-studio-logo-stage.is-topbar {
  align-items: center;
  min-height: 118px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(255, 248, 223, 0.8));
}

.brand-studio-logo-stage.is-symbol {
  min-height: 118px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 200, 0, 0.24), transparent 38%),
    #fffdf7;
}

.brand-studio-logo-option p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.45;
}

.brand-logo-downloads {
  overflow: hidden;
}

.brand-logo-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-logo-download-card {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.72);
}

.brand-logo-download-preview {
  display: grid;
  min-height: 154px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(45deg, rgba(23, 18, 10, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(23, 18, 10, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(23, 18, 10, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(23, 18, 10, 0.05) 75%),
    #fffdf7;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.brand-logo-download-preview img {
  display: block;
  width: min(128px, 82%);
  height: auto;
  object-fit: contain;
}

.brand-logo-download-preview.is-full img {
  width: min(164px, 94%);
}

.brand-logo-download-copy {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.brand-logo-download-copy strong {
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.16;
}

.brand-logo-download-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.45;
}

.brand-generated-logo-concepts {
  overflow: hidden;
}

.brand-generated-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-generated-logo-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.brand-generated-logo-image {
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 18px;
  background: #fffdf7;
}

.brand-generated-logo-image img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-generated-logo-card strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 900;
}

.brand-generated-logo-card p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.brand-studio-main-tile {
  min-height: 230px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.16), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(86, 207, 174, 0.16), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fff8e6 100%);
}

.brand-studio-mini-row {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 12px;
}

.brand-studio-mini-tile {
  min-height: 128px;
  gap: 10px;
}

.brand-context-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.brand-context-card strong {
  color: var(--foreground);
  line-height: 1.36;
}

.brand-context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-context-preview {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.brand-sidebar-preview,
.brand-topbar-preview,
.brand-loading-preview {
  display: flex;
  min-height: 98px;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  padding: 14px;
}

.brand-sidebar-preview {
  background: #fff7dc;
}

.brand-sidebar-preview img {
  flex: 0 0 auto;
}

.brand-sidebar-preview div {
  display: grid;
  gap: 3px;
}

.brand-sidebar-preview strong,
.brand-topbar-preview b {
  color: #17120a;
}

.brand-sidebar-preview small {
  color: rgba(23, 18, 10, 0.62);
  font-weight: 760;
}

.brand-topbar-preview {
  justify-content: space-between;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 209, 92, 0.36), transparent 32%),
    #f4b000;
}

.brand-topbar-preview nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.brand-topbar-preview b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.brand-loading-preview {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 200, 0, 0.18), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(86, 207, 174, 0.18), transparent 34%),
    #fffdf6;
}

.brand-loading-preview i {
  display: block;
  width: min(190px, 72%);
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4b000, #56cfae);
}

.brand-swatch-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brand-swatch-card {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.brand-swatch-card span {
  display: block;
  height: 64px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
}

.brand-swatch-card strong {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.24;
}

@media (max-width: 900px) {
  .brand-board-grid,
  .brand-context-grid,
  .brand-studio-logo-grid,
  .brand-logo-download-grid,
  .brand-generated-logo-grid {
    grid-template-columns: 1fr;
  }

  .brand-swatch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .brand-logo-comparison,
  .brand-studio-mini-row,
  .brand-logo-download-card,
  .brand-swatch-grid {
    grid-template-columns: 1fr;
  }

  .brand-topbar-preview {
    align-items: flex-start;
    flex-direction: column;
  }
}

html[data-theme="dark"] .brand-board-card,
html[data-theme="dark"] .brand-board-section,
html[data-theme="dark"] .brand-context-preview,
html[data-theme="dark"] .brand-context-card,
html[data-theme="dark"] .brand-studio-logo-option,
html[data-theme="dark"] .brand-logo-download-card,
html[data-theme="dark"] .brand-generated-logo-card,
html[data-theme="dark"] .brand-swatch-card {
  border-color: var(--border);
  background: var(--surface);
  color: var(--foreground);
}

html[data-theme="dark"] .brand-studio-main-tile,
html[data-theme="dark"] .brand-logo-tile,
html[data-theme="dark"] .brand-studio-mini-tile,
html[data-theme="dark"] .brand-studio-logo-stage,
html[data-theme="dark"] .brand-logo-download-preview,
html[data-theme="dark"] .brand-generated-logo-image {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .brand-logo-download-preview {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
    #151d18;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

html[data-theme="dark"] .brand-studio-main-tile {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.12), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(86, 207, 174, 0.12), transparent 34%),
    #151d18;
}

html[data-theme="dark"] .brand-logo-tile.is-light,
html[data-theme="dark"] .brand-sidebar-preview,
html[data-theme="dark"] .brand-topbar-preview,
html[data-theme="dark"] .brand-loading-preview {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.project-linking-field,
.project-manual-log-editor,
.project-pet-copy {
  gap: 16px;
}

.project-manual-update-list {
  display: grid;
  gap: 16px;
}

.project-pet-selector-toolbar,
.project-manual-log-header,
.project-manual-update-top,
.project-update-pet-row,
.project-stale-chip-row,
.project-pet-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-pet-selector-toolbar,
.project-manual-log-header,
.project-manual-update-top {
  align-items: center;
  justify-content: space-between;
}

.project-pet-selection-count {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.38);
  background: #fff4ca;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 800;
}

.project-pet-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-pet-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  text-align: left;
  color: var(--foreground);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.project-pet-card:hover,
.project-pet-pill:hover,
.project-stale-chip:hover,
.project-update-pet-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.project-pet-card.is-selected,
.project-pet-pill.is-selected {
  border-color: rgba(255, 200, 0, 0.52);
  background: linear-gradient(180deg, #fff7d2 0%, #fffdfa 100%);
}

.project-pet-avatar,
.project-pet-pill-avatar,
.project-update-pet-avatar {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
}

.project-pet-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.project-pet-pill-avatar,
.project-update-pet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.project-pet-avatar img,
.project-pet-pill-avatar img,
.project-update-pet-avatar img {
  object-fit: cover;
}

.project-pet-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.project-pet-copy strong {
  line-height: 1.2;
}

.project-pet-copy span {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted-foreground);
  word-break: break-word;
}

.project-pet-slug {
  color: var(--accent-strong) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem !important;
}

.project-pet-note {
  color: var(--muted-foreground);
}

.project-stale-chip,
.project-pet-pill,
.project-update-pet-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--foreground);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.project-stale-chip {
  padding: 0 14px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.project-pet-pill,
.project-update-pet-link {
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--border);
  background: white;
  font-size: 0.9rem;
  font-weight: 800;
}

.project-manual-update-card {
  gap: 16px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.admin-short-library-card {
  min-height: 100%;
  align-content: start;
}

.admin-short-library-card.is-active {
  border-color: rgba(255, 200, 0, 0.52);
  background: linear-gradient(180deg, #fff7d2 0%, #ffffff 100%);
}

.admin-short-form-summary {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #fff7d2 0%, #ffffff 100%);
}

.admin-short-section {
  padding: 0;
  overflow: hidden;
}

.admin-short-section.is-open {
  background: linear-gradient(180deg, #fffdf4 0%, #ffffff 100%);
}

.admin-short-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-short-section-toggle:hover {
  background: rgba(255, 245, 191, 0.38);
}

.admin-short-section.is-open .admin-short-section-toggle {
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 249, 222, 0.54);
}

.admin-short-section-toggle-copy {
  display: grid;
  gap: 4px;
}

.admin-short-section-toggle-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.admin-short-section-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.admin-short-section-content {
  display: grid;
  gap: 16px;
  padding: 0 22px 22px;
}

.admin-short-cat-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-short-cat-target-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.18), transparent 34%),
    #ffffff;
  box-shadow: var(--shadow-card);
}

.admin-short-cat-target-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: #fff4ca;
  color: #594108;
  font-size: 1.1rem;
  font-weight: 900;
}

.admin-short-cat-target-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-short-cat-target-copy span,
.admin-short-cat-drawer small,
.admin-short-selected-cat small {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.35;
}

.admin-short-cat-drawer,
.admin-short-cat-browser {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.admin-short-cat-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.admin-short-cat-drawer summary::-webkit-details-marker {
  display: none;
}

.admin-short-cat-drawer summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-weight: 900;
  line-height: 1;
}

.admin-short-cat-drawer[open] summary::after {
  content: "−";
}

.admin-short-cat-drawer summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-short-cat-drawer[open] summary {
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 249, 222, 0.48);
}

.admin-short-selected-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
}

.admin-short-selected-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 220px);
  padding: 8px 10px 8px 8px;
  border: 1px solid rgba(255, 200, 0, 0.44);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7d2 0%, #fffdfa 100%);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.admin-short-selected-cat:hover {
  border-color: rgba(255, 200, 0, 0.66);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.admin-short-selected-cat > span:nth-child(2) {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.admin-short-selected-cat-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.admin-short-cat-browser {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.admin-short-cat-browser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-short-cat-search {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
}

.admin-short-cat-search span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-short-cat-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  font-weight: 800;
  outline: none;
}

.admin-short-cat-results {
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.admin-short-cat-result-card {
  align-items: start;
}

.admin-short-cat-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-short-video-preview {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.admin-short-resource-row {
  align-items: flex-end;
}

.admin-short-resource-row .button {
  width: 100%;
}

.admin-short-checklist {
  display: grid;
  gap: 10px;
}

.admin-short-check-item {
  display: grid;
  grid-template-columns: auto 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: white;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.admin-short-check-item:hover {
  border-color: rgba(255, 200, 0, 0.4);
  transform: translateY(-1px);
}

.admin-short-check-item.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
  background: linear-gradient(180deg, #fff7d2 0%, #ffffff 100%);
}

.admin-short-check-item input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.admin-short-check-thumb {
  position: relative;
  display: block;
  width: 88px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-soft);
}

.admin-short-check-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.admin-short-check-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-short-check-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-short-check-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--foreground);
  line-height: 1.4;
}

.admin-short-check-note {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--foreground-soft);
}

.admin-draggable-card {
  cursor: grab;
}

.admin-draggable-card.is-dragging {
  opacity: 0.64;
  border-style: dashed;
}

.project-update-pet-link {
  background: var(--surface-soft);
}

.transparency-heading {
  display: block;
  color: var(--foreground);
  line-height: 1.4;
}

.transparency-archive-card {
  background: linear-gradient(180deg, #fff9df 0%, #ffffff 100%);
}

.transparency-project-card {
  align-content: start;
}

.content-card-body {
  gap: 12px;
}

.meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.92rem;
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.5;
}

.snapshot-card strong,
.project-meter strong {
  display: block;
  font-size: clamp(1.35rem, 2vw, 2rem);
  color: var(--foreground);
  line-height: 1.08;
}

.notice-card {
  background: #ffffff;
}

.shorts-motion-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: min(calc((100vw - var(--sidebar-rail-width, 0px)) * 0.5625), 76svh, 920px);
  min-height: clamp(520px, calc((100vw - var(--sidebar-rail-width, 0px)) * 0.54), 760px);
  align-items: end;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #050506;
  color: #ffffff;
  box-shadow: none;
}

.shorts-motion-hero::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 36%, transparent 74%);
  pointer-events: none;
}

.shorts-motion-hero-bg,
.shorts-motion-hero-frame,
.shorts-motion-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shorts-motion-hero-bg {
  z-index: 0;
  object-fit: cover;
  opacity: 0.92;
  filter: none;
  pointer-events: none;
}

.shorts-motion-hero-frame {
  z-index: 1;
  overflow: hidden;
  background: #050506;
  box-shadow: none;
}

.shorts-motion-hero-video {
  display: block;
  object-fit: cover;
  object-position: center center;
}

.shorts-motion-hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(720px, calc(100% - 48px));
  gap: 14px;
  align-self: end;
  justify-items: start;
  margin: 0 0 clamp(34px, 5.2vw, 78px) max(32px, calc((100vw - var(--sidebar-rail-width, 0px) - 1180px) / 2 + 34px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.shorts-motion-hero-copy .eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.shorts-motion-hero-copy h1 {
  max-width: 12.5ch;
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2.35rem, 4.1vw, 4.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.46);
}

.shorts-motion-hero-tags,
.shorts-motion-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.shorts-motion-hero-tags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  font-weight: 820;
  line-height: 1;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(120%);
}

.shorts-motion-hero-actions .button {
  width: auto;
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.shorts-motion-hero-actions .button-primary {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  color: #090909;
}

.shorts-motion-hero-actions .button-primary:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #090909;
}

.shorts-motion-hero-actions .button-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

.shorts-motion-hero-actions .button-secondary:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)),
    rgba(0, 0, 0, 0.42);
  color: #ffffff;
}

.shorts-flow-hero-progress {
  --shorts-hero-progress: 0%;
  display: flex;
  width: min(360px, 72vw);
  gap: 10px;
  margin-top: 2px;
}

.shorts-flow-hero-progress button {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  height: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition:
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.shorts-flow-hero-progress button span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.shorts-flow-hero-progress button.is-active {
  background: rgba(255, 255, 255, 0.32);
  cursor: default;
}

.shorts-flow-hero-progress button.is-active span {
  width: var(--shorts-hero-progress);
}

.shorts-flow-hero-progress button:not(.is-active):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.44);
  outline: none;
  transform: translateY(-1px);
}

body:has(.site-shell-rescue-console) .site-main:has(.shorts-motion-hero) {
  --site-main-top: var(--rescue-topbar-height) !important;
}

body:has(.site-shell-rescue-console) .page-band:has(.shorts-motion-hero) {
  padding: 0 !important;
}

body:has(.site-shell-rescue-console) .page-band:has(.shorts-motion-hero) > .container {
  width: 100%;
  max-width: none;
  gap: 18px;
  padding-inline: 0;
}

body:has(.site-shell-rescue-console) .shorts-motion-hero + .shorts-season-nav,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .shorts-season-section,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .empty-state,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .shorts-minis-archive {
  width: min(calc(100% - 32px), var(--content-max));
  margin-inline: auto;
}

@media (min-width: 721px) and (max-width: 980px) {
  .shorts-motion-hero {
    height: min(72vw, 620px);
    min-height: 520px;
  }

  .shorts-motion-hero-copy {
    width: min(640px, calc(100% - 64px));
    margin: 0 32px 36px;
  }

  .shorts-motion-hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 7vw, 3.25rem);
  }
}

@media (max-width: 720px) {
  .shorts-motion-hero {
    height: min(72svh, 560px);
    min-height: 480px;
  }

  .shorts-motion-hero::before {
    background:
      linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.64) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 58%);
  }

  .shorts-motion-hero-copy {
    width: calc(100% - 48px);
    gap: 12px;
    margin: 0 24px 24px;
  }

  .shorts-motion-hero-copy h1 {
    max-width: 9.5ch;
    font-size: clamp(1.9rem, 9.6vw, 2.65rem);
    line-height: 1.02;
  }

  .shorts-motion-hero-tags,
  .shorts-motion-hero-actions {
    gap: 8px;
  }

  .shorts-motion-hero-tags span {
    min-height: 31px;
    padding-inline: 10px;
    font-size: 0.76rem;
  }

  .shorts-motion-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(260px, 100%);
  }

  .shorts-motion-hero-actions .button {
    width: 100%;
  }

  .shorts-flow-hero-progress {
    width: min(300px, 100%);
    gap: 6px;
    margin-top: 0;
  }

  .shorts-flow-hero-progress button {
    height: 5px;
  }
}

.shorts-hero-card {
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.shorts-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 18px;
  align-items: flex-end;
}

.shorts-hero-copy,
.shorts-hero-side {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.shorts-hero-card .hero-lead {
  max-width: 50ch;
}

.shorts-hero-tags {
  min-width: 0;
  gap: 8px;
}

.shorts-hero-tags .tag,
.shorts-episode-card .tag,
.shorts-season-stats .tag {
  min-width: 0;
  max-width: 100%;
}

.shorts-hero-tags .tag > span:last-child,
.shorts-episode-card .tag > span:last-child,
.shorts-season-stats .tag > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shorts-hero-metric {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  background: rgba(255, 255, 255, 0.84);
}

.shorts-hero-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-hero-metric strong {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.08;
}

.shorts-hero-actions {
  gap: 8px;
}

.shorts-season-nav {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 12;
  padding: 10px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.1);
  backdrop-filter: blur(14px);
}

.shorts-season-nav-scroll {
  display: grid;
  grid-auto-columns: minmax(168px, 220px);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.shorts-season-nav-link {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.shorts-season-nav-link:hover,
.shorts-season-nav-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  outline: 0;
}

.shorts-season-nav-link span,
.shorts-season-nav-link small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.shorts-season-nav-link strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-season-jump {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.shorts-season-jump .button-row {
  min-width: 0;
}

.shorts-season-jump .button {
  min-width: 0;
  max-width: 100%;
}

.shorts-season-jump .button,
.shorts-hero-side > .meta-label {
  overflow-wrap: anywhere;
}

.shorts-season-section {
  position: relative;
  scroll-margin-top: 112px;
}

.shorts-season-section + .shorts-season-section {
  margin-top: 18px;
  border-top: 0;
}

.shorts-season-section + .shorts-season-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 860px);
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 200, 0, 0),
    rgba(255, 200, 0, 0.54) 16%,
    rgba(94, 224, 184, 0.42) 46%,
    rgba(11, 105, 183, 0.18) 74%,
    rgba(11, 105, 183, 0)
  );
}

.shorts-season-section + .shorts-season-section::after {
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 200, 0, 0.38);
  content: "";
}

.shorts-season-disclosure {
  overflow: hidden;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.shorts-season-summary-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.shorts-season-summary-toggle::-webkit-details-marker {
  display: none;
}

.shorts-season-summary-toggle:hover {
  background: rgba(15, 23, 42, 0.04);
}

.shorts-season-disclosure[open] .shorts-season-summary-toggle {
  border-bottom: 1px solid var(--border-soft);
}

.shorts-season-summary-toggle .shorts-season-copy {
  gap: 7px;
}

.shorts-season-copy > strong {
  color: var(--foreground);
  font-size: clamp(1.58rem, 2.4vw, 2.34rem);
  font-weight: 950;
  line-height: 1.08;
}

.shorts-season-toggle-side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shorts-season-toggle-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1.1rem;
  font-weight: 950;
}

.shorts-season-toggle-indicator::before {
  content: "+";
}

.shorts-season-disclosure[open] .shorts-season-toggle-indicator::before {
  content: "−";
}

.shorts-season-body {
  padding: 20px 22px 22px;
}

.shorts-minis-archive {
  padding-top: 18px;
}

.shorts-minis-archive .shorts-subsection-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.54fr);
  align-items: end;
}

.shorts-minis-archive .shorts-subsection-head p:last-child {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  line-height: 1.5;
}

.shorts-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.shorts-mini-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.shorts-mini-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #111827;
  object-fit: cover;
}

.shorts-mini-card-copy {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.shorts-mini-card-copy > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.shorts-mini-card-copy h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.22;
}

@media (max-width: 960px) {
  .cat-detail-minis-grid,
  .shorts-mini-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shorts-minis-archive .shorts-subsection-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .cat-detail-minis-grid,
  .shorts-mini-card-grid {
    grid-template-columns: 1fr;
  }
}

.shorts-season-head,
.shorts-subsection-head,
.shorts-follow-head {
  display: grid;
  gap: 8px;
}

.shorts-season-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 16px;
}

.shorts-season-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.shorts-season-copy {
  display: grid;
  gap: 8px;
}

.shorts-season-copy h2 {
  font-size: clamp(1.85rem, 2.6vw, 2.6rem);
  line-height: 1.08;
}

.shorts-season-summary {
  display: -webkit-box;
  max-width: 58ch;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.96rem;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shorts-season-stats {
  justify-content: flex-end;
}

.shorts-season-actions {
  justify-content: flex-end;
}

.shorts-cat-mini-rail {
  display: grid;
  justify-self: end;
  align-items: start;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(26, 37, 54, 0.07);
}

.shorts-cat-mini-rail.is-single {
  max-width: min(100%, 310px);
}

.shorts-cat-mini-head {
  display: flex;
  justify-self: stretch;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 0 4px;
}

.shorts-cat-mini-head .meta-label {
  margin: 0;
}

.shorts-cat-mini-head span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.shorts-cat-mini-list,
.shorts-episode-cat-list {
  min-width: 0;
  gap: 7px;
}

.shorts-cat-mini-list {
  display: grid;
  justify-self: end;
  width: 100%;
  max-width: 100%;
  justify-content: end;
  justify-items: stretch;
}

.shorts-episode-cat-list {
  display: flex;
  flex-wrap: wrap;
}

.shorts-cat-mini-rail.is-count-1 .shorts-cat-mini-list {
  grid-template-columns: max-content;
}

.shorts-cat-mini-rail.is-count-2 .shorts-cat-mini-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-3 .shorts-cat-mini-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-4 .shorts-cat-mini-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-5 .shorts-cat-mini-list,
.shorts-cat-mini-rail.is-count-6 .shorts-cat-mini-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shorts-cat-mini-item {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  max-width: 176px;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(201, 213, 226, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.shorts-cat-mini-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 12px 28px rgba(26, 37, 54, 0.1);
}

.shorts-cat-mini-item.is-static {
  cursor: default;
  opacity: 0.88;
}

.shorts-cat-mini-item.is-static:hover {
  transform: none;
  border-color: rgba(201, 213, 226, 0.8);
  box-shadow: 0 8px 22px rgba(26, 37, 54, 0.06);
}

.shorts-cat-mini-rail.is-dense {
  max-width: min(100%, 560px);
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-item {
  max-width: none;
  min-height: 42px;
  padding-right: 8px;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-avatar {
  width: 32px;
  height: 32px;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-copy strong {
  font-size: 0.8rem;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-copy span {
  font-size: 0.62rem;
}

.shorts-cat-mini-avatar,
.shorts-episode-cat-avatar {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.shorts-cat-mini-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(201, 213, 226, 0.72);
}

.shorts-episode-cat-avatar {
  width: 26px;
  height: 26px;
}

.shorts-cat-mini-avatar img,
.shorts-episode-cat-avatar img {
  object-fit: cover;
}

.shorts-cat-mini-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.shorts-cat-mini-copy strong,
.shorts-cat-mini-copy span,
.shorts-episode-cat-pill > span:not(.shorts-episode-cat-avatar),
.shorts-episode-cat-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-cat-mini-copy strong {
  font-size: 0.86rem;
  line-height: 1.12;
}

.shorts-cat-mini-copy span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.shorts-cat-mini-more,
.shorts-episode-cat-more {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-weight: 900;
}

.shorts-cat-mini-more {
  min-height: 36px;
  padding: 0 11px;
  background: rgba(247, 248, 251, 0.96);
  font-size: 0.78rem;
}

.shorts-episode-cats {
  display: grid;
  gap: 7px;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 213, 226, 0.54);
}

.shorts-episode-cats.is-dense {
  gap: 6px;
}

.shorts-episode-cat-pill {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.shorts-episode-cat-pill small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.shorts-episode-cat-more {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.shorts-episode-cat-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.shorts-episode-cat-stack {
  display: flex;
  min-width: 0;
  padding-left: 2px;
}

.shorts-episode-cat-stack .shorts-episode-cat-avatar {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(201, 213, 226, 0.72);
}

.shorts-episode-cat-stack .shorts-episode-cat-avatar + .shorts-episode-cat-avatar {
  margin-left: -9px;
}

.shorts-episode-cat-names {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-episode-cat-names small {
  margin-left: 4px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.shorts-season-lower,
.shorts-detail-support-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.72fr);
  align-items: start;
}

.shorts-season-lower > :only-child,
.shorts-detail-support-grid > :only-child {
  grid-column: 1 / -1;
}

.shorts-subsection {
  gap: 14px;
}

.card-grid.shorts-linked-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.shorts-linked-grid.shorts-linked-grid-detail {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.shorts-subsection-head h3,
.shorts-follow-head h3 {
  font-size: clamp(1.18rem, 1.6vw, 1.42rem);
  line-height: 1.16;
}

.shorts-episode-card {
  background: #ffffff;
}

.shorts-linked-card {
  background: #ffffff;
}

.shorts-linked-card-static {
  cursor: default;
}

.shorts-linked-card-static:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.shorts-linked-card-detail {
  align-content: start;
}

.shorts-linked-card-detail .media-thumb {
  height: 182px;
  margin-bottom: 14px;
}

.shorts-episode-card,
.shorts-linked-card,
.shorts-follow-group,
.shorts-link-card {
  min-width: 0;
}

.shorts-episode-card .content-card-body h3,
.shorts-linked-card .content-card-body h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.shorts-card-summary,
.shorts-card-note,
.shorts-link-text strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.shorts-card-summary {
  -webkit-line-clamp: 3;
}

.shorts-card-summary.shorts-card-summary-tight {
  -webkit-line-clamp: 2;
}

.shorts-card-note {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.shorts-linked-card .meta-row,
.shorts-episode-card .meta-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 8px;
  min-width: 0;
}

.shorts-linked-card .meta-row .meta-row-icon,
.shorts-episode-card .meta-row .meta-row-icon {
  margin-top: 2px;
}

.shorts-linked-card .meta-row > span:last-child,
.shorts-episode-card .meta-row > span:last-child,
.shorts-linked-card .helper-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shorts-context-card {
  gap: 10px;
}

.shorts-context-card > p:last-child {
  margin: 0;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.62;
}

.shorts-follow-panel {
  gap: 16px;
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(247, 248, 251, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.shorts-follow-panel-compact {
  align-content: start;
}

.shorts-follow-panel-detail {
  gap: 18px;
  padding: 22px 24px;
}

.shorts-follow-panel-detail .shorts-follow-head {
  gap: 6px;
}

.shorts-follow-panel-detail .shorts-follow-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

.shorts-follow-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.28fr) minmax(240px, 0.84fr);
  align-items: start;
}

.shorts-follow-group,
.shorts-link-list {
  display: grid;
  gap: 8px;
}

.shorts-follow-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.shorts-follow-group-primary,
.shorts-follow-group-secondary {
  align-content: start;
}

.shorts-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(201, 213, 226, 0.86);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.shorts-link-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.shorts-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-strong);
}

.shorts-link-icon svg {
  width: 100%;
  height: 100%;
}

.shorts-link-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shorts-link-kicker {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-link-text strong {
  font-size: 0.94rem;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.shorts-season-rail-card {
  align-content: start;
}

.shorts-season-sidebar-card {
  align-content: start;
  gap: 12px;
}

.shorts-season-sidebar-card .shorts-season-summary {
  max-width: none;
  -webkit-line-clamp: 3;
}

.shorts-season-sidebar-card .helper-text {
  margin: 0;
}

.shorts-season-sidebar-card .button-row {
  row-gap: 8px;
}

.shorts-episode-rail {
  display: grid;
  gap: 8px;
}

.shorts-episode-rail-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(201, 213, 226, 0.82);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.shorts-episode-rail-item:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.shorts-episode-rail-item.is-current {
  border-color: rgba(15, 23, 42, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 24%),
    rgba(255, 252, 242, 0.98);
}

.shorts-episode-rail-label {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-episode-rail-item strong {
  font-size: 0.94rem;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .shorts-hero-layout,
  .shorts-season-head,
  .shorts-season-summary-toggle,
  .shorts-follow-grid,
  .shorts-follow-stack,
  .shorts-season-lower,
  .shorts-detail-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-season-side,
  .shorts-season-stats,
  .shorts-season-toggle-side {
    justify-content: flex-start;
    justify-items: start;
  }

  .shorts-season-toggle-side {
    display: flex;
    flex-wrap: wrap;
  }

  .shorts-cat-mini-rail {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .shorts-cat-mini-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 719px) {
  .shorts-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid.shorts-linked-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-follow-panel-detail .shorts-follow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-season-section {
    gap: 18px;
    scroll-margin-top: 96px;
  }

  .shorts-hero-tags {
    display: grid;
  }

  .shorts-season-jump .button {
    min-height: 42px;
    height: auto;
    padding-block: 9px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .shorts-season-section + .shorts-season-section {
    margin-top: 14px;
    padding-top: 0;
  }

  .shorts-season-nav {
    margin-inline: -4px;
    border-radius: 18px;
  }

  .shorts-season-summary-toggle,
  .shorts-season-body {
    padding: 16px;
  }

  .shorts-link-card {
    padding: 11px 12px;
    border-radius: 16px;
  }

  .shorts-link-text strong {
    font-size: 0.9rem;
  }
}

@media (max-width: 479px) {
  .shorts-hero-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.story-highlight,
.inline-note {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.success-note {
  background: #ecfdf3;
}

.info-note {
  background: #eef6ff;
}

.support-success-band {
  padding-top: 42px;
  background:
    linear-gradient(180deg, #fff9ee 0%, #f7fbff 48%, #ffffff 100%);
}

.support-success-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.support-success-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: 24px;
  align-items: stretch;
}

.support-success-copy,
.support-success-status-card,
.support-success-card,
.support-success-impact-card {
  border: 1px solid rgba(135, 148, 166, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08);
}

.support-success-copy {
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 520px;
  padding: 46px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 232, 0.96) 58%, rgba(238, 250, 246, 0.98) 100%);
}

.support-success-eyebrow {
  margin: 0;
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.support-success-copy h1,
.support-success-section-header h2,
.support-success-card h2,
.support-success-status-card h2 {
  margin: 0;
  color: #101828;
  letter-spacing: 0;
}

.support-success-copy h1 {
  max-width: 820px;
  font-size: 4.25rem;
  line-height: 1;
}

.support-success-copy p:not(.support-success-eyebrow),
.support-success-status-card p,
.support-success-card p,
.support-success-impact-card p {
  margin: 0;
  color: #526071;
  font-size: 1rem;
  line-height: 1.62;
}

.support-success-copy > p:not(.support-success-eyebrow) {
  max-width: 720px;
  font-size: 1.08rem;
}

.support-success-actions,
.support-success-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.support-success-status-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 32px;
  overflow: hidden;
}

.support-success-status-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, #16a36b, #f0b429, #0b69b7);
}

.support-success-status-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ecfdf3;
  border: 1px solid rgba(22, 163, 107, 0.28);
}

.support-success-status-mark::after {
  content: "";
  width: 18px;
  height: 10px;
  border-left: 4px solid #118653;
  border-bottom: 4px solid #118653;
  transform: rotate(-45deg) translate(1px, -1px);
}

.support-success-status-mark.is-pending {
  background: #fff7db;
  border-color: rgba(240, 180, 41, 0.42);
}

.support-success-status-mark.is-pending::after,
.support-success-status-mark.is-unverified::after {
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #b7791f;
  transform: none;
}

.support-success-status-mark.is-unverified {
  background: #f3f6fb;
  border-color: rgba(82, 96, 113, 0.24);
}

.support-success-status-mark.is-unverified::after {
  color: #526071;
}

.support-success-amount {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-radius: 8px;
  background: #f5fbff;
  border: 1px solid rgba(11, 105, 183, 0.16);
}

.support-success-amount span,
.support-success-mini-list span {
  color: #526071;
  font-size: 0.86rem;
  font-weight: 780;
}

.support-success-amount strong {
  color: #101828;
  font-size: 2.05rem;
  line-height: 1.1;
}

.support-success-mini-list {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.support-success-mini-list span {
  position: relative;
  padding-left: 22px;
  line-height: 1.42;
}

.support-success-mini-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a36b;
}

.support-success-impact {
  display: grid;
  gap: 18px;
}

.support-success-section-header {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.support-success-section-header h2,
.support-success-card h2 {
  font-size: 2rem;
  line-height: 1.12;
}

.support-success-impact-grid,
.support-success-next-grid {
  display: grid;
  gap: 18px;
}

.support-success-impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-success-impact-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 14px;
}

.support-success-impact-card h3 {
  margin: 0 0 6px;
  color: #101828;
  font-size: 1.12rem;
  line-height: 1.22;
}

.support-success-impact-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f7;
}

.support-success-impact-media img {
  object-fit: cover;
}

.support-success-next-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
}

.support-success-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px;
}

.support-success-card-soft {
  background:
    linear-gradient(180deg, rgba(255, 247, 219, 0.9), rgba(255, 255, 255, 0.96));
}

html[data-theme="dark"] .support-success-band {
  background:
    linear-gradient(180deg, #111827 0%, #0f172a 52%, #111827 100%);
}

html[data-theme="dark"] .support-success-copy,
html[data-theme="dark"] .support-success-status-card,
html[data-theme="dark"] .support-success-card,
html[data-theme="dark"] .support-success-impact-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .support-success-copy {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(40, 35, 24, 0.96) 58%, rgba(15, 42, 37, 0.96) 100%);
}

html[data-theme="dark"] .support-success-copy h1,
html[data-theme="dark"] .support-success-section-header h2,
html[data-theme="dark"] .support-success-card h2,
html[data-theme="dark"] .support-success-status-card h2,
html[data-theme="dark"] .support-success-impact-card h3,
html[data-theme="dark"] .support-success-amount strong {
  color: #f8fafc;
}

html[data-theme="dark"] .support-success-copy p:not(.support-success-eyebrow),
html[data-theme="dark"] .support-success-status-card p,
html[data-theme="dark"] .support-success-card p,
html[data-theme="dark"] .support-success-impact-card p,
html[data-theme="dark"] .support-success-amount span,
html[data-theme="dark"] .support-success-mini-list span {
  color: #cbd5e1;
}

html[data-theme="dark"] .support-success-amount {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(15, 23, 42, 0.78);
}

@media (max-width: 980px) {
  .support-success-hero,
  .support-success-next-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-success-copy {
    min-height: auto;
  }

  .support-success-impact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 719px) {
  .support-success-band {
    padding-top: 18px;
  }

  .support-success-shell {
    width: min(100% - 24px, 1180px);
    gap: 18px;
  }

  .support-success-copy,
  .support-success-status-card,
  .support-success-card {
    padding: 20px;
  }

  .support-success-copy h1 {
    font-size: 2.55rem;
    line-height: 1.04;
  }

  .support-success-section-header h2,
  .support-success-card h2 {
    font-size: 1.55rem;
  }

  .support-success-actions .button,
  .support-success-card-actions .button {
    width: 100%;
    justify-content: center;
  }
}

.mobile-companion-card {
  align-content: start;
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.9), rgba(255, 255, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
}

.mobile-companion-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-companion-card-coming-soon {
  border-color: rgba(90, 103, 108, 0.18);
  background:
    linear-gradient(180deg, rgba(246, 243, 235, 0.96), rgba(255, 255, 255, 0.98)),
    rgba(255, 255, 255, 0.98);
}

.mobile-companion-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(90, 103, 108, 0.16);
  background: rgba(90, 103, 108, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-companion-card h3 {
  line-height: 1.18;
}

.mobile-companion-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.mobile-companion-disabled-button {
  background: rgba(90, 103, 108, 0.08);
  color: var(--muted);
  border-color: rgba(90, 103, 108, 0.16);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.note-grid.note-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.story-detail-snapshot-grid .snapshot-card {
  align-content: start;
}

.timeline-item {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.timeline-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.meter-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e9eef5;
  overflow: hidden;
}

.meter-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.field {
  gap: 8px;
}

.field label {
  color: var(--foreground);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--foreground);
}

.admin-core-profile-grid {
  display: grid;
  gap: 14px;
}

.admin-core-profile-grid .field {
  align-content: start;
}

.admin-pet-photo-manager {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 26%),
    rgba(248, 250, 252, 0.92);
}

.admin-pet-photo-manager-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-pet-photo-manager-head h5 {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.18rem);
}

.admin-pet-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.admin-pet-photo-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.admin-pet-photo-card.is-hero {
  border-color: rgba(255, 200, 0, 0.72);
  box-shadow: 0 12px 30px rgba(255, 200, 0, 0.16);
}

.admin-pet-photo-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--surface-soft);
  cursor: pointer;
}

.admin-pet-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 140ms ease;
}

.admin-pet-photo-thumb:hover img {
  transform: scale(1.035);
}

.admin-pet-photo-thumb span {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}

.admin-pet-photo-card-fields {
  display: grid;
  gap: 9px;
}

.admin-pet-photo-card-fields .field input {
  min-height: 40px;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
}

.admin-pet-photo-card-fields .field label {
  font-size: 0.78rem;
}

.admin-primary-name-field {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%),
    white;
}

.admin-primary-name-field label {
  font-size: 1.06rem;
  font-weight: 950;
}

.field .admin-primary-name-input {
  min-height: 64px;
  padding: 14px 16px;
  border-color: rgba(11, 105, 183, 0.3);
  color: var(--foreground);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 950;
  line-height: 1.05;
}

.field .admin-primary-name-input:focus {
  border-color: rgba(11, 105, 183, 0.58);
  box-shadow: 0 0 0 4px rgba(11, 105, 183, 0.12);
}

.admin-primary-name-field .helper-text {
  color: var(--foreground);
  font-weight: 700;
}

.admin-combobox {
  position: relative;
}

.admin-combobox-trigger {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.admin-combobox-trigger.is-open {
  border-color: rgba(255, 200, 0, 0.56);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.16);
}

.admin-combobox-caret {
  flex: 0 0 auto;
  color: var(--muted-foreground);
}

.admin-combobox-popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(18, 24, 38, 0.12);
}

.admin-combobox-search {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
}

.admin-combobox-list {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow: auto;
}

.admin-combobox-option {
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: white;
  color: var(--foreground);
  text-align: left;
}

.admin-combobox-option.is-selected {
  border-color: rgba(255, 200, 0, 0.52);
  background: linear-gradient(180deg, #fff7d2 0%, #ffffff 100%);
}

.admin-combobox-empty {
  padding: 11px 12px;
  border-radius: 14px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-size: 0.92rem;
}

.admin-suggest-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.admin-combobox-trigger-inline {
  width: auto;
  min-width: 124px;
  min-height: 50px;
  justify-content: center;
  font-size: 0.9rem;
}

.cats-search-field .cats-search-shell input {
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.cats-search-field .cats-search-shell input::-webkit-search-decoration,
.cats-search-field .cats-search-shell input::-webkit-search-cancel-button,
.cats-search-field .cats-search-shell input::-webkit-search-results-button,
.cats-search-field .cats-search-shell input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.checkbox-field {
  align-content: end;
}

.checkbox-field input,
.checkbox-row input {
  width: 18px;
  height: 18px;
  min-height: auto;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  font-weight: 700;
}

.admin-form-guide,
.admin-form-section,
.admin-form-disclosure {
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.admin-form-guide,
.admin-form-section {
  padding: 22px;
}

.admin-form-guide,
.admin-form-guide-grid,
.admin-form-guide-card,
.admin-form-section,
.admin-form-section-header,
.admin-form-disclosure-content {
  display: grid;
  gap: 16px;
}

.admin-form-guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.admin-form-guide-card {
  align-content: start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
}

.admin-form-section-title-row,
.admin-form-disclosure-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-form-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-form-chip.is-required {
  background: #fff1bf;
  color: var(--foreground);
  border: 1px solid rgba(255, 200, 0, 0.42);
}

.admin-form-chip.is-optional {
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  border: 1px solid rgba(11, 105, 183, 0.12);
}

.admin-form-guide-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--foreground);
}

.admin-form-guide-list li {
  line-height: 1.55;
}

.admin-form-disclosure {
  overflow: hidden;
}

.admin-form-disclosure summary {
  list-style: none;
  padding: 18px 22px;
}

.admin-form-disclosure summary::-webkit-details-marker {
  display: none;
}

.admin-form-disclosure summary:hover {
  background: rgba(255, 245, 191, 0.38);
}

.admin-form-disclosure[open] summary {
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 249, 222, 0.54);
}

.admin-form-disclosure-content {
  padding: 0 22px 22px;
}

.admin-form-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-form-submit-row {
  display: grid;
  gap: 14px;
}

.admin-recognition-shell {
  display: grid;
  gap: 18px;
}

.admin-recognition-add-grid,
.admin-recognition-row {
  display: grid;
  gap: 12px;
}

.admin-recognition-add-grid {
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 0.8fr) minmax(110px, 0.5fr) auto;
  align-items: flex-end;
}

.admin-recognition-published {
  min-height: 50px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: white;
}

.admin-recognition-list {
  display: grid;
  gap: 12px;
}

.admin-recognition-row {
  grid-template-columns: minmax(180px, 1.2fr) minmax(130px, 0.62fr) minmax(92px, 0.42fr) auto minmax(180px, 1fr) auto;
  align-items: flex-end;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-recognition-note-field {
  min-width: 0;
}

.admin-recognition-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-pet-editor-card {
  scroll-margin-top: 56px;
}

.admin-pet-command-bar {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 24;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
  backdrop-filter: blur(14px);
}

.admin-pet-command-current {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.admin-pet-command-current strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pet-command-current span:last-child {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pet-command-search {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-pet-command-search input {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 0.88rem;
}

.admin-pet-command-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.admin-pet-command-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 23px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(245, 247, 250, 0.9);
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.admin-pet-command-filter:hover,
.admin-pet-command-filter:focus-visible {
  border-color: rgba(11, 105, 183, 0.2);
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  outline: none;
}

.admin-pet-command-filter.is-active {
  border-color: rgba(255, 200, 0, 0.44);
  background: #fff1bf;
  color: var(--foreground);
}

.admin-pet-command-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  max-height: min(360px, 58vh);
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.16);
}

.admin-pet-command-results-head {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -6px -6px 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.98);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-pet-command-results-head strong {
  color: var(--foreground);
  font-size: 0.76rem;
}

.admin-pet-command-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
}

.admin-pet-command-result:hover,
.admin-pet-command-result:focus-visible {
  background: rgba(255, 245, 191, 0.62);
  outline: none;
}

.admin-pet-command-thumb {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-soft);
}

.admin-pet-command-thumb img {
  object-fit: cover;
}

.admin-pet-command-result span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.admin-pet-command-result span:last-child {
  justify-items: end;
  text-align: right;
}

.admin-pet-command-result strong {
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pet-command-result small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-pet-command-empty {
  padding: 12px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 800;
  text-align: center;
}

.admin-pet-command-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-pet-command-actions .button {
  min-height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

@media (max-width: 920px) {
  .admin-pet-command-bar {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .admin-pet-command-actions {
    justify-content: stretch;
  }

  .admin-pet-command-actions .button {
    flex: 1;
  }
}

@media (max-width: 719px) {
  .admin-pet-command-bar {
    top: max(6px, env(safe-area-inset-top));
    margin-inline: -2px;
    padding: 7px;
    border-radius: 14px;
  }

  .admin-pet-command-result {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .admin-pet-command-result span:last-child {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .admin-pet-command-thumb {
    width: 34px;
    height: 34px;
  }
}

.admin-pet-editor-heading {
  display: grid;
  gap: 16px;
}

.admin-pet-editor-identity {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.94) 0%, rgba(255, 255, 255, 0.98) 100%),
    rgba(255, 255, 255, 0.98);
}

.admin-pet-editor-kicker {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-pet-editor-name {
  display: block;
  color: var(--foreground);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 950;
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-pet-editor-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-pet-editor-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
}

.helper-text {
  font-size: 0.93rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.paypal-card.is-compact {
  gap: 14px;
}

.paypal-card.is-compact h3 {
  font-size: clamp(1.24rem, 1.8vw, 1.6rem);
}

.paypal-card.is-compact .helper-text {
  font-size: 0.88rem;
  line-height: 1.5;
}

.paypal-checkout-button {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 18px;
  text-align: left;
  white-space: normal;
}

.paypal-checkout-button.is-centered {
  justify-content: center;
}

.paypal-checkout-copy {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.paypal-checkout-amount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.48);
  background: rgba(255, 200, 0, 0.14);
  line-height: 1;
  white-space: nowrap;
}

.paypal-card.support-case-checkout {
  gap: 12px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 248, 214, 0.96) 0%, rgba(255, 255, 255, 0.98) 36%),
    rgba(255, 255, 255, 0.98);
}

.paypal-card.support-case-checkout .stack-tight {
  gap: 6px;
}

.paypal-card.support-case-checkout h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
}

.paypal-card.support-case-checkout .helper-text {
  font-size: 0.82rem;
  line-height: 1.45;
}

.paypal-card.support-case-checkout .paypal-preset-grid.is-compact {
  gap: 7px;
}

.paypal-card.support-case-checkout .chip-button.is-compact {
  align-content: center;
  min-height: 50px;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 16px;
}

.paypal-card.support-case-checkout .chip-button.is-compact strong {
  font-size: 0.96rem;
  line-height: 1;
}

.paypal-card.support-case-checkout .chip-button.is-compact span {
  font-size: 0.78rem;
  line-height: 1.2;
}

.paypal-card.support-case-checkout .field {
  gap: 8px;
}

.paypal-card.support-case-checkout .field label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.paypal-card.support-case-checkout .field input {
  min-height: 46px;
  padding-inline: 14px;
  font-size: 0.96rem;
}

.paypal-card.support-case-checkout .button-primary {
  min-height: 48px;
  font-size: 0.95rem;
}

.support-case-followup {
  gap: 12px;
  padding: 20px;
}

.support-case-followup h3 {
  font-size: clamp(1.04rem, 1.45vw, 1.28rem);
  line-height: 1.25;
}

.support-case-followup p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.support-case-followup-actions {
  gap: 8px;
}

.support-case-followup-actions .button {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 0.9rem;
}

.support-case-header {
  gap: 12px;
}

.support-case-header .hero-lead {
  font-size: 1.02rem;
}

.support-case-story {
  gap: 12px;
}

.support-case-story h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.34rem);
  line-height: 1.28;
}

.support-case-story p:not(.meta-label) {
  font-size: 0.96rem;
  line-height: 1.7;
}

.paypal-preset-grid.is-compact {
  grid-template-columns: 1fr;
  gap: 10px;
}

.uploaded-image-preview {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.chip-button {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 92px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  text-align: left;
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

.chip-button strong {
  font-size: 1.2rem;
  line-height: 1.1;
}

.chip-button span {
  color: var(--muted-foreground);
  line-height: 1.45;
}

.chip-button.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
  background: linear-gradient(180deg, #fff7d2 0%, #fffdfa 100%);
}

.chip-button.is-compact {
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  min-height: 60px;
  padding: 12px 14px;
  gap: 12px;
}

.chip-button.is-compact strong {
  font-size: 1.04rem;
  white-space: nowrap;
}

.chip-button.is-compact span {
  font-size: 0.84rem;
  line-height: 1.35;
}

.empty-state {
  background: rgba(255, 255, 255, 0.96);
}

.project-meter {
  align-items: center;
  justify-content: space-between;
}

.detail-side {
  align-self: start;
}

.site-footer .footer-brand h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.5rem);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-grid,
  .section-header,
  .detail-grid,
  .field-grid,
  .preset-grid,
  .page-intro-grid,
  .two-up-grid,
  .support-grid,
  .note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .note-grid.note-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-core-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-primary-name-field {
    grid-column: 1 / -1;
  }

  .card-grid,
  .snapshot-grid,
  .stats-grid,
  .admin-grid,
  .compact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cats-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cats-discovery-layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(260px, 0.68fr);
  }

  .cats-feature-card {
    grid-template-rows: minmax(190px, 0.92fr) auto;
    border-top: 0;
    border-left: 1px solid rgba(11, 105, 183, 0.12);
  }

  .cats-feature-media {
    min-height: 190px;
  }

  .proof-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loading-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  .mobile-nav-toggle,
  .site-overlay {
    display: none;
  }

  .site-sidebar {
    width: var(--sidebar-rail-width);
    transform: translateX(0);
    padding: 20px 9px 18px;
    box-shadow: 0 18px 36px rgba(33, 33, 33, 0.12);
  }

  .sidebar-desktop-pin-toggle {
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar:hover,
  .site-sidebar.is-desktop-expanded {
    width: var(--sidebar-width);
    padding-inline: 18px;
    box-shadow: var(--shadow);
  }

  .site-main-shell {
    margin-left: var(--sidebar-rail-width);
  }

  .site-main {
    --site-main-top: 28px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 18px;
  }

  .site-main.site-main-soft-record,
  .site-main.site-main-cat-detail {
    --site-main-top: 0px;
  }

  .site-main:has(.cat-detail-band) {
    --site-main-top: 0px;
    padding-top: var(--site-main-top);
  }

  .site-sidebar .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .site-sidebar .sidebar-theme-row {
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-studio-mission {
    display: none;
  }

  .site-sidebar.is-studio-console .sidebar-studio-universe {
    justify-items: center;
    padding-inline: 0;
  }

  .site-sidebar.is-studio-console .sidebar-studio-universe-current {
    grid-template-columns: auto;
    justify-items: center;
    padding-inline: 6px;
  }

  .site-sidebar.is-studio-console .sidebar-studio-universe-copy,
  .site-sidebar.is-studio-console .sidebar-studio-universe-caret,
  .site-sidebar.is-studio-console .sidebar-studio-universe-switcher > div {
    display: none;
  }

  .site-sidebar.is-studio-console .sidebar-brand-row {
    align-items: center;
  }

  .site-sidebar.is-studio-console .sidebar-studio-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar.is-studio-console .sidebar-studio-brand-symbol {
    display: inline-grid;
  }

  .site-sidebar.is-studio-console .sidebar-studio-brand-logo {
    display: none;
  }

  .site-sidebar .sidebar-nav,
  .site-sidebar .sidebar-support-actions {
    justify-items: center;
  }

  .site-sidebar .sidebar-link {
    width: 100%;
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-user {
    justify-items: center;
    padding: 10px 8px;
  }

  .site-sidebar .sidebar-user-main {
    grid-template-columns: auto;
    justify-items: center;
  }

  .site-sidebar .sidebar-section-title,
  .site-sidebar .sidebar-link-label,
  .site-sidebar .sidebar-language-row,
  .site-sidebar .sidebar-theme-row .sidebar-language-label,
  .site-sidebar .sidebar-user .meta-label,
  .site-sidebar .sidebar-user-meta,
  .site-sidebar .sidebar-button span,
  .site-sidebar .sidebar-desktop-pin-copy {
    display: none;
  }

  .site-sidebar .sidebar-user-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .site-sidebar:hover .sidebar-brand,
  .site-sidebar.is-desktop-expanded .sidebar-brand {
    justify-content: flex-start;
    padding-inline: 4px;
  }

  .site-sidebar:hover .sidebar-desktop-pin-toggle,
  .site-sidebar.is-desktop-expanded .sidebar-desktop-pin-toggle {
    justify-content: flex-start;
    padding-inline: 10px;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-brand,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-brand {
    justify-content: flex-start;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-brand-symbol,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-brand-symbol {
    display: inline-grid;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-brand-logo,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-brand-logo {
    display: inline-grid;
  }

  .site-sidebar:hover .sidebar-brand-row,
  .site-sidebar.is-desktop-expanded .sidebar-brand-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .site-sidebar:hover .sidebar-theme-row,
  .site-sidebar.is-desktop-expanded .sidebar-theme-row {
    justify-content: space-between;
    padding-inline: 2px;
  }

  .site-sidebar:hover .sidebar-studio-mission,
  .site-sidebar.is-desktop-expanded .sidebar-studio-mission {
    display: grid;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-universe,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-universe {
    justify-items: stretch;
    padding-inline: 2px;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-universe-current,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-universe-current {
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-items: stretch;
    padding-inline: 8px;
  }

  .site-sidebar:hover.is-studio-console .sidebar-studio-universe-copy,
  .site-sidebar:hover.is-studio-console .sidebar-studio-universe-caret,
  .site-sidebar:hover.is-studio-console .sidebar-studio-universe-switcher > div,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-universe-copy,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-universe-caret,
  .site-sidebar.is-desktop-expanded.is-studio-console .sidebar-studio-universe-switcher > div {
    display: grid;
  }

  .site-sidebar:hover .sidebar-nav,
  .site-sidebar:hover .sidebar-support-actions,
  .site-sidebar.is-desktop-expanded .sidebar-nav,
  .site-sidebar.is-desktop-expanded .sidebar-support-actions {
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-link,
  .site-sidebar.is-desktop-expanded .sidebar-link {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .site-sidebar:hover .sidebar-link-secondary,
  .site-sidebar.is-desktop-expanded .sidebar-link-secondary {
    padding-inline: 10px;
  }

  .site-sidebar:hover .sidebar-user,
  .site-sidebar.is-desktop-expanded .sidebar-user {
    justify-items: stretch;
    padding: 12px;
  }

  .site-sidebar:hover .sidebar-user-main,
  .site-sidebar.is-desktop-expanded .sidebar-user-main {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-section-title,
  .site-sidebar:hover .sidebar-link-label,
  .site-sidebar:hover .sidebar-user .meta-label,
  .site-sidebar.is-desktop-expanded .sidebar-section-title,
  .site-sidebar.is-desktop-expanded .sidebar-link-label,
  .site-sidebar.is-desktop-expanded .sidebar-user .meta-label,
  .site-sidebar:hover .sidebar-theme-row .sidebar-language-label,
  .site-sidebar.is-desktop-expanded .sidebar-theme-row .sidebar-language-label {
    display: block;
  }

  .site-sidebar:hover .sidebar-user-meta,
  .site-sidebar.is-desktop-expanded .sidebar-user-meta {
    display: grid;
  }

  .site-sidebar:hover .sidebar-user-actions,
  .site-sidebar.is-desktop-expanded .sidebar-user-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-language-row,
  .site-sidebar.is-desktop-expanded .sidebar-language-row {
    display: flex;
  }

  .site-sidebar:hover .sidebar-button span,
  .site-sidebar.is-desktop-expanded .sidebar-button span,
  .site-sidebar:hover .sidebar-desktop-pin-copy,
  .site-sidebar.is-desktop-expanded .sidebar-desktop-pin-copy {
    display: inline;
  }

  .site-sidebar:hover .sidebar-studio-link .sidebar-link-label,
  .site-sidebar.is-desktop-expanded .sidebar-studio-link .sidebar-link-label {
    display: grid;
  }
}

@media (min-width: 1360px) {
  .mobile-nav-toggle,
  .site-overlay {
    display: none;
  }

  .site-sidebar {
    width: var(--sidebar-width);
    transform: translateX(0);
  }

  .site-main-shell {
    margin-left: var(--sidebar-width);
  }

  .site-main {
    --site-main-top: 28px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 18px;
  }

  .site-main.site-main-soft-record,
  .site-main.site-main-cat-detail {
    --site-main-top: 0px;
  }

  .site-main:has(.cat-detail-band) {
    --site-main-top: 0px;
    padding-top: var(--site-main-top);
  }
}

@media (min-width: 1024px) {
  .site-shell-rescue-console .rescue-shell-topbar.admin-studio-topbar.studio-minis-room-toolbar {
    --admin-studio-topbar-canvas: var(--background);
    --admin-studio-topbar-gutter: calc((var(--sidebar-rail-width) - 40px) / 2);
    --admin-studio-topbar-muted: rgba(15, 23, 42, 0.54);
    --admin-studio-topbar-text: #172033;
    display: grid;
    left: 0;
    z-index: 60;
    grid-template-columns: minmax(44px, 1fr) minmax(320px, 560px) minmax(44px, 1fr);
    min-height: var(--rescue-topbar-height);
    padding: 10px var(--admin-studio-topbar-gutter);
    border: 0;
    background: var(--background);
    color: var(--admin-studio-topbar-text);
    box-shadow: none;
    backdrop-filter: none;
  }

  .site-shell-rescue-console .site-sidebar.is-rescue-console {
    width: var(--sidebar-rail-width);
    padding: calc(var(--rescue-topbar-height) + 14px) 9px 18px;
    transform: translateX(0);
    box-shadow: none;
  }

  .site-shell-rescue-console .site-sidebar.is-rescue-console:hover,
  .site-shell-rescue-console .site-sidebar.is-rescue-console.is-desktop-expanded,
  .site-shell-rescue-console .site-sidebar.is-rescue-console.is-desktop-pinned {
    width: var(--sidebar-width);
    padding-inline: 18px;
    box-shadow: none;
  }

  .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-brand-row {
    display: none;
  }

  .site-shell-rescue-console .site-main-shell {
    margin-left: var(--sidebar-rail-width);
  }

  .site-shell-rescue-console .site-main {
    --site-main-top: calc(var(--rescue-topbar-height) + 18px);
    padding-top: var(--site-main-top);
  }

  .site-shell-rescue-console .site-main:has(.home-hero-band) {
    --site-main-top: calc(var(--rescue-topbar-height) + 10px);
  }

  .site-shell-rescue-console .home-hero-band {
    padding-top: 12px;
  }

  .site-shell-rescue-console .site-main.site-main-not-home {
    --site-main-top: calc(var(--rescue-topbar-height) + 14px);
  }

  .site-shell-rescue-console .site-main.site-main-soft-record,
  .site-shell-rescue-console .site-main.site-main-cat-detail,
  .site-shell-rescue-console .site-main:has(.cat-detail-band) {
    --site-main-top: var(--rescue-topbar-height);
    padding-top: var(--site-main-top);
  }

  .site-shell-rescue-console .site-sidebar .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-nav,
  .site-shell-rescue-console .site-sidebar .sidebar-support-actions {
    justify-items: center;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-link {
    width: 100%;
    justify-content: center;
    padding-inline: 0;
  }

  .site-shell-rescue-console .site-sidebar :is(
    .sidebar-section-title,
    .sidebar-link-label,
    .sidebar-language-row,
    .sidebar-theme-row .sidebar-language-label,
    .sidebar-user .meta-label,
    .sidebar-user-meta,
    .sidebar-button span,
    .sidebar-desktop-pin-copy,
    .sidebar-more-menu
  ) {
    display: none;
  }

  .site-shell-rescue-console .sidebar-utility {
    display: none;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-brand,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-brand,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-brand {
    justify-content: flex-start;
    padding-inline: 4px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-brand-row,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-brand-row,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-brand-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-nav,
  .site-shell-rescue-console .site-sidebar:hover .sidebar-support-actions,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-nav,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-support-actions,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-nav,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-support-actions {
    justify-items: stretch;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-link,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-link-secondary,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link-secondary,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link-secondary {
    padding-inline: 10px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar:hover .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link-label {
    display: block;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-studio-link .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-studio-link .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-studio-link .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar:hover .sidebar-more-menu,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-more-menu,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-more-menu {
    display: grid;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {
  .site-shell-rescue-console .rescue-shell-topbar.admin-studio-topbar.studio-minis-room-toolbar {
    grid-template-columns: minmax(44px, 1fr) minmax(320px, 480px) minmax(44px, 1fr);
    gap: 8px;
  }

  .site-shell-rescue-console .rescue-shell-topbar-brand-copy small {
    display: none;
  }

  .site-shell-rescue-console .rescue-shell-topbar-nav-link {
    padding-inline: 9px;
  }

  .site-shell-rescue-console .rescue-shell-topbar-action {
    width: 38px;
    padding: 0;
  }

  .site-shell-rescue-console .rescue-shell-topbar-action span {
    display: none;
  }

  .site-shell-rescue-console .rescue-shell-topbar-sign-in {
    width: auto;
    padding-inline: 14px;
  }

  .site-shell-rescue-console .rescue-shell-topbar-sign-in span {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 42px 0;
  }

  .cats-page-band {
    padding-top: 34px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: stretch;
  }

  .loading-hero {
    grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr);
    align-items: stretch;
  }

  .loading-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-hero-shell {
    display: grid !important;
    gap: 18px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    align-items: stretch;
  }

  .home-hero-shell-copy {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 16px 12px 16px clamp(24px, 3vw, 40px);
  }

  .home-hero-shell-media {
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .home-home-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .home-hero-media {
    min-height: 400px;
  }

  .home-feature-card {
    height: 100%;
  }

  .project-intro-feature-shell {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
  }

  .project-intro-feature-media {
    min-height: 100%;
  }

  .home-feature-media {
    min-height: 340px;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: start;
  }

  .support-case-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 0.65fr));
    align-items: start;
  }

  .footer-brand {
    grid-column: auto;
  }

  .detail-side {
    position: sticky;
    top: 28px;
  }

  .detail-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid.detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid.story-detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    align-items: flex-end;
  }

  .page-intro-card.is-compact.page-intro-grid {
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
    align-items: start;
  }

  .project-page-intro.page-intro-card.is-compact.page-intro-grid {
    align-items: center;
  }

  .project-page-intro > .stack-tight {
    min-height: 100%;
  }

  .story-hub-hero.page-intro-grid {
    display: flex;
    gap: 18px;
    align-items: stretch;
  }

  .story-series-spotlight {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .story-series-main {
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    align-items: start;
  }

  .story-series-panel-media {
    order: -1;
  }

  .story-series-episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .story-series-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-page-nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-hub-hero-pane {
    flex: 0 0 calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-track-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .story-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid,
  .snapshot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .snapshot-grid.story-detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cats-discovery-controls {
    grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.55fr);
  }

  .cats-discovery-layout {
    grid-template-columns: minmax(0, 1.22fr) minmax(312px, 0.78fr);
  }

  .cats-feature-media {
    min-height: 214px;
  }

  .cats-results-status {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .cats-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .cats-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .mobile-nav-toggle {
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
  }

  .site-main {
    --site-main-top: 60px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 48px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 44px;
  }

  .site-main.site-main-cat-detail {
    --site-main-top: 44px;
  }

  .site-footer {
    padding: 22px 0 28px;
  }

  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 20px 0 24px;
  }

  .cats-page-band {
    padding-top: 22px;
  }

  .cat-detail-band {
    padding-top: 0;
  }

  .site-main-soft-record > .page-band:first-child,
  .site-main-soft-record > .detail-band:first-child,
  .site-main-soft-record > .loading-page:first-child {
    padding-top: 10px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 12px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .home-hero-band {
    padding-top: 8px;
  }

  .stack {
    gap: 18px;
  }

  .stack-tight {
    gap: 6px;
  }

  .detail-grid,
  .page-intro-grid,
  .section-header,
  .field-grid,
  .preset-grid,
  .card-grid,
  .snapshot-grid,
  .stats-grid,
  .two-up-grid,
  .note-grid,
  .compact-card-grid,
  .story-page-nav-grid,
  .story-track-grid,
  .story-gallery-grid,
  .cats-results-grid,
  .proof-feature-grid {
    gap: 14px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .admin-card,
  .form-card,
  .empty-state,
  .footer-brand,
  .proof-section-card,
  .trust-logo-card {
    padding: 18px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .admin-card,
  .form-card,
  .empty-state,
  .content-card-body,
  .section-header-copy,
  .detail-stack,
  .timeline,
  .field,
  .auth-card,
  .page-intro-support {
    gap: 12px;
  }

  .page-intro-card.is-compact {
    padding: 18px;
    gap: 14px;
  }

  .page-intro-card h1,
  .detail-main h1,
  .home-hero-shell-copy h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.4rem);
    line-height: 1.04;
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    line-height: 1.08;
  }

  .hero-lead,
  .home-hero-lead {
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .button-row,
  .cta-rail,
  .inline-list {
    display: grid;
    gap: 8px;
  }

  .button,
  .button-small {
    width: 100%;
  }

  .button {
    min-height: 46px;
    padding-inline: 16px;
    font-size: 0.95rem;
  }

  .button-small {
    min-height: 38px;
    padding-inline: 12px;
  }

  .tag-row {
    gap: 8px;
  }

  .tag {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .meta-row {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .loading-thumb {
    height: 164px;
  }

  .media-thumb {
    width: calc(100% + 36px);
    height: 168px;
    margin: -18px -18px 12px;
    border-radius: 18px 18px 16px 16px;
  }

  .home-hero-copy h1 {
    max-width: none;
  }

  .home-home-stack,
  .home-home-highlights,
  .home-intro-grid,
  .home-card-grid,
  .story-hub-stack {
    gap: 18px;
  }

  .home-hero-shell {
    gap: 14px;
    padding: 14px;
  }

  .home-hero-shell-copy {
    gap: 16px;
    padding: 4px 0;
  }

  .home-hero-media {
    min-height: 180px;
    border-radius: 20px;
  }

  .detail-hero-media {
    min-height: 248px;
    border-radius: 20px;
  }

  .story-detail-media {
    min-height: 248px;
  }

  .detail-gallery-stage-media {
    min-height: 248px;
  }

  .detail-gallery-strip {
    grid-auto-columns: minmax(80px, 92px);
    gap: 10px;
  }

  .project-intro-feature-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-intro-feature-media {
    min-height: 200px;
    padding: 12px;
  }

  .project-intro-feature-art {
    min-height: 180px;
    border-radius: 20px;
  }

  .project-intro-feature-copy {
    gap: 12px;
    padding: 16px;
  }

  .project-intro-feature-card h2 {
    font-size: clamp(1.28rem, 5.4vw, 1.75rem);
  }

  .project-intro-feature-summary {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .project-intro-feature-metric {
    padding: 12px;
    border-radius: 16px;
  }

  .project-intro-feature-metric strong {
    font-size: 0.96rem;
  }

  .home-feature-media {
    min-height: 200px;
  }

  .home-feature-media-video {
    min-height: 248px;
    padding: 10px;
  }

  .home-feature-panel {
    gap: 10px;
    padding: 16px;
  }

  .home-feature-card h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.8rem);
  }

  .home-feature-video-embed.story-video-embed-short {
    width: min(100%, 240px);
    max-width: 240px;
  }

  .home-feature-copy,
  .home-feature-note,
  .home-intro-card p,
  .support-case-story p:not(.meta-label),
  .support-case-followup p {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .home-feature-copy {
    --home-feature-copy-line-height: 1.6;
  }

  .home-project-brief-grid {
    grid-template-columns: 1fr;
  }

  .cats-discovery-panel {
    gap: 0;
    padding: 0;
  }

  .cats-discovery-main {
    gap: 12px;
    padding: 16px;
  }

  .cats-discovery-head {
    display: grid;
    gap: 8px;
  }

  .cats-discovery-count {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
  }

  .cats-discovery-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .cats-discovery-form-button {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
  }

  .cats-discovery-controls,
  .cats-filter-row,
  .cats-results-status {
    gap: 10px;
  }

  .cats-filter-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .cats-filter-mobile-toggle {
    display: flex;
  }

  .cats-directory-filter-list {
    display: none;
    padding-top: 0;
  }

  .cats-directory-filter-list.is-open {
    display: grid;
    padding-top: 8px;
  }

  .cats-search-shell {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 14px;
  }

  .cats-search-shell input {
    min-height: 40px;
  }

  .cats-filter-chip {
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    gap: 8px;
    font-size: 0.78rem;
  }

  .cats-filter-chip-count {
    min-width: 24px;
    min-height: 24px;
    font-size: 0.78rem;
  }

  .cats-sticky-toolbar {
    top: 6px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 19px;
  }

  .cats-sticky-search {
    min-height: 40px;
    border-radius: 14px;
  }

  .cats-sticky-search input {
    min-height: 36px;
    font-size: 0.86rem;
  }

  .cats-quick-tabs {
    padding-bottom: 1px;
  }

  .cats-quick-tab {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .cats-quick-tab span:last-child {
    min-width: 20px;
    min-height: 20px;
    font-size: 0.68rem;
  }

  .cats-directory-media {
    min-height: 168px;
  }

  .cats-feature-media {
    min-height: 174px;
  }

  .cats-feature-body {
    padding: 20px 16px 16px;
  }

  .cats-directory-body {
    gap: 12px;
    padding: 16px;
  }

  .cats-directory-need {
    padding-top: 12px;
  }

  .proof-section-card,
  .trust-logo-card {
    padding: 18px;
  }

  .proof-feature-media {
    min-height: 176px;
  }

  .proof-feature-body {
    gap: 12px;
    padding: 16px;
  }

  .trust-logo-grid {
    grid-template-columns: 1fr;
  }

  .trust-archive-media {
    min-height: 220px;
  }

  .story-hub-hero {
    gap: 14px;
  }

  .story-hub-hero-copy {
    gap: 14px;
  }

  .story-hub-hero-copy-panel {
    padding: 18px;
    border-radius: 20px;
  }

  .story-hub-hero .story-feature-media {
    min-height: 182px;
  }

  .story-page-nav-link {
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .story-series-spotlight,
  .story-video-card {
    gap: 14px;
  }

  .story-series-main,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-grid {
    gap: 12px;
  }

  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card {
    padding: 14px;
    border-radius: 18px;
  }

  .story-video-embed {
    border-radius: 18px;
  }

  .story-video-embed-short {
    width: min(100%, 260px);
    max-width: 260px;
  }

  .story-gallery-card {
    gap: 10px;
    padding: 12px;
  }

  .story-gallery-media {
    min-height: 168px;
  }

  .detail-gallery-header,
  .detail-gallery-header-side {
    gap: 6px 10px;
  }

  .detail-gallery-stage {
    gap: 10px;
  }

  .detail-gallery-thumb {
    min-height: 92px;
    border-radius: 16px;
  }

  .snapshot-card strong,
  .project-meter strong {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }

  .timeline-item {
    gap: 6px;
    padding-top: 12px;
  }

  .detail-preset-card {
    min-height: 78px;
    padding: 12px 13px;
  }

  .record-topline,
  .record-meta-list,
  .record-actions,
  .project-update-pet-row {
    gap: 8px;
  }

  .record-note {
    padding: 12px 14px;
  }

  .mobile-companion-card {
    gap: 12px;
  }

  .project-update-pet-link {
    min-height: 40px;
    padding: 4px 12px 4px 4px;
    font-size: 0.84rem;
  }

  .project-update-pet-avatar {
    width: 32px;
    height: 32px;
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .field textarea {
    min-height: 112px;
  }

  .paypal-card.is-compact {
    gap: 12px;
  }

  .paypal-card.is-compact h3 {
    font-size: clamp(1.12rem, 5vw, 1.35rem);
  }

  .paypal-card.support-case-checkout {
    padding: 18px;
  }

  .paypal-card .button-primary {
    min-height: 46px;
    font-size: 0.94rem;
  }

  .chip-button {
    min-height: 82px;
    padding: 14px;
    border-radius: 18px;
  }

  .chip-button strong {
    font-size: 1.08rem;
  }

  .chip-button.is-compact {
    min-height: 54px;
    padding: 10px 12px;
    gap: 10px;
  }

  .chip-button.is-compact strong {
    font-size: 0.98rem;
  }

  .chip-button.is-compact span {
    font-size: 0.8rem;
  }

  .admin-form-guide,
  .admin-form-section {
    padding: 18px;
  }

  .admin-form-guide-card,
  .admin-form-disclosure summary,
  .admin-form-disclosure-content {
    padding-left: 18px;
    padding-right: 18px;
  }

  .support-case-followup {
    gap: 10px;
    padding: 18px;
  }

  .support-case-followup-actions .button {
    min-height: 40px;
  }

  .support-case-header {
    gap: 10px;
  }

  .support-case-header .hero-lead {
    font-size: 0.98rem;
  }

  .project-pet-selector-toolbar,
  .project-manual-log-header,
  .project-manual-update-top {
    display: grid;
    justify-content: stretch;
  }

  .admin-short-video-preview,
  .admin-short-resource-row {
    grid-template-columns: 1fr;
  }

  .admin-short-cat-overview {
    grid-template-columns: 1fr;
  }

  .admin-short-cat-browser-head,
  .admin-short-cat-drawer summary {
    display: grid;
    justify-content: stretch;
  }

  .admin-short-section-toggle,
  .admin-form-disclosure-summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .admin-short-section-toggle-meta,
  .admin-form-disclosure-summary .admin-form-chip {
    margin-left: 0;
  }

  .admin-suggest-input-row {
    grid-template-columns: 1fr;
  }

  .admin-combobox-trigger-inline {
    width: 100%;
  }

  .admin-short-check-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .admin-short-check-thumb {
    grid-column: 2;
    width: 100%;
    max-width: 132px;
  }

  .admin-short-check-copy {
    grid-column: 2;
  }

  .project-pet-selection-count,
  .project-stale-chip,
  .project-pet-pill,
  .project-update-pet-link {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  .cats-filter-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 389px) {
  .container {
    width: min(var(--content-max), calc(100% - 24px));
  }

  .mobile-nav-toggle {
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
  }

  .site-main {
    --site-main-top: 54px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 44px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 40px;
  }

  .site-main.site-main-cat-detail {
    --site-main-top: 40px;
  }

  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 16px 0 20px;
  }

  .cats-page-band {
    padding-top: 20px;
  }

  .cat-detail-band {
    padding-top: 0;
  }

  .site-main-soft-record > .page-band:first-child,
  .site-main-soft-record > .detail-band:first-child,
  .site-main-soft-record > .loading-page:first-child {
    padding-top: 8px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 10px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .admin-card,
  .form-card,
  .empty-state,
  .footer-brand,
  .proof-section-card,
  .trust-logo-card {
    padding: 16px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .admin-card,
  .form-card,
  .empty-state,
  .content-card-body,
  .section-header-copy,
  .detail-stack,
  .timeline,
  .field,
  .auth-card,
  .page-intro-support {
    gap: 10px;
  }

  .page-intro-card h1,
  .detail-main h1,
  .home-hero-shell-copy h1 {
    font-size: clamp(1.72rem, 9vw, 2.02rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

  .section-header h2 {
    font-size: clamp(1.35rem, 7vw, 1.72rem);
  }

  .hero-lead,
  .home-hero-lead,
  .home-feature-copy,
  .home-feature-note,
  .home-intro-card p,
  .support-case-story p:not(.meta-label),
  .support-case-followup p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .home-feature-copy {
    --home-feature-copy-line-height: 1.55;
  }

  .button-row,
  .cta-rail,
  .inline-list {
    gap: 7px;
  }

  .button {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.92rem;
  }

  .button-small {
    min-height: 36px;
    padding-inline: 11px;
  }

  .tag {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.72rem;
  }

  .media-thumb {
    width: calc(100% + 32px);
    height: 156px;
    margin: -16px -16px 10px;
    border-radius: 16px 16px 14px 14px;
  }

  .home-home-stack,
  .home-home-highlights,
  .home-intro-grid,
  .home-card-grid,
  .story-hub-stack {
    gap: 16px;
  }

  .home-hero-shell {
    gap: 12px;
    padding: 12px;
  }

  .home-hero-shell-copy {
    gap: 14px;
    padding: 2px 0;
  }

  .home-hero-media {
    min-height: 164px;
    border-radius: 18px;
  }

  .home-feature-media {
    min-height: 184px;
  }

  .home-feature-media-video {
    min-height: 224px;
    padding: 8px;
  }

  .home-feature-panel {
    gap: 8px;
    padding: 14px;
  }

  .home-feature-card h2 {
    font-size: clamp(1.24rem, 6.4vw, 1.52rem);
  }

  .home-feature-video-embed.story-video-embed-short {
    width: min(100%, 210px);
    max-width: 210px;
  }

  .project-intro-feature-media {
    min-height: 184px;
    padding: 10px;
  }

  .project-intro-feature-art {
    min-height: 164px;
    border-radius: 18px;
  }

  .project-intro-feature-copy {
    gap: 10px;
    padding: 14px;
  }

  .project-intro-feature-card h2 {
    font-size: clamp(1.18rem, 6vw, 1.5rem);
  }

  .story-hub-hero-copy-panel,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card,
  .story-page-nav-link,
  .story-gallery-card {
    padding: 12px;
    border-radius: 16px;
  }

  .story-hub-hero .story-feature-media,
  .proof-feature-media,
  .story-gallery-media {
    min-height: 156px;
  }

  .story-video-embed-short {
    width: min(100%, 232px);
    max-width: 232px;
  }

  .detail-hero-media,
  .story-detail-media,
  .detail-gallery-stage-media,
  .trust-archive-media {
    min-height: 220px;
    border-radius: 18px;
  }

  .detail-gallery-thumb {
    min-height: 84px;
    border-radius: 14px;
  }

  .cats-directory-body,
  .cats-discovery-main,
  .cats-feature-body,
  .proof-feature-body,
  .support-case-followup,
  .paypal-card.support-case-checkout {
    padding: 16px;
  }

  .cats-feature-body {
    padding-top: 20px;
  }

  .cats-directory-media {
    min-height: 156px;
  }

  .cats-search-shell {
    min-height: 46px;
    padding: 0 12px;
  }

  .cats-search-shell input {
    min-height: 40px;
  }

  .cats-filter-chip {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .cats-filter-chip-count {
    min-width: 22px;
    min-height: 22px;
    font-size: 0.74rem;
  }

  .cats-sticky-toolbar {
    border-radius: 18px;
  }

  .cats-quick-tab {
    min-height: 34px;
    padding: 0 9px;
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 44px;
    padding: 11px 13px;
  }

  .field textarea {
    min-height: 104px;
  }

  .chip-button {
    min-height: 76px;
    padding: 12px;
    border-radius: 16px;
  }

  .chip-button strong {
    font-size: 1rem;
  }

  .chip-button.is-compact {
    min-height: 50px;
    padding: 9px 11px;
    gap: 8px;
  }

  .chip-button.is-compact strong {
    font-size: 0.92rem;
  }

  .chip-button.is-compact span {
    font-size: 0.76rem;
  }

  .admin-form-guide,
  .admin-form-section {
    padding: 16px;
  }

  .admin-form-guide-card,
  .admin-form-disclosure summary,
  .admin-form-disclosure-content {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 920px) {
  .home-feature-card,
  .cats-feature-card,
  .cats-directory-card {
    padding: 0;
  }

  .home-feature-card > .home-feature-media,
  .cats-feature-card > .cats-feature-media,
  .cats-directory-card > .cats-directory-media {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .home-feature-media,
  .cats-feature-media,
  .cats-directory-media {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-shimmer::after,
  .loading-line::after,
  .loading-dot::after,
  .loading-pill::after,
  .loading-chip::after,
  .loading-thumb::after,
  .recognition-ticker-track {
    animation: none;
  }
}

@media (max-width: 920px) {
  .admin-recognition-add-grid,
  .admin-recognition-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-recognition-note-field,
  .admin-recognition-actions {
    grid-column: 1 / -1;
  }

  .admin-recognition-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .recognition-ticker-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 34px;
    padding: 5px;
  }

  .recognition-ticker-label {
    display: none;
  }

  .recognition-ticker-window {
    width: 100%;
  }

  .recognition-ticker-name {
    font-size: 0.82rem;
  }

  .recognition-ticker-kind {
    display: none;
  }

  .admin-recognition-add-grid,
  .admin-recognition-row {
    grid-template-columns: 1fr;
  }
}

.help-network-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.4fr);
  gap: 22px;
  align-items: start;
}

.help-page-band {
  padding-top: 18px;
}

.help-community-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  gap: 18px;
  align-items: flex-end;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 250, 0.96) 100%);
  box-shadow: var(--shadow-card);
}

.help-community-hero.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 2vw, 18px);
  border-radius: 20px;
}

.help-community-hero-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.help-community-hero.is-compact .help-community-hero-copy {
  gap: 2px;
}

.help-community-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.05rem, 5vw, 4.2rem);
  line-height: 0.98;
}

.help-community-hero.is-compact .help-community-hero-copy h1 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
}

.help-community-hero-copy p:not(.eyebrow) {
  max-width: 68ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: 1.02rem;
  line-height: 1.58;
}

.help-community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.help-community-actions .button {
  min-height: 42px;
}

.help-community-counts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.help-community-hero.is-compact .help-community-counts {
  justify-content: flex-end;
  padding-top: 0;
}

.help-community-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.help-community-counts strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
}

.help-community-gateway {
  display: block;
}

.help-community-gateway.is-production {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: clamp(16px, 2.8vw, 24px);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.16), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(86, 207, 174, 0.13), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.help-community-gateway-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.help-community-gateway-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-community-gateway-head h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.02;
}

.help-community-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.help-community-entry-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  min-height: clamp(210px, 24vw, 280px);
  padding: clamp(18px, 2.8vw, 28px);
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.help-community-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1);
}

.help-community-entry-card.is-primary {
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, #fffaf0, #fff7ed);
  border-color: rgba(217, 119, 6, 0.24);
}

.help-community-card-icon {
  position: relative;
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(11, 105, 183, 0.1));
  color: #0f766e;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.help-community-card-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  transform: rotate(-8deg);
}

.help-community-card-icon svg {
  width: auto;
  height: auto;
}

.help-community-card-icon-main {
  filter: drop-shadow(0 5px 10px rgba(15, 23, 42, 0.12));
}

.help-community-card-icon-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #ffffff;
  border-radius: 999px;
  padding: 5px;
  background: #ffffff;
  color: inherit;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.help-community-card-icon.is-lost-pet {
  border-color: rgba(217, 119, 6, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(249, 115, 22, 0.13));
  color: #9a3412;
}

.help-community-card-icon.is-cat-sitting {
  border-color: rgba(20, 184, 166, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(86, 207, 174, 0.26), rgba(11, 105, 183, 0.1));
  color: #0f766e;
}

.help-community-card-icon.is-rescue-help {
  border-color: rgba(11, 105, 183, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(120, 183, 255, 0.26), rgba(86, 207, 174, 0.12));
  color: var(--accent-strong);
}

.help-community-card-label {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.help-community-entry-card.is-primary .help-community-card-label {
  background: rgba(217, 119, 6, 0.13);
  color: #9a3412;
}

.help-community-entry-card strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  line-height: 1.04;
}

.help-community-entry-card small {
  color: var(--foreground-muted);
  font-size: clamp(0.92rem, 1vw, 1rem);
  font-weight: 750;
  line-height: 1.42;
}

.help-community-entry-card em {
  align-self: end;
  justify-self: start;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 860;
  line-height: 1.2;
}

.community-my-missing-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 18px);
  background: #ffffff;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.community-my-missing-panel.is-account-summary {
  border-color: rgba(11, 105, 183, 0.16);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.95)),
    #ffffff;
}

.community-my-missing-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.community-my-missing-head > div {
  display: grid;
  gap: 3px;
}

.community-my-missing-head small {
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.community-my-missing-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.05;
}

.community-my-missing-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 999px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.community-my-missing-head-actions > span {
  display: inline-flex;
  min-width: 76px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(239, 246, 255, 0.95);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 920;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.community-my-missing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.community-my-missing-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.community-my-missing-thumb {
  display: grid;
  width: 96px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: #e2e8f0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.community-my-missing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-my-missing-card > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.community-my-missing-card strong {
  color: var(--foreground);
  font-size: 1.05rem;
  line-height: 1.05;
}

.community-my-missing-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.community-my-missing-status {
  justify-self: start;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 247, 237, 0.9);
  color: #9a3412;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
}

.community-my-missing-status.is-sighting-reported {
  border-color: rgba(11, 105, 183, 0.18);
  background: #eff6ff;
  color: var(--accent-strong);
}

.community-my-missing-status.is-found {
  border-color: rgba(86, 207, 174, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.community-my-missing-status.is-closed {
  border-color: rgba(100, 116, 139, 0.18);
  background: #f1f5f9;
  color: #475569;
}

.community-my-missing-owner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.community-my-missing-owner-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(11, 105, 183, 0.07);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
}

.community-my-missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.help-my-rooms-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.14), transparent 30%),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.help-my-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.help-my-rooms-head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.18;
}

.help-viewer-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: min(100%, 360px);
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 123, 0.18);
  background: rgba(22, 163, 123, 0.1);
  color: #116c55;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-viewer-pill.is-compact {
  min-height: 32px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--foreground-muted);
}

.help-my-room-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-my-room-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.78);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.help-my-room-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 200, 0, 0.55);
  background: #ffffff;
}

.help-my-room-card strong,
.help-my-room-card small {
  flex-basis: 100%;
  min-width: 0;
}

.help-my-room-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-my-room-card small,
.help-my-room-empty,
.help-my-room-empty-copy {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.help-my-room-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.84);
}

.help-my-room-empty p,
.help-my-room-empty-copy {
  margin: 0;
}

.ai-copilot-card,
.admin-ai-brief-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.15), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.96));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.ai-copilot-card-inline {
  margin-top: 2px;
  gap: 10px;
  padding: 13px;
  border-radius: 20px;
  border-color: rgba(255, 200, 0, 0.2);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.18), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 253, 251, 0.98));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ai-copilot-inline-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.admin-ai-brief-card {
  padding: 18px;
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at 7% 0%, rgba(255, 200, 0, 0.2), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 253, 251, 0.98));
}

.admin-ai-brief-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.admin-ai-brief-top .ai-copilot-heading {
  align-items: start;
}

.admin-ai-brief-top .ai-copilot-heading p:not(.eyebrow) {
  margin-top: 5px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.admin-ai-brief-button {
  min-height: 46px;
  padding-inline: 18px;
  white-space: nowrap;
  box-shadow: 0 12px 28px rgba(255, 200, 0, 0.2);
}

.ai-copilot-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.ai-copilot-heading > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 28%),
    #16231f;
  color: white;
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.ai-copilot-heading h2,
.ai-copilot-heading h3,
.ai-copilot-heading p {
  margin: 0;
}

.ai-copilot-heading h2,
.ai-copilot-heading h3 {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.18;
}

.ai-copilot-heading .eyebrow {
  color: var(--accent-strong);
  letter-spacing: 0.06em;
}

.ai-copilot-review-button {
  min-height: 38px;
  padding-inline: 14px;
  box-shadow: 0 8px 18px rgba(255, 200, 0, 0.18);
}

.ai-copilot-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 48px;
}

.ai-copilot-feature-row span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.ai-copilot-card .button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-copilot-result,
.ai-summary-result,
.admin-ai-brief-result {
  display: grid;
  gap: 11px;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.88);
}

.ai-copilot-result.is-applied {
  border-color: rgba(22, 163, 74, 0.34);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 32px rgba(22, 163, 74, 0.1);
}

.ai-copilot-result p,
.ai-summary-result p,
.admin-ai-brief-result p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.ai-copilot-result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.ai-copilot-result-head h4 {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: clamp(1.14rem, 1.7vw, 1.34rem);
  line-height: 1.18;
}

.ai-copilot-result-head .button {
  white-space: nowrap;
}

.ai-copilot-applied-note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(22, 163, 74, 0.1);
  color: #166534 !important;
  font-weight: 850;
}

.ai-copilot-suggested-copy {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 200, 0, 0.26);
  background: rgba(255, 253, 244, 0.92);
}

.ai-copilot-suggested-copy span,
.ai-copilot-details summary span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-copilot-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-copilot-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  background: rgba(240, 249, 255, 0.82);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 850;
}

.ai-copilot-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-copilot-result-grid div,
.ai-summary-result div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.ai-copilot-result-grid span,
.ai-summary-result span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-copilot-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-copilot-warning-list span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(255, 200, 0, 0.18);
  color: #5f4a00;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.34;
}

.ai-copilot-warning-list span strong {
  color: currentColor;
  font-size: 0.74rem;
  font-weight: 950;
}

.ai-copilot-warning-list .is-high,
.ai-summary-result.is-high {
  border-color: rgba(255, 119, 91, 0.34);
}

.ai-copilot-warning-list .is-high {
  background: rgba(255, 119, 91, 0.16);
  color: #9d2618;
}

.ai-copilot-result ul,
.ai-summary-result ul,
.admin-ai-action-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.ai-copilot-details {
  display: grid;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.7);
}

.ai-copilot-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.ai-copilot-details summary::-webkit-details-marker {
  display: none;
}

.ai-copilot-details summary strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-size: 0.76rem;
}

.ai-copilot-details[open] {
  padding-bottom: 10px;
}

.ai-copilot-details[open] .ai-copilot-warning-list,
.ai-copilot-details[open] ul {
  margin-inline: 10px;
}

.ai-copilot-result-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.ai-copilot-result small,
.ai-summary-result small,
.admin-ai-brief-result small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-ai-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-ai-room-grid a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.85);
  color: inherit;
  text-decoration: none;
}

.admin-ai-room-grid a:hover {
  border-color: rgba(255, 200, 0, 0.52);
  background: #ffffff;
}

.admin-ai-room-grid span {
  color: #116c55;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-ai-room-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ai-room-grid small {
  color: var(--foreground-muted);
  line-height: 1.35;
}

.admin-ai-section {
  display: grid;
  gap: 10px;
}

.admin-ai-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-ai-section-head span,
.admin-ai-priority-card span,
.admin-ai-draft-card span,
.admin-ai-suggestion-card span {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.admin-ai-section-head strong {
  color: var(--foreground);
  font-size: 0.95rem;
}

.admin-ai-priority-grid,
.admin-ai-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.admin-ai-priority-card,
.admin-ai-suggestion-card,
.admin-ai-draft-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: inherit;
  text-decoration: none;
}

.admin-ai-priority-card:hover,
.admin-ai-suggestion-card:hover {
  border-color: rgba(255, 200, 0, 0.5);
  background: #ffffff;
}

.admin-ai-priority-card.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.14), transparent 36%),
    rgba(255, 255, 255, 0.94);
}

.admin-ai-priority-card.is-today {
  border-color: rgba(255, 200, 0, 0.34);
}

.admin-ai-priority-card strong,
.admin-ai-suggestion-card strong,
.admin-ai-draft-card strong {
  overflow: hidden;
  color: var(--foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-ai-priority-card p,
.admin-ai-suggestion-card p,
.admin-ai-draft-card p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.42;
}

.admin-ai-priority-card small,
.admin-ai-priority-card em,
.admin-ai-suggestion-card small,
.admin-ai-draft-card small {
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}

.admin-ai-draft-list {
  display: grid;
  gap: 9px;
}

.admin-ai-draft-card {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.13), transparent 28%),
    rgba(255, 255, 255, 0.92);
}

.admin-ai-draft-card > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-ai-draft-body {
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 253, 244, 0.86);
  color: var(--foreground) !important;
}

.admin-ai-draft-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-ai-signal-details .admin-ai-room-grid {
  margin: 0 10px 10px;
}

.donation-copilot-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.98)),
    rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.donation-copilot-top {
  max-width: 680px;
}

.donation-copilot-top h2,
.donation-copilot-top p {
  margin: 0;
}

.donation-copilot-top h2 {
  color: var(--foreground);
  font-size: clamp(1.28rem, 2vw, 1.68rem);
  line-height: 1.12;
}

.donation-copilot-top p {
  margin-top: 5px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.donation-copilot-controls,
.donation-copilot-result {
  display: grid;
  gap: 12px;
}

.donation-copilot-label {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.donation-copilot-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.donation-copilot-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.donation-copilot-choice:hover {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 255, 255, 0.92);
}

.donation-copilot-choice-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(86, 207, 174, 0.12);
  color: #116c55;
}

.donation-copilot-choice > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.donation-copilot-choice strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-copilot-choice small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-copilot-choice.is-selected {
  border-color: rgba(255, 200, 0, 0.72);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 36%),
    rgba(255, 253, 244, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.18);
}

.donation-copilot-choice.is-selected .donation-copilot-choice-icon {
  background: var(--brand);
  color: var(--brand-ink);
}

.donation-copilot-amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.donation-copilot-amount {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.7);
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
}

.donation-copilot-amount.is-selected {
  border-color: rgba(255, 200, 0, 0.64);
  background: rgba(255, 200, 0, 0.22);
  color: #4c3b00;
}

.donation-copilot-options {
  position: relative;
  justify-self: end;
}

.donation-copilot-options summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.68);
  color: var(--foreground-muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 850;
  list-style: none;
}

.donation-copilot-options summary::-webkit-details-marker {
  display: none;
}

.donation-copilot-options-panel {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 12px;
  width: min(420px, calc(100vw - 48px));
  margin-top: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.donation-copilot-options-panel label {
  display: grid;
}

.donation-copilot-options-panel input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.donation-copilot-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
}

.donation-copilot-result {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
}

.donation-copilot-result-head span,
.donation-copilot-context-grid > section > span,
.donation-route-card span {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.donation-copilot-result-head h3,
.donation-copilot-result-head p {
  margin: 0;
}

.donation-copilot-result-head h3 {
  margin-top: 3px;
  color: var(--foreground);
  font-size: clamp(1.14rem, 1.8vw, 1.42rem);
}

.donation-copilot-result-head p {
  margin-top: 5px;
  color: var(--muted-foreground);
}

.donation-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.donation-route-card,
.donation-copilot-context-grid a {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
  color: inherit;
  text-decoration: none;
}

.donation-route-feature {
  display: grid;
}

.donation-route-section {
  display: grid;
  gap: 8px;
}

.donation-route-card-primary {
  min-height: 136px;
  padding: 16px;
  border-radius: 20px;
}

.donation-route-card-primary strong {
  font-size: clamp(1.2rem, 2vw, 1.54rem);
}

.donation-route-card:hover,
.donation-copilot-context-grid a:hover {
  border-color: rgba(255, 200, 0, 0.55);
  background: #ffffff;
}

.donation-route-card.is-monthly {
  border-color: rgba(255, 200, 0, 0.44);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 253, 244, 0.9);
}

.donation-route-card strong,
.donation-copilot-context-grid strong {
  color: var(--foreground);
  line-height: 1.2;
}

.donation-route-card p,
.donation-copilot-context-grid p,
.donation-route-card small,
.donation-copilot-context-grid small {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.38;
}

.donation-route-card small,
.donation-copilot-context-grid small {
  font-size: 0.78rem;
  font-weight: 760;
}

.donation-copilot-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.donation-copilot-context-grid section {
  display: grid;
  gap: 8px;
}

.donation-copilot-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(86, 207, 174, 0.12);
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.help-command-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.help-command-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.help-command-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: var(--shadow-soft);
}

.help-command-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.22), transparent 30%),
    #ffffff;
}

.help-command-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--foreground);
  color: white;
  font-size: 1.2rem;
  font-weight: 950;
}

.help-command-card.is-primary .help-command-icon {
  background: var(--brand);
  color: var(--foreground);
}

.help-command-card span:last-child {
  display: grid;
  gap: 4px;
}

.help-command-card strong {
  font-size: 1.02rem;
}

.help-command-card small {
  color: var(--foreground-muted);
  line-height: 1.35;
}

.help-community-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-community-brief div {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 252, 250, 0.92) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.help-community-brief strong {
  font-size: 0.96rem;
}

.help-community-brief span {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.42;
}

.help-safety-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #ffffff;
}

.help-safety-strip span {
  color: var(--foreground-muted);
}

.help-channel-board {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(247, 249, 252, 0.96);
  box-shadow: var(--shadow-card);
}

.help-channel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--border-soft);
  background: #ffffff;
}

.help-channel-topbar h2 {
  margin: 0;
}

.help-channel-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.78);
}

.help-channel-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 850;
  white-space: nowrap;
}

.help-channel-tabs a:hover,
.help-channel-tabs a.is-active {
  background: var(--foreground);
  color: #ffffff;
}

.help-channel-tabs span {
  opacity: 0.72;
}

.help-board-tools {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.9);
}

.help-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.help-search-field {
  display: grid;
  flex: 1 1 280px;
  gap: 5px;
}

.help-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.help-search-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  background: #ffffff;
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.help-search-field input:focus {
  border-color: rgba(255, 200, 0, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.18);
  outline: none;
}

.help-status-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.help-status-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.help-status-filters a:hover,
.help-status-filters a.is-active {
  border-color: rgba(33, 33, 33, 0.82);
  background: var(--foreground);
  color: #ffffff;
}

.help-board-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.help-network-sidebar,
.help-board-section,
.admin-help-stack {
  display: grid;
  gap: 16px;
}

.help-network-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-network-stats div {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
}

.help-network-stats strong {
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1;
}

.help-network-stats span,
.help-request-meta,
.help-linked-cat small,
.admin-help-meta dt,
.admin-help-offer-card p {
  color: var(--foreground-muted);
}

.help-safety-card,
.help-network-form-card {
  align-content: start;
}

.help-safety-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, rgba(249, 252, 247, 0.96) 100%);
}

.help-form-heading,
.help-request-card,
.admin-help-card,
.admin-help-card-main,
.admin-help-controls,
.admin-help-offers,
.admin-help-offer-card,
.help-offer-form,
.help-owner-actions {
  display: grid;
  gap: 12px;
}

.help-room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.help-room-topbar > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.help-room-draft-status,
.help-draft-status {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.help-room-topbar > .help-room-draft-status {
  background: rgba(86, 207, 174, 0.13);
  color: #246552;
}

.help-room-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.help-room-back-link:hover {
  transform: translateX(-1px);
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
}

.help-room-back-link span {
  font-size: 1.05rem;
  line-height: 1;
}

.help-room-wizard-progress {
  --wizard-progress: 0%;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 6px 8px;
  border-block: 1px solid var(--border-soft);
  background:
    linear-gradient(90deg, rgba(255, 200, 0, 0.8) var(--wizard-progress), rgba(226, 232, 240, 0.95) var(--wizard-progress)) center 28px / calc(100% - 54px) 3px no-repeat;
}

.help-room-wizard-progress:has(button:nth-child(1).is-current) {
  --wizard-progress: 0%;
}

.help-room-wizard-progress:has(button:nth-child(2).is-current) {
  --wizard-progress: 33%;
}

.help-room-wizard-progress:has(button:nth-child(3).is-current) {
  --wizard-progress: 66%;
}

.help-room-wizard-progress:has(button:nth-child(4).is-current) {
  --wizard-progress: 100%;
}

.help-room-wizard-progress button {
  display: grid;
  justify-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground-muted);
  text-align: center;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.help-room-wizard-progress button:disabled {
  cursor: default;
  opacity: 0.62;
}

.help-room-wizard-progress button:not(:disabled):hover {
  transform: translateY(-1px);
}

.help-room-wizard-progress button.is-current {
  color: var(--foreground);
}

.help-room-wizard-progress button.is-complete {
  color: var(--foreground);
}

.help-room-wizard-progress span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #64748b;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  font-size: 0.78rem;
  font-weight: 950;
}

.help-room-wizard-progress button.is-current span {
  background: var(--brand);
  color: var(--foreground);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.18);
}

.help-room-wizard-progress button.is-complete span {
  background: #16a37b;
}

.help-room-wizard-progress button:disabled:not(.is-current) span {
  background: rgba(15, 23, 42, 0.34);
}

.help-room-wizard-progress strong,
.help-room-wizard-progress small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-room-wizard-progress strong {
  color: inherit;
  font-size: 0.83rem;
  line-height: 1.12;
}

.help-room-wizard-progress small {
  color: var(--foreground-muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.help-room-form-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.76) 100%);
}

.help-room-form-section[hidden] {
  display: none !important;
}

.help-room-form-section.is-private-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.78) 100%);
}

.help-room-step-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.help-room-step-heading > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 13px;
  background: var(--foreground);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
}

.help-room-step-heading h3,
.help-room-step-heading p {
  margin: 0;
}

.help-room-step-heading h3 {
  font-size: 1.08rem;
  line-height: 1.2;
}

.help-room-step-heading p {
  margin-top: 3px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.help-room-card-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-room-card-field legend {
  display: block;
  margin-bottom: 10px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-room-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.help-room-urgency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.help-room-type-card,
.help-room-urgency-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.help-room-type-card:has(input:checked),
.help-room-urgency-card:has(input:checked),
.help-visibility-options label:has(input:checked),
.help-cat-choice:has(input:checked) {
  border-color: rgba(255, 200, 0, 0.72);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.14);
}

.help-room-urgency-card.is-urgent:has(input:checked) {
  border-color: rgba(255, 119, 91, 0.54);
  background: #fff8f5;
  box-shadow: 0 0 0 3px rgba(255, 119, 91, 0.12);
}

.help-room-type-card input,
.help-room-urgency-card input,
.help-visibility-options input,
.help-cat-choice input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.help-room-type-card span,
.help-room-urgency-card span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-room-type-card small,
.help-room-urgency-card small {
  color: var(--foreground-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.help-cat-search-field {
  display: grid;
  gap: 6px;
}

.help-area-picker {
  gap: 8px;
  position: relative;
}

.help-area-search-field {
  display: grid;
  gap: 6px;
}

.help-area-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-area-search-field input {
  width: 100%;
}

.help-area-option-grid {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 42;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  max-height: 190px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.58);
}

.help-area-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}

.help-area-option:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
  transform: translateY(-1px);
}

.help-area-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.18;
}

.help-area-option small {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-area-empty {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.help-pet-combobox {
  display: grid;
  gap: 8px;
  position: relative;
}

.help-pet-combobox > span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-pet-combobox-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.help-pet-combobox-control input {
  width: 100%;
}

.help-pet-combobox-control button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.help-pet-selected-note {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.help-pet-option-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 41;
  display: grid;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.58);
}

.help-pet-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}

.help-pet-option:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
  transform: translateY(-1px);
}

.help-pet-option strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-pet-option small {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-selected-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.help-selected-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(255, 200, 0, 0.42);
  border-radius: 999px;
  background: #fff8d8;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 850;
}

.help-selected-cat-chip button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.12);
  color: var(--foreground);
  cursor: pointer;
}

.help-cat-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-cat-search-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 13px;
  background: #ffffff;
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.help-room-submit-row {
  justify-content: flex-end;
  padding-top: 2px;
}

.help-board-header {
  align-items: flex-end;
}

.help-result-count {
  margin: 6px 0 0;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.help-request-grid {
  display: grid;
  gap: 10px;
}

.help-request-thread {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.help-request-thread.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
}

.help-thread-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 15px;
  background: rgba(33, 33, 33, 0.92);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 950;
}

.help-request-thread.is-urgent .help-thread-avatar {
  background: #ff775b;
  color: #2f160f;
}

.help-thread-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.help-request-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(30, 41, 59, 0.08);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 28%),
    #ffffff;
}

.help-request-card.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.14), transparent 28%),
    #ffffff;
}

.help-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.help-card-header h3 {
  margin: 0;
}

.help-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(25, 43, 38, 0.08);
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.help-status-chip.is-open {
  background: rgba(86, 207, 174, 0.18);
  color: #116c55;
}

.help-status-chip.is-offered,
.help-status-chip.is-matched {
  background: rgba(255, 200, 0, 0.24);
  color: #6b5200;
}

.help-status-chip.is-resolved,
.help-status-chip.is-closed,
.help-status-chip.is-hidden {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground-muted);
}

.help-status-chip.is-following {
  background: rgba(47, 107, 95, 0.12);
  color: #2f6b5f;
}

.help-status-chip.is-private {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.help-card-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.help-unread-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ff775b;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.help-card-details {
  padding: 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid var(--border-soft);
  white-space: pre-wrap;
}

.help-details-disclosure {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-details-disclosure summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--foreground);
  font-weight: 850;
  list-style: none;
}

.help-details-disclosure summary::-webkit-details-marker {
  display: none;
}

.help-details-disclosure[open] summary {
  border-bottom: 1px solid var(--border-soft);
}

.help-details-disclosure .help-card-details {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.help-linked-cat {
  display: inline-grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 340px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  cursor: default;
}

.help-linked-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-linked-cat-more {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.help-linked-cat-image {
  position: relative;
  width: 56px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-soft);
}

.help-linked-cat-image img {
  object-fit: cover;
}

.help-linked-cat span:last-child {
  display: grid;
  min-width: 0;
}

.help-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 0.88rem;
}

.help-request-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.help-request-meta svg {
  width: 16px;
  height: 16px;
}

.help-offer-details {
  display: grid;
  gap: 10px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background: rgba(248, 250, 252, 0.78);
  overflow: hidden;
}

.help-offer-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.help-offer-details summary::-webkit-details-marker {
  display: none;
}

.help-offer-details summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-offer-details summary strong {
  color: var(--foreground);
  font-weight: 900;
}

.help-offer-details summary small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-offer-details summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-weight: 950;
}

.help-offer-details[open] summary::after {
  content: "-";
}

.help-offer-form {
  margin: 0 12px 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-cat-choice-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-cat-choice-field legend {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-cat-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.78);
}

.help-cat-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

button.help-cat-choice {
  grid-template-columns: minmax(0, 1fr);
  color: var(--foreground);
  text-align: left;
  font: inherit;
}

button.help-cat-choice:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
}

.help-cat-choice span {
  display: grid;
  min-width: 0;
}

.help-cat-choice small {
  color: var(--foreground-muted);
  font-size: 0.78rem;
}

.help-visibility-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-visibility-field legend {
  display: block;
  margin-bottom: 10px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-visibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.help-visibility-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
  cursor: pointer;
}

.help-visibility-options span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-visibility-options small {
  color: var(--foreground-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.help-owner-actions,
.help-offer-locked,
.help-offer-closed {
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
}

.help-owner-actions {
  border: 1px solid rgba(255, 200, 0, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 253, 244, 0.92);
}

.help-owner-actions-head {
  display: grid;
  gap: 4px;
}

.help-owner-actions-head strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.help-owner-actions-head span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.help-owner-action-grid {
  display: grid;
  gap: 8px;
}

.help-owner-action-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  background: rgba(240, 253, 244, 0.86);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.help-owner-action-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(22, 163, 74, 0.32);
  box-shadow: var(--shadow-card);
}

.help-owner-action-button.is-close {
  border-color: rgba(100, 116, 139, 0.2);
  background: rgba(248, 250, 252, 0.94);
}

.help-owner-action-button strong {
  font-size: 0.9rem;
  font-weight: 950;
}

.help-owner-action-button span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.38;
}

.help-owner-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.help-invite-details,
.help-offer-decision-row {
  display: grid;
  gap: 8px;
}

.help-invite-details summary {
  cursor: pointer;
  font-weight: 850;
}

.help-invite-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-offer-decision-row {
  justify-items: start;
  padding-top: 4px;
}

.help-comment-thread {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.72);
}

.admin-studio-character-turnaround-history-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.admin-studio-character-turnaround-history-grid img {
  aspect-ratio: 16 / 9;
}

.help-comment-thread-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}

.help-comment-thread-summary::-webkit-details-marker {
  display: none;
}

.help-comment-thread-summary > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.help-thread-live-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.help-thread-live-tools button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--foreground-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.help-thread-live-tools button:hover {
  border-color: rgba(255, 200, 0, 0.48);
  color: var(--foreground);
}

.help-live-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(22, 163, 123, 0.12);
  color: #116c55;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.help-live-sync span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22, 163, 123, 0.1);
}

.help-live-sync.is-syncing {
  background: rgba(255, 200, 0, 0.22);
  color: #6b5200;
}

.help-live-sync.is-paused {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground-muted);
}

.help-live-sync.is-error {
  background: rgba(255, 119, 91, 0.14);
  color: #b42318;
}

.help-comment-thread-summary small,
.help-comment-empty {
  color: var(--foreground-muted);
  font-size: 0.88rem;
}

.help-thread-open-label {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-comment-thread[open] .help-thread-open-label {
  background: var(--foreground);
  color: #ffffff;
}

.help-thread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.help-thread-actions span {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-comment-thread-panel {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.help-comment-compose-head {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 200, 0, 0.16);
}

.help-comment-compose-head strong {
  font-size: 1rem;
}

.help-comment-compose-head span {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.help-comment-list {
  display: grid;
  gap: 8px;
}

.help-comment-bubble {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.help-comment-bubble.is-admin {
  border-color: rgba(255, 200, 0, 0.38);
  background: rgba(255, 251, 230, 0.9);
}

.help-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--foreground-muted);
  font-size: 0.78rem;
}

.help-comment-meta strong {
  color: var(--foreground);
}

.help-comment-meta span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.28);
  color: #6b5200;
  font-weight: 850;
}

.help-comment-bubble p,
.help-comment-empty {
  margin: 0;
}

.help-comment-form {
  display: grid;
  gap: 10px;
}

.help-live-footnote {
  margin: -2px 0 0;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.help-draft-status {
  margin: -2px 0 0;
}

.help-sensitive-guide {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 119, 91, 0.18);
  background: rgba(255, 248, 245, 0.88);
  color: #8a2f21;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.45;
}

.help-new-reply-toast {
  justify-self: start;
  min-height: 34px;
  border: 1px solid rgba(86, 207, 174, 0.32);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(232, 248, 240, 0.94);
  color: #116c55;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17, 108, 85, 0.08);
}

.help-comment-meta em {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.help-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 2px;
}

.help-comment-actions .button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 0.76rem;
}

.help-comment-edit-form,
.help-report-form {
  display: grid;
  gap: 8px;
}

.help-comment-edit-form textarea,
.help-report-form textarea {
  width: 100%;
}

.help-report-details {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid rgba(244, 63, 94, 0.14);
  background:
    radial-gradient(circle at top right, rgba(244, 63, 94, 0.08), transparent 34%),
    rgba(255, 251, 252, 0.94);
}

.help-report-details.is-compact {
  padding: 0;
  border: 0;
  background: transparent;
}

.help-report-details summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.help-report-details summary::-webkit-details-marker {
  display: none;
}

.help-report-summary-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
  font-size: 0.9rem;
  font-weight: 950;
}

.help-report-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-report-summary-copy strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
}

.help-report-summary-copy small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-report-details.is-compact summary {
  display: inline-flex;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
}

.help-report-details.is-compact .help-report-summary-icon {
  width: 20px;
  border-radius: 999px;
  font-size: 0.68rem;
}

.help-report-details.is-compact .help-report-summary-copy strong {
  font-size: 0.76rem;
}

.help-report-details[open].is-compact {
  flex-basis: 100%;
  padding: 10px;
  border: 1px solid rgba(244, 63, 94, 0.14);
  border-radius: 14px;
  background: rgba(255, 251, 252, 0.94);
}

.help-report-details[open].is-compact summary {
  padding: 0;
  border: 0;
  background: transparent;
}

.help-report-submit {
  justify-self: start;
}

.help-invite-manager {
  display: grid;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 34%),
    rgba(248, 250, 252, 0.9);
}

.help-invite-manager-heading {
  display: grid;
  gap: 5px;
}

.help-invite-kicker {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-invite-manager-heading strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.2;
}

.help-invite-manager-heading span:not(.help-invite-kicker) {
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.35;
}

.help-invite-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.help-invite-form-grid .field {
  gap: 5px;
}

.help-invite-link-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.88);
}

.help-invite-link-card > span {
  color: #166534;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-invite-link-card a {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.38;
}

.help-invite-link-card .button,
.help-invite-submit {
  width: 100%;
}

.help-invite-list {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.help-invite-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.help-invite-list-heading strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
}

.help-invite-list-heading span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.help-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.help-invite-row.is-revoked {
  opacity: 0.62;
}

.help-invite-person {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-invite-person small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-invite-status-chip {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.22);
  color: #6b5200;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.help-invite-status-chip.is-accepted {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.help-invite-status-chip.is-revoked {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.help-invite-row-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.help-comment-login {
  justify-self: start;
}

.form-status-message {
  margin: 0;
  font-weight: 800;
}

.form-status-message.is-error {
  color: #b42318;
}

.form-status-message.is-success {
  color: #116c55;
}

.admin-help-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.admin-help-filter-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 0.72fr)) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: flex-end;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.admin-help-moderation-queue {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 119, 91, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.admin-help-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.admin-help-report-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.admin-help-report-card h3,
.admin-help-report-card p {
  margin: 0;
}

.admin-help-report-card h3 {
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.admin-help-search-field input {
  min-height: 42px;
}

.admin-help-filter-actions,
.admin-help-card-actions,
.admin-help-offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-help-card-top {
  align-items: flex-start;
}

.admin-help-card.is-priority {
  border-color: rgba(255, 119, 91, 0.36);
  box-shadow: 0 14px 34px rgba(255, 119, 91, 0.12);
}

.admin-help-card.is-hidden {
  opacity: 0.76;
}

.admin-help-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-help-meta div {
  padding: 10px;
  border-radius: 14px;
  background: var(--surface-soft);
}

.admin-help-meta dt,
.admin-help-meta dd {
  margin: 0;
}

.admin-help-meta dt {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-help-email {
  overflow-wrap: anywhere;
  font-size: 0.8rem;
}

.admin-help-controls {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.admin-help-control-grid {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(160px, 0.8fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: flex-end;
}

.admin-help-hide-row {
  min-height: 42px;
  align-items: center;
}

.admin-help-offers {
  padding-top: 6px;
}

.admin-help-offer-card {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.28fr) minmax(190px, auto);
  align-items: flex-end;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
}

.admin-help-offer-card.is-selected {
  border-color: rgba(255, 200, 0, 0.5);
  background: rgba(255, 251, 230, 0.9);
}

.admin-help-offer-card p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}

.admin-help-offer-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-help-offer-heading span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 123, 0.12);
  color: #116c55;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-help-helper-profile {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(22, 163, 123, 0.16);
  background: rgba(232, 248, 240, 0.62);
}

.admin-help-helper-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-help-helper-tags span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #ffffff;
  color: #116c55;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-help-helper-missing {
  color: var(--foreground-muted);
  font-size: 0.84rem;
}

.admin-help-selected-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.32);
  color: #6b5200;
  font-size: 0.78rem;
  font-weight: 900;
}

.help-new-layout {
  max-width: 860px;
}

.help-new-intro {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.help-new-intro .stack-tight {
  display: none;
}

.help-new-intro .page-intro-support {
  display: flex;
  justify-content: flex-end;
}

.help-new-back {
  display: flex;
  justify-content: flex-end;
}

.help-new-side-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.help-helper-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.help-helper-profile-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px);
}

.help-helper-fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.8);
}

.help-helper-fieldset legend {
  padding: 0 6px;
  margin-bottom: 8px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.help-helper-category-grid,
.help-helper-toggle-grid {
  display: grid;
  gap: 8px;
}

.help-helper-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-helper-category-option,
.help-helper-toggle-grid .checkbox-row {
  align-items: flex-start;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.help-helper-profile-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.help-helper-profile-side h3,
.help-helper-profile-side p {
  margin: 0;
}

.help-helper-profile-side p {
  color: var(--foreground-muted);
  line-height: 1.55;
}

.help-detail-band {
  padding-top: 18px;
}

.help-detail-container {
  max-width: 1160px;
}

.help-detail-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
}

.help-detail-nav .button {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  box-shadow: none;
}

.help-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.help-detail-main,
.help-detail-action-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-detail-main {
  gap: 12px;
  padding: clamp(15px, 2.4vw, 22px);
  border-radius: 24px;
}

.help-detail-main.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.12), transparent 26%),
    #ffffff;
}

.help-detail-title {
  display: grid;
  gap: 6px;
}

.help-detail-title .eyebrow {
  margin: 0;
}

.help-detail-title h1 {
  margin: 0;
  font-size: clamp(1.28rem, 2.2vw, 2rem);
  line-height: 1.12;
}

.help-detail-title p {
  max-width: 68ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.48;
}

.help-progress-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}

.help-progress-rail li {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.help-progress-rail li span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
}

.help-progress-rail li.is-complete {
  border-color: rgba(25, 135, 84, 0.24);
  background: rgba(232, 248, 240, 0.86);
  color: #116c55;
}

.help-progress-rail li.is-complete span {
  border-color: #16a37b;
  background:
    linear-gradient(135deg, transparent 45%, #ffffff 45% 55%, transparent 55%),
    #16a37b;
}

.help-progress-rail li.is-next {
  border-color: rgba(255, 200, 0, 0.44);
  background: rgba(255, 250, 226, 0.92);
  color: #6b5200;
}

.help-detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-detail-meta-grid > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-detail-meta-grid svg {
  width: 16px;
  height: 16px;
}

.help-detail-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.help-detail-safety-card,
.help-detail-cat-card,
.help-detail-context-card {
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-detail-safety-card,
.help-detail-context-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
}

.help-detail-safety-card {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.16), transparent 30%),
    rgba(248, 250, 252, 0.94);
}

.help-detail-safety-card p,
.help-detail-context-card p {
  margin: 0;
  color: var(--foreground-muted);
  line-height: 1.55;
}

.help-detail-context-card p:last-child {
  white-space: pre-wrap;
}

.help-detail-section-heading {
  display: grid;
  gap: 5px;
}

.help-detail-section-heading h2 {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.18;
}

.help-detail-private-card,
.help-detail-offer-queue,
.help-detail-timeline-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.82);
}

.help-detail-private-card h2,
.help-detail-private-card p {
  margin: 0;
}

.help-detail-private-card h2 {
  font-size: 1.15rem;
  line-height: 1.2;
}

.help-detail-private-card p:last-child,
.help-detail-empty-note {
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-offer-list {
  display: grid;
  gap: 9px;
}

.help-detail-offer-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.help-detail-offer-card.is-selected {
  border-color: rgba(25, 135, 84, 0.28);
  background: rgba(232, 248, 240, 0.92);
}

.help-detail-offer-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.help-detail-offer-card span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.24);
  color: #6b5200;
  font-size: 0.76rem;
  font-weight: 900;
}

.help-detail-offer-card p,
.help-detail-offer-card small,
.help-detail-empty-note {
  margin: 0;
}

.help-detail-offer-card p {
  color: var(--foreground);
  line-height: 1.48;
}

.help-detail-offer-card small {
  color: var(--foreground-muted);
  line-height: 1.45;
}

.help-detail-helper-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.help-detail-helper-mini span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(22, 163, 123, 0.12);
  color: #116c55;
  font-size: 0.74rem;
  font-weight: 900;
}

.help-detail-timeline {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.help-detail-timeline li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 0 0 14px;
}

.help-detail-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: -2px;
  left: 7px;
  width: 2px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.help-detail-timeline li:last-child {
  padding-bottom: 0;
}

.help-detail-timeline-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  background: #16a37b;
  box-shadow: 0 0 0 1px rgba(22, 163, 123, 0.22);
}

.help-detail-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-detail-timeline-meta strong {
  color: #116c55;
}

.help-detail-timeline h3,
.help-detail-timeline p {
  margin: 0;
}

.help-detail-timeline h3 {
  margin-top: 2px;
  font-size: 0.98rem;
  line-height: 1.24;
}

.help-detail-timeline p {
  margin-top: 4px;
  color: var(--foreground-muted);
  line-height: 1.48;
  white-space: pre-wrap;
}

.help-detail-cat-card {
  display: inline-grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-self: start;
  min-width: min(100%, 320px);
  padding: 10px;
  border-radius: 20px;
}

.help-detail-cat-image {
  position: relative;
  width: 74px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-soft);
}

.help-detail-cat-image img {
  object-fit: cover;
}

.help-detail-cat-card span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-detail-cat-card small {
  color: var(--foreground-muted);
}

.help-detail-action-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.help-detail-participants-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-detail-participants-card p {
  margin: 0;
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-participant-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-detail-participant-stats span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-detail-participant-stats strong {
  color: var(--foreground);
  font-size: 1.45rem;
  line-height: 1;
}

.help-detail-action-card {
  padding: 16px;
  border-radius: 20px;
}

.help-detail-action-card h2,
.help-detail-action-card p {
  margin: 0;
}

.help-detail-action-card h2 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.help-detail-action-card p {
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-action-card.is-room-owner {
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 30%),
    #ffffff;
}

.help-detail-action-card.is-direct-help {
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.14), transparent 30%),
    #ffffff;
}

.help-direct-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-direct-choice-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
}

.help-direct-choice-grid strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.help-direct-choice-grid small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.help-comment-thread.is-room {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-comment-thread.is-room .help-comment-thread-summary {
  padding: 15px;
}

.help-comment-thread.is-room .help-comment-thread-panel {
  padding: 0 15px 15px;
}

.help-comment-thread.is-room .help-comment-list {
  gap: 10px;
}

.help-comment-thread.is-room .help-comment-bubble {
  border-radius: 18px;
}

@media (max-width: 900px) {
  .help-network-layout {
    grid-template-columns: 1fr;
  }

  .help-community-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .help-community-primary-actions {
    grid-template-columns: 1fr 1fr;
  }

  .help-community-actions {
    justify-content: flex-start;
  }

  .help-my-rooms-head {
    flex-direction: column;
  }

  .help-my-room-list {
    grid-template-columns: 1fr;
  }

  .help-room-wizard-progress {
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: 4px;
    background:
      linear-gradient(90deg, rgba(255, 200, 0, 0.8) var(--wizard-progress), rgba(226, 232, 240, 0.95) var(--wizard-progress)) 20px 28px / 420px 3px no-repeat;
  }

  .help-room-wizard-progress button {
    flex: 0 0 112px;
  }

  .ai-copilot-result-grid,
  .admin-ai-room-grid,
  .admin-ai-priority-grid,
  .admin-ai-suggestion-grid,
  .donation-route-grid,
  .donation-copilot-context-grid {
    grid-template-columns: 1fr;
  }

  .donation-copilot-top {
    max-width: none;
  }

  .donation-copilot-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .donation-copilot-action-row .button,
  .donation-copilot-options,
  .donation-copilot-options summary {
    width: 100%;
  }

  .donation-copilot-options-panel {
    position: static;
    width: 100%;
  }

  .donation-copilot-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-copilot-result-head {
    grid-template-columns: 1fr;
  }

  .ai-copilot-result-head .button {
    width: 100%;
  }

  .ai-copilot-inline-top {
    grid-template-columns: 1fr;
  }

  .admin-ai-brief-top {
    grid-template-columns: 1fr;
  }

  .admin-ai-brief-button {
    width: 100%;
  }

  .ai-copilot-review-button {
    width: 100%;
  }

  .ai-copilot-feature-row {
    padding-left: 0;
  }

  .help-command-panel {
    grid-template-columns: 1fr;
  }

  .help-community-brief {
    grid-template-columns: 1fr;
  }

  .help-room-urgency-grid {
    grid-template-columns: 1fr;
  }

  .admin-help-offer-card {
    grid-template-columns: 1fr;
  }

  .help-helper-profile-layout {
    grid-template-columns: 1fr;
  }

  .help-helper-profile-side {
    position: static;
  }

  .help-progress-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-detail-layout {
    grid-template-columns: 1fr;
  }

  .help-direct-choice-grid {
    grid-template-columns: 1fr;
  }

  .help-detail-action-panel {
    position: static;
  }

  .help-detail-nav {
    width: 100%;
    border-radius: 18px;
  }

  .help-detail-nav .button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-help-filter-panel,
  .admin-help-control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .admin-help-search-field,
  .admin-help-filter-actions,
  .admin-help-hide-row {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .help-network-stats,
  .admin-help-filter-panel,
  .admin-help-control-grid {
    grid-template-columns: 1fr;
  }

  .help-community-hero {
    padding: 16px;
    border-radius: 20px;
  }

  .help-community-primary-actions {
    grid-template-columns: 1fr;
  }

  .help-community-entry-card {
    min-height: 168px;
  }

  .help-community-gateway.is-production {
    padding: 14px;
  }

  .help-community-gateway-head {
    display: grid;
  }

  .help-community-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .help-community-actions .button {
    justify-content: center;
  }

  .admin-help-filter-actions,
  .admin-help-card-actions,
  .admin-help-offer-actions {
    justify-content: flex-start;
  }

  .help-progress-rail {
    grid-template-columns: 1fr;
  }

  .help-helper-category-grid {
    grid-template-columns: 1fr;
  }

  .help-visibility-options {
    grid-template-columns: 1fr;
  }

  .help-room-wizard-progress {
    margin-inline: -3px;
  }

  .help-room-form-section {
    padding: 13px;
    border-radius: 18px;
  }

  .help-room-type-grid,
  .help-area-option-grid,
  .help-cat-choice-grid,
  .donation-copilot-choice-grid {
    grid-template-columns: 1fr;
  }

  .help-room-submit-row {
    justify-content: stretch;
  }

  .help-room-submit-row .button {
    width: 100%;
    justify-content: center;
  }

  .help-pet-combobox-control {
    grid-template-columns: 1fr;
  }

  .help-card-header {
    display: grid;
  }

  .help-status-chip {
    justify-self: start;
  }

  .help-channel-topbar {
    display: grid;
  }

  .help-board-body {
    padding: 12px;
  }

  .help-board-tools {
    padding: 12px;
  }

  .help-search-bar {
    align-items: stretch;
  }

  .help-search-bar .button {
    justify-content: center;
  }

  .help-request-thread {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .help-thread-avatar {
    width: 34px;
    border-radius: 12px;
  }
}


@media (min-width: 720px) and (max-width: 1023px) {
  .site-main {
    --site-main-top: 62px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 50px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 48px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 14px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .section,
  .page-band,
  .detail-band {
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .hero-band {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .home-hero-band {
    padding-top: 12px;
  }

  .help-page-band,
  .help-detail-band {
    padding-top: 14px;
  }

  .cats-page-band {
    padding-top: 20px;
  }
}

html[data-theme="dark"] :where(
  .home-intro-card,
  .home-feature-card,
  .home-support-card,
  .cats-feature-card,
  .cats-directory-card,
  .help-community-hero,
  .help-my-rooms-panel,
  .help-channel-board,
  .help-channel-topbar,
  .help-channel-tabs,
  .help-filter-panel,
  .help-request-card,
  .help-network-sidebar,
  .help-invite-manager,
  .help-offer-details,
  .help-report-details,
  .help-owner-actions,
  .help-detail-private-card,
  .help-detail-offer-queue,
  .help-detail-timeline-card,
  .help-detail-offer-card,
  .ai-copilot-card,
  .ai-copilot-result,
  .ai-summary-result,
  .admin-ai-brief-result,
  .login-provider-card,
  .login-email-card
) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.06), transparent 32%),
    rgba(23, 29, 26, 0.94);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] :where(
  .help-request-meta span,
  .help-status-chip,
  .help-detail-participant-stats span,
  .help-direct-choice-grid span,
  .help-invite-row,
  .help-invite-list-heading span,
  .help-invite-link-card,
  .ai-copilot-suggested-copy,
  .ai-copilot-details,
  .ai-copilot-chip-row span,
  .help-cat-choice,
  .help-room-type-card,
  .help-room-urgency-card,
  .help-visibility-options label
) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
}

html[data-theme="dark"] :where(.help-status-chip.is-open, .help-status-chip.is-following, .help-invite-status-chip.is-pending) {
  background: rgba(255, 200, 0, 0.16);
  color: var(--brand-soft);
}

html[data-theme="dark"] .recognition-ticker-band {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0b0b0c;
  box-shadow: none;
}

html[data-theme="dark"] .recognition-ticker-label {
  background: rgba(255, 200, 0, 0.92);
  color: #211a00;
  border-right: 0;
}

html[data-theme="dark"] .recognition-ticker-window,
html[data-theme="dark"] .recognition-ticker-item,
html[data-theme="dark"] .recognition-ticker-name {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .recognition-ticker-item::before {
  color: #ffc800;
  background: #ffc800;
  opacity: 0.6;
}

html[data-theme="dark"] .recognition-ticker-kind {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.1);
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] :where(
  .home-hero-shell,
  .home-feature-card,
  .home-feature-panel,
  .home-feature-panel-video,
  .home-intro-card,
  .home-project-brief-item,
  .home-story-empty,
  .home-content-card,
  .story-record-card,
  .shorts-episode-card,
  .shorts-linked-card,
  .project-card,
  .support-card,
  .detail-action-card,
  .detail-support-block,
  .detail-photo-gallery,
  .detail-case-intro,
  .detail-gallery,
  .detail-follow-up-card,
  .admin-help-card,
  .admin-help-card-main,
  .admin-help-controls,
  .admin-help-offer-card,
  .help-command-card,
  .help-room-form-section,
  .help-comment-card,
  .help-comment-form,
  .help-offer-form,
  .help-invite-form,
  .help-report-form,
  .help-detail-cat-card
) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .home-feature-tags .tag,
  .home-content-card .tag,
  .tag,
  .chip-button,
  .detail-preset-card,
  .help-cat-choice,
  .help-comment-card,
  .help-detail-timeline-dot,
  .help-detail-helper-mini span,
  .help-invite-status-chip,
  .help-report-details.is-compact summary,
  .ai-copilot-details summary strong
) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .help-offer-details summary::after {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .home-feature-date,
  .home-feature-caption,
  .home-card-meta,
  .home-card-description,
  .meta-row,
  .helper-text,
  .help-invite-person small,
  .help-report-summary-copy small,
  .help-offer-details summary small,
  .help-owner-actions-head span,
  .help-owner-action-button span
) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] :where(
  .home-feature-copy,
  .home-feature-note,
  .home-content-card h3,
  .home-feature-card h2,
  .home-project-brief-item strong,
  .help-invite-manager-heading strong,
  .help-report-summary-copy strong,
  .help-offer-details summary strong,
  .help-owner-actions-head strong,
  .help-owner-action-button strong
) {
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .home-feature-kicker,
  .home-feature-linkline a,
  .eyebrow,
  .card-eyebrow,
  .meta-label
) {
  color: var(--brand-soft);
}

html[data-theme="dark"] :where(.home-feature-panel, .home-feature-note) {
  border-color: var(--border-soft);
}

html[data-theme="dark"] :where(.home-feature-tags .tag, .home-content-card .tag) {
  background: rgba(255, 200, 0, 0.12);
  color: var(--brand-soft);
}

/* Dark mode production contrast pass. Keep this late in the file so it wins over
   light-mode page gradients without changing the light theme. */
html[data-theme="dark"] :where(
  .card,
  .form-card,
  .page-intro-card,
  .snapshot-card,
  .notice-card,
  .empty-state,
  .admin-card,
  .auth-card,
  .account-nav-shell,
  .admin-section-shell,
  .admin-toolbar-card,
  .content-card,
  .project-card,
  .support-card,
  .detail-main,
  .detail-side,
  .detail-photo-gallery,
  .detail-case-intro,
  .detail-gallery,
  .detail-follow-up-card,
  .detail-action-card,
  .detail-project-card,
  .detail-support-block,
  .support-entry-card,
  .support-case-followup,
  .support-case-story,
  .project-intro-summary,
  .project-intro-list-card,
  .project-intro-feature-card,
  .story-hub-hero,
  .story-hub-hero-copy-panel,
  .story-page-nav,
  .story-track-strip,
  .story-series-spotlight,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card,
  .story-feature-card-public,
  .story-library-section-public,
  .story-library-section-instagram,
  .story-record-card,
  .story-record-card-instagram,
  .instagram-record-preview,
  .story-video-card,
  .story-instagram-embed-card,
  .story-gallery-card,
  .proof-section-card,
  .proof-feature-card,
  .trust-logo-card,
  .trust-archive-card,
  .trust-note-card,
  .trust-entry-card,
  .notification-flow-card,
  .notification-section-card,
  .notification-pref-card,
  .saved-page-intro,
  .saved-mobile-card,
  .saved-summary-card,
  .admin-form-guide,
  .admin-form-section,
  .admin-form-disclosure,
  .admin-form-guide-card,
  .admin-pet-editor-card,
  .admin-pet-photo-card,
  .admin-pet-command-bar,
  .admin-pet-command-current,
  .admin-pet-command-search,
  .admin-pet-command-results,
  .admin-pet-editor-identity,
  .admin-help-filter-panel,
  .admin-help-moderation-queue,
  .admin-help-report-card,
  .admin-help-offers,
  .admin-help-offer-card,
  .help-new-side-card,
  .help-detail-main,
  .help-detail-action-card,
  .help-detail-participants-card,
  .help-comment-thread-panel
) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] :where(
  .content-card-body,
  .detail-age-card,
  .detail-preset-card,
  .record-note,
  .project-intro-metric,
  .project-intro-feature-metric,
  .project-intro-link,
  .project-intro-remaining,
  .story-page-nav-link,
  .story-track-link,
  .story-series-route-card.is-latest,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-record-card-partner .media-thumb,
  .story-instagram-embed,
  .story-gallery-media,
  .trust-logo-mark,
  .notification-pref-status,
  .account-nav-link,
  .admin-section-link,
  .account-nav-count,
  .project-pet-selection-count,
  .project-pet-card,
  .project-pet-pill,
  .project-update-pet-link,
  .project-stale-chip,
  .admin-combobox-trigger,
  .admin-combobox-popover,
  .admin-combobox-option,
  .admin-form-section-header,
  .admin-form-disclosure-content,
  .admin-recognition-row,
  .admin-pet-command-filter,
  .admin-pet-command-result,
  .admin-pet-command-empty,
  .admin-short-section,
  .admin-short-section-toggle,
  .admin-short-resource-row,
  .admin-short-check-item,
  .admin-short-cat-target-card,
  .admin-short-cat-drawer,
  .admin-short-cat-browser,
  .admin-short-cat-search,
  .admin-draggable-card,
  .admin-ai-room-grid a,
  .admin-help-meta div,
  .admin-help-helper-tags span,
  .admin-help-selected-chip
) {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .story-hub-hero .story-feature-card-public,
  .story-hub-hero .story-feature-card-public .inline-note,
  .story-series-route-card.is-latest,
  .story-series-episode-card.is-latest,
  .story-instagram-detail-hero,
  .notification-pref-status.is-enabled,
  .account-nav-link.is-active,
  .admin-section-link.is-active,
  .project-pet-card.is-selected,
  .project-pet-pill.is-selected,
  .admin-combobox-option.is-selected,
  .admin-pet-command-filter.is-active,
  .admin-short-section.is-open,
  .admin-short-section.is-open .admin-short-section-toggle,
  .admin-short-check-item.is-selected,
  .admin-short-cat-drawer[open] summary,
  .admin-short-selected-cat
) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 200, 0, 0.11);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .field input,
  .field textarea,
  .field select,
  .admin-combobox-search,
  .admin-help-search-field input,
  .help-search-field input,
  .help-cat-search-field input,
  .help-comment-edit-form textarea,
  .help-report-form textarea
) {
  background: rgba(8, 12, 10, 0.84);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .field input::placeholder,
  .field textarea::placeholder,
  .admin-help-search-field input::placeholder,
  .help-search-field input::placeholder,
  .help-cat-search-field input::placeholder
) {
  color: rgba(247, 245, 234, 0.52);
}

html[data-theme="dark"] :where(
  .tag,
  .chip-button,
  .record-meta-pill,
  .meta-row,
  .shorts-cat-mini-item,
  .shorts-episode-cat-pill,
  .shorts-cat-mini-more,
  .shorts-episode-cat-more,
  .shorts-link-card,
  .shorts-episode-rail-item,
  .help-status-chip,
  .help-request-meta span,
  .help-linked-cat,
  .help-card-chip-row .tag,
  .help-thread-live-tools button,
  .help-live-sync,
  .help-new-reply-toast,
  .help-invite-row,
  .help-invite-link-card,
  .help-invite-status-chip
) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .helper-text,
  .hero-lead,
  .detail-snapshot-copy,
  .detail-action-description,
  .detail-preset-copy,
  .detail-media-note,
  .detail-signal-note,
  .project-intro-link-copy,
  .project-intro-link-meta,
  .story-page-nav-count,
  .story-track-count,
  .story-series-route-card p,
  .story-series-episode-meta,
  .shorts-card-summary,
  .shorts-card-note,
  .shorts-link-kicker,
  .admin-current-editor-title span,
  .project-pet-copy span,
  .project-pet-note,
  .admin-form-chip,
  .admin-pet-command-current span:last-child,
  .admin-pet-command-result small,
  .admin-pet-editor-meta,
  .admin-ai-brief-result small,
  .admin-ai-room-grid small,
  .admin-help-meta dt,
  .admin-help-offer-card p,
  .help-my-room-card small,
  .help-request-meta,
  .help-linked-cat small,
  .help-card-details,
  .help-comment-meta span,
  .help-comment-empty,
  .help-detail-context-card p,
  .help-detail-offer-card p,
  .help-detail-offer-card small,
  .help-detail-timeline p,
  .help-detail-participants-card p
) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] :where(
  h1,
  h2,
  h3,
  h4,
  .content-card-body h3,
  .snapshot-card strong,
  .project-meter strong,
  .project-intro-link-head strong,
  .story-series-route-card strong,
  .story-track-link strong,
  .shorts-link-text strong,
  .admin-cat-library-name,
  .admin-current-editor-title strong,
  .project-pet-copy strong,
  .admin-ai-room-grid strong,
  .help-card-header h3,
  .help-comment-compose-head strong,
  .help-detail-title h1,
  .help-detail-section-heading h2
) {
  color: var(--foreground);
}

html[data-theme="dark"] .story-video-embed,
html[data-theme="dark"] .story-instagram-embed {
  background: #070908;
  border-color: var(--border);
}

html[data-theme="dark"] .button-ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .button-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-page-band {
  background: transparent;
}

html[data-theme="dark"] .cats-page-band::before {
  display: none;
}

html[data-theme="dark"] .cats-directory-intro {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.06), transparent 30%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .cats-discovery-panel {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(18, 24, 21, 0.98) 0%, rgba(12, 17, 15, 0.98) 100%);
  border-color: var(--border);
}

html[data-theme="dark"] :where(
  .cats-discovery-count,
  .cats-search-shell,
  .cats-results-status,
  .cats-filter-chip,
  .cats-filter-chip-count,
  .cats-feature-body,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-directory-body,
  .cats-directory-need,
  .cats-directory-status-line,
  .cats-empty-state
) {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-search-shell:focus-within {
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .cats-search-shell input {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-feature-card {
  background: rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-feature-card:hover,
html[data-theme="dark"] .cats-directory-card:hover {
  background: rgba(25, 32, 28, 0.98);
  border-color: rgba(255, 200, 0, 0.36);
}

html[data-theme="dark"] :where(.cats-feature-media, .cats-directory-media) {
  background: rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .cats-feature-photo-label {
  background: rgba(12, 17, 15, 0.84);
  border-color: rgba(255, 200, 0, 0.28);
  color: var(--brand-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] :where(
  .cats-discovery-copy h1,
  .cats-discovery-count strong,
  .cats-results-status strong,
  .cats-feature-body h3,
  .cats-feature-copy,
  .cats-directory-body h3,
  .cats-directory-copy,
  .cats-directory-status-line,
  .cats-directory-need-line,
  .cats-directory-need p
) {
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .cats-discovery-copy p:not(.eyebrow),
  .cats-results-status,
  .cats-results-status p,
  .cats-feature-location span:last-child,
  .cats-feature-chip span:last-child,
  .cats-directory-status,
  .cats-directory-status-line span:last-child,
  .cats-directory-need-line span:last-child
) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"],
html[data-theme="dark"] .cats-feature-chip[data-priority="adoptable"],
html[data-theme="dark"] .cats-priority-badge[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.17);
  border-color: rgba(255, 200, 0, 0.42);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"],
html[data-theme="dark"] .cats-feature-chip[data-priority="foster"],
html[data-theme="dark"] .cats-priority-badge[data-priority="foster"] {
  background: rgba(120, 183, 255, 0.14);
  border-color: rgba(120, 183, 255, 0.34);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"],
html[data-theme="dark"] .cats-priority-badge[data-priority="medical"] {
  background: rgba(255, 122, 102, 0.13);
  border-color: rgba(255, 160, 134, 0.34);
  color: #ffc1ad;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  background: rgba(138, 111, 255, 0.13);
  border-color: rgba(169, 150, 255, 0.34);
  color: #cec4ff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"],
html[data-theme="dark"] .cats-feature-chip[data-priority="support"],
html[data-theme="dark"] .cats-priority-badge[data-priority="support"],
html[data-theme="dark"] .cats-priority-badge[data-priority="recovery"] {
  background: rgba(86, 207, 174, 0.14);
  border-color: rgba(86, 207, 174, 0.34);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-filter-chip-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active .cats-filter-chip-count {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .recognition-ticker-band,
html[data-theme="dark"] .recognition-ticker-band :where(
  .recognition-ticker-window,
  .recognition-ticker-item,
  .recognition-ticker-name,
  .recognition-ticker-kind
) {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .recognition-ticker-band .recognition-ticker-kind {
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] .home-feature-card-pet,
html[data-theme="dark"] .home-feature-card-video {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.07), transparent 30%),
    linear-gradient(180deg, rgba(18, 24, 21, 0.98) 0%, rgba(11, 15, 13, 0.98) 100%);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-card-pet:hover,
html[data-theme="dark"] .home-feature-card-video:hover {
  border-color: rgba(255, 200, 0, 0.36);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-panel,
html[data-theme="dark"] .home-feature-card-video .home-feature-panel,
html[data-theme="dark"] .home-feature-panel-video {
  background: transparent;
  border-top-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-media,
html[data-theme="dark"] .home-feature-card-video .home-feature-media {
  background: rgba(7, 10, 9, 0.94);
}

html[data-theme="dark"] .home-feature-card-video .home-feature-media-video {
  background:
    radial-gradient(circle at top, rgba(255, 200, 0, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 10, 9, 0.98) 0%, rgba(14, 18, 16, 0.98) 100%);
}

html[data-theme="dark"] .home-feature-video-frame {
  background: transparent;
}

html[data-theme="dark"] .home-feature-card-pet h2,
html[data-theme="dark"] .home-feature-card-video h2,
html[data-theme="dark"] .home-feature-card-pet .home-feature-copy,
html[data-theme="dark"] .home-feature-card-video .home-feature-copy,
html[data-theme="dark"] .home-feature-note {
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-date,
html[data-theme="dark"] .home-feature-caption {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-tags .tag-chip,
html[data-theme="dark"] .home-feature-card-video .home-feature-tags .tag-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .home-content-card .content-card-body {
  background: transparent;
  border-color: var(--border-soft);
}

html[data-theme="dark"] .home-content-card .home-card-meta {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted-foreground);
}

html[data-theme="dark"] .home-content-card .home-card-meta .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .home-content-card .home-card-meta > span:last-child {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .bank-transfer-open-label {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card[open] .bank-transfer-open-label {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .bank-transfer-card p,
html[data-theme="dark"] .bank-transfer-details dt {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card strong,
html[data-theme="dark"] .bank-transfer-summary-title,
html[data-theme="dark"] .bank-transfer-details dd {
  color: var(--foreground);
}

html[data-theme="dark"] .support-cat-card .content-card-body,
html[data-theme="dark"] .support-cat-card .card-eyebrow,
html[data-theme="dark"] .support-cat-card .tag,
html[data-theme="dark"] .support-cat-card .meta-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-cat-card .card-eyebrow,
html[data-theme="dark"] .support-cat-card .tag {
  color: var(--foreground);
}

html[data-theme="dark"] .support-cat-card .meta-row {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .support-cat-card .eyebrow-icon,
html[data-theme="dark"] .support-cat-card .tag-icon,
html[data-theme="dark"] .support-cat-card .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .support-project-card .content-card-body,
html[data-theme="dark"] .support-project-card .card-eyebrow,
html[data-theme="dark"] .support-project-card .meta-row,
html[data-theme="dark"] .project-list-card .content-card-body,
html[data-theme="dark"] .project-list-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .tag,
html[data-theme="dark"] .project-list-card .meta-row,
html[data-theme="dark"] .project-intro-feature-card .tag,
html[data-theme="dark"] .project-intro-feature-metric,
html[data-theme="dark"] .project-intro-remaining {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-project-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .tag,
html[data-theme="dark"] .project-intro-feature-card .tag,
html[data-theme="dark"] .project-intro-feature-metric strong {
  color: var(--foreground);
}

html[data-theme="dark"] .support-project-card .meta-row,
html[data-theme="dark"] .project-list-card .meta-row,
html[data-theme="dark"] .project-intro-feature-metric span,
html[data-theme="dark"] .project-intro-remaining {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .support-project-card .eyebrow-icon,
html[data-theme="dark"] .support-project-card .meta-row-icon,
html[data-theme="dark"] .project-list-card .eyebrow-icon,
html[data-theme="dark"] .project-list-card .tag-icon,
html[data-theme="dark"] .project-list-card .meta-row-icon,
html[data-theme="dark"] .project-intro-feature-card .tag-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .project-intro-remaining,
html[data-theme="dark"] .project-pet-selection-count {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.2) 0%, rgba(255, 200, 0, 0.1) 100%);
  border-color: rgba(255, 200, 0, 0.32);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 244, 194, 0.07);
}

html[data-theme="dark"] .project-intro-feature-metric,
html[data-theme="dark"] .project-pet-card,
html[data-theme="dark"] .project-pet-pill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .project-pet-card.is-selected,
html[data-theme="dark"] .project-pet-pill.is-selected {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.24) 0%, rgba(255, 200, 0, 0.11) 54%, rgba(86, 207, 174, 0.1) 100%);
  border-color: rgba(255, 200, 0, 0.44);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .admin-short-cat-target-count,
html[data-theme="dark"] .admin-short-selected-cat-remove {
  background: rgba(255, 200, 0, 0.16);
  color: var(--brand-soft);
}

html[data-theme="dark"] .admin-short-cat-search input {
  color: var(--foreground);
}

html[data-theme="dark"] .project-intro-feature-media {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(16, 22, 19, 0.96) 0%, rgba(9, 13, 11, 0.98) 100%);
}

html[data-theme="dark"] .project-intro-feature-art {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 30%),
    rgba(8, 12, 10, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .shorts-episode-card .content-card-body,
html[data-theme="dark"] .shorts-episode-card .card-eyebrow,
html[data-theme="dark"] .shorts-episode-card .tag,
html[data-theme="dark"] .shorts-episode-card .meta-row,
html[data-theme="dark"] .shorts-season-nav,
html[data-theme="dark"] .shorts-season-nav-link,
html[data-theme="dark"] .shorts-season-disclosure,
html[data-theme="dark"] .shorts-season-summary-toggle .tag,
html[data-theme="dark"] .shorts-linked-card .content-card-body,
html[data-theme="dark"] .shorts-linked-card .card-eyebrow,
html[data-theme="dark"] .shorts-linked-card .tag,
html[data-theme="dark"] .shorts-linked-card .meta-row,
html[data-theme="dark"] .shorts-episode-cat-pill,
html[data-theme="dark"] .shorts-episode-cat-more,
html[data-theme="dark"] .shorts-cat-mini-item,
html[data-theme="dark"] .shorts-cat-mini-more {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .shorts-season-nav {
  background: rgba(10, 15, 13, 0.88);
  border-color: var(--border-soft);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] .shorts-season-nav-link,
html[data-theme="dark"] .shorts-season-disclosure {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 28%),
    rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-season-nav-link:hover,
html[data-theme="dark"] .shorts-season-nav-link:focus-visible,
html[data-theme="dark"] .shorts-season-summary-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .shorts-season-disclosure[open] .shorts-season-summary-toggle {
  border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-season-toggle-indicator {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.1);
  color: var(--brand-soft);
}

html[data-theme="dark"] .shorts-cat-mini-rail {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.055), transparent 34%),
    rgba(12, 17, 15, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .cat-detail-mini-card,
html[data-theme="dark"] .shorts-mini-card {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .shorts-cat-mini-head span {
  background: transparent;
  color: var(--muted-foreground);
}

html[data-theme="dark"] .shorts-hero-metric {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .shorts-hero-metric span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .shorts-hero-metric strong {
  color: var(--foreground);
}

html[data-theme="dark"] .shorts-episode-cats {
  border-top-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-episode-card .eyebrow-icon,
html[data-theme="dark"] .shorts-episode-card .tag-icon,
html[data-theme="dark"] .shorts-episode-card .meta-row-icon,
html[data-theme="dark"] .shorts-linked-card .eyebrow-icon,
html[data-theme="dark"] .shorts-linked-card .tag-icon,
html[data-theme="dark"] .shorts-linked-card .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-discovery-count,
html[data-theme="dark"] .cats-results-status {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

html[data-theme="dark"] .cats-search-shell {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

html[data-theme="dark"] .cats-search-shell input {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .cats-sticky-toolbar {
  background: rgba(10, 15, 13, 0.9);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .cats-sticky-search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .cats-sticky-search:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .cats-sticky-search input {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-quick-tab span:last-child {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="all"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="adoptable"] {
  background: rgba(255, 200, 0, 0.18);
  border-color: rgba(255, 200, 0, 0.46);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="foster"] {
  background: rgba(120, 183, 255, 0.15);
  border-color: rgba(120, 183, 255, 0.36);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="support"] {
  background: rgba(86, 207, 174, 0.15);
  border-color: rgba(86, 207, 174, 0.36);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-search-shell:focus-within {
  background: rgba(8, 12, 10, 0.34);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-mobile-toggle {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .cats-filter-row,
html[data-theme="dark"] .cats-filter-list {
  background: transparent;
}

html[data-theme="dark"] .cats-filter-chip,
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"] {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"] {
  border-color: rgba(255, 200, 0, 0.42);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"] {
  border-color: rgba(120, 183, 255, 0.34);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"] {
  border-color: rgba(86, 207, 174, 0.34);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"] {
  border-color: rgba(255, 160, 134, 0.34);
  color: #ffc1ad;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  border-color: rgba(169, 150, 255, 0.34);
  color: #cec4ff;
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active):disabled {
  color: rgba(247, 245, 234, 0.56);
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active) .cats-filter-chip-count {
  background: transparent;
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active):disabled .cats-filter-chip-count {
  color: rgba(247, 245, 234, 0.58);
}

html[data-theme="dark"] .cats-filter-chip-count,
html[data-theme="dark"] .cats-filter-chip.is-active .cats-filter-chip-count {
  background: transparent;
  color: inherit;
}

html[data-theme="dark"] .cats-directory-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 34%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
}

html[data-theme="dark"] .cats-directory-body {
  background:
    linear-gradient(180deg, rgba(16, 22, 19, 0.96) 0%, rgba(9, 13, 11, 0.98) 100%);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .cats-directory-status-line {
  background: transparent;
  border: 0;
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-card .tag {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-card .tag-icon,
html[data-theme="dark"] .cats-status-icon,
html[data-theme="dark"] .cats-need-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-directory-need {
  margin-top: auto;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .cats-directory-need-line {
  background: transparent;
  border: 0;
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-recent-strip {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.08), transparent 30%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .cats-recent-item {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .cats-recent-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-recent-photo {
  background: rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .cats-recent-text strong,
html[data-theme="dark"] .cats-recent-copy strong {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-recent-text small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .recent-media-rail {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 32%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .recent-media-thumb {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.1), rgba(86, 207, 174, 0.1)),
    rgba(7, 10, 9, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .recent-media-placeholder {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 200, 0, 0.18), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(86, 207, 174, 0.14), transparent 26%),
    rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .recent-media-copy strong,
html[data-theme="dark"] .recent-media-text strong {
  color: var(--foreground);
}

html[data-theme="dark"] .recent-media-text small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-directory-need p {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-directory-action-hint {
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .loading-page {
  background: transparent;
}

html[data-theme="dark"] .loading-hero,
html[data-theme="dark"] .loading-status-card,
html[data-theme="dark"] .loading-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .loading-card-body {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .story-series-spotlight .button-row .button {
  background: transparent;
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .story-series-spotlight .button-row .button:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .story-series-spotlight .button-row .button-primary {
  color: var(--brand-soft);
  border-color: rgba(255, 200, 0, 0.28);
}

html[data-theme="dark"] .help-my-room-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-my-room-card:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-viewer-pill {
  background: rgba(86, 207, 174, 0.12);
  border-color: rgba(86, 207, 174, 0.24);
  color: #a6f3da;
}

html[data-theme="dark"] .help-viewer-pill.is-compact {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-helper-fieldset {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.04), transparent 30%),
    rgba(8, 12, 10, 0.52);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-helper-category-option,
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-helper-category-option:has(input:checked),
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.11), transparent 34%),
    rgba(255, 200, 0, 0.09);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-helper-category-option input,
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row input {
  accent-color: var(--brand);
}

html[data-theme="dark"] .help-board-tools {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.62);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-channel-tabs {
  background: rgba(8, 12, 10, 0.46);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-channel-tabs a,
html[data-theme="dark"] .help-status-filters a {
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-channel-tabs a:hover,
html[data-theme="dark"] .help-channel-tabs a.is-active,
html[data-theme="dark"] .help-status-filters a:hover,
html[data-theme="dark"] .help-status-filters a.is-active {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.38);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-board-tools .button-secondary,
html[data-theme="dark"] .help-board-tools .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-board-tools .button-secondary:hover,
html[data-theme="dark"] .help-board-tools .button-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-channel-topbar .button-secondary {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-channel-topbar .button-secondary:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-wizard-progress {
  border-color: var(--border-soft);
  background:
    linear-gradient(
      90deg,
      rgba(255, 200, 0, 0.72) var(--wizard-progress),
      rgba(255, 255, 255, 0.12) var(--wizard-progress)
    ) center 28px / calc(100% - 54px) 3px no-repeat;
}

html[data-theme="dark"] .help-room-wizard-progress span {
  border-color: #0f1412;
  background: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
  box-shadow: 0 0 0 1px var(--border-soft);
}

html[data-theme="dark"] .help-room-wizard-progress button.is-current span {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.16);
}

html[data-theme="dark"] .help-room-wizard-progress button.is-complete span {
  background: var(--accent-care);
  color: #06140f;
}

html[data-theme="dark"] .help-room-wizard-progress button:disabled:not(.is-current) span {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-room-topbar > span {
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid var(--border-soft);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-topbar > .help-room-draft-status {
  background: rgba(86, 207, 174, 0.12);
  border-color: rgba(86, 207, 174, 0.2);
  color: #9cf0d4;
}

html[data-theme="dark"] .help-room-back-link {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-room-back-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-form-section,
html[data-theme="dark"] .help-room-form-section.is-private-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-step-heading > span {
  border: 1px solid rgba(255, 200, 0, 0.24);
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-card-field legend {
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-type-card,
html[data-theme="dark"] .help-room-urgency-card,
html[data-theme="dark"] .help-visibility-options label {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-room-type-card:has(input:checked),
html[data-theme="dark"] .help-room-urgency-card:has(input:checked),
html[data-theme="dark"] .help-visibility-options label:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-room-urgency-card.is-urgent:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.14), transparent 34%),
    rgba(255, 122, 102, 0.1);
  border-color: rgba(255, 122, 102, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 102, 0.06);
}

html[data-theme="dark"] .help-room-type-card small,
html[data-theme="dark"] .help-room-urgency-card small,
html[data-theme="dark"] .help-visibility-options small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-area-option-grid {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-area-option {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-area-option:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-area-option small,
html[data-theme="dark"] .help-area-empty {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-pet-combobox-control button {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-pet-option-list {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-pet-option {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-pet-option:hover,
html[data-theme="dark"] button.help-cat-choice:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-pet-selected-note,
html[data-theme="dark"] .help-pet-option small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-selected-cat-chip {
  background: rgba(255, 200, 0, 0.13);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-selected-cat-chip button {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}

html[data-theme="dark"] .help-cat-choice-field legend {
  color: var(--foreground);
}

html[data-theme="dark"] .help-cat-choice-grid {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-cat-choice {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-cat-choice:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-cat-choice small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-cat-choice input {
  accent-color: var(--brand);
}

html[data-theme="dark"] .help-room-submit-row .button-secondary,
html[data-theme="dark"] .help-room-submit-row .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-room-submit-row .button-secondary:hover,
html[data-theme="dark"] .help-room-submit-row .button-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-room-submit-row .button-primary {
  border-color: rgba(255, 200, 0, 0.7);
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .help-room-submit-row .button-primary:hover {
  filter: brightness(1.04);
}

html[data-theme="dark"] .ai-copilot-card,
html[data-theme="dark"] .ai-copilot-card-inline,
html[data-theme="dark"] .admin-ai-brief-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.08), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.09), transparent 32%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .ai-copilot-heading > span {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.16), transparent 28%),
    rgba(255, 200, 0, 0.16);
  color: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.16);
}

html[data-theme="dark"] .ai-copilot-heading .eyebrow {
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-copilot-feature-row span,
html[data-theme="dark"] .ai-copilot-chip-row span {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .ai-copilot-result,
html[data-theme="dark"] .ai-summary-result,
html[data-theme="dark"] .admin-ai-brief-result {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-result-grid div,
html[data-theme="dark"] .ai-summary-result div,
html[data-theme="dark"] .admin-ai-room-grid a {
  background: rgba(15, 20, 18, 0.88);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-summary-result span,
html[data-theme="dark"] .admin-ai-room-grid span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-summary-result p,
html[data-theme="dark"] .ai-summary-result ul,
html[data-theme="dark"] .admin-ai-brief-result p,
html[data-theme="dark"] .admin-ai-action-list,
html[data-theme="dark"] .admin-ai-room-grid small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .ai-copilot-result.is-applied {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  box-shadow: none;
}

html[data-theme="dark"] .ai-copilot-suggested-copy,
html[data-theme="dark"] .ai-copilot-details {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-details summary strong {
  background: rgba(8, 12, 10, 0.86);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-warning-list span {
  background: rgba(255, 200, 0, 0.12);
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-copilot-warning-list .is-high {
  background: rgba(255, 122, 102, 0.13);
  color: #ffb6aa;
}

html[data-theme="dark"] .ai-copilot-applied-note {
  background: rgba(86, 207, 174, 0.12);
  color: #a8f1dc !important;
}

html[data-theme="dark"] .admin-ai-priority-card,
html[data-theme="dark"] .admin-ai-suggestion-card,
html[data-theme="dark"] .admin-ai-draft-card,
html[data-theme="dark"] .admin-ai-draft-body {
  background: rgba(15, 20, 18, 0.88);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .admin-ai-priority-card:hover,
html[data-theme="dark"] .admin-ai-suggestion-card:hover {
  background: rgba(21, 28, 24, 0.94);
  border-color: rgba(255, 200, 0, 0.46);
}

html[data-theme="dark"] .admin-ai-priority-card.is-urgent {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.1), transparent 36%),
    rgba(15, 20, 18, 0.92);
  border-color: rgba(255, 122, 102, 0.3);
}

html[data-theme="dark"] .admin-ai-priority-card span,
html[data-theme="dark"] .admin-ai-draft-card span,
html[data-theme="dark"] .admin-ai-suggestion-card span,
html[data-theme="dark"] .admin-ai-section-head span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .admin-ai-priority-card p,
html[data-theme="dark"] .admin-ai-priority-card small,
html[data-theme="dark"] .admin-ai-priority-card em,
html[data-theme="dark"] .admin-ai-suggestion-card p,
html[data-theme="dark"] .admin-ai-suggestion-card small,
html[data-theme="dark"] .admin-ai-draft-card p,
html[data-theme="dark"] .admin-ai-draft-card small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-network-stats div {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-network-stats strong {
  color: var(--foreground);
}

html[data-theme="dark"] .help-network-stats span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .donation-copilot-card {
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.08), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .donation-copilot-result,
html[data-theme="dark"] .donation-copilot-choice,
html[data-theme="dark"] .donation-copilot-amount,
html[data-theme="dark"] .donation-copilot-options summary,
html[data-theme="dark"] .donation-copilot-options-panel,
html[data-theme="dark"] .donation-route-card,
html[data-theme="dark"] .donation-copilot-context-grid a,
html[data-theme="dark"] .donation-copilot-options-panel input {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .donation-copilot-choice.is-selected,
html[data-theme="dark"] .donation-copilot-amount.is-selected,
html[data-theme="dark"] .donation-route-card.is-monthly {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 36%),
    rgba(19, 24, 20, 0.94);
  border-color: rgba(255, 200, 0, 0.4);
  box-shadow: none;
}

html[data-theme="dark"] .donation-copilot-choice-icon {
  background: rgba(86, 207, 174, 0.12);
  color: #a8f1dc;
}

html[data-theme="dark"] .donation-copilot-choice.is-selected .donation-copilot-choice-icon {
  background: var(--brand);
  color: var(--brand-ink);
}

html[data-theme="dark"] .donation-route-card:hover,
html[data-theme="dark"] .donation-copilot-context-grid a:hover {
  background: rgba(17, 24, 20, 0.96);
  border-color: rgba(255, 200, 0, 0.46);
}

html[data-theme="dark"] .donation-copilot-result-head span,
html[data-theme="dark"] .donation-copilot-context-grid > section > span,
html[data-theme="dark"] .donation-route-card span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .donation-copilot-top p,
html[data-theme="dark"] .donation-copilot-choice small,
html[data-theme="dark"] .donation-copilot-result-head p,
html[data-theme="dark"] .donation-route-card p,
html[data-theme="dark"] .donation-copilot-context-grid p,
html[data-theme="dark"] .donation-route-card small,
html[data-theme="dark"] .donation-copilot-context-grid small,
html[data-theme="dark"] .donation-copilot-options summary,
html[data-theme="dark"] .donation-copilot-note {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .donation-copilot-note {
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .help-detail-main.is-urgent,
html[data-theme="dark"] .help-detail-action-card.is-room-owner,
html[data-theme="dark"] .help-detail-action-card.is-direct-help {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .help-detail-nav {
  background: rgba(15, 20, 18, 0.9);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .help-detail-nav .button-ghost,
html[data-theme="dark"] .help-detail-nav .button-secondary {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-detail-nav .button-ghost:hover,
html[data-theme="dark"] .help-detail-nav .button-secondary:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-progress-rail li,
html[data-theme="dark"] .help-detail-meta-grid > span,
html[data-theme="dark"] .help-detail-safety-card,
html[data-theme="dark"] .help-detail-context-card,
html[data-theme="dark"] .help-detail-cat-card {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-progress-rail li.is-complete {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  color: #a8f1dc;
}

html[data-theme="dark"] .help-progress-rail li.is-next {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.09);
  border-color: rgba(255, 200, 0, 0.36);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-progress-rail li span {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .help-progress-rail li.is-complete span {
  border-color: rgba(86, 207, 174, 0.64);
  background:
    linear-gradient(135deg, transparent 45%, #06140f 45% 55%, transparent 55%),
    var(--accent-care);
}

html[data-theme="dark"] .help-progress-rail li.is-next span {
  border-color: rgba(255, 200, 0, 0.64);
  background: rgba(255, 200, 0, 0.22);
}

html[data-theme="dark"] .help-detail-cat-image {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .help-detail-cat-card small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-detail-timeline li:not(:last-child)::before {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ai-room-summary-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.08), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.1), transparent 32%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-room-summary-card .button-secondary,
html[data-theme="dark"] .ai-room-summary-card .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .ai-room-summary-card .button-secondary:hover,
html[data-theme="dark"] .ai-room-summary-card .button-ghost:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-comment-thread,
html[data-theme="dark"] .help-comment-thread.is-room {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-comment-thread-summary {
  background: transparent;
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-thread-summary small,
html[data-theme="dark"] .help-live-footnote,
html[data-theme="dark"] .help-comment-empty {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-thread-live-tools button,
html[data-theme="dark"] .help-thread-open-label {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-thread[open] .help-thread-open-label {
  background: rgba(255, 200, 0, 0.16);
  border: 1px solid rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-live-sync {
  background: rgba(86, 207, 174, 0.13);
  color: #a8f1dc;
}

html[data-theme="dark"] .help-live-sync.is-syncing {
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-live-sync.is-paused {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-live-sync.is-error {
  background: rgba(255, 122, 102, 0.13);
  color: #ffb6aa;
}

html[data-theme="dark"] .help-comment-bubble,
html[data-theme="dark"] .help-comment-bubble.is-admin,
html[data-theme="dark"] .help-comment-form,
html[data-theme="dark"] .help-comment-edit-form {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-bubble.is-admin {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(255, 200, 0, 0.07);
  border-color: rgba(255, 200, 0, 0.28);
}

html[data-theme="dark"] .help-comment-meta {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-comment-meta span,
html[data-theme="dark"] .help-comment-meta em {
  background: rgba(255, 200, 0, 0.13);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-comment-actions .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-actions .button-ghost:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-owner-actions,
html[data-theme="dark"] .help-offer-locked,
html[data-theme="dark"] .help-offer-closed {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-owner-action-button,
html[data-theme="dark"] .help-owner-action-button.is-close {
  background: rgba(15, 20, 18, 0.88);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-owner-action-button:hover:not(:disabled) {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  box-shadow: none;
}

html[data-theme="dark"] .help-owner-action-button.is-close:hover:not(:disabled) {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.12), transparent 34%),
    rgba(255, 122, 102, 0.08);
  border-color: rgba(255, 122, 102, 0.32);
}

html[data-theme="dark"] .help-owner-actions-head span,
html[data-theme="dark"] .help-owner-action-button span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .paypal-card .chip-button {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .paypal-card .chip-button strong {
  color: var(--foreground);
}

html[data-theme="dark"] .paypal-card .chip-button span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .paypal-card .chip-button.is-selected {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.11);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .paypal-card .chip-button.is-selected strong,
html[data-theme="dark"] .paypal-card .chip-button.is-selected span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .support-donation-paypal .chip-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected strong,
html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected span {
  color: #111111;
}

html[data-theme="dark"] .inline-note,
html[data-theme="dark"] .info-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
  box-shadow: none;
}

html[data-theme="dark"] .story-series-route-card,
html[data-theme="dark"] .story-series-route-card.is-latest,
html[data-theme="dark"] .story-series-episode-card,
html[data-theme="dark"] .story-series-episode-card.is-latest,
html[data-theme="dark"] .story-series-library .inline-note,
html[data-theme="dark"] .story-series-more summary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .story-series-route-card.is-latest,
html[data-theme="dark"] .story-series-episode-card.is-latest,
html[data-theme="dark"] .story-series-episode-badge {
  border-color: rgba(255, 200, 0, 0.3);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .story-series-episode-media {
  background: rgba(8, 12, 10, 0.9);
}

html[data-theme="dark"] .story-series-route-label,
html[data-theme="dark"] .story-series-episode-kicker,
html[data-theme="dark"] .story-series-episode-badge {
  color: var(--brand-soft);
}

html[data-theme="dark"] .story-series-library .inline-note p,
html[data-theme="dark"] .story-series-route-card p,
html[data-theme="dark"] .story-series-episode-meta {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .story-record-card .content-card-body,
html[data-theme="dark"] .story-record-card .card-eyebrow,
html[data-theme="dark"] .story-record-card .tag,
html[data-theme="dark"] .story-record-card .meta-row,
html[data-theme="dark"] #stories-live-context .content-card-body,
html[data-theme="dark"] #stories-live-context .card-eyebrow,
html[data-theme="dark"] #stories-live-context .tag,
html[data-theme="dark"] #stories-live-context .meta-row,
html[data-theme="dark"] .instagram-record-preview .content-card-body,
html[data-theme="dark"] .instagram-record-preview .card-eyebrow,
html[data-theme="dark"] .instagram-record-preview .tag,
html[data-theme="dark"] .instagram-record-preview .meta-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .story-record-card .card-eyebrow,
html[data-theme="dark"] .story-record-card .tag,
html[data-theme="dark"] #stories-live-context .card-eyebrow,
html[data-theme="dark"] #stories-live-context .tag,
html[data-theme="dark"] .instagram-record-preview .card-eyebrow,
html[data-theme="dark"] .instagram-record-preview .tag {
  color: var(--foreground);
}

html[data-theme="dark"] .story-record-card .meta-row,
html[data-theme="dark"] #stories-live-context .meta-row,
html[data-theme="dark"] .instagram-record-preview .meta-row {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .story-record-card .eyebrow-icon,
html[data-theme="dark"] .story-record-card .tag-icon,
html[data-theme="dark"] .story-record-card .meta-row-icon,
html[data-theme="dark"] #stories-live-context .eyebrow-icon,
html[data-theme="dark"] #stories-live-context .tag-icon,
html[data-theme="dark"] #stories-live-context .meta-row-icon,
html[data-theme="dark"] .instagram-record-preview .eyebrow-icon,
html[data-theme="dark"] .instagram-record-preview .tag-icon,
html[data-theme="dark"] .instagram-record-preview .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .instagram-record-visual {
  border-bottom-color: var(--border-soft);
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 200, 0, 0.12), transparent 20%),
    linear-gradient(135deg, rgba(17, 23, 20, 0.98) 0%, rgba(9, 13, 11, 0.98) 52%, rgba(15, 31, 25, 0.98) 100%);
}

html[data-theme="dark"] .instagram-record-phone,
html[data-theme="dark"] .instagram-record-floating-badge,
html[data-theme="dark"] .instagram-record-title-chip {
  background: rgba(8, 12, 10, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .instagram-record-floating-badge svg {
  color: var(--brand-soft);
}

html[data-theme="dark"] :where(
  .loading-thumb,
  .loading-pill,
  .loading-line,
  .loading-dot,
  .loading-chip
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.065) 100%);
}

html[data-theme="dark"] .loading-thumb {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 200, 0, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.05) 100%);
}

html[data-theme="dark"] :where(
  .loading-shimmer::after,
  .loading-line::after,
  .loading-dot::after,
  .loading-pill::after,
  .loading-chip::after,
  .loading-thumb::after
) {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 0, 0.14) 42%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(86, 207, 174, 0.1) 58%,
    transparent 100%
  );
}

@media (max-width: 860px) {
  .report-source-grid,
  .monthly-report-metrics {
    grid-template-columns: 1fr;
  }

  .monthly-report-trend-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-share-row,
  .report-share-create-form {
    display: grid;
    justify-content: stretch;
  }

  .monthly-report-header {
    display: grid;
  }

  .monthly-report-proof-grid {
    grid-template-columns: 1fr;
  }

  .monthly-report-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-report-short-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-report-funnel-stage i {
    display: none;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm 11mm;
  }

  html,
  body {
    width: auto !important;
    background: #ffffff !important;
  }

  body * {
    visibility: hidden;
  }

  #monthly-report-print,
  #monthly-report-print * {
    visibility: visible;
  }

  #monthly-report-print {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff !important;
  }

  .monthly-report-document {
    color: #111827;
    gap: 12px;
    font-size: 9.4pt;
    line-height: 1.45;
  }

  .monthly-report-header {
    gap: 14px;
    padding-bottom: 10px;
    border-bottom-width: 3px;
    break-inside: avoid;
  }

  .monthly-report-header h2 {
    font-size: 26pt;
  }

  .monthly-report-linkline {
    gap: 0 3px;
    font-size: 8.2pt;
  }

  .monthly-report-mark {
    width: 58px;
    min-width: 58px;
    height: 50px;
    padding: 8px;
    border-radius: 10px;
  }

  .monthly-report-section {
    gap: 5px;
  }

  .monthly-report-section h3 {
    font-size: 12.5pt;
  }

  .monthly-report-section p,
  .monthly-report-section li {
    line-height: 1.42;
  }

  .monthly-report-section ul {
    gap: 3px;
    padding-left: 16px;
  }

  .monthly-report-metrics {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    break-inside: avoid;
  }

  .monthly-report-metrics div {
    padding: 9px 8px;
    border-radius: 9px;
  }

  .monthly-report-metrics span {
    font-size: 6.8pt;
  }

  .monthly-report-metrics strong {
    font-size: 13.5pt;
  }

  .monthly-report-split-head p {
    font-size: 7.6pt;
    line-height: 1.35;
  }

  .monthly-report-impact-snapshot,
  .monthly-report-proof-section {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-impact-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .monthly-report-impact-grid div {
    padding: 7px;
    border-radius: 8px;
  }

  .monthly-report-impact-grid span,
  .monthly-report-proof-card span {
    font-size: 5.9pt;
  }

  .monthly-report-impact-grid strong {
    font-size: 10.4pt;
  }

  .monthly-report-impact-grid small {
    font-size: 6.2pt;
    line-height: 1.25;
  }

  .monthly-report-cat-wall {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-cat-wall-head {
    gap: 8px;
  }

  .monthly-report-cat-wall-head p {
    font-size: 7.6pt;
    line-height: 1.35;
  }

  .monthly-report-cat-wall-head strong {
    min-height: 22px;
    padding-inline: 7px;
    font-size: 7pt;
  }

  .monthly-report-cat-badges {
    gap: 4px;
  }

  .monthly-report-cat-badge {
    max-width: 124px;
    min-height: 24px;
    gap: 4px;
    padding: 2px 6px 2px 2px;
    font-size: 6.7pt;
  }

  .monthly-report-cat-badge img {
    width: 20px;
    height: 20px;
    border-width: 1px;
  }

  .monthly-report-cat-studio-mark {
    padding: 1px 4px;
    font-size: 5.2pt;
  }

  .monthly-report-proof-grid {
    gap: 6px;
  }

  .monthly-report-proof-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
    border-radius: 8px;
  }

  .monthly-report-proof-card > img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .monthly-report-proof-card div {
    gap: 3px;
  }

  .monthly-report-proof-card h4 {
    font-size: 8.8pt;
  }

  .monthly-report-proof-card p {
    font-size: 6.7pt;
    line-height: 1.25;
    -webkit-line-clamp: 1;
  }

  .monthly-report-funnel-section {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-funnel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .monthly-report-funnel-stage {
    gap: 3px;
    min-height: 112px;
    padding: 7px 6px;
    border-radius: 8px;
  }

  .monthly-report-funnel-stage-top {
    gap: 3px;
  }

  .monthly-report-funnel-stage span {
    min-height: 15px;
    padding: 2px 4px;
    font-size: 4.9pt;
  }

  .monthly-report-funnel-stage em {
    font-size: 4.8pt;
  }

  .monthly-report-funnel-stage strong {
    font-size: 10pt;
  }

  .monthly-report-funnel-stage small {
    font-size: 5.8pt;
    line-height: 1.2;
  }

  .monthly-report-funnel-stage p {
    font-size: 5.5pt;
    line-height: 1.18;
  }

  .monthly-report-shorts-appendix {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-short-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .monthly-report-short-card {
    gap: 3px;
    padding: 5px;
    border-radius: 8px;
  }

  .monthly-report-short-card img {
    border-radius: 6px;
  }

  .monthly-report-short-card span,
  .monthly-report-short-card small {
    font-size: 5.5pt;
  }

  .monthly-report-short-card strong {
    font-size: 6.7pt;
    line-height: 1.18;
  }

  .monthly-report-funnel-stage i {
    right: -7px;
    width: 6px;
    height: 1px;
  }

  .monthly-report-funnel-stage i::after {
    width: 3px;
    height: 3px;
    border-width: 1px;
  }

  .monthly-report-trend-chart {
    min-height: 122px;
    padding: 10px 8px 8px;
    gap: 8px;
    break-inside: avoid;
  }

  .monthly-report-trend-bar-shell {
    min-height: 78px;
  }

  .monthly-report-trend-value,
  .monthly-report-trend-label {
    font-size: 6.8pt;
  }

  .monthly-report-audience-line-card {
    padding: 9px;
    break-inside: avoid;
  }

  .monthly-report-audience-line-chart {
    min-height: 126px;
  }

  .monthly-report-audience-axis-value,
  .monthly-report-audience-axis-label,
  .monthly-report-audience-point-label {
    font-size: 7px;
  }

  .monthly-report-audience-line {
    stroke-width: 3;
  }

  .monthly-report-table-wrap {
    overflow: visible;
  }

  .monthly-report-trend-table {
    min-width: 0;
    font-size: 0.72rem;
  }

  .monthly-report-trend-table th,
  .monthly-report-trend-table td {
    padding: 5px 6px;
  }

  .monthly-report-section,
  .monthly-report-audience-line-card,
  .monthly-report-trend-chart,
  .monthly-report-table-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .monthly-report-note {
    font-size: 7.8pt;
  }

  .monthly-report-linkline a {
    color: inherit;
    text-decoration: none;
  }
}

html[data-theme="dark"] .studio-character-copy,
html[data-theme="dark"] .studio-character-facts div,
html[data-theme="dark"] .studio-character-path,
html[data-theme="dark"] .studio-character-path-grid article,
html[data-theme="dark"] .studio-character-spotlight-card,
html[data-theme="dark"] .studio-character-empty,
html[data-theme="dark"] .studio-lounge-card-link {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 200, 0, 0.12), transparent 30%),
    rgba(33, 29, 24, 0.78);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-character-traits span,
html[data-theme="dark"] .studio-character-note,
html[data-theme="dark"] .studio-character-revenue-note {
  background: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .studio-spotlights-path,
html[data-theme="dark"] .admin-studio-publish-map,
html[data-theme="dark"] .admin-studio-publish-map-grid article {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(33, 29, 24, 0.82);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-spotlights-path-steps li {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-spotlights-path-steps li + li::before {
  background: rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .admin-studio-publish-map-grid article.is-ready {
  border-color: rgba(255, 200, 0, 0.44);
  background: rgba(255, 200, 0, 0.11);
}

html[data-theme="dark"] .admin-studio-publish-map-grid article.is-live {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.11);
}

html[data-theme="dark"] .studio-lounge-card-avatar.is-yellow,
html[data-theme="dark"] .studio-lounge-card-avatar {
  background: #ffc800;
}

html[data-theme="dark"] .studio-standalone-shell:has(.studio-lounge-app-shell),
html[data-theme="dark"] .studio-lounge-app-shell {
  background: #17120d;
}

html[data-theme="dark"] .studio-lounge-main-scene .studio-living-lobby-canvas-wrap {
  background: #17120d;
}

html[data-theme="dark"] .studio-lounge-live-chip {
  background: rgba(31, 26, 20, 0.76);
  color: var(--foreground);
}

html[data-theme="dark"] .studio-lounge-room-note {
  background: rgba(255, 200, 0, 0.14);
  color: rgba(255, 248, 223, 0.78);
}

html[data-theme="dark"] .studio-lounge-character-sheet {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(33, 29, 24, 0.78);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .studio-lounge-sheet-dismiss,
html[data-theme="dark"] .studio-lounge-sheet-reopen {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(33, 29, 24, 0.72);
  color: #fff8df;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-lounge-sheet-dismiss:hover,
html[data-theme="dark"] .studio-lounge-sheet-reopen:hover {
  background: rgba(45, 39, 31, 0.86);
}

html[data-theme="dark"] .studio-lounge-care-pill,
html[data-theme="dark"] .studio-lounge-current-action,
html[data-theme="dark"] .studio-lounge-membership-grid a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(33, 29, 24, 0.72);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .studio-lounge-care-pill:hover,
html[data-theme="dark"] .studio-lounge-membership-grid a:hover {
  background: rgba(45, 39, 31, 0.82);
}

html[data-theme="dark"] .studio-lounge-care-icon {
  color: #fff8df;
}

html[data-theme="dark"] .studio-lounge-sheet-number,
html[data-theme="dark"] .studio-lounge-sheet-badges span {
  background: rgba(255, 200, 0, 0.12);
}

@media (max-width: 860px) {
  .studio-character-hero {
    grid-template-columns: 1fr;
  }

  .studio-character-card {
    width: min(100%, 380px);
  }

  .studio-character-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-character-path-grid,
  .admin-studio-publish-map-grid {
    grid-template-columns: 1fr;
  }

  .studio-spotlights-path {
    grid-template-columns: 1fr;
    border-radius: 28px;
  }

  .studio-spotlights-path-steps {
    justify-content: flex-start;
    gap: 8px;
  }

  .studio-spotlights-path-steps li + li {
    margin-left: 0;
  }

  .studio-spotlights-path-steps li + li::before {
    display: none;
  }

  .studio-character-spotlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-lounge-cards-head {
    align-items: start;
    flex-direction: column;
  }

  .studio-standalone-shell:has(.studio-lounge-app-shell) .studio-global-header {
    width: min(100%, calc(100vw - 20px));
    margin-bottom: -66px;
  }

  .studio-lounge-stage-overlay {
    top: 76px;
    left: 10px;
    right: 10px;
    justify-content: center;
  }

  .studio-lounge-room-note {
    display: none;
  }

  .studio-lounge-care-strip {
    top: 76px;
    right: 10px;
    left: 10px;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .studio-lounge-care-pill {
    grid-template-columns: 1fr;
    min-height: 52px;
    justify-items: center;
    padding: 7px 4px;
    text-align: center;
  }

  .studio-lounge-care-icon {
    width: 24px;
    border-radius: 9px;
    font-size: 0.62rem;
  }

  .studio-lounge-care-pill strong {
    font-size: 0.68rem;
  }

  .studio-lounge-care-pill small {
    display: none;
  }

  .studio-lounge-main-scene .studio-living-lobby-canvas-wrap {
    min-height: 650px;
  }

  .studio-lounge-character-sheet {
    top: auto;
    right: 10px;
    bottom: 106px;
    left: 10px;
    width: auto;
    grid-template-columns: 108px minmax(0, 1fr);
    border-radius: 24px;
  }

  .studio-lounge-sheet-reopen {
    top: auto;
    right: 12px;
    bottom: 106px;
    min-height: 38px;
    padding: 8px 10px;
  }

  .studio-lounge-sheet-art {
    min-height: 100%;
  }

  .studio-lounge-sheet-art img {
    width: 92%;
  }

  .studio-lounge-sheet-copy {
    padding: 12px;
  }

  .studio-lounge-sheet-copy p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .studio-lounge-current-action {
    padding: 8px;
  }

  .studio-lounge-current-action strong {
    font-size: 0.76rem;
  }

  .studio-lounge-membership-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio-lounge-membership-grid a {
    padding: 7px 5px;
  }

  .studio-lounge-membership-grid small {
    display: none;
  }

  .studio-lounge-sheet-actions {
    display: none;
  }

  .studio-lounge-bottom-panel {
    grid-template-columns: 1fr auto;
    gap: 8px;
    width: calc(100vw - 20px);
    padding: 8px;
    border-radius: 22px;
  }

  .studio-lounge-dock-copy {
    display: none;
  }

  .studio-lounge-dock-card {
    width: 154px;
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 54px;
  }

  .studio-lounge-dock-avatar {
    width: 42px;
    border-radius: 14px;
  }

  .studio-lounge-create-button {
    min-height: 44px;
    padding-inline: 12px;
  }

  .studio-minis-hero,
  .studio-minis-panel-head {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-minis-readiness,
  .studio-minis-admin-flow,
  .studio-minis-control-hero,
  .studio-minis-control-side,
  .studio-minis-today-board,
  .studio-minis-ops-grid,
  .studio-minis-memory-columns,
  .studio-minis-qa-health-head,
  .studio-minis-qa-action-main,
  .studio-minis-qa-memory-grid,
  .studio-minis-qa-retry-trace-panel dl,
  .studio-minis-calendar-columns,
  .studio-minis-performance-grid,
  .studio-minis-batch-grid,
  .studio-minis-batch-grid article,
  .studio-minis-batch-result,
  .studio-minis-batch-inbox,
  .studio-minis-control-grid,
  .studio-minis-builder-grid,
  .studio-minis-command-main,
  .studio-minis-command-meta,
  .studio-minis-operator-strip,
  .studio-minis-failure-meta,
  .studio-minis-auto-action-grid,
  .studio-minis-lineage-grid,
  .studio-minis-lineage-references,
  .studio-minis-lineage-prompts > div,
  .studio-minis-daily-list,
  .studio-minis-prompt-workspace-grid,
  .studio-minis-external-prompt-grid,
  .studio-minis-external-upload-grid,
  .studio-minis-workbench,
  .studio-minis-idea-layout,
  .studio-minis-output-grid,
  .studio-minis-production-flow,
  .studio-minis-production-tools,
  .studio-minis-production-list {
    grid-template-columns: 1fr;
  }

  .studio-minis-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-minis-batch-result-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-minis-current-action {
    grid-template-columns: 1fr;
  }

  .studio-minis-builder-head {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-minis-sidebar {
    position: static;
  }

  .studio-minis-beat-grid,
  .studio-minis-keyframe-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .studio-character-copy {
    padding: 16px;
    border-radius: 24px;
  }

  .studio-character-actions .button {
    width: 100%;
  }

  .studio-character-facts {
    grid-template-columns: 1fr;
  }

  .studio-character-spotlight-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .studio-lounge-character-sheet {
    bottom: 102px;
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .studio-lounge-sheet-copy h2 {
    font-size: 1.2rem;
  }

  .studio-lounge-sheet-badges {
    display: none;
  }

  .studio-lounge-membership-grid {
    display: none;
  }

  .studio-lounge-dock-card {
    width: 138px;
  }

  .studio-lounge-dock-card small {
    display: none;
  }

  .studio-minis-reference-grid,
  .studio-minis-beat-grid,
  .studio-minis-keyframe-gallery,
  .studio-minis-lineage-references,
  .studio-minis-lineage-prompts > div,
  .studio-minis-production-meta,
  .studio-minis-publish-form {
    grid-template-columns: 1fr;
  }

  .studio-minis-chain-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .studio-minis-chain-actions {
    justify-content: stretch;
  }

  .studio-minis-chain-actions form,
  .studio-minis-chain-actions button {
    width: 100%;
  }

  .studio-minis-frame-list article {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .studio-minis-frame-list form {
    grid-column: 1 / -1;
  }
}

.missing-pet-page-band {
  background:
    #f6f8fb;
}

.site-main > .missing-pet-page-band:first-child {
  margin-top: calc(var(--site-main-top) * -1);
  padding-top: calc(var(--site-main-top) + 34px);
}

@media (min-width: 1024px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 42px);
  }
}

@media (max-width: 719px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 20px);
  }
}

@media (max-width: 389px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 16px);
  }
}

.missing-pet-create-page,
.cat-sitting-create-page {
  min-height: calc(100vh - 88px);
  padding-block: clamp(24px, 5vw, 56px);
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.16), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.14), transparent 30%),
    var(--surface);
}

.missing-pet-create-container,
.cat-sitting-create-container {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.missing-pet-studio-create-form {
  position: relative;
  width: min(720px, calc(100vw - 32px));
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 200, 0, 0.3);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.92);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.42) inset;
}

.missing-pet-studio-create-form.is-submitting {
  overflow: hidden;
}

.missing-pet-studio-create-form.is-submitting > :not(.missing-pet-submit-overlay) {
  pointer-events: none;
}

.missing-pet-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(18px, calc(env(safe-area-inset-top) + 18px)) 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.96), rgba(255, 252, 242, 0.72) 42%, rgba(255, 252, 242, 0.46)),
    radial-gradient(circle at 16% 0%, rgba(255, 200, 0, 0.28), transparent 34%);
  backdrop-filter: blur(10px);
}

.missing-pet-submit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.missing-pet-submit-spinner {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 200, 0, 0.2);
  color: #7a540f;
}

.missing-pet-submit-spinner svg,
.missing-pet-form-actions button svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-submit-card strong {
  color: var(--foreground);
  font-size: 1.06rem;
  font-weight: 960;
}

.missing-pet-submit-card p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 730;
  line-height: 1.45;
}

.missing-pet-submit-card ol {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.missing-pet-submit-card li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 820;
}

.missing-pet-submit-card li span {
  display: grid;
  width: 22px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-submit-card li.is-active {
  border-color: rgba(255, 200, 0, 0.4);
  background: rgba(255, 248, 224, 0.76);
  color: var(--foreground);
}

.missing-pet-submit-card li.is-active span {
  background: rgba(255, 200, 0, 0.2);
  color: #7a540f;
}

.missing-pet-submit-card li.is-active span svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-submit-card li.is-done {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #1f6f58;
}

.missing-pet-submit-card li.is-done span {
  background: rgba(86, 207, 174, 0.18);
  color: #1f6f58;
}

.missing-pet-studio-create-form .field {
  display: grid;
  gap: 8px;
}

.missing-pet-studio-create-form .field > span:first-child:not(.studio-photo-picker) {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-studio-create-form textarea {
  min-height: 112px;
  resize: vertical;
}

.missing-pet-owner-note-field textarea {
  min-height: 240px;
  line-height: 1.5;
}

.missing-pet-special-note-field textarea {
  min-height: 138px;
  line-height: 1.5;
}

.missing-pet-last-seen-field {
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.88));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-last-seen-field input {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 820;
}

.missing-pet-last-seen-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-last-seen-field > span:first-child,
.missing-pet-special-note-field > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.missing-pet-owner-note-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.missing-pet-special-note-field small,
.missing-pet-money-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.missing-pet-money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.missing-pet-money-input > span {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid rgba(17, 24, 39, 0.08);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-money-input input {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.missing-pet-writing-help {
  display: grid;
  gap: 10px;
}

.missing-pet-guidance-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.17), transparent 34%),
    rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
}

.missing-pet-guidance-toggle svg {
  color: #8a6110;
}

.missing-pet-guidance-toggle span {
  font-size: 0.9rem;
  font-weight: 920;
}

.missing-pet-guidance-toggle small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.missing-pet-guidance-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-guidance-panel > div {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.missing-pet-guidance-panel strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 930;
}

.missing-pet-guidance-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.missing-pet-guidance-panel li {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.42;
}

.missing-pet-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 12px;
}

.missing-pet-studio-option-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-studio-option-row .studio-optional-note-toggle {
  align-content: center;
  width: 100%;
  min-height: 74px;
}

.missing-pet-option-button {
  justify-items: start;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: left;
}

.missing-pet-option-button span {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.missing-pet-option-button small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.35;
}

.missing-pet-optional-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-optional-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}

.missing-pet-optional-card-head .eyebrow {
  margin: 0 0 3px;
}

.missing-pet-optional-card-head strong {
  display: block;
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 960;
  letter-spacing: 0;
}

.missing-pet-optional-card-head > span {
  display: inline-flex;
  max-width: 220px;
  min-height: 32px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.12);
  color: #2f6656;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.missing-pet-optional-card > .missing-pet-option-button,
.missing-pet-optional-card .missing-pet-studio-option-row .missing-pet-option-button {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.missing-pet-time-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.68);
}

.missing-pet-time-panel > p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.4;
}

.missing-pet-time-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-time-shortcuts button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
  cursor: pointer;
}

.missing-pet-time-shortcuts button.is-active {
  border-color: rgba(86, 207, 174, 0.5);
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.12);
}

.missing-pet-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 10px;
}

.missing-pet-studio-advanced {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
}

.missing-pet-studio-advanced .studio-pass-kicker-row button {
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  font-weight: 900;
  cursor: pointer;
}

.missing-pet-hero,
.missing-pet-detail-hero,
.missing-pet-manage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.missing-pet-hero h1,
.missing-pet-detail-copy h1,
.missing-pet-manage-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
}

.missing-pet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-tabs a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-raised);
}

.missing-pet-tabs a.is-active {
  border-color: var(--text);
  color: var(--text);
  font-weight: 800;
}

.missing-pet-directory-tools {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 18px);
  background: #ffffff;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-directory-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.missing-pet-directory-head > div {
  display: grid;
  gap: 3px;
}

.missing-pet-directory-head strong {
  color: var(--text);
  font-size: 1.1rem;
}

.missing-pet-directory-head span {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.35;
}

.missing-pet-directory-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.missing-pet-directory-search label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-directory-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.missing-pet-directory-count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 820;
}

.missing-pet-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.missing-pet-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  gap: 12px;
  justify-content: flex-start;
}

.missing-pet-card {
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.missing-pet-card:hover,
.missing-pet-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.1),
    0 0 0 3px rgba(249, 115, 22, 0.08);
}

.missing-pet-card-image {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  padding: 6px;
  background: #f1f5f9;
}

.missing-pet-card-image.has-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(54px, 0.42fr);
  gap: 5px;
}

.missing-pet-card-image img,
.missing-pet-detail-photo figure img,
.missing-pet-photo-strip img,
.missing-pet-sighting-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.missing-pet-card-image img {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  object-fit: cover;
}

.missing-pet-card-image .is-secondary {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.62);
}

.missing-pet-card-image-empty {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-muted);
}

.missing-pet-card-image .missing-pet-status {
  position: absolute;
  left: 9px;
  top: 9px;
  min-height: 22px;
  padding-inline: 8px;
  font-size: 0.68rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.missing-pet-card-photo-count {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.missing-pet-card-body {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: #ffffff;
}

.missing-pet-card-title-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-card-title-row strong {
  min-width: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-pet-card-title-row > span {
  display: inline-flex;
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 999px;
  padding: 0 7px;
  background: #f1f5f9;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.missing-pet-card-meta,
.missing-pet-card-footer,
.missing-pet-card-footer span {
  display: flex;
  gap: 6px;
  align-items: center;
}

.missing-pet-card-meta {
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.missing-pet-card-meta > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.missing-pet-card-meta svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #f97316;
}

.missing-pet-card-body small,
.missing-pet-card-body span:last-child,
.missing-pet-card-body em {
  color: var(--text-muted);
}

.missing-pet-card-body em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.3;
}

.missing-pet-card-footer {
  justify-content: space-between;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.missing-pet-card-footer > span:last-child {
  color: var(--text);
}

.missing-pet-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(153, 27, 27, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-status.is-found {
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-status.is-sighting_reported {
  background: #eff6ff;
  color: #1d4ed8;
}

.missing-pet-form,
.missing-pet-sighting-form,
.missing-pet-owner-edit-form {
  display: grid;
  gap: 18px;
}

.missing-pet-bilingual-copy {
  display: inline-grid;
  gap: 2px;
  vertical-align: middle;
}

.button .missing-pet-bilingual-copy,
.missing-pet-sighting-methods .missing-pet-bilingual-copy,
.missing-pet-public-actions .missing-pet-bilingual-copy,
.missing-pet-responder-actions .missing-pet-bilingual-copy,
.missing-pet-download-details .missing-pet-bilingual-copy {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: center;
}

.button .missing-pet-bilingual-copy span + span::before,
.missing-pet-sighting-methods .missing-pet-bilingual-copy span + span::before,
.missing-pet-public-actions .missing-pet-bilingual-copy span + span::before,
.missing-pet-responder-actions .missing-pet-bilingual-copy span + span::before,
.missing-pet-download-details .missing-pet-bilingual-copy span + span::before {
  content: "/";
  margin-right: 4px;
  opacity: 0.55;
}

.missing-pet-bilingual-copy [data-role="secondary"] {
  color: var(--text-muted);
  font-size: 0.88em;
  font-weight: 760;
}

.button-primary .missing-pet-bilingual-copy [data-role="secondary"] {
  color: rgba(255, 255, 255, 0.78);
}

.missing-pet-language-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.missing-pet-language-switch > span {
  padding-inline: 8px 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.missing-pet-language-switch a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.missing-pet-language-switch a:hover {
  color: var(--text-primary);
  background: rgba(248, 250, 252, 0.92);
}

.missing-pet-language-switch a.is-active {
  color: #ffffff;
  background: #111827;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.missing-pet-quick-form {
  max-width: 920px;
  margin-inline: auto;
}

.missing-pet-quick-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-raised);
}

.missing-pet-quick-intro h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.02;
}

.missing-pet-quick-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.missing-pet-quick-points span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-quick-section {
  gap: 14px;
}

.missing-pet-photo-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 148px;
  border: 1.5px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 18px;
  background: var(--surface);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.missing-pet-photo-dropzone.is-dragging {
  border-color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
}

.missing-pet-photo-dropzone div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.missing-pet-photo-dropzone strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-photo-dropzone span,
.missing-pet-photo-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.45;
}

.missing-pet-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.missing-pet-photo-note {
  margin: 0;
}

.missing-pet-photo-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-photo-selected span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.missing-pet-form-section,
.missing-pet-login-panel,
.missing-pet-inline-entry,
.missing-pet-instructions,
.missing-pet-sighting-panel,
.missing-pet-manage-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface-raised);
}

.missing-pet-instructions {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
}

.missing-pet-instructions > p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 760;
  line-height: 1.5;
}

.missing-pet-inline-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.missing-pet-form-section h2,
.missing-pet-inline-entry h2,
.missing-pet-instructions h2,
.missing-pet-sighting-panel h2,
.missing-pet-manage-panel h2 {
  margin: 0;
  font-size: 1.15rem;
}

.missing-pet-manage-hero.is-dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto;
  align-items: stretch;
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 84% 0%, rgba(249, 115, 22, 0.15), transparent 34%),
    radial-gradient(circle at 16% 12%, rgba(86, 207, 174, 0.12), transparent 32%),
    var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.missing-pet-manage-hero.is-dashboard.is-simple {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: var(--surface-raised);
}

.missing-pet-manage-hero-thumb {
  display: grid;
  width: clamp(78px, 9vw, 108px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--text-muted);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.missing-pet-manage-hero-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.missing-pet-manage-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.missing-pet-manage-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-kicker span,
.missing-pet-manage-panel-heading > span {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-manage-status.is-active,
.missing-pet-manage-status.is-sighting-reported,
.missing-pet-owner-command-topline > span.is-alert,
.missing-pet-manage-panel-heading > span.is-alert {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
}

.missing-pet-manage-status.is-found {
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-manage-location {
  display: inline-flex;
  max-width: 760px;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.missing-pet-manage-location svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #f97316;
}

.missing-pet-manage-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-manage-quick-actions .button {
  gap: 7px;
}

.missing-pet-public-alert-button {
  box-shadow:
    0 12px 28px rgba(47, 107, 95, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.missing-pet-manage-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-stat-row div {
  display: grid;
  min-width: 96px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.64);
}

.missing-pet-manage-stat-row strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.missing-pet-manage-stat-row span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 860;
  text-transform: uppercase;
}

.missing-pet-manage-preview {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-muted);
}

.missing-pet-manage-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: contain;
  padding: 8px;
}

.missing-pet-manage-preview figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.missing-pet-manage-hero.is-dashboard .help-community-actions {
  align-content: start;
  justify-content: end;
}

.missing-pet-manage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 880;
  text-decoration: none;
}

.missing-pet-manage-nav a:hover {
  border-color: rgba(249, 115, 22, 0.32);
  color: var(--text);
}

.missing-pet-form label,
.missing-pet-sighting-form label,
.missing-pet-owner-edit-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.missing-pet-form label small,
.missing-pet-sighting-form label small,
.missing-pet-owner-edit-form label small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.38;
}

.missing-pet-form input,
.missing-pet-form textarea,
.missing-pet-form select,
.missing-pet-sighting-form input,
.missing-pet-sighting-form textarea,
.missing-pet-owner-edit-form input,
.missing-pet-owner-edit-form textarea,
.missing-pet-owner-edit-form select {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.missing-pet-form textarea,
.missing-pet-sighting-form textarea,
.missing-pet-owner-edit-form textarea {
  resize: vertical;
}

.missing-pet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.missing-pet-owner-edit-form small svg {
  flex: 0 0 auto;
}

.missing-pet-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
}

.missing-pet-radio-group legend {
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.missing-pet-radio-group label {
  display: inline-flex;
  width: fit-content;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
}

.missing-pet-advanced-options {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.missing-pet-advanced-options summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 900;
}

.missing-pet-advanced-options .missing-pet-form-grid {
  margin-top: 14px;
}

.missing-pet-language-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
}

.missing-pet-language-options legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-language-options p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.42;
}

.missing-pet-language-options div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-language-options label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.missing-pet-language-options input {
  width: 14px;
  min-height: auto;
  padding: 0;
}

html[data-theme="dark"] .missing-pet-create-page {
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.1), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.08), transparent 30%),
    var(--surface);
}

html[data-theme="dark"] .missing-pet-studio-create-form {
  border-color: var(--border);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.1), transparent 34%),
    var(--surface);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

html[data-theme="dark"] .missing-pet-language-switch {
  border-color: var(--border-soft);
  background: rgba(18, 24, 22, 0.86);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-language-switch a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-language-switch a.is-active {
  background: #ffe48a;
  color: #241a00;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .missing-pet-submit-overlay {
  background:
    linear-gradient(180deg, rgba(15, 18, 17, 0.96), rgba(15, 18, 17, 0.76) 42%, rgba(15, 18, 17, 0.48)),
    radial-gradient(circle at 16% 0%, rgba(255, 200, 0, 0.14), transparent 34%);
}

html[data-theme="dark"] .missing-pet-submit-card {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.09), transparent 34%),
    rgba(23, 29, 26, 0.94);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-submit-spinner,
html[data-theme="dark"] .missing-pet-submit-card li.is-active span {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-submit-card li {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-submit-card li span {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-submit-card li.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .missing-pet-submit-card li.is-done {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-submit-card li.is-done span {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-optional-card,
html[data-theme="dark"] .missing-pet-option-button,
html[data-theme="dark"] .missing-pet-time-panel,
html[data-theme="dark"] .missing-pet-last-seen-field,
html[data-theme="dark"] .missing-pet-money-input,
html[data-theme="dark"] .missing-pet-guidance-toggle,
html[data-theme="dark"] .missing-pet-guidance-panel > div,
html[data-theme="dark"] .missing-pet-studio-advanced,
html[data-theme="dark"] .missing-pet-language-options,
html[data-theme="dark"] .missing-pet-language-options label {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.055);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-money-input > span {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-guidance-toggle svg {
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-optional-card {
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-optional-card-head > span {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-time-panel {
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-optional-card-head strong,
html[data-theme="dark"] .missing-pet-option-button span,
html[data-theme="dark"] .missing-pet-language-options legend {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-option-button small,
html[data-theme="dark"] .missing-pet-time-panel > p,
html[data-theme="dark"] .missing-pet-language-options p,
html[data-theme="dark"] .missing-pet-language-options label {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-time-shortcuts button {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-time-shortcuts button.is-active {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.11);
  color: #b9f1d9;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.08);
}

.admin-missing-list {
  display: grid;
  gap: 14px;
}

.admin-missing-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
}

.admin-missing-thumb {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 18px;
  background: rgba(17, 24, 39, 0.06);
}

.admin-missing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-missing-card h3 {
  margin: 8px 0 4px;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  letter-spacing: 0;
}

.admin-missing-card p:not(.missing-pet-status) {
  margin: 0;
  color: var(--muted-foreground);
}

.admin-missing-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.admin-missing-card dl div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-missing-card dt {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-missing-card dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 820;
}

.admin-missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

html[data-theme="dark"] .admin-missing-card {
  border-color: var(--border);
  background: rgba(23, 29, 26, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .admin-missing-card dl div,
html[data-theme="dark"] .admin-missing-thumb {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-alert-location,
html[data-theme="dark"] .missing-pet-directory-tools,
html[data-theme="dark"] .missing-pet-sighting-main-field {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .missing-pet-card {
  border-color: var(--border);
  background: rgba(23, 29, 26, 0.94);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-card-body {
  background: rgba(18, 24, 21, 0.96);
}

html[data-theme="dark"] .missing-pet-card-title-row strong,
html[data-theme="dark"] .missing-pet-card-footer > span:last-child {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-card-footer {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-card:hover,
html[data-theme="dark"] .missing-pet-card:focus-visible {
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(249, 115, 22, 0.1);
}

html[data-theme="dark"] .missing-pet-card-image {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    var(--surface-muted);
}

html[data-theme="dark"] .missing-pet-card-image img,
html[data-theme="dark"] .missing-pet-card-image-empty,
html[data-theme="dark"] .missing-pet-card-title-row > span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-status {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-status.is-found {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-status.is-sighting_reported {
  background: rgba(120, 183, 255, 0.14);
  color: #bfdbfe;
}

.missing-pet-form-actions,
.missing-pet-manage-actions,
.missing-pet-public-actions,
.missing-pet-sighting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.missing-pet-public-actions .button,
.missing-pet-responder-actions .button,
.missing-pet-generate-button,
.missing-pet-found-button {
  gap: 8px;
}

.missing-pet-form-actions button {
  gap: 8px;
}

.missing-pet-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.missing-pet-share-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-share-button {
  gap: 8px;
}

.missing-pet-share-controls span {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.missing-pet-responder-actions .missing-pet-share-controls {
  display: flex;
  flex: 0 1 auto;
}

.missing-pet-download-details {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.missing-pet-download-details summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-download-details summary::-webkit-details-marker {
  display: none;
}

.missing-pet-download-details summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-download-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.missing-pet-owner-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 780;
}

.missing-pet-owner-tools span {
  flex-basis: 100%;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-owner-tools a {
  gap: 7px;
}

.missing-pet-owner-tools a:hover {
  text-decoration: none;
}

.missing-pet-sighting-action-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(11, 105, 183, 0.055), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-panel.is-new {
  border-color: rgba(249, 115, 22, 0.24);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.07), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-panel.is-owner-contacted,
.missing-pet-sighting-action-panel.is-reviewed {
  border-color: rgba(86, 207, 174, 0.25);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.08), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-copy {
  display: grid;
  gap: 3px;
}

.missing-pet-sighting-action-copy span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 920;
}

.missing-pet-sighting-action-copy small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-sighting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}

.missing-pet-sighting-actions .button {
  justify-content: center;
  min-height: 36px;
  gap: 6px;
  padding-inline: 11px;
}

.missing-pet-sighting-more-actions {
  position: relative;
}

.missing-pet-sighting-more-actions > summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 0 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 247, 238, 0.82));
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  list-style: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.missing-pet-sighting-more-actions > summary:hover,
.missing-pet-sighting-more-actions[open] > summary {
  border-color: rgba(11, 105, 183, 0.18);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.86));
}

.missing-pet-sighting-more-actions > summary svg {
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.missing-pet-sighting-more-actions[open] > summary svg {
  transform: rotate(90deg);
}

.missing-pet-sighting-more-actions > summary::-webkit-details-marker,
.missing-pet-sighting-danger-actions > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-sighting-more-actions > div {
  display: grid;
  width: min(100%, 340px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 238, 0.88));
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-sighting-more-actions[open] {
  display: grid;
  gap: 8px;
}

.missing-pet-sighting-more-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-sighting-more-copy strong {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 920;
  line-height: 1.25;
}

.missing-pet-sighting-more-actions small,
.missing-pet-sighting-danger-actions p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.4;
}

.missing-pet-sighting-more-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
}

.missing-pet-sighting-hide-button {
  width: fit-content;
  align-self: center;
  border-color: rgba(100, 116, 139, 0.18);
  color: var(--text-muted);
}

.missing-pet-sighting-danger-actions {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
}

.missing-pet-sighting-danger-actions > summary {
  width: fit-content;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-sighting-main-field {
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.9) 100%);
  box-shadow:
    0 10px 24px rgba(78, 58, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-main-field > span:first-child,
.missing-pet-sighting-extra label > span:first-child {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 940;
}

.missing-pet-sighting-main-field > span:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-main-field > span:first-child > span[aria-hidden="true"] {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-main-field > span:first-child .missing-pet-bilingual-copy {
  display: inline;
  min-width: 0;
  line-height: 1.25;
}

.missing-pet-sighting-main-field.is-ready {
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.95));
}

.missing-pet-sighting-main-field.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background:
    linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.94));
}

.missing-pet-sighting-location-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(239, 246, 255, 0.62);
}

.missing-pet-sighting-location-inline strong,
.missing-pet-sighting-location-inline small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-location-inline strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 920;
}

.missing-pet-sighting-location-inline small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-sighting-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-methods article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 58px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 16px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 252, 239, 0.86) 100%);
  color: var(--foreground);
  box-shadow: 0 8px 18px rgba(78, 58, 24, 0.05);
  line-height: 1.2;
}

.missing-pet-sighting-methods article > span {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.18);
  color: #7a540f;
}

.missing-pet-sighting-methods article strong {
  font-size: 0.78rem;
  font-weight: 910;
}

.missing-pet-sighting-step-arrow {
  color: rgba(122, 84, 15, 0.58);
}

.missing-pet-sighting-location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.94));
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.missing-pet-sighting-location-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.missing-pet-sighting-location-card > div > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-location-card strong,
.missing-pet-sighting-location-card small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-location-card strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 940;
}

.missing-pet-sighting-location-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-sighting-location-card.is-ready {
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.95));
}

.missing-pet-sighting-location-card.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background:
    linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.94));
}

.missing-pet-sighting-quick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.missing-pet-sighting-upload-card {
  position: relative;
  min-height: 108px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  border: 1.5px dashed rgba(15, 23, 42, 0.18);
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.missing-pet-sighting-upload-card:hover,
.missing-pet-sighting-upload-card.is-dragging {
  border-color: rgba(249, 115, 22, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 16px 34px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.missing-pet-sighting-upload-card.is-dragging {
  transform: translateY(-1px);
}

.missing-pet-sighting-upload-card.has-photo {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-upload-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.missing-pet-sighting-upload-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.11);
  color: #c2410c;
}

.missing-pet-sighting-upload-card.has-photo .missing-pet-sighting-upload-icon {
  background: rgba(86, 207, 174, 0.15);
  color: #047857;
}

.missing-pet-sighting-upload-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.missing-pet-sighting-upload-copy strong,
.missing-pet-sighting-upload-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-upload-copy strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 940;
}

.missing-pet-sighting-upload-copy small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 780;
}

.missing-pet-sighting-upload-card em {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-sighting-quick-row .button {
  gap: 8px;
  min-height: 44px;
  align-self: center;
}

.missing-pet-sighting-submit-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.missing-pet-sighting-submit-button {
  width: 100%;
  min-height: 58px;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 960;
  box-shadow: 0 14px 28px rgba(11, 105, 183, 0.18);
}

.missing-pet-sighting-submit-button:disabled {
  opacity: 1;
  cursor: default;
}

.missing-pet-sighting-submit-panel small {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.35;
  text-align: center;
}

.missing-pet-sighting-submit-panel.is-sending {
  border-color: rgba(11, 105, 183, 0.32);
  background: #eff6ff;
}

.missing-pet-sighting-submit-panel.is-sent {
  border-color: rgba(86, 207, 174, 0.4);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-submit-panel.is-sent .missing-pet-sighting-submit-button {
  border-color: #047857;
  background: #047857;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(4, 120, 87, 0.2);
}

.missing-pet-sighting-submit-panel.is-sent small {
  color: #047857;
}

.missing-pet-sighting-send-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.missing-pet-sighting-send-status > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.missing-pet-sighting-send-status.is-sending {
  border-color: rgba(249, 115, 22, 0.28);
  background: #fff7ed;
}

.missing-pet-sighting-send-status.is-sending > span {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.missing-pet-sighting-send-status.is-sending svg,
.missing-pet-sighting-location-card.is-locating svg,
.missing-pet-sighting-form button[type="submit"]:disabled svg {
  animation: spin 900ms linear infinite;
}

.missing-pet-sighting-send-status.is-sent {
  border-color: rgba(86, 207, 174, 0.36);
  background: #ecfdf5;
  box-shadow:
    0 16px 34px rgba(4, 120, 87, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.missing-pet-sighting-send-status.is-sent > span {
  background: rgba(86, 207, 174, 0.14);
  color: #047857;
}

.missing-pet-sighting-send-status.is-error {
  border-color: rgba(248, 113, 113, 0.3);
  background: #fef2f2;
}

.missing-pet-sighting-send-status.is-error > span {
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
}

.missing-pet-sighting-send-status strong,
.missing-pet-sighting-send-status small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-send-status strong {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 940;
}

.missing-pet-sighting-send-status small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-clear-photo {
  width: 42px;
  padding-inline: 0;
}

.missing-pet-sighting-extra {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 8px;
  background: rgba(248, 250, 252, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--foreground);
  font-weight: 940;
  list-style: none;
  border-radius: 10px;
  padding: 8px 10px;
}

.missing-pet-sighting-extra summary::-webkit-details-marker {
  display: none;
}

.missing-pet-sighting-extra summary small {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-sighting-extra-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-sighting-extra-summary-copy strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.missing-pet-sighting-extra-summary-copy em {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.3;
}

.missing-pet-sighting-extra > div,
.missing-pet-sighting-extra > label {
  margin-top: 0;
}

.missing-pet-sighting-extra[open] {
  gap: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.missing-pet-sighting-extra.is-followup {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.72);
}

.missing-pet-sighting-extra.is-followup[open] {
  border-color: rgba(15, 23, 42, 0.1);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-extra.is-followup summary small {
  border-color: rgba(15, 23, 42, 0.09);
  background: #ffffff;
  color: var(--text-muted);
}

.missing-pet-sighting-extra.is-followup[open] summary small {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(241, 245, 249, 0.9);
  color: var(--text-muted);
}

.missing-pet-sighting-followup-note {
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(241, 245, 249, 0.74);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 790;
  line-height: 1.42;
}

.missing-pet-sighting-followup-note + .missing-pet-sighting-extra-grid {
  margin-top: 6px;
}

.missing-pet-sighting-extra-grid label,
.missing-pet-sighting-context-field {
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92));
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-sighting-extra-grid {
  gap: 14px;
}

.missing-pet-sighting-extra.is-followup .missing-pet-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 14px;
}

.missing-pet-date-picker {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.missing-pet-date-picker button,
.missing-pet-date-shortcuts button {
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.missing-pet-date-picker button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-strong);
  background:
    linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.missing-pet-date-picker input {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  min-height: 44px;
  color: transparent;
  caret-color: transparent;
  cursor: pointer;
}

.missing-pet-date-picker input::-webkit-datetime-edit,
.missing-pet-date-picker input::-webkit-datetime-edit-fields-wrapper,
.missing-pet-date-picker input::-webkit-datetime-edit-text,
.missing-pet-date-picker input::-webkit-datetime-edit-month-field,
.missing-pet-date-picker input::-webkit-datetime-edit-day-field,
.missing-pet-date-picker input::-webkit-datetime-edit-year-field,
.missing-pet-date-picker input::-webkit-datetime-edit-hour-field,
.missing-pet-date-picker input::-webkit-datetime-edit-minute-field,
.missing-pet-date-picker input::-webkit-datetime-edit-ampm-field {
  color: transparent;
}

.missing-pet-date-display {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 42px 0 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.2;
  pointer-events: none;
}

.missing-pet-date-picker.is-empty .missing-pet-date-display {
  color: var(--text-muted);
  font-weight: 760;
}

.missing-pet-date-picker button:hover,
.missing-pet-date-shortcuts button:hover {
  border-color: rgba(11, 105, 183, 0.32);
  background: #eff6ff;
  transform: translateY(-1px);
}

.missing-pet-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.missing-pet-date-shortcuts button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.missing-pet-sighting-extra-grid label:focus-within,
.missing-pet-sighting-context-field:focus-within,
.missing-pet-sighting-main-field:focus-within {
  border-color: rgba(20, 184, 166, 0.36);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.09),
    0 10px 24px rgba(15, 23, 42, 0.07);
}

.missing-pet-sighting-extra .missing-pet-form-grid {
  gap: 14px;
}

.missing-pet-sighting-extra.is-followup .missing-pet-sighting-date-field {
  grid-column: 1 / -1;
}

.missing-pet-sighting-extra.is-followup .missing-pet-sighting-context-field {
  margin-top: 8px;
}

.missing-pet-sighting-form input,
.missing-pet-sighting-form textarea {
  border-color: rgba(17, 24, 39, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra input,
.missing-pet-sighting-extra textarea {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.missing-pet-sighting-form input:focus,
.missing-pet-sighting-form textarea:focus {
  border-color: rgba(255, 200, 0, 0.56);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 200, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra input:focus,
.missing-pet-sighting-extra textarea:focus {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.form-status {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-muted);
  color: var(--text);
}

.form-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.missing-pet-detail-hero {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.missing-pet-detail-photo {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 0;
  align-self: start;
  align-content: start;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.missing-pet-detail-photo-topline,
.missing-pet-detail-photo-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.missing-pet-detail-photo-topline span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 920;
  line-height: 1;
  white-space: nowrap;
}

.missing-pet-detail-photo-topline span:first-child {
  border-color: rgba(17, 24, 39, 0.1);
  background: #f8fafc;
  color: var(--text);
  line-height: 1.2;
  white-space: normal;
}

.missing-pet-detail-photo-frame {
  position: relative;
  display: grid;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #f1f5f9;
}

.missing-pet-detail-photo-frame.has-secondary {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 10px;
  padding: 10px;
}

.missing-pet-detail-photo figure {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-muted);
}

.missing-pet-detail-photo .is-primary {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  background: transparent;
}

.missing-pet-detail-photo-frame.has-secondary .is-primary {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.48);
}

.missing-pet-detail-photo .is-primary img {
  object-fit: cover;
  padding: 0;
}

.missing-pet-detail-photo .is-secondary {
  display: grid;
  min-height: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.58);
}

.missing-pet-detail-photo .is-secondary img {
  object-fit: cover;
  padding: 0;
}

.missing-pet-detail-photo figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.missing-pet-detail-photo-placeholder {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
}

.missing-pet-detail-photo-placeholder strong {
  color: var(--text);
  font-size: 0.95rem;
}

.missing-pet-detail-photo-summary {
  align-items: end;
}

.missing-pet-detail-photo-summary > div {
  display: grid;
  gap: 3px;
}

.missing-pet-detail-photo-summary span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.missing-pet-detail-photo-summary strong {
  color: var(--text);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1;
}

.missing-pet-detail-photo-summary small {
  max-width: 56%;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
  text-align: right;
  overflow-wrap: anywhere;
}

.missing-pet-detail-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.missing-pet-responder-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-responder-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.05;
}

.missing-pet-responder-card p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-responder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.missing-pet-sighting-closed-chip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(4, 120, 87, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-alert-location {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-raised);
}

.missing-pet-alert-location span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.missing-pet-alert-location strong {
  color: var(--text);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.missing-pet-public-map-clue {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.96));
}

.missing-pet-public-map-clue > div:first-child {
  position: relative;
  min-height: 90px;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 36% 36%, rgba(86, 207, 174, 0.18), transparent 34%),
    #eff6ff;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;
}

.missing-pet-public-map-clue > div:first-child span {
  position: absolute;
  left: 52%;
  top: 48%;
  display: inline-grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 24px rgba(154, 52, 18, 0.2),
    0 0 0 10px rgba(249, 115, 22, 0.14);
}

.missing-pet-public-map-clue > div:last-child {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.missing-pet-public-map-clue span {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 940;
  text-transform: uppercase;
}

.missing-pet-public-map-clue strong {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.missing-pet-public-map-clue small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-alert-help {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-left: 4px solid #f97316;
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 255, 255, 0.96));
}

.missing-pet-alert-help strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-alert-help span,
.missing-pet-contact-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-response-steps {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-response-steps div {
  display: grid;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.missing-pet-response-steps svg {
  color: #f97316;
}

.missing-pet-response-steps strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-response-steps span {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-contact-note {
  margin: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface-raised);
}

.missing-pet-facts {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-facts div {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding: 12px 14px;
}

.missing-pet-facts div:first-child {
  border-top: 0;
}

.missing-pet-facts dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.missing-pet-facts dd {
  margin: 0;
}

.missing-pet-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.missing-pet-photo-strip img {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
}

.missing-pet-sighting-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
}

.missing-pet-sighting-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-summary-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 880;
}

.missing-pet-sighting-summary-row span.is-alert {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.1);
  color: #b45309;
}

.missing-pet-sighting-summary-row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.missing-pet-sighting-locked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.96));
  color: #047857;
}

.missing-pet-sighting-locked strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-sighting-locked p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-location-history {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.missing-pet-location-history-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-location-history-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.missing-pet-location-history-head strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-location-history-head small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.missing-pet-location-history-head > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(239, 246, 255, 0.86);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.missing-pet-location-history-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1fr);
  gap: 12px;
}

.missing-pet-duplicate-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.82), rgba(255, 255, 255, 0.94));
}

.missing-pet-duplicate-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.missing-pet-duplicate-panel strong {
  color: var(--text);
}

.missing-pet-duplicate-panel small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.missing-pet-duplicate-panel > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.missing-pet-duplicate-panel > div:last-child span {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 860;
}

.missing-pet-duplicate-panel > div:last-child strong {
  color: #9a3412;
}

.missing-pet-location-map-board {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 28% 32%, rgba(86, 207, 174, 0.18), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(255, 200, 0, 0.16), transparent 32%),
    #eff6ff;
  background-size:
    38px 38px,
    38px 38px,
    auto,
    auto,
    auto;
}

.missing-pet-location-map-board.is-empty {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 860;
}

.missing-pet-leaflet-shell {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background: #eff6ff;
}

.missing-pet-leaflet-shell.is-compact {
  min-height: 118px;
}

.missing-pet-leaflet-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.missing-pet-leaflet-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    #eff6ff;
  background-size: 38px 38px, 38px 38px, auto;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 860;
}

.missing-pet-leaflet-pin {
  display: inline-grid;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.22),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-leaflet-pin span {
  font-size: 0.76rem;
  font-weight: 940;
  line-height: 1;
}

.missing-pet-leaflet-shell .leaflet-container {
  width: 100%;
  height: 100%;
  background: #eff6ff;
  font: inherit;
}

.missing-pet-leaflet-shell .leaflet-control-attribution {
  border-top-left-radius: 6px;
  background: rgba(255, 255, 255, 0.84);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 760;
}

.missing-pet-leaflet-shell .leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.missing-pet-leaflet-shell .leaflet-popup-content {
  display: grid;
  gap: 4px;
  margin: 10px 12px;
  min-width: 140px;
  color: #111827;
  font: inherit;
}

.missing-pet-leaflet-shell .leaflet-popup-content strong,
.missing-pet-leaflet-shell .leaflet-popup-content small,
.missing-pet-leaflet-shell .leaflet-popup-content a {
  display: block;
}

.missing-pet-leaflet-shell .leaflet-popup-content small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.missing-pet-leaflet-shell .leaflet-popup-content a {
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-leaflet-open-link {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-location-map-pin {
  position: absolute;
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 940;
  line-height: 1;
  text-decoration: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.22),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-location-timeline {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.missing-pet-location-timeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
}

.missing-pet-location-timeline li > span {
  display: inline-grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 940;
}

.missing-pet-location-timeline div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-location-timeline strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-location-timeline small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.missing-pet-location-timeline a {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-sighting-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.missing-pet-sighting-card.is-new {
  border-color: rgba(249, 115, 22, 0.34);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
    var(--surface);
}

.missing-pet-sighting-card.is-owner-contacted {
  border-color: rgba(86, 207, 174, 0.34);
}

.missing-pet-sighting-media {
  min-width: 0;
}

.missing-pet-sighting-photo-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  background: var(--surface-muted);
}

.missing-pet-sighting-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: cover;
}

.missing-pet-sighting-photo-link span {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.missing-pet-sighting-photo-link:hover span,
.missing-pet-sighting-photo-link:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.missing-pet-sighting-photo-link:focus-visible {
  outline: 3px solid rgba(11, 105, 183, 0.24);
  outline-offset: 3px;
}

.missing-pet-sighting-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.missing-pet-sighting-card p {
  margin: 0;
}

.missing-pet-event-list {
  display: grid;
  gap: 8px;
}

.missing-pet-event-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  color: var(--text-muted);
}

.missing-pet-result-panel,
.missing-pet-owner-command-center,
.cat-sitting-created-panel,
.community-safety-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    var(--surface-raised);
}

.missing-pet-owner-command-center {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.missing-pet-owner-command-center.is-dashboard {
  background:
    radial-gradient(circle at 4% 0%, rgba(86, 207, 174, 0.12), transparent 34%),
    var(--surface-raised);
}

.missing-pet-owner-command-center.is-dashboard.is-simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface-raised);
}

.missing-pet-owner-command-center.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-owner-command-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
}

.missing-pet-top-found-card {
  width: min(100%, 360px);
  align-self: stretch;
  justify-self: end;
  align-content: space-between;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.14), transparent 38%),
    var(--surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.missing-pet-top-found-card.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-owner-command-center.is-simple .missing-pet-owner-command-card {
  align-content: space-between;
  min-height: 170px;
}

.missing-pet-owner-command-card.is-primary {
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    var(--surface);
}

.missing-pet-owner-command-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.1;
}

.missing-pet-owner-command-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.5;
}

.missing-pet-owner-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-owner-command-actions .missing-pet-share-controls {
  display: contents;
}

.missing-pet-owner-command-topline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.missing-pet-owner-command-topline > span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 920;
}

.missing-pet-owner-command-topline > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-owner-command-topline > span.is-found {
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-owner-command-topline strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-manage-panel.is-spotlight {
  border-color: rgba(255, 200, 0, 0.32);
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    var(--surface-raised);
}

.missing-pet-manage-panel-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-manage-panel-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.missing-pet-manage-panel-heading > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-manage-optional-panel {
  display: grid;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  background: var(--surface-raised);
}

.missing-pet-manage-optional-panel > summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: var(--text);
}

.missing-pet-manage-optional-panel > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-manage-optional-panel > summary span,
.missing-pet-manage-optional-panel > summary small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.missing-pet-manage-optional-panel > summary span {
  font-size: 0.94rem;
  font-weight: 920;
}

.missing-pet-manage-optional-panel > summary small {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 860;
}

.missing-pet-manage-optional-panel > summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.missing-pet-manage-optional-panel[open] > summary::after {
  content: "-";
}

.missing-pet-manage-optional-panel > .missing-pet-manage-panel {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
}

.missing-pet-manage-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 14px;
}

.missing-pet-manage-photo-grid.has-multiple {
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}

.missing-pet-current-photo-set {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
  box-shadow:
    0 16px 34px rgba(66, 44, 10, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.missing-pet-current-photo-set-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
}

.missing-pet-current-photo-set-head strong {
  color: var(--text);
  font-size: 0.98rem;
}

.missing-pet-current-photo-set-head small {
  max-width: 620px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 780;
  line-height: 1.4;
}

.missing-pet-manage-photo-grid figure {
  display: grid;
  gap: 8px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.missing-pet-manage-photo-grid figure.is-primary {
  border-color: rgba(249, 115, 22, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 36%),
    var(--surface);
}

.missing-pet-manage-photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--surface-muted);
  object-fit: cover;
}

.missing-pet-manage-photo-grid.has-multiple img {
  aspect-ratio: 4 / 3;
}

.missing-pet-manage-photo-grid figcaption {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.missing-pet-manage-photo-grid strong {
  color: var(--text);
  font-size: 0.86rem;
}

.missing-pet-manage-photo-grid small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.missing-pet-photo-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.missing-pet-photo-workflow span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(249, 115, 22, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1.25;
}

.missing-pet-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: none;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-photo-replace-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-photo-replace-head > div {
  display: grid;
  gap: 4px;
  max-width: 720px;
}

.missing-pet-photo-replace-head span {
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-photo-replace-head strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-photo-replace-head small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-replace-upload-field {
  gap: 10px;
}

.missing-pet-replace-upload-field .studio-photo-picker input[type="file"] {
  color: transparent;
  font-size: 0;
}

.missing-pet-replace-summary {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.45;
}

.missing-pet-replace-summary svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-muted);
}

.missing-pet-replace-summary.is-ready {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
  color: #1f6f58;
}

.missing-pet-replace-summary.is-ready svg {
  color: #1f6f58;
}

.missing-pet-photo-replace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.missing-pet-photo-replace-actions .button {
  gap: 8px;
}

.missing-pet-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-muted);
}

.missing-pet-empty-state svg {
  color: #f97316;
}

.missing-pet-empty-state strong {
  color: var(--text);
}

.missing-pet-empty-state p {
  max-width: 680px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-sighting-photo-empty {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.missing-pet-sighting-photo-empty small {
  font-size: 0.72rem;
  font-weight: 850;
}

.missing-pet-sighting-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.missing-pet-sighting-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-sighting-card-head strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-card-head small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.missing-pet-sighting-card-head em {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 860;
}

.missing-pet-sighting-card-head em.is-new {
  background: rgba(249, 115, 22, 0.12);
  color: #b45309;
}

.missing-pet-sighting-card-head em.is-owner-contacted {
  background: rgba(86, 207, 174, 0.14);
  color: #1f6f58;
}

.missing-pet-sighting-card-head em.is-reviewed {
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-note-stack {
  display: grid;
  gap: 8px;
}

.missing-pet-sighting-note-stack p {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 740;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-note-stack p span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-sighting-location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted);
}

.missing-pet-sighting-location-card.has-map {
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
}

.missing-pet-sighting-location-card.has-map.is-map-only {
  grid-template-columns: 1fr;
}

.missing-pet-sighting-location-card.is-map-only {
  padding: 0;
  overflow: hidden;
}

.missing-pet-sighting-location-card.is-map-only .missing-pet-sighting-map-preview {
  border: 0;
  border-radius: 8px;
}

.missing-pet-sighting-map-preview {
  position: relative;
  display: grid;
  min-height: 118px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 68% 34%, rgba(255, 200, 0, 0.18), transparent 34%),
    #eff6ff;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;
  color: var(--accent-strong);
  text-decoration: none;
}

.missing-pet-sighting-map-preview > span {
  display: inline-grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.2),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-sighting-map-preview em {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.missing-pet-sighting-location-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.missing-pet-sighting-location-copy > span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-sighting-location-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-location-copy small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-contact {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(11, 105, 183, 0.07);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 860;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(11, 105, 183, 0.045);
}

.missing-pet-sighting-contact-label {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-result-panel.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-result-panel h2,
.cat-sitting-created-panel h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.missing-pet-result-panel p,
.cat-sitting-created-panel p {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.missing-pet-result-steps,
.missing-pet-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-result-steps span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-result-steps span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-poster-control-panel {
  display: grid;
  gap: 12px;
}

.missing-pet-poster-simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(86, 207, 174, 0.26);
  border-radius: 8px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.12), transparent 36%),
    var(--surface);
}

.missing-pet-poster-simple-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.missing-pet-poster-simple-copy > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-poster-simple-copy > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-poster-simple-copy div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-simple-copy strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.1;
}

.missing-pet-poster-simple-copy small {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.4;
}

.missing-pet-poster-simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.missing-pet-poster-simple-actions .button {
  gap: 8px;
}

.missing-pet-poster-more-files {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.missing-pet-poster-more-files summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 920;
  list-style: none;
}

.missing-pet-poster-more-files summary::-webkit-details-marker {
  display: none;
}

.missing-pet-poster-more-files summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-poster-file-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.missing-pet-poster-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  min-height: 76px;
  padding: 12px;
  background: var(--surface-muted);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

a.missing-pet-poster-file-row:hover {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.missing-pet-poster-file-row.is-ready {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.08);
}

.missing-pet-poster-file-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.missing-pet-poster-file-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-file-row strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.15;
}

.missing-pet-poster-file-row small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-file-row em {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.missing-pet-poster-file-row.is-ready em {
  color: #1f6f58;
}

.missing-pet-poster-remake-box {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(86, 207, 174, 0.07)),
    var(--surface);
}

.missing-pet-poster-remake-box > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-remake-box strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.missing-pet-poster-remake-box small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-remake-box .button {
  flex: 0 0 auto;
}

.missing-pet-manage-advanced {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-raised);
}

.missing-pet-manage-advanced summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 920;
  list-style: none;
}

.missing-pet-manage-advanced summary::-webkit-details-marker {
  display: none;
}

.missing-pet-manage-advanced summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-manage-advanced[open] {
  gap: 18px;
}

.missing-pet-poster-control-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(255, 200, 0, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.missing-pet-poster-control-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-control-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 940;
}

.missing-pet-poster-control-head small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-generate-button svg {
  flex: 0 0 auto;
}

.missing-pet-generate-button:disabled svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-poster-download-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-poster-control-panel.is-compact .missing-pet-poster-download-grid {
  grid-template-columns: 1fr;
}

.missing-pet-poster-download-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-muted);
  color: inherit;
  text-decoration: none;
}

.missing-pet-poster-download-preview {
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
}

.missing-pet-poster-download-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.missing-pet-poster-download-card.is-ready {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.1);
}

.missing-pet-poster-download-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.missing-pet-poster-download-card > .missing-pet-poster-download-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.missing-pet-poster-download-card strong {
  color: var(--text);
  font-size: 0.94rem;
}

.missing-pet-poster-download-card small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-download-card em {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.missing-pet-poster-download-card.is-ready em {
  color: #1f6f58;
}

.missing-pet-status-control-panel {
  display: grid;
  gap: 9px;
  align-items: start;
}

.missing-pet-status-control-panel small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-close-report-details {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
}

.missing-pet-close-report-details > summary {
  width: fit-content;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-close-report-details > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-close-report-details > div {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted);
}

.missing-pet-close-report-details p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.4;
}

.cat-sitting-page-band {
  background: var(--surface);
}

.cat-sitting-hero,
.cat-sitting-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.cat-sitting-hero h1,
.cat-sitting-detail-copy h1 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
}

.cat-sitting-hero p,
.cat-sitting-detail-copy p {
  max-width: 720px;
  color: var(--text-muted);
}

.cat-sitting-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.cat-sitting-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

.cat-sitting-command-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.cat-sitting-command-strip div {
  display: grid;
  min-width: 150px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.cat-sitting-command-strip strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.cat-sitting-command-strip span {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 820;
}

.cat-sitting-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.cat-sitting-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.cat-sitting-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 20%, rgba(86, 207, 174, 0.18), transparent 38%),
    var(--surface-muted);
}

.cat-sitting-card-image img,
.cat-sitting-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-sitting-card-body {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.cat-sitting-card-kicker {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.cat-sitting-card-kicker > span:last-child {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
}

.cat-sitting-card-body strong {
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.15;
}

.cat-sitting-card-body small,
.cat-sitting-card-body span:last-child {
  color: var(--text-muted);
}

.cat-sitting-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cat-sitting-signal-row em {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 820;
}

.cat-sitting-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  font-size: 0.76rem;
  font-weight: 920;
}

.cat-sitting-status.is-matched,
.cat-sitting-status.is-completed {
  background: #ecfdf5;
  color: #047857;
}

.cat-sitting-status.is-cancelled,
.cat-sitting-status.is-hidden {
  background: #f3f4f6;
  color: #4b5563;
}

.cat-sitting-create-form {
  width: min(760px, calc(100vw - 32px));
  gap: 18px;
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.cat-sitting-create-form .field {
  display: grid;
  gap: 8px;
}

.cat-sitting-create-form .field > span:first-child {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.cat-sitting-create-form textarea {
  min-height: 108px;
  resize: vertical;
}

.cat-sitting-form-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cat-sitting-form-guide span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 840;
  line-height: 1.25;
}

.cat-sitting-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cat-sitting-type-toggle label,
.cat-sitting-check-row label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 13px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 880;
}

.cat-sitting-type-toggle label {
  min-height: 54px;
  justify-content: center;
  cursor: pointer;
}

.cat-sitting-type-toggle label.is-active {
  border-color: rgba(86, 207, 174, 0.55);
  background: rgba(86, 207, 174, 0.13);
  color: #1f6f58;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.1);
}

.cat-sitting-type-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.cat-sitting-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cat-sitting-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-sitting-check-row input {
  width: auto;
}

.cat-sitting-private-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.cat-sitting-private-toggle {
  width: 100%;
  justify-items: start;
  text-align: left;
}

.cat-sitting-private-fields {
  display: grid;
  gap: 12px;
}

.cat-sitting-private-fields > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.cat-sitting-detail-hero {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

.cat-sitting-detail-photo {
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(86, 207, 174, 0.18), transparent 38%),
    var(--surface-muted);
}

.cat-sitting-detail-copy {
  display: grid;
  align-content: center;
  gap: 18px;
}

.cat-sitting-match-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.cat-sitting-match-panel > div:first-child {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.cat-sitting-match-panel strong {
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.cat-sitting-match-panel span {
  color: var(--text-muted);
  font-weight: 860;
}

.cat-sitting-connection-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface-raised);
}

.cat-sitting-connection-panel h2 {
  margin: 0;
}

.cat-sitting-connection-form,
.cat-sitting-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: 660px;
}

.cat-sitting-connection-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 840;
}

.cat-sitting-connection-form input,
.cat-sitting-connection-form textarea {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.cat-sitting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-sitting-private-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.cat-sitting-private-dl div,
.cat-sitting-connection-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.cat-sitting-private-dl dt {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cat-sitting-private-dl dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.cat-sitting-connection-list {
  display: grid;
  gap: 12px;
}

.cat-sitting-connection-card p {
  margin: 0;
}

.cat-sitting-connection-card small {
  color: var(--text-muted);
}

.community-dashboard-page {
  background: var(--surface);
}

.community-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.community-dashboard-hero h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.96;
}

.community-dashboard-hero p {
  max-width: 760px;
  color: var(--text-muted);
}

.community-dashboard-actions,
.community-dashboard-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.community-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.community-dashboard-stats div,
.community-dashboard-section {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(16px, 2.5vw, 22px);
  background: var(--surface-raised);
}

.community-dashboard-stats strong {
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
}

.community-dashboard-stats span {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 820;
}

.community-dashboard-section h2 {
  margin: 0;
  font-size: 1.2rem;
}

.community-dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.community-dashboard-card,
.community-dashboard-room-list a {
  color: inherit;
  text-decoration: none;
}

.community-dashboard-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.community-dashboard-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
}

.community-dashboard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-dashboard-card span:last-child,
.community-dashboard-room-list a {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.community-dashboard-card strong,
.community-dashboard-room-list strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.community-dashboard-card small,
.community-dashboard-room-list small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.community-dashboard-card em,
.community-dashboard-room-list em {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.community-dashboard-room-list {
  display: grid;
  gap: 8px;
}

.community-dashboard-room-list a {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

html[data-theme="dark"] .cat-sitting-create-page {
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.08), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.08), transparent 30%),
    var(--surface);
}

html[data-theme="dark"] .missing-pet-page-band {
  background: var(--surface);
}

html[data-theme="dark"] .site-main-shell:has(.missing-pet-page-band),
html[data-theme="dark"] .site-main:has(.missing-pet-page-band) {
  background: var(--surface);
}

html[data-theme="dark"] .missing-pet-owner-tools {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(12, 18, 16, 0.94);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-owner-tools span {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-secondary {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
  box-shadow: none;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-ghost {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-secondary:hover,
html[data-theme="dark"] .missing-pet-owner-tools .button-ghost:hover {
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .cat-sitting-create-form,
html[data-theme="dark"] .cat-sitting-card,
html[data-theme="dark"] .cat-sitting-connection-panel,
html[data-theme="dark"] .missing-pet-manage-hero.is-dashboard,
html[data-theme="dark"] .missing-pet-result-panel,
html[data-theme="dark"] .missing-pet-owner-command-center,
html[data-theme="dark"] .cat-sitting-created-panel,
html[data-theme="dark"] .community-safety-panel,
html[data-theme="dark"] .community-dashboard-stats div,
html[data-theme="dark"] .community-dashboard-section {
  border-color: var(--border);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.08), transparent 34%),
    var(--surface);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .cat-sitting-type-toggle label,
html[data-theme="dark"] .cat-sitting-check-row label,
html[data-theme="dark"] .cat-sitting-form-guide span,
html[data-theme="dark"] .help-community-gateway.is-production,
html[data-theme="dark"] .help-community-entry-card,
html[data-theme="dark"] .help-community-entry-card em,
html[data-theme="dark"] .cat-sitting-private-panel,
html[data-theme="dark"] .cat-sitting-private-dl div,
html[data-theme="dark"] .cat-sitting-connection-card,
html[data-theme="dark"] .cat-sitting-search input,
html[data-theme="dark"] .cat-sitting-command-strip div,
html[data-theme="dark"] .cat-sitting-card-kicker > span:last-child,
html[data-theme="dark"] .cat-sitting-signal-row em,
html[data-theme="dark"] .cat-sitting-match-panel,
html[data-theme="dark"] .cat-sitting-connection-form input,
html[data-theme="dark"] .cat-sitting-connection-form textarea,
html[data-theme="dark"] .community-dashboard-card,
html[data-theme="dark"] .community-dashboard-thumb,
html[data-theme="dark"] .missing-pet-result-steps span,
html[data-theme="dark"] .missing-pet-manage-kicker span,
html[data-theme="dark"] .missing-pet-manage-nav a,
html[data-theme="dark"] .missing-pet-manage-hero-thumb,
html[data-theme="dark"] .missing-pet-manage-optional-panel,
html[data-theme="dark"] .missing-pet-manage-stat-row div,
html[data-theme="dark"] .missing-pet-manage-preview,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span,
html[data-theme="dark"] .missing-pet-manage-advanced,
html[data-theme="dark"] .missing-pet-current-photo-set,
html[data-theme="dark"] .missing-pet-photo-workflow span,
html[data-theme="dark"] .missing-pet-photo-replace-form,
html[data-theme="dark"] .missing-pet-manage-photo-grid figure,
html[data-theme="dark"] .missing-pet-empty-state,
html[data-theme="dark"] .missing-pet-replace-summary,
html[data-theme="dark"] .missing-pet-sighting-summary-row span,
html[data-theme="dark"] .missing-pet-location-history,
html[data-theme="dark"] .missing-pet-location-timeline li,
html[data-theme="dark"] .missing-pet-duplicate-panel,
html[data-theme="dark"] .missing-pet-sighting-card,
html[data-theme="dark"] .missing-pet-sighting-photo-empty,
html[data-theme="dark"] .missing-pet-sighting-card-head em,
html[data-theme="dark"] .missing-pet-sighting-note-stack p,
html[data-theme="dark"] .missing-pet-sighting-contact,
html[data-theme="dark"] .missing-pet-sighting-upload-card,
html[data-theme="dark"] .missing-pet-sighting-methods article,
html[data-theme="dark"] .missing-pet-sighting-methods article > span,
html[data-theme="dark"] .missing-pet-sighting-extra,
html[data-theme="dark"] .missing-pet-sighting-location-card,
html[data-theme="dark"] .missing-pet-sighting-send-status,
html[data-theme="dark"] .missing-pet-sighting-extra-grid label,
html[data-theme="dark"] .missing-pet-sighting-context-field,
html[data-theme="dark"] .missing-pet-public-map-clue,
html[data-theme="dark"] .missing-pet-sighting-locked,
html[data-theme="dark"] .missing-pet-owner-command-card,
html[data-theme="dark"] .missing-pet-owner-command-topline > span,
html[data-theme="dark"] .missing-pet-poster-simple,
html[data-theme="dark"] .missing-pet-poster-simple-copy > span,
html[data-theme="dark"] .missing-pet-poster-more-files,
html[data-theme="dark"] .missing-pet-poster-file-row,
html[data-theme="dark"] .missing-pet-poster-file-icon,
html[data-theme="dark"] .missing-pet-poster-file-row em,
html[data-theme="dark"] .missing-pet-poster-remake-box,
html[data-theme="dark"] .missing-pet-poster-download-card,
html[data-theme="dark"] .missing-pet-poster-control-head,
html[data-theme="dark"] .missing-pet-poster-download-card > span,
html[data-theme="dark"] .missing-pet-poster-download-preview,
html[data-theme="dark"] .missing-pet-response-steps div,
html[data-theme="dark"] .missing-pet-responder-card {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-sighting-location-card {
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.08), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-location-history-head > span {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-location-map-board,
html[data-theme="dark"] .missing-pet-public-map-clue > div:first-child,
html[data-theme="dark"] .missing-pet-sighting-map-preview {
  border-color: rgba(120, 183, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(120, 183, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(120, 183, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 28% 32%, rgba(86, 207, 174, 0.12), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(255, 200, 0, 0.1), transparent 32%),
    rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-leaflet-shell,
html[data-theme="dark"] .missing-pet-leaflet-empty {
  border-color: rgba(120, 183, 255, 0.18);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-leaflet-shell .leaflet-control-attribution {
  background: rgba(7, 10, 9, 0.72);
  color: #cbd5e1;
}

html[data-theme="dark"] .missing-pet-leaflet-shell .leaflet-control-attribution a {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-location-card > div > span {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-public-map-clue span,
html[data-theme="dark"] .missing-pet-duplicate-panel > div:last-child strong {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-closed-chip {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-duplicate-panel > div:last-child span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-card.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-card.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-main-field > span:first-child > span[aria-hidden="true"] {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-main-field.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-main-field.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-inline {
  border-color: rgba(120, 183, 255, 0.18);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card:hover,
html[data-theme="dark"] .missing-pet-sighting-upload-card.is-dragging {
  border-color: rgba(249, 115, 22, 0.42);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card.has-photo {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-icon {
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-upload-card.has-photo .missing-pet-sighting-upload-icon {
  background: rgba(86, 207, 174, 0.16);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-upload-card em {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-manage-optional-panel > summary small {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground-muted);
}

html[data-theme="dark"] .missing-pet-manage-optional-panel > summary::after {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel small {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent .missing-pet-sighting-submit-button {
  border-color: rgba(86, 207, 174, 0.7);
  background: #168464;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent small {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup summary small,
html[data-theme="dark"] .missing-pet-sighting-followup-note {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] summary small,
html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] .missing-pet-sighting-followup-note {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra-summary-copy strong {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra-summary-copy em {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-send-status > span {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sending {
  border-color: rgba(249, 115, 22, 0.34);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sending > span {
  background: rgba(249, 115, 22, 0.14);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sent {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sent > span {
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-error > span {
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > summary,
html[data-theme="dark"] .missing-pet-sighting-more-actions > div {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
    rgba(22, 28, 25, 0.98);
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > summary:hover,
html[data-theme="dark"] .missing-pet-sighting-more-actions[open] > summary {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(22, 28, 25, 0.98);
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > div {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .missing-pet-sighting-more-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-hide-button {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-danger-actions {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-sighting-danger-actions > summary {
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-sighting-action-panel {
  border-color: rgba(120, 183, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-action-panel.is-new {
  border-color: rgba(249, 115, 22, 0.3);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.13), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-action-panel.is-owner-contacted,
html[data-theme="dark"] .missing-pet-sighting-action-panel.is-reviewed {
  border-color: rgba(86, 207, 174, 0.28);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-contact-list {
  border-color: rgba(120, 183, 255, 0.16);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-close-report-details {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-close-report-details > div {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-card.is-new {
  border-color: rgba(249, 115, 22, 0.36);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14) 0%, rgba(255, 255, 255, 0.045) 46%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-current-photo-set {
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.08) 0%, rgba(255, 255, 255, 0.045) 100%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-replace-summary.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.13);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-replace-summary.is-ready svg {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-summary-row span.is-alert,
html[data-theme="dark"] .missing-pet-sighting-card-head em.is-new {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.14);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-card-head em.is-owner-contacted {
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-card-head em.is-reviewed,
html[data-theme="dark"] .missing-pet-sighting-contact {
  background: rgba(120, 183, 255, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-main-field,
html[data-theme="dark"] .missing-pet-sighting-extra[open] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .missing-pet-sighting-step-arrow {
  color: rgba(255, 232, 137, 0.52);
}

html[data-theme="dark"] .missing-pet-sighting-methods article > span {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-sighting-extra summary small {
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-form input,
html[data-theme="dark"] .missing-pet-sighting-form textarea {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(7, 10, 9, 0.38);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-sighting-extra-grid label,
html[data-theme="dark"] .missing-pet-sighting-context-field {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.045));
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .missing-pet-date-picker button,
html[data-theme="dark"] .missing-pet-date-shortcuts button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-date-picker button {
  color: #ffe48a;
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.14) 0%, rgba(255, 255, 255, 0.055) 100%);
}

html[data-theme="dark"] .missing-pet-date-picker button:hover,
html[data-theme="dark"] .missing-pet-date-shortcuts button:hover {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .missing-pet-manage-status.is-active,
html[data-theme="dark"] .missing-pet-manage-status.is-sighting-reported,
html[data-theme="dark"] .missing-pet-owner-command-topline > span.is-alert,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span.is-alert {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-manage-status.is-found {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-detail-photo {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    var(--surface-raised);
}

html[data-theme="dark"] .missing-pet-detail-photo-frame {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    var(--surface-muted);
}

html[data-theme="dark"] .missing-pet-detail-photo-topline span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-detail-photo-topline span:first-child {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-alert-help,
html[data-theme="dark"] .missing-pet-facts,
html[data-theme="dark"] .missing-pet-download-details,
html[data-theme="dark"] .missing-pet-contact-note {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-alert-help {
  border-left-color: #fbbf24;
}

html[data-theme="dark"] .missing-pet-facts div {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-detail-photo .is-secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .cat-sitting-type-toggle label.is-active {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.08);
}

html[data-theme="dark"] .cat-sitting-status {
  color: #b9f1d9;
}

html[data-theme="dark"] .help-community-gateway.is-production {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(86, 207, 174, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .help-community-entry-card.is-primary {
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-panel,
html[data-theme="dark"] .community-my-missing-card,
html[data-theme="dark"] .community-my-missing-thumb {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .community-my-missing-panel {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-panel.is-account-summary {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-head-actions {
  border-color: rgba(120, 183, 255, 0.2);
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-head-actions > span,
html[data-theme="dark"] .community-my-missing-owner-chip {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .community-my-missing-status {
  border-color: rgba(249, 115, 22, 0.32);
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

html[data-theme="dark"] .community-my-missing-status.is-sighting-reported {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .community-my-missing-status.is-found {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .community-my-missing-status.is-closed {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

html[data-theme="dark"] .help-community-card-label,
html[data-theme="dark"] .help-community-entry-card.is-primary .help-community-card-label {
  background: rgba(255, 200, 0, 0.12);
  color: #ffe48a;
}

html[data-theme="dark"] .help-community-card-icon {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .help-community-card-icon::after {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .help-community-card-icon-badge {
  border-color: rgba(23, 23, 23, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .help-community-card-icon.is-lost-pet {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.16), rgba(249, 115, 22, 0.08));
  color: #ffe48a;
}

html[data-theme="dark"] .help-community-card-icon.is-cat-sitting {
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(86, 207, 174, 0.14), rgba(120, 183, 255, 0.06));
  color: #b9f1d9;
}

html[data-theme="dark"] .help-community-card-icon.is-rescue-help {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(120, 183, 255, 0.14), rgba(86, 207, 174, 0.06));
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-result-steps span.is-ready,
html[data-theme="dark"] .missing-pet-owner-command-topline > span.is-ready,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span.is-ready,
html[data-theme="dark"] .missing-pet-poster-simple-copy > span.is-ready,
html[data-theme="dark"] .missing-pet-poster-file-row.is-ready,
html[data-theme="dark"] .missing-pet-poster-download-card.is-ready,
html[data-theme="dark"] .community-dashboard-card em,
html[data-theme="dark"] .community-dashboard-room-list em {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

@media (max-width: 820px) {
  .missing-pet-hero,
  .missing-pet-detail-hero,
  .missing-pet-manage-hero,
  .missing-pet-instructions,
  .missing-pet-owner-command-center,
  .cat-sitting-hero,
  .cat-sitting-detail-hero,
  .community-dashboard-hero,
  .missing-pet-inline-entry {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cat-sitting-detail-photo {
    min-height: 320px;
  }

  .missing-pet-detail-photo-frame,
  .missing-pet-detail-photo .is-primary,
  .missing-pet-detail-photo .is-secondary,
  .missing-pet-detail-photo-placeholder {
    min-height: 300px;
  }

  .missing-pet-detail-photo-frame.has-secondary {
    grid-template-columns: 1fr;
  }

  .missing-pet-manage-hero.is-dashboard {
    grid-template-columns: 1fr;
  }

  .missing-pet-top-found-card {
    width: 100%;
    justify-self: stretch;
  }

  .missing-pet-manage-hero.is-dashboard .help-community-actions {
    justify-content: flex-start;
  }

  .missing-pet-quick-intro {
    grid-template-columns: 1fr;
  }

  .missing-pet-quick-points {
    justify-content: flex-start;
  }

  .missing-pet-photo-dropzone {
    grid-template-columns: 1fr;
  }

  .missing-pet-photo-dropzone .button {
    justify-content: center;
    width: 100%;
  }

  .missing-pet-directory-search {
    grid-template-columns: 1fr;
  }

  .missing-pet-studio-grid,
  .missing-pet-studio-option-row,
  .missing-pet-guidance-panel,
  .missing-pet-time-grid,
  .missing-pet-public-map-clue,
  .missing-pet-sighting-extra.is-followup .missing-pet-form-grid,
  .missing-pet-sighting-location-inline,
  .missing-pet-sighting-quick-row,
  .missing-pet-sighting-methods,
  .missing-pet-response-steps,
  .missing-pet-poster-simple,
  .missing-pet-poster-simple-copy,
  .missing-pet-poster-file-row,
  .missing-pet-poster-remake-box,
  .missing-pet-poster-download-grid,
  .missing-pet-photo-workflow,
  .missing-pet-location-history-grid,
  .cat-sitting-type-toggle,
  .cat-sitting-form-grid,
  .cat-sitting-form-guide,
  .cat-sitting-search,
  .cat-sitting-private-dl,
  .community-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .missing-pet-form-grid {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-step-arrow {
    display: none;
  }

  .missing-pet-sighting-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .missing-pet-poster-simple-actions {
    justify-content: flex-start;
  }

  .missing-pet-poster-file-row em {
    justify-content: flex-start;
  }

  .missing-pet-poster-remake-box .button {
    width: 100%;
    justify-content: center;
  }

  .missing-pet-sighting-location-card.has-map {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-map-preview {
    min-height: 140px;
  }

}

@media (max-width: 560px) {
  .missing-pet-detail-photo {
    padding: 10px;
  }

  .missing-pet-detail-photo-topline,
  .missing-pet-detail-photo-summary {
    align-items: start;
  }

  .missing-pet-detail-photo-topline {
    flex-wrap: wrap;
  }

  .missing-pet-detail-photo-summary {
    display: grid;
  }

  .missing-pet-detail-photo-summary small {
    max-width: none;
    text-align: left;
  }

  .missing-pet-detail-photo-frame,
  .missing-pet-detail-photo .is-primary,
  .missing-pet-detail-photo .is-secondary,
  .missing-pet-detail-photo-placeholder {
    min-height: 260px;
  }

  .missing-pet-manage-stat-row div {
    flex: 1 1 86px;
    min-width: 0;
  }

  .missing-pet-manage-panel-heading {
    display: grid;
  }

  .missing-pet-manage-photo-grid.has-multiple {
    grid-template-columns: 1fr;
  }

  .missing-pet-manage-photo-grid.has-multiple img {
    aspect-ratio: 4 / 3;
  }

  .missing-pet-sighting-card {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-card img,
  .missing-pet-sighting-photo-empty {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 220px;
    object-fit: cover;
  }
}
/* Studio Lounge: Rescue Treat Jar MVP */
.studio-treat-jar-page {
  min-height: 100vh;
  padding: 16px;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 244, 196, 0.56), transparent 34%),
    linear-gradient(135deg, #fff8ea 0%, #f1d7c8 42%, #c8e2dc 100%);
  color: #332a24;
}

.studio-treat-jar-stage {
  position: relative;
  min-height: min(820px, calc(100vh - 156px));
  overflow: hidden;
  border: 1px solid rgba(110, 87, 69, 0.16);
  border-radius: 26px;
  background: #f8e2ca;
  box-shadow: 0 24px 80px rgba(78, 58, 43, 0.18);
}

.studio-treat-jar-canvas {
  display: block;
  width: 100%;
  height: min(820px, calc(100vh - 156px));
  object-fit: cover;
}

.studio-treat-jar-topbar,
.studio-treat-jar-status,
.studio-treat-jar-action-panel,
.studio-treat-jar-report {
  position: absolute;
  z-index: 2;
}

.studio-treat-jar-topbar {
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.studio-treat-jar-topbar h1 {
  margin: 2px 0 0;
  font-size: clamp(1.72rem, 4vw, 3.1rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.studio-treat-jar-topbar .eyebrow,
.studio-treat-jar-report .eyebrow {
  margin: 0;
  color: rgba(79, 63, 50, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-treat-jar-report-button,
.studio-treat-jar-report-close {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(87, 67, 53, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #45382e;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(81, 59, 43, 0.13);
  cursor: pointer;
}

.studio-treat-jar-report-button {
  padding: 0 14px;
  white-space: nowrap;
}

.studio-treat-jar-report-close {
  top: 14px;
  right: 14px;
  width: 38px;
  padding: 0;
}

.studio-treat-jar-status {
  top: 92px;
  left: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.studio-treat-jar-status span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(99, 77, 61, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #4b3d33;
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(85, 63, 47, 0.11);
}

.studio-treat-jar-action-panel {
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(90, 70, 56, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 46px rgba(78, 58, 43, 0.17);
  backdrop-filter: blur(16px);
}

.studio-treat-jar-action-panel p {
  min-width: 0;
  margin: 0;
  color: #4a3d32;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  font-weight: 800;
  line-height: 1.3;
}

.studio-treat-jar-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.studio-treat-jar-actions .button {
  min-height: 40px;
  gap: 7px;
  white-space: nowrap;
}

.studio-treat-jar-report {
  top: 84px;
  right: 18px;
  width: min(360px, calc(100% - 36px));
  padding: 20px;
  border: 1px solid rgba(92, 71, 57, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(67, 49, 36, 0.22);
  backdrop-filter: blur(18px);
}

.studio-treat-jar-report h2 {
  margin: 4px 42px 14px 0;
  font-size: 1.32rem;
  letter-spacing: 0;
}

.studio-treat-jar-report dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.studio-treat-jar-report dl div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(87, 68, 55, 0.12);
  border-radius: 14px;
  background: rgba(247, 235, 218, 0.82);
}

.studio-treat-jar-report dt,
.studio-treat-jar-report dd {
  margin: 0;
}

.studio-treat-jar-report dt {
  color: rgba(74, 60, 50, 0.68);
  font-size: 0.68rem;
  font-weight: 800;
}

.studio-treat-jar-report dd {
  margin-top: 4px;
  color: #332a24;
  font-size: 1rem;
  font-weight: 900;
}

.studio-treat-jar-report p:not(.eyebrow) {
  margin: 0 0 14px;
  color: rgba(61, 50, 42, 0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}

.studio-treat-jar-dock {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 12px;
  margin-top: 12px;
  align-items: stretch;
}

.studio-treat-jar-dock-copy,
.studio-treat-jar-current,
.studio-treat-jar-empty-card {
  border: 1px solid rgba(85, 67, 54, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 36px rgba(80, 61, 45, 0.11);
}

.studio-treat-jar-dock-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}

.studio-treat-jar-dock-copy strong,
.studio-treat-jar-current strong,
.studio-treat-jar-empty-card strong {
  color: #332a24;
  font-size: 0.98rem;
  font-weight: 900;
}

.studio-treat-jar-dock-copy span,
.studio-treat-jar-current p,
.studio-treat-jar-empty-card small {
  color: rgba(61, 50, 42, 0.72);
  font-size: 0.82rem;
  line-height: 1.35;
}

.studio-treat-jar-card-rail {
  display: grid;
  grid-auto-columns: minmax(150px, 168px);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}

.studio-treat-jar-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  min-height: 82px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(78, 61, 48, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: inherit;
  text-align: left;
  box-shadow: 0 12px 28px rgba(77, 58, 44, 0.1);
  cursor: pointer;
}

.studio-treat-jar-card.is-selected {
  border-color: rgba(34, 129, 124, 0.58);
  background: rgba(235, 255, 250, 0.9);
  box-shadow: 0 14px 34px rgba(37, 120, 114, 0.18);
}

.studio-treat-jar-card-avatar,
.studio-treat-jar-current-art {
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff4cd, #d8f0ea);
}

.studio-treat-jar-card-avatar {
  width: 52px;
  height: 52px;
}

.studio-treat-jar-card-avatar img,
.studio-treat-jar-current-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 50%;
}

.studio-treat-jar-card span:last-child {
  min-width: 0;
}

.studio-treat-jar-card strong,
.studio-treat-jar-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-treat-jar-card strong {
  font-size: 0.86rem;
  font-weight: 900;
}

.studio-treat-jar-card small {
  margin-top: 3px;
  color: rgba(61, 50, 42, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
}

.studio-treat-jar-current {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 13px;
  padding: 12px;
}

.studio-treat-jar-current-art {
  width: 78px;
  height: 78px;
}

.studio-treat-jar-current p {
  display: -webkit-box;
  margin: 4px 0 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-treat-jar-empty-card {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  padding: 14px;
}

html[data-theme="dark"] .studio-treat-jar-page {
  background:
    radial-gradient(circle at 20% 10%, rgba(120, 97, 59, 0.22), transparent 34%),
    linear-gradient(135deg, #181512 0%, #28201c 48%, #18312e 100%);
  color: #fff8ed;
}

html[data-theme="dark"] .studio-treat-jar-stage,
html[data-theme="dark"] .studio-treat-jar-dock-copy,
html[data-theme="dark"] .studio-treat-jar-current,
html[data-theme="dark"] .studio-treat-jar-empty-card,
html[data-theme="dark"] .studio-treat-jar-card,
html[data-theme="dark"] .studio-treat-jar-report,
html[data-theme="dark"] .studio-treat-jar-action-panel {
  border-color: rgba(255, 244, 225, 0.13);
  background-color: rgba(33, 27, 24, 0.78);
  color: #fff8ed;
}

html[data-theme="dark"] .studio-treat-jar-topbar .eyebrow,
html[data-theme="dark"] .studio-treat-jar-report .eyebrow,
html[data-theme="dark"] .studio-treat-jar-dock-copy span,
html[data-theme="dark"] .studio-treat-jar-current p,
html[data-theme="dark"] .studio-treat-jar-report p:not(.eyebrow),
html[data-theme="dark"] .studio-treat-jar-card small,
html[data-theme="dark"] .studio-treat-jar-empty-card small {
  color: rgba(255, 248, 237, 0.72);
}

html[data-theme="dark"] .studio-treat-jar-report-button,
html[data-theme="dark"] .studio-treat-jar-report-close,
html[data-theme="dark"] .studio-treat-jar-status span {
  border-color: rgba(255, 244, 225, 0.14);
  background: rgba(35, 30, 27, 0.72);
  color: #fff8ed;
}

html[data-theme="dark"] .studio-treat-jar-card.is-selected {
  border-color: rgba(94, 220, 203, 0.54);
  background: rgba(24, 70, 65, 0.86);
}

@media (max-width: 980px) {
  .studio-treat-jar-dock {
    grid-template-columns: 1fr;
  }

  .studio-treat-jar-dock-copy {
    display: none;
  }
}

@media (max-width: 720px) {
  .studio-treat-jar-page {
    padding: 10px;
  }

  .studio-treat-jar-stage,
  .studio-treat-jar-canvas {
    min-height: 640px;
    height: calc(100vh - 186px);
  }

  .studio-treat-jar-topbar {
    top: 12px;
    left: 12px;
    right: 12px;
  }

  .studio-treat-jar-status {
    top: 78px;
    left: 12px;
  }

  .studio-treat-jar-action-panel {
    right: 12px;
    bottom: 12px;
    left: 12px;
    align-items: stretch;
    flex-direction: column;
  }

  .studio-treat-jar-actions {
    justify-content: stretch;
  }

  .studio-treat-jar-actions .button {
    flex: 1 1 148px;
  }

  .studio-treat-jar-report {
    top: 116px;
    right: 12px;
    width: calc(100% - 24px);
  }

  .studio-treat-jar-report dl {
    grid-template-columns: 1fr;
  }

  .studio-treat-jar-card-rail {
    grid-auto-columns: minmax(144px, 72vw);
  }

  .studio-treat-jar-current {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .studio-treat-jar-current-art {
    width: 66px;
    height: 66px;
  }
}

.press-page {
  overflow-x: clip;
  padding-top: 14px;
  background: var(--background);
}

.press-page :where(.container, .press-section, .section-header, .press-language-control, .press-language-switch, .press-language-dropdown, .press-hero-card, .press-hero-copy, .press-hero-actions, .press-hero-panel, .press-hero-pitch, .press-cat-badge-expand, .press-all-cats-disclosure, .press-opener-card, .press-action-card, .press-angle-card, .press-topic-card, .press-coverage-card, .press-video-record-card, .press-fact-card, .press-case-card, .press-feature-cat-card, .press-short-card, .press-copy-card, .press-asset-card, .press-field-photo-asset) {
  min-width: 0;
}

.press-language-control {
  grid-column: 1 / -1;
  justify-self: end;
  margin-bottom: -10px;
  z-index: 2;
}

.press-language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.06);
}

.press-language-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.press-language-switch a {
  color: var(--foreground);
  transition:
    background 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}

.press-language-switch a.is-active {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.press-language-switch a.is-pending,
.press-language-dropdown a.is-pending {
  background: rgba(86, 207, 174, 0.18);
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.28);
  color: var(--foreground);
}

.press-language-switch a.is-dimmed,
.press-language-dropdown a.is-dimmed {
  opacity: 0.58;
}

.press-language-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.72;
  animation: press-language-spin 720ms linear infinite;
}

@keyframes press-language-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-language-spinner {
    animation: none;
  }
}

.press-language-dropdown {
  display: none;
  position: relative;
}

.press-language-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.06);
  cursor: pointer;
  list-style: none;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.press-language-dropdown summary::-webkit-details-marker {
  display: none;
}

.press-language-dropdown summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.62;
  transition: transform 120ms ease;
}

.press-language-dropdown[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.press-language-dropdown summary.is-loading {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.12);
}

.press-language-dropdown summary.is-loading::after {
  display: none;
}

.press-language-dropdown div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: min(190px, calc(100vw - 44px));
  padding: 6px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 34px rgba(26, 37, 54, 0.12);
}

.press-language-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 13px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  transition:
    background 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
}

.press-language-dropdown a.is-active {
  background: rgba(15, 23, 42, 0.08);
}

.site-main:has(.press-page) {
  background: var(--background);
}

.press-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
  align-items: stretch;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
}

.press-hero-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.press-hero-copy h1 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 4.45vw, 4.35rem);
  line-height: 1;
  white-space: pre-line;
}

.press-hero-ask {
  max-width: 62ch;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.82));
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1.55;
  box-shadow: 0 12px 24px rgba(26, 37, 54, 0.06);
}

.press-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-hero-actions .button {
  min-height: 42px;
}

.press-page:lang(ko) .press-hero-copy h1,
.press-page:lang(ja) .press-hero-copy h1,
.press-page:lang(zh) .press-hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.35rem, 4.3vw, 4.2rem);
  line-height: 1.04;
}

.press-page:lang(ko) h1,
.press-page:lang(ko) h2,
.press-page:lang(ko) h3,
.press-page:lang(ja) h1,
.press-page:lang(ja) h2,
.press-page:lang(ja) h3,
.press-page:lang(zh) h1,
.press-page:lang(zh) h2,
.press-page:lang(zh) h3 {
  line-break: loose;
}

.press-page .section-header {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.press-page .section-header h2 {
  max-width: none;
  text-wrap: normal;
}

.press-page .section-header > div:first-child {
  display: grid;
  gap: 8px;
}

.press-page .section-header + :where(.press-angle-grid, .press-topics-layout, .press-feature-cat-grid, .press-short-grid, .press-copy-grid, .press-asset-grid, .press-coverage-card, .press-fact-grid, .press-case-grid) {
  margin-top: 4px;
}

.press-hero-panel {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 34px rgba(26, 37, 54, 0.08);
}

.press-hero-image {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: var(--surface-soft);
}

.press-hero-image img,
.press-hero-carousel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.press-hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 520ms ease, transform 1800ms ease;
}

.press-hero-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.press-hero-carousel-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.press-hero-carousel-controls button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(12px);
}

.press-hero-carousel-controls button:hover,
.press-hero-carousel-controls button:focus-visible {
  background: rgba(15, 23, 42, 0.74);
}

.press-hero-carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 120px);
  flex-wrap: wrap;
  gap: 6px;
}

.press-hero-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
}

.press-hero-carousel-dots button[aria-current="true"] {
  width: 18px;
  background: #fff;
}

.press-hero-mark {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(26, 37, 54, 0.08);
}

.press-hero-mark img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.press-hero-facts {
  display: grid;
  gap: 8px;
}

.press-hero-facts span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
}

.press-hero-pitch {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
}

.press-hero-pitch small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.press-hero-pitch strong {
  color: var(--foreground);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 950;
  line-height: 1.18;
}

.press-hero-pitch ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-hero-pitch li {
  position: relative;
  padding-left: 14px;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 760;
  line-height: 1.35;
}

.press-hero-pitch li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #0b69b7;
  content: "";
}

.press-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  display: grid;
  gap: 18px;
}

.press-opener-section {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: stretch;
}

.press-opener-card,
.press-action-card,
.press-angle-card {
  min-width: 0;
  border: 1px solid rgba(46, 64, 87, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.press-opener-card {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
}

.press-opener-card h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.press-opener-card p:last-child {
  max-width: 66ch;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.65;
}

.press-action-grid {
  display: grid;
  gap: 12px;
}

.press-action-card {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: 22px;
}

.press-action-card strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
}

.press-action-card p {
  color: var(--muted-foreground);
  font-size: 0.91rem;
  line-height: 1.52;
}

.press-reporter-section {
  gap: 18px;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.94));
  box-shadow: var(--shadow-soft);
}

.press-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.press-fact-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 10px;
  min-height: 100%;
  padding: 17px 16px 16px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(26, 37, 54, 0.055);
  text-align: center;
}

.press-fact-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

.press-fact-card strong {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
}

.press-fact-card p {
  max-width: 28ch;
  margin: 0 auto;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.48;
  text-align: center;
}

.press-case-section {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.press-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.press-case-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-case-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-case-image {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--surface-soft);
}

.press-case-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-case-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(18px, 3vw, 26px);
}

.press-case-kicker {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
}

.press-case-copy > strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 950;
  line-height: 1.08;
}

.press-case-line {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 12px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
}

.press-case-line em {
  color: var(--foreground);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.press-case-line span {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.55;
}

.press-angle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.press-angle-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
}

.press-angle-card span,
.press-angle-card small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.press-angle-card h3 {
  font-size: 1.06rem;
  line-height: 1.16;
}

.press-angle-card p {
  color: var(--muted-foreground);
  font-size: 0.91rem;
  line-height: 1.52;
}

.press-angle-card small {
  align-self: end;
  min-height: 28px;
  padding-top: 8px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
  text-transform: none;
}

.press-topic-grid,
.press-copy-grid,
.press-asset-grid,
.press-short-grid {
  display: grid;
  gap: 14px;
}

.press-topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.press-topics-layout {
  display: grid;
  gap: 18px;
}

.press-topics-section > .section-header {
  grid-template-columns: minmax(0, 1fr);
}

.press-topic-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.press-topic-icon {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.78), transparent 32%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.46));
  color: var(--foreground);
  box-shadow: 0 14px 30px rgba(46, 64, 87, 0.1);
}

.press-topic-icon::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.18;
}

.press-topic-icon-field {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), transparent 34%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(11, 105, 183, 0.14));
  color: #2f7f68;
}

.press-topic-icon-care {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(240, 122, 117, 0.18), rgba(185, 79, 73, 0.12));
  color: #b84f49;
}

.press-topic-icon-community {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(102, 154, 214, 0.2), rgba(137, 203, 188, 0.3));
  color: #3f6f9f;
}

.press-topic-icon-studio {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(146, 122, 219, 0.18), rgba(63, 111, 159, 0.12));
  color: #7057b5;
}

.press-topic-icon svg {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
}

.press-topic-card h3 {
  font-size: 1.04rem;
  line-height: 1.16;
}

.press-topic-card p {
  font-size: 0.92rem;
  line-height: 1.55;
}

.press-coverage-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.press-coverage-image {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--surface-soft);
}

.press-coverage-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-coverage-copy {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(22px, 4vw, 34px);
}

.press-coverage-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.06;
}

.press-secondary-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.press-secondary-link {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 26px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-secondary-link:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-card);
}

.press-secondary-link span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.press-secondary-link strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.24;
}

.press-video-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.press-video-record-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.press-video-embed {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.press-video-embed .lazy-embed-overlay {
  justify-content: center;
}

.press-video-record-meta {
  position: absolute;
  inset: 12px 12px auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  pointer-events: none;
}

.press-video-record-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.58);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}

.press-cat-badge-expand {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow: var(--shadow-soft);
}

.press-all-cats-disclosure {
  border: 0;
  background: transparent;
}

.press-all-cats-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 10px clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px);
  cursor: pointer;
  list-style: none;
}

.press-all-cats-disclosure summary::-webkit-details-marker {
  display: none;
}

.press-disclosure-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 14px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.1;
  box-shadow: 0 8px 18px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.press-all-cats-disclosure summary:hover .press-disclosure-action {
  transform: translateY(-1px);
  border-color: rgba(86, 207, 174, 0.38);
  background: rgba(240, 255, 249, 0.96);
}

.press-disclosure-close {
  display: none;
}

.press-all-cats-disclosure[open] .press-disclosure-open {
  display: none;
}

.press-all-cats-disclosure[open] .press-disclosure-close {
  display: inline;
}

.press-cat-badge-expand:has(.press-all-cats-disclosure[open]) .press-cat-badge-grid-preview {
  display: none;
}

.press-all-cats-body {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2vw, 20px) clamp(18px, 3vw, 24px) clamp(22px, 3vw, 28px);
  border-top: 1px solid rgba(46, 64, 87, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16));
}

.press-cat-badge-grid-all {
  padding: 2px 0;
}

.press-cat-badge-grid-preview {
  max-height: 202px;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 24px) 4px;
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.press-cat-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-cat-badge {
  display: inline-flex;
  max-width: 214px;
  min-width: min(100%, 166px);
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  cursor: default;
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.055);
}

.press-cat-badge:hover {
  transform: none;
}

.press-cat-badge-static {
  cursor: default;
}

.press-cat-badge-static:hover {
  transform: none;
}

.press-cat-badge-image {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.13);
}

.press-cat-badge-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-cat-badge > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.press-cat-badge strong,
.press-cat-badge small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.press-cat-badge strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
}

.press-cat-badge small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.press-feature-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.press-feature-cat-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-feature-cat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-feature-cat-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--surface-soft);
}

.press-feature-cat-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-feature-cat-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.press-feature-cat-copy small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.press-feature-cat-copy strong {
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 950;
}

.press-feature-cat-copy span {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.press-short-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.press-short-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-short-card-featured {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    var(--shadow-soft);
}

.press-short-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-short-image {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-soft);
}

.press-short-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-short-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.press-short-copy small,
.press-short-copy span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.press-short-copy strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.18;
}

.press-copy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.press-copy-card {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92));
  box-shadow: var(--shadow-card);
}

.press-copy-card blockquote {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 850;
  line-height: 1.38;
}

.press-asset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.press-asset-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-asset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-asset-card span {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.press-asset-card strong {
  display: block;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.press-asset-card small {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.press-asset-card em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.press-field-photo-asset {
  grid-column: 1 / -1;
}

.press-field-photo-asset summary {
  cursor: pointer;
  list-style: none;
}

.press-field-photo-asset summary::-webkit-details-marker {
  display: none;
}

.press-asset-card em .press-field-photo-open,
.press-asset-card em .press-field-photo-close {
  display: inline;
}

.press-asset-card em .press-field-photo-close {
  display: none;
}

.press-field-photo-asset[open] .press-asset-card em .press-field-photo-open {
  display: none;
}

.press-field-photo-asset[open] .press-asset-card em .press-field-photo-close {
  display: inline;
}

.press-image-asset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.press-image-asset-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 18px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-image-asset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-image-asset-card img {
  object-fit: cover;
}

.press-image-asset-card span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.press-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: var(--shadow-soft);
}

.press-contact-card > div:first-child {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.press-contact-card h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.4rem);
  line-height: 1.08;
}

.press-contact-card .button-row {
  justify-content: flex-end;
}

html[data-theme="dark"] .press-hero-card {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 35%),
    linear-gradient(135deg, rgba(23, 29, 26, 0.96), rgba(27, 34, 29, 0.96));
}

html[data-theme="dark"] .press-page {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28rem),
    linear-gradient(180deg, #111714 0%, #151916 48%, #101411 100%);
}

html[data-theme="dark"] .site-main:has(.press-page) {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28rem),
    linear-gradient(180deg, #111714 0%, #151916 48%, #101411 100%);
}

html[data-theme="dark"] .press-hero-panel,
html[data-theme="dark"] .press-language-dropdown summary,
html[data-theme="dark"] .press-language-dropdown div,
html[data-theme="dark"] .press-language-switch,
html[data-theme="dark"] .press-cat-badge-expand,
html[data-theme="dark"] .press-opener-card,
html[data-theme="dark"] .press-action-card,
html[data-theme="dark"] .press-angle-card,
html[data-theme="dark"] .press-topic-card,
html[data-theme="dark"] .press-coverage-card,
html[data-theme="dark"] .press-video-record-card,
html[data-theme="dark"] .press-reporter-section,
html[data-theme="dark"] .press-fact-card,
html[data-theme="dark"] .press-case-card,
html[data-theme="dark"] .press-secondary-link,
html[data-theme="dark"] .press-cat-badge,
html[data-theme="dark"] .press-feature-cat-card,
html[data-theme="dark"] .press-short-card,
html[data-theme="dark"] .press-copy-card,
html[data-theme="dark"] .press-asset-card,
html[data-theme="dark"] .press-image-asset-card,
html[data-theme="dark"] .press-contact-card {
  border-color: var(--border);
  background: rgba(23, 29, 26, 0.92);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .press-language-switch a.is-pending,
html[data-theme="dark"] .press-language-dropdown a.is-pending,
html[data-theme="dark"] .press-language-dropdown summary.is-loading {
  background: rgba(86, 207, 174, 0.16);
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.24);
}

html[data-theme="dark"] .press-short-card-featured {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(23, 29, 26, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    var(--shadow-card);
}

html[data-theme="dark"] .press-hero-ask {
  border-color: var(--border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

html[data-theme="dark"] .press-all-cats-disclosure {
  background: transparent;
}

html[data-theme="dark"] .press-all-cats-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

html[data-theme="dark"] .press-all-cats-disclosure summary:hover .press-disclosure-action {
  border-color: rgba(86, 207, 174, 0.32);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .press-hero-mark {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .press-disclosure-action {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .press-hero-image,
html[data-theme="dark"] .press-case-image,
html[data-theme="dark"] .press-feature-cat-image,
html[data-theme="dark"] .press-short-image {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .press-hero-facts span,
html[data-theme="dark"] .press-topic-icon,
html[data-theme="dark"] .press-asset-card em {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .press-hero-pitch {
  border-top-color: var(--border);
}

html[data-theme="dark"] .press-hero-pitch li::before {
  background: #56cfae;
}

html[data-theme="dark"] .press-topic-icon {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .press-topic-icon-field {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(93, 168, 132, 0.22), rgba(59, 130, 246, 0.13));
  color: #96d6bc;
}

html[data-theme="dark"] .press-topic-icon-care {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(255, 139, 130, 0.18), rgba(185, 79, 73, 0.12));
  color: #ffb6ad;
}

html[data-theme="dark"] .press-topic-icon-community {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(119, 169, 234, 0.2), rgba(120, 210, 190, 0.13));
  color: #a9cfff;
}

html[data-theme="dark"] .press-topic-icon-studio {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(168, 143, 255, 0.2), rgba(96, 165, 250, 0.1));
  color: #c6b9ff;
}

html[data-theme="dark"] .press-page :where(.eyebrow, .meta-label) {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .press-cat-badge-image {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px var(--border);
}

@media (max-width: 1080px) {
  .press-angle-grid,
  .press-feature-cat-grid,
  .press-fact-grid,
  .press-topic-grid,
  .press-short-grid,
  .press-video-record-grid,
  .press-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-contact-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-contact-card .button-row {
    justify-content: flex-start;
  }

  .press-hero-actions .button {
    flex: 1 1 180px;
  }
}

@media (max-width: 820px) {
  .press-hero-card,
  .press-opener-section,
  .press-coverage-card,
  .press-case-card,
  .press-secondary-coverage,
  .press-video-record-grid,
  .press-action-grid,
  .press-angle-grid,
  .press-fact-grid,
  .press-feature-cat-grid,
  .press-copy-grid,
  .press-topic-grid,
  .press-short-grid,
  .press-asset-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-hero-copy h1 {
    max-width: 100%;
  }

  .press-hero-card {
    gap: 16px;
  }

  .press-language-control {
    justify-self: start;
    margin-bottom: -6px;
  }

  .press-hero-panel {
    align-content: start;
  }

  .press-hero-image {
    min-height: 220px;
  }

  .press-coverage-image {
    aspect-ratio: 4 / 3;
    min-height: 230px;
  }
}

@media (max-width: 520px) {
  .press-page {
    padding-top: 6px;
  }

  .press-page .container {
    width: min(var(--content-max), calc(100% - 20px));
    gap: 14px;
  }

  .press-hero-copy h1 {
    max-width: 100%;
  }

  .press-hero-card,
  .press-opener-card,
  .press-action-card,
  .press-angle-card,
  .press-fact-card,
  .press-topic-card,
  .press-copy-card,
  .press-asset-card,
  .press-contact-card {
    padding: 14px;
  }

  .press-hero-card {
    border-radius: 24px;
  }

  .press-hero-copy {
    gap: 10px;
  }

  .press-hero-copy h1 {
    font-size: clamp(2.18rem, 11.4vw, 2.86rem);
    line-height: 0.98;
  }

  .press-hero-card .hero-lead {
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .press-hero-ask {
    display: none;
  }

  .press-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .press-hero-panel {
    gap: 9px;
    padding: 10px;
    border-radius: 20px;
  }

  .press-hero-image {
    min-height: 0;
    aspect-ratio: 16 / 7;
    border-radius: 18px;
  }

  .press-hero-facts,
  .press-hero-pitch ul {
    display: none;
  }

  .press-hero-pitch {
    padding-top: 0;
    border-top: 0;
  }

  .press-hero-pitch small {
    font-size: 0.6rem;
    line-height: 1.18;
  }

  .press-hero-pitch strong {
    font-size: 0.88rem;
    line-height: 1.22;
  }

  .press-hero-carousel-controls {
    right: 10px;
    bottom: 10px;
  }

  .press-hero-carousel-controls button {
    width: 32px;
    height: 32px;
  }

  .press-hero-carousel-dots {
    bottom: 14px;
    left: 12px;
    max-width: calc(100% - 106px);
  }

  .press-language-control {
    justify-self: stretch;
    margin-bottom: -4px;
  }

  .press-language-switch {
    display: none;
  }

  .press-language-dropdown {
    display: block;
  }

  .press-all-cats-disclosure summary {
    justify-content: stretch;
  }

  .press-disclosure-action {
    width: 100%;
  }

  .press-page:lang(ko) .press-hero-copy h1,
  .press-page:lang(ja) .press-hero-copy h1,
  .press-page:lang(zh) .press-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2.18rem, 10.5vw, 2.9rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .press-page:lang(ko) .section-header h2,
  .press-page:lang(ko) .press-opener-card h2,
  .press-page:lang(ko) .press-contact-card h2,
  .press-page:lang(ja) .section-header h2,
  .press-page:lang(ja) .press-opener-card h2,
  .press-page:lang(ja) .press-contact-card h2,
  .press-page:lang(zh) .section-header h2,
  .press-page:lang(zh) .press-opener-card h2,
  .press-page:lang(zh) .press-contact-card h2 {
    font-size: clamp(1.75rem, 7.4vw, 2.22rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .press-disclosure-action {
    width: 100%;
  }

  .press-page h1,
  .press-page h2,
  .press-page h3,
  .press-page p,
  .press-page strong,
  .press-page span,
  .press-page small,
  .press-page blockquote {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .press-page .button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.18;
  }

  .press-hero-facts span {
    width: 100%;
    white-space: normal;
  }

  .press-section {
    gap: 14px;
  }

  .press-page .section-header {
    gap: 10px;
  }

  .press-page .section-header > div:first-child {
    gap: 6px;
  }

  .press-page .section-header + :where(.press-angle-grid, .press-topics-layout, .press-feature-cat-grid, .press-short-grid, .press-video-record-grid, .press-copy-grid, .press-asset-grid, .press-coverage-card, .press-fact-grid, .press-case-grid) {
    margin-top: 2px;
  }

  .press-coverage-card {
    border-radius: 22px;
  }

  .press-coverage-copy {
    gap: 12px;
    padding: 18px;
  }

  .press-coverage-copy h2 {
    font-size: clamp(1.48rem, 8vw, 2rem);
    line-height: 1.08;
  }

  .press-coverage-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .press-reporter-section {
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
  }

  .press-case-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .press-case-copy {
    padding: 16px;
  }

  .press-case-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .press-cat-badge {
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: 0;
    gap: 7px;
    padding: 5px 8px 5px 5px;
  }

  .press-cat-badge-image {
    width: 36px;
    height: 36px;
  }

  .press-cat-badge strong {
    font-size: 0.78rem;
  }

  .press-cat-badge small {
    font-size: 0.62rem;
  }

  .press-cat-badge-grid-preview {
    max-height: 164px;
    padding-top: 16px;
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  }

  .press-all-cats-body {
    padding-inline: 14px;
  }

  .press-feature-cat-card,
  .press-short-card {
    padding: 0;
    border-radius: 20px;
  }

  .press-feature-cat-copy,
  .press-short-copy {
    padding: 13px;
  }

  .press-feature-cat-copy span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .press-short-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .press-short-image {
    aspect-ratio: 3 / 4;
  }

  .press-short-copy {
    gap: 5px;
  }

  .press-short-copy strong {
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .press-short-copy small,
  .press-short-copy span {
    font-size: 0.66rem;
  }

  .lazy-embed-overlay {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  .lazy-embed-play {
    min-height: 44px;
    padding-right: 14px;
  }

  .lazy-embed-play-icon {
    width: 30px;
    height: 30px;
  }

  .lazy-embed-link {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 0.74rem;
  }

  .press-copy-card blockquote {
    font-size: 0.98rem;
    line-height: 1.42;
  }

  .press-asset-card {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 14px;
  }

  .press-asset-card em {
    align-self: flex-start;
  }

  .press-image-asset-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-contact-card {
    border-radius: 24px;
  }

  .press-contact-card .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .press-contact-card .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .press-cat-badge {
    flex-basis: 100%;
    max-width: 100%;
  }

  .press-short-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* YongsanCats Studio admin palette: production-room blue, rescue teal, brand yellow anchors. */
body:has(.admin-studio-page) {
  --foreground: #0f172a;
  --muted-foreground: #5d6b7d;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --surface: #f8fbff;
  --surface-soft: #eef4fb;
  --surface-muted: #f4f8fc;
  --accent: #2765b8;
  --accent-strong: #1d4ed8;
  --accent-care: #0f766e;
  --border: rgba(15, 23, 42, 0.1);
  --border-soft: rgba(100, 116, 139, 0.16);
  --border-strong: rgba(39, 101, 184, 0.24);
  --studio-admin-text: #0f172a;
  --studio-admin-muted: #5d6b7d;
  --studio-admin-surface: rgba(255, 255, 255, 0.94);
  --studio-admin-surface-strong: #ffffff;
  --studio-admin-surface-soft: rgba(248, 250, 252, 0.88);
  --studio-admin-card: rgba(255, 255, 255, 0.72);
  --studio-admin-card-soft: rgba(15, 23, 42, 0.045);
  --studio-admin-control: rgba(255, 255, 255, 0.86);
  --studio-admin-border: rgba(15, 23, 42, 0.1);
  --studio-admin-border-soft: rgba(100, 116, 139, 0.16);
  --studio-admin-brand: #ffc800;
  --studio-admin-brand-deep: #e7ad00;
  --studio-admin-brand-soft: rgba(255, 200, 0, 0.15);
  --studio-admin-brand-border: rgba(255, 200, 0, 0.5);
  --studio-admin-blue: #2765b8;
  --studio-admin-blue-strong: #1d4ed8;
  --studio-admin-blue-soft: rgba(39, 101, 184, 0.1);
  --studio-admin-blue-border: rgba(39, 101, 184, 0.26);
  --studio-admin-care: #0f766e;
  --studio-admin-care-soft: rgba(15, 118, 110, 0.12);
  --studio-admin-care-border: rgba(15, 118, 110, 0.32);
  --studio-admin-danger: #b42318;
  --studio-admin-danger-soft: rgba(180, 35, 24, 0.08);
  --studio-admin-danger-border: rgba(180, 35, 24, 0.3);
  --studio-admin-secondary-bg: #0f172a;
  --studio-admin-secondary-text: #f8fafc;
  --studio-admin-secondary-hover: #1e293b;
  --studio-admin-shadow: 0 14px 36px rgba(15, 23, 42, 0.065);
  --studio-admin-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.045);
  background:
    radial-gradient(circle at 8% 0%, rgba(39, 101, 184, 0.1), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(15, 118, 110, 0.08), transparent 26%),
    radial-gradient(circle at 52% 0%, rgba(255, 200, 0, 0.1), transparent 22%),
    linear-gradient(180deg, #f7fafc 0%, #eef3f8 48%, #e8eef6 100%);
}

html[data-theme="dark"] body:has(.admin-studio-page),
html[data-theme="dark"] body:has(.site-main-shell-admin-studio) {
  --foreground: #eef6ff;
  --muted-foreground: #9fb1c7;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --surface: #101923;
  --surface-soft: #142131;
  --surface-muted: #111d27;
  --accent: #93c5fd;
  --accent-strong: #bfdbfe;
  --accent-care: #5eead4;
  --border: rgba(148, 163, 184, 0.18);
  --border-soft: rgba(148, 163, 184, 0.12);
  --border-strong: rgba(148, 163, 184, 0.26);
  --studio-admin-text: #eef6ff;
  --studio-admin-muted: #9fb1c7;
  --studio-admin-surface: rgba(16, 25, 35, 0.94);
  --studio-admin-surface-strong: #121d29;
  --studio-admin-surface-soft: rgba(20, 32, 46, 0.78);
  --studio-admin-card: rgba(255, 255, 255, 0.06);
  --studio-admin-card-soft: rgba(255, 255, 255, 0.045);
  --studio-admin-control: rgba(2, 6, 23, 0.44);
  --studio-admin-border: rgba(148, 163, 184, 0.18);
  --studio-admin-border-soft: rgba(148, 163, 184, 0.12);
  --studio-admin-brand: #ffc800;
  --studio-admin-brand-deep: #ffd84d;
  --studio-admin-brand-soft: rgba(255, 200, 0, 0.13);
  --studio-admin-brand-border: rgba(255, 200, 0, 0.44);
  --studio-admin-blue: #93c5fd;
  --studio-admin-blue-strong: #bfdbfe;
  --studio-admin-blue-soft: rgba(59, 130, 246, 0.11);
  --studio-admin-blue-border: rgba(147, 197, 253, 0.24);
  --studio-admin-care: #5eead4;
  --studio-admin-care-soft: rgba(20, 184, 166, 0.12);
  --studio-admin-care-border: rgba(94, 234, 212, 0.24);
  --studio-admin-danger: #fca5a5;
  --studio-admin-danger-soft: rgba(248, 113, 113, 0.11);
  --studio-admin-danger-border: rgba(248, 113, 113, 0.28);
  --studio-admin-secondary-bg: rgba(255, 255, 255, 0.08);
  --studio-admin-secondary-text: #e2e8f0;
  --studio-admin-secondary-hover: rgba(147, 197, 253, 0.14);
  --studio-admin-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  --studio-admin-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(147, 197, 253, 0.12), transparent 31%),
    radial-gradient(circle at 90% 8%, rgba(94, 234, 212, 0.09), transparent 27%),
    radial-gradient(circle at 50% 0%, rgba(255, 200, 0, 0.08), transparent 24%),
    linear-gradient(180deg, #07111a 0%, #0d1724 48%, #101712 100%);
}

body:has(.admin-studio-page) .site-main,
body:has(.admin-studio-page) .admin-studio-page {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(.eyebrow, .meta-label) {
  color: var(--studio-admin-blue-strong);
}

body:has(.admin-studio-page) :is(
  .admin-studio-hero,
  .admin-studio-page-header,
  .admin-studio-builder-header,
  .admin-studio-generation-card,
  .admin-studio-guest-console,
  .admin-studio-mode-nav,
  .admin-studio-production-rail,
  .admin-studio-source-builder,
  .admin-studio-character-upload,
  .admin-studio-character-url-form,
  .admin-studio-character-create-form,
  .admin-studio-character-create-preview,
  .admin-studio-character-initial-sheet,
  .admin-studio-character-season-panel,
  .admin-studio-character-reference-panel,
  .studio-minis-command-center,
  .studio-minis-builder,
  .studio-minis-daily-queue,
  .studio-minis-output,
  .studio-minis-panel,
  .empty-state
) {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow);
}

body:has(.admin-studio-page) :is(
  .admin-studio-stats div,
  .admin-studio-guest-stats div,
  .admin-studio-filter-chip,
  .admin-studio-pipeline-step-chip,
  .admin-studio-production-totals span,
  .admin-studio-production-season-list a,
  .admin-studio-production-episode-list a,
  .admin-studio-production-source div,
  .admin-studio-production-rulebook,
  .admin-studio-lyrics-panel,
  .admin-studio-lyrics-copy-pack,
  .admin-studio-production-board-toolbar,
  .admin-studio-production-shot,
  .admin-studio-production-scene,
  .admin-studio-production-prompts details,
  .admin-studio-production-shot-prompts details,
  .admin-studio-production-prompt-editor,
  .admin-studio-character-list a,
  .admin-studio-character-filters a,
  .admin-studio-character-preview,
  .admin-studio-character-asset-card,
  .admin-studio-character-archive-details,
  .admin-studio-character-advanced,
  .admin-studio-character-settings,
  .admin-studio-character-upload-advanced,
  .admin-studio-character-check,
  .admin-studio-character-file-picker label,
  .admin-studio-character-upload-frame,
  .admin-studio-character-asset-frame,
  .admin-studio-character-file-placeholder,
  .admin-studio-character-photo-block,
  .admin-studio-character-create-disclosure,
  .admin-studio-character-create-season,
  .admin-studio-character-create-status,
  .admin-studio-character-create-analysis,
  .admin-studio-character-create-result,
  .admin-studio-turnaround-review,
  .admin-studio-music-empty,
  .admin-studio-review-brief,
  .admin-studio-review-note,
  .admin-studio-generation-panel,
  .admin-studio-generation-debug,
  .admin-studio-mini-profile-links a,
  .admin-studio-mini-idea-list article,
  .admin-studio-mini-profile-editor,
  .studio-minis-profile-rule-note,
  .studio-minis-profile-rule-section
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) :is(
  .admin-studio-review-kpis div,
  .admin-studio-mini-dl div,
  .admin-studio-production-rulebook-grid article,
  .admin-studio-production-style-grid div,
  .admin-studio-production-style-note,
  .admin-studio-lyrics-track,
  .admin-studio-lyrics-line,
  .admin-studio-lyrics-translation-grid article,
  .admin-studio-production-scene-tags span,
  .admin-studio-production-shot-media img,
  .admin-studio-production-shot-placeholder,
  .admin-studio-source-builder-card,
  .admin-studio-source-builder-badges span,
  .admin-studio-character-season-card,
  .admin-studio-character-role-picker button,
  .admin-studio-character-backgrounds button,
  .admin-studio-character-segment,
  .admin-studio-character-quick-note,
  .admin-studio-character-production-flow > div,
  .admin-studio-readiness,
  .admin-studio-delivery-plan,
  .admin-studio-pose-tile,
  .admin-studio-gate,
  .admin-studio-prompt-list details
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-page :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  select,
  textarea
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-control);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-page :is(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--studio-admin-muted) 72%, transparent);
}

body:has(.admin-studio-page) :is(
  .admin-studio-production-season-list a.is-active,
  .admin-studio-production-episode-list a.is-active,
  .admin-studio-character-list a.is-active,
  .admin-studio-character-filters a.is-active,
  .admin-studio-mode-link.is-active,
  .admin-section-link.is-active,
  .admin-studio-character-role-picker button.is-active,
  .admin-studio-character-backgrounds button.is-active
) {
  border-color: var(--studio-admin-brand-border);
  background:
    linear-gradient(90deg, var(--studio-admin-brand-soft), transparent 68%),
    var(--studio-admin-card);
  box-shadow:
    inset 3px 0 0 var(--studio-admin-brand),
    var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) :is(
  .admin-studio-filter-chip.is-active,
  .admin-studio-pipeline-step-chip.is-active
) {
  border-color: var(--studio-admin-brand-border);
  background: var(--studio-admin-brand-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--studio-admin-brand) 20%, transparent);
}

body:has(.admin-studio-page) .admin-studio-pipeline-step-chip.is-active::before {
  background: var(--studio-admin-brand);
}

body:has(.admin-studio-page) .admin-studio-pipeline-step-chip.is-active strong {
  background: var(--studio-admin-brand);
  color: #17120a;
}

body:has(.admin-studio-page) :is(
  .admin-studio-lyrics-track.is-source,
  .admin-studio-source-builder-card.is-current,
  .admin-studio-source-builder-card.is-needed
) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-blue-soft);
}

body:has(.admin-studio-page) :is(
  .admin-studio-review-brief.is-ready,
  .admin-studio-publish-map-grid article.is-live,
  .admin-studio-character-production-flow > div.is-ready,
  .admin-studio-readiness.is-ready,
  .admin-studio-gate.is-review
) {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

body:has(.admin-studio-page) :is(
  .admin-studio-review-brief.is-blocked,
  .admin-studio-readiness.is-blocked,
  .studio-minis-profile-rule-warning,
  .admin-studio-character-create-result.is-attention
) {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-soft);
}

body:has(.admin-studio-page) .button-primary {
  border-color: var(--studio-admin-brand-border);
  background: linear-gradient(180deg, #ffd94a 0%, var(--studio-admin-brand) 100%);
  color: #17120a;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--studio-admin-brand) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body:has(.admin-studio-page) .button-primary:hover,
body:has(.admin-studio-page) .button-primary:focus-visible {
  background: linear-gradient(180deg, #ffe16a 0%, var(--studio-admin-brand-deep) 100%);
}

body:has(.admin-studio-page) .button-secondary {
  border-color: transparent;
  background: var(--studio-admin-secondary-bg);
  color: var(--studio-admin-secondary-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) .button-secondary:hover,
body:has(.admin-studio-page) .button-secondary:focus-visible {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-secondary-hover);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .button-ghost {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .inline-note {
  border: 1px solid var(--studio-admin-blue-border);
  background: var(--studio-admin-blue-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console {
  border-right-color: var(--studio-admin-border);
  background:
    radial-gradient(circle at 16% 0%, var(--studio-admin-blue-soft), transparent 30%),
    radial-gradient(circle at 88% 8%, var(--studio-admin-care-soft), transparent 26%),
    var(--studio-admin-surface);
}

body:has(.admin-studio-page) .sidebar-studio-mission {
  border-color: var(--studio-admin-border-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .sidebar-studio-mission span {
  color: var(--studio-admin-blue);
}

body:has(.admin-studio-page) .sidebar-studio-brand {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-icon {
  border-color: var(--studio-admin-border-soft);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-secondary .sidebar-link-icon {
  color: var(--studio-admin-blue);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: var(--studio-admin-border-soft);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 3px 0 0 var(--studio-link-accent);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  color: var(--studio-link-accent);
  background: var(--studio-link-accent-soft);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-mission {
  border-color: var(--studio-admin-border-soft);
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  color: var(--studio-link-accent);
}

@media (max-width: 760px) {
  .studio-minis-instagram-status-grid,
  .studio-minis-instagram-checklist,
  .studio-minis-publish-workbench,
  .studio-minis-publish-form,
  .studio-minis-publish-list article {
    grid-template-columns: 1fr;
  }

  .studio-minis-publish-video {
    max-width: 210px;
  }

  .studio-minis-publish-actions {
    align-items: stretch;
  }

  .studio-minis-publish-actions form,
  .studio-minis-publish-actions .admin-studio-action-submit,
  .studio-minis-publish-actions button {
    width: 100%;
  }
}

.admin-storyboard-page {
  gap: 14px;
}

.admin-story-bible-page {
  gap: 14px;
}

.admin-story-bible-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
  gap: 18px;
  align-items: end;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 200, 0, 0.2), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.065);
}

.admin-story-bible-hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.98;
}

.admin-story-bible-hero p {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(15, 23, 42, 0.66);
}

.admin-story-bible-flow {
  display: grid;
  gap: 8px;
}

.admin-story-bible-flow a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: inherit;
  text-decoration: none;
}

.admin-story-bible-flow a:hover {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}

.admin-story-bible-flow span {
  grid-row: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-story-bible-flow strong,
.admin-story-bible-flow small {
  min-width: 0;
}

.admin-story-bible-flow small {
  color: rgba(15, 23, 42, 0.58);
  font-weight: 750;
}

.admin-story-bible-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.admin-story-bible-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.055);
}

.admin-story-bible-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-story-bible-panel-head h2,
.admin-story-bible-rule-card h3,
.admin-story-bible-character-grid strong,
.admin-story-bible-episode-grid strong {
  margin: 0;
}

.admin-story-bible-panel-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.68);
  font-size: 0.75rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-story-bible-panel p {
  margin: 0;
  color: rgba(15, 23, 42, 0.66);
}

.admin-story-bible-rule-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-story-bible-rule-list span {
  display: inline-flex;
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.9);
  color: #0f766e;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-story-bible-ladder {
  display: grid;
  gap: 8px;
}

.admin-story-bible-ladder div,
.admin-story-bible-meta-grid div,
.admin-story-bible-character-grid article,
.admin-story-bible-episode-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.78);
}

.admin-story-bible-ladder strong {
  display: block;
  margin-bottom: 4px;
}

.admin-story-bible-season-main {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
  gap: 14px;
}

.admin-story-bible-season-copy {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-story-bible-core-line {
  color: rgba(15, 23, 42, 0.9) !important;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 900;
  line-height: 1.12;
}

.admin-story-bible-meta-grid {
  display: grid;
  gap: 8px;
}

.admin-story-bible-meta-grid span,
.admin-story-bible-character-grid span,
.admin-story-bible-episode-grid span,
.admin-story-bible-episode-grid small {
  display: block;
  color: rgba(15, 23, 42, 0.54);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-story-bible-meta-grid strong {
  display: block;
  margin-top: 5px;
  color: rgba(15, 23, 42, 0.82);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-story-bible-rule-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.72);
}

.admin-story-bible-rule-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(15, 23, 42, 0.68);
}

.admin-story-bible-character-grid,
.admin-story-bible-episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-story-bible-character-grid article,
.admin-story-bible-episode-grid article {
  display: grid;
  gap: 8px;
}

.admin-story-bible-character-grid strong,
.admin-story-bible-episode-grid strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

.admin-story-bible-episode-grid article.is-next {
  border-color: rgba(20, 184, 166, 0.22);
  background: rgba(240, 253, 250, 0.82);
}

.admin-story-bible-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.admin-storyboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 200, 0, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.065);
}

.admin-storyboard-hero h1 {
  margin: 0;
  max-width: 840px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
}

.admin-storyboard-hero p {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(15, 23, 42, 0.66);
}

.admin-storyboard-hero-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 440px;
}

.admin-storyboard-level-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(92px, 1fr));
  gap: 7px;
  min-width: min(100%, 360px);
}

.admin-storyboard-review-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 8px;
  min-width: min(100%, 460px);
}

.admin-storyboard-level-map a,
.admin-storyboard-level-map > span,
.admin-storyboard-review-map > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  text-decoration: none;
}

.admin-storyboard-level-map a:hover,
.admin-storyboard-level-map > span.is-active,
.admin-storyboard-review-map > div.is-current {
  border-color: rgba(20, 184, 166, 0.22);
  background: rgba(240, 253, 250, 0.92);
}

.admin-storyboard-review-map > div.is-done {
  border-color: rgba(20, 116, 86, 0.22);
  background: rgba(20, 184, 166, 0.1);
}

.admin-storyboard-level-map span span,
.admin-storyboard-level-map a span,
.admin-storyboard-review-map span {
  color: rgba(15, 23, 42, 0.52);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-level-map strong,
.admin-storyboard-review-map strong {
  overflow-wrap: anywhere;
  font-size: 0.82rem;
  line-height: 1.1;
}

.admin-storyboard-hero-steps span,
.admin-storyboard-chip-list span,
.admin-storyboard-packet-link span,
.admin-storyboard-hook-card > div > span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.admin-storyboard-hero-steps span.is-done {
  border-color: rgba(20, 116, 86, 0.22);
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.admin-storyboard-decision {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.05);
}

.admin-storyboard-decision-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.admin-storyboard-decision-head h2,
.admin-storyboard-decision-head p {
  margin: 0;
}

.admin-storyboard-decision-head p {
  max-width: 620px;
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.45;
}

.admin-storyboard-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-storyboard-decision-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-decision-card.is-primary {
  border-color: rgba(20, 184, 166, 0.26);
  background: rgba(240, 253, 250, 0.86);
}

.admin-storyboard-decision-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-storyboard-decision-card-head span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: rgba(15, 23, 42, 0.64);
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-storyboard-decision-card.is-primary .admin-storyboard-decision-card-head span {
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.admin-storyboard-decision-card h3,
.admin-storyboard-decision-card p,
.admin-storyboard-decision-card strong {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-decision-card p {
  color: rgba(15, 23, 42, 0.62);
  line-height: 1.45;
}

.admin-storyboard-decision-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-storyboard-decision-meta div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.84);
}

.admin-storyboard-decision-meta span {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-decision-card .button {
  width: fit-content;
}

.admin-storyboard-copilot-home {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}

.admin-storyboard-copilot-main,
.admin-storyboard-season-projects {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--studio-admin-border, rgba(15, 23, 42, 0.1));
  border-radius: 8px;
  background: var(--studio-admin-surface, rgba(255, 255, 255, 0.92));
  box-shadow: var(--studio-admin-shadow-soft, 0 14px 40px rgba(15, 23, 42, 0.05));
}

.admin-storyboard-copilot-main {
  align-content: space-between;
  min-height: 330px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    radial-gradient(circle at bottom left, rgba(39, 101, 184, 0.12), transparent 34%),
    var(--studio-admin-surface, rgba(255, 255, 255, 0.92));
}

.admin-storyboard-copilot-main h2,
.admin-storyboard-copilot-main p,
.admin-storyboard-season-projects-head span,
.admin-storyboard-season-projects-head strong {
  margin: 0;
}

.admin-storyboard-copilot-main h2 {
  max-width: 12ch;
  color: var(--studio-admin-text, #0f172a);
  font-size: clamp(2rem, 4vw, 4.4rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
}

.admin-storyboard-copilot-create {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-storyboard-copilot-create textarea,
.admin-storyboard-copilot-create input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--studio-admin-border-soft, rgba(100, 116, 139, 0.16));
  border-radius: 8px;
  background: var(--studio-admin-control, rgba(255, 255, 255, 0.86));
  color: var(--studio-admin-text, #0f172a);
  font: inherit;
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.admin-storyboard-copilot-create textarea {
  min-height: 160px;
  resize: vertical;
  padding: 15px;
  font-size: 1rem;
  line-height: 1.5;
}

.admin-storyboard-copilot-create input {
  min-height: 42px;
  padding: 0 13px;
}

.admin-storyboard-copilot-create textarea:focus,
.admin-storyboard-copilot-create input:focus {
  border-color: var(--studio-admin-brand-border, rgba(255, 200, 0, 0.5));
  box-shadow: 0 0 0 3px var(--studio-admin-brand-soft, rgba(255, 200, 0, 0.15));
}

.admin-storyboard-copilot-create > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
}

.admin-storyboard-copilot-create .button {
  min-height: 42px;
  white-space: nowrap;
}

.admin-storyboard-season-projects {
  align-content: start;
  min-height: 330px;
}

.admin-storyboard-season-projects-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-storyboard-season-projects-head > div {
  display: grid;
  gap: 2px;
}

.admin-storyboard-season-projects-head span {
  color: var(--studio-admin-muted, rgba(15, 23, 42, 0.58));
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-storyboard-season-projects-head strong {
  color: var(--studio-admin-text, #0f172a);
  font-size: 1.1rem;
  line-height: 1.1;
}

.admin-storyboard-season-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.admin-storyboard-season-project-grid > a {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 128px;
  padding: 10px;
  border: 1px solid var(--studio-admin-border-soft, rgba(100, 116, 139, 0.16));
  border-radius: 8px;
  background: var(--studio-admin-card, rgba(255, 255, 255, 0.72));
  color: var(--studio-admin-text, #0f172a);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.admin-storyboard-season-project-grid > a:is(:hover, :focus-visible),
.admin-storyboard-season-project-grid > a.is-selected {
  border-color: var(--studio-admin-brand-border, rgba(255, 200, 0, 0.5));
  background: var(--studio-admin-surface-soft, rgba(248, 250, 252, 0.88));
  transform: translateY(-1px);
}

.admin-storyboard-season-project-grid > a > div {
  display: grid;
  width: 82px;
  aspect-ratio: 3 / 4;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--studio-admin-border-soft, rgba(100, 116, 139, 0.16));
  border-radius: 7px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 200, 0, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(39, 101, 184, 0.16), rgba(15, 118, 110, 0.1));
  color: var(--studio-admin-blue-strong, #1d4ed8);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
}

.admin-storyboard-season-project-grid > a > div.has-image {
  background: rgba(15, 23, 42, 0.08);
}

.admin-storyboard-season-project-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.admin-storyboard-season-project-grid section {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

.admin-storyboard-season-project-grid span,
.admin-storyboard-season-project-grid strong,
.admin-storyboard-season-project-grid p,
.admin-storyboard-season-project-grid small,
.admin-storyboard-season-project-grid em {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-storyboard-season-project-grid span {
  color: var(--studio-admin-muted, rgba(15, 23, 42, 0.58));
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-storyboard-season-project-grid strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1.12;
}

.admin-storyboard-season-project-grid p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--studio-admin-muted, rgba(15, 23, 42, 0.62));
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-storyboard-season-project-grid small {
  color: var(--studio-admin-muted, rgba(15, 23, 42, 0.58));
  font-size: 0.7rem;
  font-weight: 780;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-storyboard-season-project-grid em {
  color: var(--studio-admin-care, #0f766e);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-storyboard-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.35fr);
  gap: 14px;
  align-items: start;
}

.admin-storyboard-sidebar,
.admin-storyboard-workspace {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.admin-storyboard-sidebar {
  position: sticky;
  top: 18px;
}

.admin-storyboard-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.055);
}

.admin-storyboard-advanced-pipeline {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

.admin-storyboard-advanced-pipeline > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.admin-storyboard-advanced-pipeline > summary::-webkit-details-marker {
  display: none;
}

.admin-storyboard-advanced-pipeline > summary h2,
.admin-storyboard-advanced-pipeline > summary p,
.admin-storyboard-advanced-pipeline > summary small {
  margin: 0;
}

.admin-storyboard-advanced-pipeline > summary small {
  color: rgba(244, 246, 248, 0.58);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.admin-storyboard-advanced-pipeline > summary > span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-advanced-pipeline-body {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.admin-storyboard-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-storyboard-panel-head h2,
.admin-storyboard-story-copy h3,
.admin-storyboard-binding-title-row h3,
.admin-storyboard-hook-card h3 {
  margin: 0;
}

.admin-storyboard-master-card {
  border-color: rgba(20, 184, 166, 0.18);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.84), rgba(255, 255, 255, 0.94));
}

.admin-storyboard-master-lede {
  max-width: 760px;
  margin: 6px 0 0;
  color: rgba(15, 23, 42, 0.64);
}

.admin-storyboard-master-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-master-grid section {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.admin-storyboard-master-grid section.is-current {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(255, 251, 235, 0.94);
}

.admin-storyboard-master-grid section.is-done {
  border-color: rgba(20, 116, 86, 0.22);
  background: rgba(20, 184, 166, 0.1);
}

.admin-storyboard-master-grid section.is-blocked {
  border-color: rgba(220, 38, 38, 0.18);
  background: rgba(254, 242, 242, 0.82);
}

.admin-storyboard-master-grid span {
  color: rgba(15, 23, 42, 0.52);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-master-grid strong,
.admin-storyboard-master-grid p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-master-grid p {
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-storyboard-master-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-storyboard-master-chip-list span {
  padding: 6px 9px;
  border: 1px solid rgba(220, 38, 38, 0.14);
  border-radius: 999px;
  background: rgba(254, 242, 242, 0.86);
  color: #991b1b;
  font-size: 0.74rem;
  font-weight: 900;
}

.admin-storyboard-master-details {
  background: rgba(255, 255, 255, 0.64);
}

.admin-storyboard-intake-card {
  padding: 0;
  overflow: hidden;
}

.admin-storyboard-intake-card[open] {
  padding-bottom: clamp(14px, 2vw, 20px);
}

.admin-storyboard-intake-summary {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(14px, 2vw, 20px);
  cursor: pointer;
  list-style: none;
}

.admin-storyboard-intake-summary::-webkit-details-marker {
  display: none;
}

.admin-storyboard-intake-summary h2,
.admin-storyboard-intake-summary p,
.admin-storyboard-intake-summary small {
  margin: 0;
}

.admin-storyboard-intake-summary small {
  display: block;
  margin-top: 5px;
  color: rgba(15, 23, 42, 0.58);
  line-height: 1.4;
}

.admin-storyboard-intake-summary > span {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-storyboard-intake-form {
  padding: 0 clamp(14px, 2vw, 20px);
}

.admin-storyboard-intake-callout {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.82);
}

.admin-storyboard-intake-callout strong,
.admin-storyboard-intake-callout span {
  min-width: 0;
}

.admin-storyboard-intake-callout span {
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-storyboard-intake-advanced {
  background: rgba(248, 250, 252, 0.7);
}

.admin-storyboard-legacy-create {
  padding: 0;
  overflow: hidden;
}

.admin-storyboard-legacy-create[open] {
  padding-bottom: clamp(14px, 2vw, 20px);
}

.admin-storyboard-legacy-create-form {
  padding: 0 clamp(14px, 2vw, 20px);
}

.admin-storyboard-packet-list {
  display: grid;
  gap: 8px;
  max-height: min(48vh, 520px);
  overflow: auto;
  padding-right: 3px;
}

.admin-storyboard-packet-link {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.82);
  color: inherit;
  text-decoration: none;
}

.admin-storyboard-packet-link:hover,
.admin-storyboard-packet-link.is-active {
  border-color: rgba(15, 23, 42, 0.17);
  background: #ffffff;
}

.admin-storyboard-packet-link strong,
.admin-storyboard-packet-link small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-packet-link small,
.admin-storyboard-result-summary span,
.admin-storyboard-meta-grid span,
.admin-storyboard-empty {
  color: rgba(15, 23, 42, 0.58);
}

.admin-storyboard-create-form textarea,
.admin-storyboard-create-form input,
.admin-storyboard-create-form select {
  border-radius: 6px;
}

.admin-storyboard-create-form .field-label small {
  display: block;
  margin-top: 6px;
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
}

.admin-storyboard-form-note {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(14, 165, 233, 0.18);
  border-radius: 8px;
  background: rgba(240, 249, 255, 0.78);
  color: rgba(12, 74, 110, 0.92);
  font-size: 0.86rem;
  line-height: 1.45;
}

.admin-storyboard-create-form {
  gap: 16px;
}

.admin-storyboard-form-note strong {
  color: rgba(7, 89, 133, 0.98);
}

.admin-storyboard-form-grid,
.admin-storyboard-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.admin-storyboard-advanced {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.72);
}

.admin-storyboard-advanced summary {
  cursor: pointer;
  font-weight: 900;
}

.admin-storyboard-selected {
  border-color: rgba(15, 23, 42, 0.11);
}

.admin-storyboard-run-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-run-status > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.admin-storyboard-run-status > div.is-live {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(240, 253, 250, 0.9);
}

.admin-storyboard-run-status > div.is-warning {
  border-color: rgba(217, 119, 6, 0.22);
  background: rgba(255, 251, 235, 0.94);
}

.admin-storyboard-run-status span,
.admin-storyboard-run-status strong,
.admin-storyboard-run-status p {
  min-width: 0;
  margin: 0;
}

.admin-storyboard-run-status span {
  color: rgba(15, 23, 42, 0.52);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-run-status strong {
  font-size: 1.05rem;
}

.admin-storyboard-run-status p {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(15, 23, 42, 0.62);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.admin-storyboard-next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.9)),
    radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 40%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.07);
}

.admin-storyboard-next-action > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-storyboard-next-action span,
.admin-storyboard-next-action strong,
.admin-storyboard-next-action p {
  margin: 0;
}

.admin-storyboard-next-action span {
  color: #0f766e;
  font-size: 0.74rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-next-action strong {
  font-size: 1.08rem;
}

.admin-storyboard-next-action p {
  color: rgba(15, 23, 42, 0.62);
}

.admin-storyboard-next-action-control {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}

.admin-storyboard-operator-guide {
  border-color: rgba(20, 184, 166, 0.22);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.92), rgba(255, 255, 255, 0.95));
}

.admin-storyboard-operator-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-operator-steps > div {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
}

.admin-storyboard-operator-steps > div.is-done {
  border-color: rgba(20, 184, 166, 0.22);
}

.admin-storyboard-operator-steps > div.is-current {
  border-color: rgba(217, 119, 6, 0.28);
  background: rgba(255, 251, 235, 0.94);
}

.admin-storyboard-operator-steps span {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.74rem;
  font-weight: 950;
}

.admin-storyboard-operator-steps .is-done span {
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.admin-storyboard-operator-steps .is-current span {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.admin-storyboard-operator-steps strong,
.admin-storyboard-operator-steps p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-operator-steps p {
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.82rem;
  line-height: 1.45;
}

.admin-storyboard-operator-blockers,
.admin-storyboard-review-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.9);
}

.admin-storyboard-operator-blockers strong,
.admin-storyboard-operator-blockers span,
.admin-storyboard-review-guide strong,
.admin-storyboard-review-guide p {
  margin: 0;
}

.admin-storyboard-operator-blockers strong,
.admin-storyboard-review-guide strong {
  font-size: 0.82rem;
}

.admin-storyboard-operator-blockers span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-storyboard-review-guide {
  display: grid;
  gap: 4px;
}

.admin-storyboard-review-guide p {
  color: rgba(15, 23, 42, 0.64);
  line-height: 1.45;
}

.admin-storyboard-auto-refresh {
  position: sticky;
  z-index: 8;
  top: 8px;
  width: fit-content;
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.94);
  color: #1d4ed8;
  font-size: 0.76rem;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.admin-storyboard-edit-panel {
  gap: 12px;
}

.admin-storyboard-edit-panel > summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 950;
  list-style: none;
}

.admin-storyboard-edit-panel > summary::-webkit-details-marker {
  display: none;
}

.admin-storyboard-edit-panel > summary small {
  color: rgba(15, 23, 42, 0.55);
  font-weight: 850;
}

.admin-storyboard-edit-panel[open] > summary {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.admin-storyboard-version-list {
  display: grid;
  gap: 8px;
}

.admin-storyboard-version-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.76);
}

.admin-storyboard-version-list span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(15, 23, 42, 0.7);
  font-weight: 800;
}

.admin-storyboard-version-list small {
  color: rgba(15, 23, 42, 0.52);
  font-weight: 800;
  white-space: nowrap;
}

.admin-storyboard-meta-grid div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-meta-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-story-copy {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.045);
}

.admin-storyboard-story-copy p {
  margin: 0;
  white-space: pre-wrap;
}

.admin-storyboard-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-storyboard-chip-list span.is-warning {
  border-color: rgba(180, 83, 9, 0.2);
  background: rgba(251, 191, 36, 0.14);
  color: #92400e;
}

.admin-storyboard-binding-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.82);
}

.admin-storyboard-binding-intro p {
  margin: 5px 0 0;
  color: rgba(15, 23, 42, 0.62);
}

.admin-storyboard-binding-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-binding-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-binding-card.is-blocked {
  border-color: rgba(190, 18, 60, 0.18);
  background: linear-gradient(180deg, rgba(255, 241, 242, 0.78), rgba(248, 250, 252, 0.88));
}

.admin-storyboard-binding-card.is-current {
  border-color: rgba(180, 83, 9, 0.2);
  background: linear-gradient(180deg, rgba(255, 251, 235, 0.8), rgba(248, 250, 252, 0.88));
}

.admin-storyboard-binding-card.is-needed {
  border-color: rgba(39, 101, 184, 0.16);
  background: linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(248, 250, 252, 0.88));
}

.admin-storyboard-binding-card-main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.admin-storyboard-binding-avatar {
  overflow: hidden;
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.13), rgba(251, 191, 36, 0.18));
  color: rgba(15, 23, 42, 0.74);
  font-weight: 950;
}

.admin-storyboard-binding-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-storyboard-binding-title-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.admin-storyboard-binding-title-row h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-binding-title-row span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.11);
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-ready {
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: rgba(15, 118, 110, 0.08);
  color: #0f766e;
}

.admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-current {
  border: 1px solid rgba(180, 83, 9, 0.18);
  background: rgba(251, 191, 36, 0.12);
  color: #92400e;
}

.admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-needed {
  border: 1px solid rgba(39, 101, 184, 0.16);
  background: rgba(39, 101, 184, 0.08);
  color: #2765b8;
}

.admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-blocked {
  border: 1px solid rgba(190, 18, 60, 0.16);
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
}

.admin-storyboard-binding-card p,
.admin-storyboard-binding-card small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(15, 23, 42, 0.62);
}

.admin-storyboard-binding-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-storyboard-binding-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-storyboard-binding-card dt {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-storyboard-binding-card dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.admin-storyboard-binding-source-grid {
  display: grid;
  grid-template-columns: 74px repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  align-items: stretch;
  min-width: 0;
}

.admin-storyboard-binding-source-thumb {
  overflow: hidden;
  display: grid;
  min-height: 74px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(39, 101, 184, 0.12));
  color: rgba(15, 23, 42, 0.62);
  font-weight: 950;
}

.admin-storyboard-binding-source-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-storyboard-binding-source-grid section {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-storyboard-binding-source-grid section span {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-binding-source-grid section strong,
.admin-storyboard-binding-source-grid section p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-binding-source-grid section strong {
  font-size: 0.82rem;
}

.admin-storyboard-binding-source-grid section p {
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-storyboard-binding-source-grid .button {
  align-self: center;
  white-space: nowrap;
}

.admin-storyboard-binding-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.admin-storyboard-binding-variant-list span {
  display: inline-grid;
  max-width: 100%;
  gap: 1px;
  padding: 6px 8px;
  border: 1px solid rgba(39, 101, 184, 0.15);
  border-radius: 999px;
  background: rgba(39, 101, 184, 0.07);
  color: #1f5d99;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-storyboard-binding-variant-list span.has-preview {
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 5px 8px 5px 5px;
  border-radius: 8px;
}

.admin-storyboard-binding-variant-list img {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
}

.admin-storyboard-binding-variant-list strong {
  font-size: 0.69rem;
  font-weight: 920;
}

.admin-storyboard-binding-variant-list small {
  color: inherit;
  font-size: 0.64rem;
  font-weight: 760;
}

.admin-storyboard-binding-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.035);
}

.admin-storyboard-review {
  display: grid;
  gap: 12px;
}

.admin-storyboard-review-score {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(20, 116, 86, 0.12);
  border-radius: 6px;
  background: rgba(20, 184, 166, 0.08);
}

.admin-storyboard-review-score > span {
  display: grid;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 999px;
  background: #0f766e;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 950;
}

.admin-storyboard-review-score strong,
.admin-storyboard-review-next strong,
.admin-storyboard-review-grid h3,
.admin-storyboard-review-lists h3 {
  margin: 0;
}

.admin-storyboard-review-score small {
  display: block;
  margin-top: 3px;
  color: rgba(15, 23, 42, 0.58);
  font-weight: 800;
}

.admin-storyboard-review-grid,
.admin-storyboard-review-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-review-grid section,
.admin-storyboard-review-lists section,
.admin-storyboard-review-next {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-review p,
.admin-storyboard-review ul {
  margin: 0;
  color: rgba(15, 23, 42, 0.64);
}

.admin-storyboard-review ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.admin-storyboard-scene-sheet {
  display: grid;
  gap: 12px;
}

.admin-storyboard-scene-sheet-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-storyboard-scene-sheet-meta div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-scene-sheet-meta span {
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.74rem;
  font-weight: 850;
}

.admin-storyboard-scene-sheet-meta strong {
  overflow-wrap: anywhere;
}

.admin-storyboard-previs-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-previs-card {
  overflow: hidden;
  display: grid;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
}

.admin-storyboard-previs-frame {
  display: grid;
  min-height: 118px;
  align-content: space-between;
  padding: 10px;
  background:
    linear-gradient(140deg, rgba(15, 23, 42, 0.82), rgba(20, 184, 166, 0.26)),
    linear-gradient(45deg, rgba(251, 191, 36, 0.36), transparent);
  color: #ffffff;
}

.admin-storyboard-previs-frame span {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-storyboard-previs-frame strong {
  font-size: 0.86rem;
  line-height: 1.25;
}

.admin-storyboard-previs-card p {
  display: -webkit-box;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  padding: 10px;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.78rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.admin-storyboard-scene-list {
  display: grid;
  gap: 10px;
}

.admin-storyboard-scene-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-scene-card > div:first-child {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-storyboard-scene-card > div:first-child span {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-storyboard-scene-card h3,
.admin-storyboard-scene-card p,
.admin-storyboard-scene-card small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-scene-card p,
.admin-storyboard-scene-card small {
  color: rgba(15, 23, 42, 0.64);
}

.admin-storyboard-scene-card small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.78rem;
  line-height: 1.45;
}

.admin-storyboard-scene-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-storyboard-scene-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-storyboard-gemini-scene {
  border-color: rgba(37, 99, 235, 0.12);
}

.admin-storyboard-export-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(20, 116, 86, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.09), rgba(248, 250, 252, 0.92));
}

.admin-storyboard-export-card > div:first-child {
  display: grid;
  gap: 6px;
}

.admin-storyboard-export-card strong,
.admin-storyboard-export-card p {
  margin: 0;
}

.admin-storyboard-export-card p {
  color: rgba(15, 23, 42, 0.64);
}

.admin-storyboard-export-card small {
  color: rgba(15, 23, 42, 0.55);
  font-weight: 800;
}

.admin-storyboard-production-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.admin-storyboard-production-bridge.is-live {
  border-color: rgba(20, 184, 166, 0.26);
  background: linear-gradient(135deg, rgba(240, 253, 250, 0.96), rgba(255, 255, 255, 0.88));
}

.admin-storyboard-production-bridge > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-storyboard-production-bridge span {
  color: rgba(15, 23, 42, 0.52);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-production-bridge strong,
.admin-storyboard-production-bridge p,
.admin-storyboard-production-bridge dl,
.admin-storyboard-production-bridge dt,
.admin-storyboard-production-bridge dd {
  margin: 0;
}

.admin-storyboard-production-bridge p {
  color: rgba(15, 23, 42, 0.62);
}

.admin-storyboard-production-bridge dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-storyboard-production-bridge dl div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-production-bridge dt {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-storyboard-production-bridge dd {
  overflow-wrap: anywhere;
  font-weight: 900;
}

.admin-storyboard-inline-link {
  color: #0f766e;
  font-weight: 900;
  text-decoration: none;
}

.admin-storyboard-inline-link:hover {
  text-decoration: underline;
}

.admin-storyboard-result-actions .is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.admin-storyboard-scene-card dt {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-storyboard-scene-card dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

.admin-storyboard-result {
  display: grid;
  gap: 12px;
}

.admin-storyboard-job-list {
  display: grid;
  gap: 8px;
}

.admin-storyboard-job-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-job-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-storyboard-job-card span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  color: rgba(15, 23, 42, 0.68);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.admin-storyboard-job-card.is-running span,
.admin-storyboard-job-card.is-queued span {
  background: rgba(37, 99, 235, 0.11);
  color: #1d4ed8;
}

.admin-storyboard-job-card.is-succeeded span {
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
}

.admin-storyboard-job-card.is-failed span {
  background: rgba(251, 191, 36, 0.16);
  color: #92400e;
}

.admin-storyboard-job-card p,
.admin-storyboard-job-card small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(15, 23, 42, 0.6);
}

.admin-storyboard-result-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-storyboard-result-summary.is-live {
  padding: 12px;
  border: 1px solid rgba(20, 116, 86, 0.18);
  border-radius: 6px;
  background: rgba(20, 184, 166, 0.08);
}

.admin-storyboard-result-summary.is-blocked {
  padding: 12px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 6px;
  background: rgba(254, 226, 226, 0.64);
}

.admin-storyboard-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.admin-storyboard-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 850;
  color: rgba(15, 23, 42, 0.72);
}

.admin-storyboard-structured-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-structured-list-head {
  display: grid;
  gap: 4px;
}

.admin-storyboard-structured-list-head h3,
.admin-storyboard-structured-list-head p {
  margin: 0;
}

.admin-storyboard-structured-list-head p {
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.82rem;
  font-weight: 750;
}

.admin-storyboard-structured-row,
.admin-storyboard-reference-row {
  display: grid;
  gap: 8px;
}

.admin-storyboard-structured-row {
  grid-template-columns: minmax(180px, 1.4fr) minmax(140px, 0.55fr) minmax(160px, 1fr);
}

.admin-storyboard-reference-row {
  grid-template-columns:
    minmax(140px, 1fr)
    minmax(120px, 0.65fr)
    minmax(140px, 0.75fr)
    minmax(180px, 1.2fr)
    minmax(150px, 1fr)
    minmax(180px, 1.2fr)
    minmax(140px, 0.9fr)
    minmax(140px, 0.9fr);
}

.admin-storyboard-sample-planner {
  display: grid;
  gap: 14px;
}

.admin-storyboard-sample-approval {
  display: grid;
  gap: 9px;
  max-width: 420px;
  min-width: 280px;
  padding: 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.88);
}

.admin-storyboard-sample-approval .button {
  justify-self: end;
}

.admin-storyboard-sample-runway {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgba(20, 116, 86, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(255, 200, 0, 0.08)),
    rgba(255, 255, 255, 0.88);
}

.admin-storyboard-sample-runway > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-storyboard-sample-runway span,
.admin-storyboard-sample-runway strong,
.admin-storyboard-sample-runway p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-runway span {
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-sample-runway p {
  color: rgba(15, 23, 42, 0.64);
  line-height: 1.45;
}

.admin-storyboard-sample-runway .button {
  flex: 0 0 auto;
}

.admin-storyboard-sample-runway.is-compact {
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-storyboard-sample-runway.is-compact p {
  max-width: 820px;
}

.admin-storyboard-sample-queue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 8px;
  background: rgba(240, 253, 250, 0.58);
}

.admin-storyboard-sample-queue > :not(.admin-storyboard-sample-queue-card) {
  grid-column: 1 / -1;
}

.admin-storyboard-sample-queue-card {
  border-color: rgba(20, 184, 166, 0.16);
}

.admin-storyboard-sample-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.admin-storyboard-sample-lanes > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.admin-storyboard-sample-lanes > div.is-done {
  border-color: rgba(20, 184, 166, 0.2);
  background: rgba(20, 184, 166, 0.12);
}

.admin-storyboard-sample-lanes > div.is-current {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(245, 158, 11, 0.1);
}

.admin-storyboard-sample-lanes > div.is-locked {
  opacity: 0.72;
}

.admin-storyboard-sample-lanes span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-storyboard-sample-lanes strong,
.admin-storyboard-sample-lanes p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-lanes p {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-storyboard-sample-runner-lock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(217, 119, 6, 0.22);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.78);
}

.admin-storyboard-sample-runner-lock > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-storyboard-sample-runner-lock span {
  color: #92400e;
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-sample-runner-lock strong,
.admin-storyboard-sample-runner-lock p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-runner-lock p {
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-storyboard-sample-approved {
  display: grid;
  gap: 4px;
  max-width: 420px;
  min-width: 280px;
  padding: 10px;
  border: 1px solid rgba(20, 116, 86, 0.22);
  border-radius: 8px;
  background: rgba(20, 184, 166, 0.1);
}

.admin-storyboard-sample-approved span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.16);
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-storyboard-sample-approved strong,
.admin-storyboard-sample-approved small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-approved small {
  color: rgba(15, 23, 42, 0.62);
  font-weight: 750;
  line-height: 1.35;
}

.admin-storyboard-sample-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
}

.admin-storyboard-sample-card-head {
  display: grid;
  grid-template-columns: 42px minmax(76px, 0.35fr) minmax(180px, 1.3fr) minmax(170px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.admin-storyboard-sample-card-head > span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  align-self: end;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.12);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-storyboard-sample-card-head.is-board-card {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
}

.admin-storyboard-sample-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-storyboard-sample-card-title strong {
  color: rgba(15, 23, 42, 0.86);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-transform: none;
}

.admin-storyboard-sample-card-title p {
  margin: 0;
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.3;
}

.admin-storyboard-sample-status {
  min-width: 82px;
  padding: 6px 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.66);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.admin-storyboard-sample-status.is-generated,
.admin-storyboard-sample-status.is-approved {
  border-color: rgba(20, 184, 166, 0.26);
  background: rgba(20, 184, 166, 0.14);
  color: #0f766e;
}

.admin-storyboard-sample-status.is-failed,
.admin-storyboard-sample-status.is-rejected {
  border-color: rgba(239, 68, 68, 0.24);
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.admin-storyboard-sample-card-head label,
.admin-storyboard-sample-card-head > div,
.admin-storyboard-sample-card-body label,
.admin-storyboard-sample-card-body section {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
}

.admin-storyboard-sample-card-head strong,
.admin-storyboard-sample-card-body strong {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-sample-card-head p,
.admin-storyboard-sample-card-body p,
.admin-storyboard-sample-notes p {
  min-width: 0;
  margin: 0;
  color: rgba(15, 23, 42, 0.68);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-card-head input,
.admin-storyboard-sample-card-head select,
.admin-storyboard-sample-card-body textarea {
  width: 100%;
  min-width: 0;
}

.admin-storyboard-sample-output {
  display: grid;
  overflow: hidden;
  min-height: 220px;
  place-items: center;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.035), rgba(20, 184, 166, 0.07)),
    rgba(248, 250, 252, 0.72);
  aspect-ratio: 9 / 12;
}

.admin-storyboard-sample-output.has-output {
  border-style: solid;
  background: rgba(15, 23, 42, 0.06);
}

.admin-storyboard-sample-output img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-storyboard-sample-output > div {
  display: grid;
  gap: 5px;
  max-width: 320px;
  padding: 14px;
  text-align: center;
}

.admin-storyboard-sample-output span {
  color: #0f766e;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-sample-output strong,
.admin-storyboard-sample-output p {
  margin: 0;
}

.admin-storyboard-sample-output p {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-storyboard-sample-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-storyboard-sample-runner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.admin-storyboard-sample-runner-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-storyboard-sample-runner-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.admin-storyboard-sample-runner-preview > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--studio-admin-brand-border);
  border-radius: 8px;
  background: var(--studio-admin-brand-soft);
}

.admin-storyboard-sample-runner-preview.is-live > div {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

.admin-storyboard-sample-runner-preview span {
  color: var(--studio-admin-muted);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-sample-runner-preview strong,
.admin-storyboard-sample-runner-preview p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-sample-runner-preview p {
  color: var(--studio-admin-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.admin-storyboard-sample-card-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.admin-storyboard-sample-mini-lock {
  padding: 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.72);
}

.admin-storyboard-sample-ingredients .admin-storyboard-ingredient-chips {
  gap: 6px;
}

.admin-storyboard-sample-ingredients .admin-storyboard-ingredient-chips span {
  min-height: 26px;
  padding: 6px 8px;
  font-size: 0.72rem;
}

.admin-storyboard-sample-card-body textarea {
  min-height: 74px;
  resize: vertical;
}

.admin-storyboard-sample-card.is-editing {
  border-style: dashed;
  background: rgba(248, 250, 252, 0.88);
  box-shadow: none;
}

.admin-storyboard-sample-review-editor {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.62);
}

.admin-storyboard-sample-review-editor > summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  color: rgba(15, 23, 42, 0.72);
  font-weight: 950;
}

.admin-storyboard-sample-review-editor > summary small {
  color: rgba(15, 23, 42, 0.54);
  font-size: 0.78rem;
  font-weight: 750;
}

.admin-storyboard-prompt-drawer {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px dashed var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.24);
}

.admin-storyboard-prompt-drawer > summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  color: var(--studio-admin-text);
  font-size: 0.82rem;
  font-weight: 950;
  list-style-position: inside;
}

.admin-storyboard-prompt-drawer > summary small {
  color: var(--studio-admin-muted);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-storyboard-prompt-lines {
  display: grid;
  gap: 8px;
}

.admin-storyboard-prompt-lines p {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: var(--studio-admin-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-storyboard-prompt-lines strong {
  color: var(--studio-admin-text);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-sample-review-form {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(180px, 1.2fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-storyboard-sample-review-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-sample-review-form :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
}

.admin-storyboard-sample-notes {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-sample-notes strong {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-sample-edit {
  background: rgba(248, 250, 252, 0.58);
}

.admin-storyboard-sample-plan-drawer {
  margin-top: 4px;
}

.admin-storyboard-structured-row input,
.admin-storyboard-structured-row select,
.admin-storyboard-reference-row input,
.admin-storyboard-reference-row select {
  min-width: 0;
}

.admin-storyboard-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-storyboard-json {
  max-height: 420px;
  min-width: 0;
  overflow: auto;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: #0f172a;
  color: #e5e7eb;
  font-size: 0.78rem;
  line-height: 1.55;
}

.admin-storyboard-json-editor {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.86);
}

.admin-storyboard-json-editor > summary {
  display: grid;
  gap: 3px;
  cursor: pointer;
  font-weight: 950;
}

.admin-storyboard-json-editor > summary small {
  color: rgba(15, 23, 42, 0.56);
  font-weight: 700;
}

.admin-storyboard-json-editor form,
.admin-storyboard-strategy-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.admin-storyboard-artifact-revisions {
  display: grid;
  gap: 8px;
}

.admin-storyboard-artifact-revisions article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.78);
}

.admin-storyboard-artifact-revisions article > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.admin-storyboard-artifact-revisions strong,
.admin-storyboard-artifact-revisions span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-artifact-revisions span {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.76rem;
  font-weight: 800;
}

.admin-storyboard-json-editor textarea {
  min-height: 260px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.5;
}

.admin-storyboard-hook-options {
  display: grid;
  gap: 12px;
}

.admin-storyboard-hook-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.82);
}

.admin-storyboard-hook-card.is-selected {
  border-color: rgba(20, 116, 86, 0.28);
  background: rgba(20, 184, 166, 0.08);
}

.admin-storyboard-hook-card p {
  margin: 0;
  color: rgba(15, 23, 42, 0.68);
}

.admin-storyboard-hook-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-storyboard-hook-card dl div {
  min-width: 0;
  padding: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.75);
}

.admin-storyboard-hook-card dt {
  color: rgba(15, 23, 42, 0.5);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-storyboard-hook-card dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-weight: 850;
}

html[data-theme="dark"] .admin-storyboard-hero,
html[data-theme="dark"] .admin-story-bible-hero,
html[data-theme="dark"] .admin-story-bible-panel,
html[data-theme="dark"] .admin-story-bible-flow a,
html[data-theme="dark"] .admin-storyboard-level-map a,
html[data-theme="dark"] .admin-storyboard-level-map > span,
html[data-theme="dark"] .admin-storyboard-review-map > div,
html[data-theme="dark"] .admin-storyboard-panel,
html[data-theme="dark"] .admin-storyboard-decision,
html[data-theme="dark"] .admin-storyboard-decision-card,
html[data-theme="dark"] .admin-storyboard-packet-link,
html[data-theme="dark"] .admin-storyboard-binding-card,
html[data-theme="dark"] .admin-storyboard-hook-card,
html[data-theme="dark"] .admin-storyboard-export-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.82);
}

html[data-theme="dark"] .admin-storyboard-production-bridge,
html[data-theme="dark"] .admin-storyboard-production-bridge.is-live {
  border-color: rgba(20, 184, 166, 0.16);
  background: rgba(15, 23, 42, 0.74);
}

html[data-theme="dark"] .admin-storyboard-run-status > div,
html[data-theme="dark"] .admin-storyboard-run-status > div.is-live,
html[data-theme="dark"] .admin-storyboard-run-status > div.is-warning {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.74);
}

html[data-theme="dark"] .admin-storyboard-next-action {
  border-color: rgba(20, 184, 166, 0.18);
  background: rgba(15, 23, 42, 0.78);
}

html[data-theme="dark"] .admin-storyboard-operator-guide,
html[data-theme="dark"] .admin-storyboard-operator-steps > div,
html[data-theme="dark"] .admin-storyboard-operator-steps > div.is-current,
html[data-theme="dark"] .admin-storyboard-operator-blockers,
html[data-theme="dark"] .admin-storyboard-review-guide,
html[data-theme="dark"] .admin-storyboard-sample-approval,
html[data-theme="dark"] .admin-storyboard-sample-approved,
html[data-theme="dark"] .admin-storyboard-sample-queue,
html[data-theme="dark"] .admin-storyboard-sample-review-editor,
html[data-theme="dark"] .admin-storyboard-sample-card,
html[data-theme="dark"] .admin-storyboard-master-card,
html[data-theme="dark"] .admin-storyboard-master-grid section,
html[data-theme="dark"] .admin-storyboard-master-grid section.is-current,
html[data-theme="dark"] .admin-storyboard-master-grid section.is-done,
html[data-theme="dark"] .admin-storyboard-master-grid section.is-blocked,
html[data-theme="dark"] .admin-storyboard-master-details,
html[data-theme="dark"] .admin-storyboard-intake-callout {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.74);
}

html[data-theme="dark"] .admin-storyboard-auto-refresh {
  border-color: rgba(96, 165, 250, 0.2);
  background: rgba(30, 41, 59, 0.94);
  color: #93c5fd;
}

html[data-theme="dark"] .admin-storyboard-form-note {
  border-color: rgba(56, 189, 248, 0.18);
  background: rgba(14, 116, 144, 0.14);
  color: rgba(186, 230, 253, 0.82);
}

html[data-theme="dark"] .admin-storyboard-form-note strong {
  color: rgba(224, 242, 254, 0.95);
}

html[data-theme="dark"] .admin-storyboard-hero p,
html[data-theme="dark"] .admin-story-bible-hero p,
html[data-theme="dark"] .admin-story-bible-flow small,
html[data-theme="dark"] .admin-storyboard-level-map span span,
html[data-theme="dark"] .admin-storyboard-level-map a span,
html[data-theme="dark"] .admin-storyboard-review-map span,
html[data-theme="dark"] .admin-story-bible-panel p,
html[data-theme="dark"] .admin-story-bible-rule-card ul,
html[data-theme="dark"] .admin-story-bible-meta-grid span,
html[data-theme="dark"] .admin-story-bible-character-grid span,
html[data-theme="dark"] .admin-story-bible-episode-grid span,
html[data-theme="dark"] .admin-story-bible-episode-grid small,
html[data-theme="dark"] .admin-storyboard-packet-link small,
html[data-theme="dark"] .admin-storyboard-result-summary span,
html[data-theme="dark"] .admin-storyboard-checkbox,
html[data-theme="dark"] .admin-storyboard-meta-grid span,
html[data-theme="dark"] .admin-storyboard-empty,
html[data-theme="dark"] .admin-storyboard-binding-intro p,
html[data-theme="dark"] .admin-storyboard-binding-card p,
html[data-theme="dark"] .admin-storyboard-binding-card small,
html[data-theme="dark"] .admin-storyboard-review p,
html[data-theme="dark"] .admin-storyboard-review ul,
html[data-theme="dark"] .admin-storyboard-review-score small,
html[data-theme="dark"] .admin-storyboard-scene-sheet-meta span,
html[data-theme="dark"] .admin-storyboard-scene-card p,
html[data-theme="dark"] .admin-storyboard-scene-card small,
html[data-theme="dark"] .admin-storyboard-hook-card p,
html[data-theme="dark"] .admin-storyboard-export-card p,
html[data-theme="dark"] .admin-storyboard-export-card small,
html[data-theme="dark"] .admin-storyboard-production-bridge span,
html[data-theme="dark"] .admin-storyboard-production-bridge p,
html[data-theme="dark"] .admin-storyboard-production-bridge dt,
html[data-theme="dark"] .admin-storyboard-run-status span,
html[data-theme="dark"] .admin-storyboard-run-status p,
html[data-theme="dark"] .admin-storyboard-next-action p,
html[data-theme="dark"] .admin-storyboard-decision-head p,
html[data-theme="dark"] .admin-storyboard-decision-card p,
html[data-theme="dark"] .admin-storyboard-decision-meta span,
html[data-theme="dark"] .admin-storyboard-operator-steps p,
html[data-theme="dark"] .admin-storyboard-review-guide p,
html[data-theme="dark"] .admin-storyboard-json-editor > summary small,
html[data-theme="dark"] .admin-storyboard-sample-card-head strong,
html[data-theme="dark"] .admin-storyboard-sample-card-body strong,
html[data-theme="dark"] .admin-storyboard-sample-card-head p,
html[data-theme="dark"] .admin-storyboard-sample-card-body p,
html[data-theme="dark"] .admin-storyboard-sample-review-editor > summary,
html[data-theme="dark"] .admin-storyboard-sample-review-editor > summary small,
html[data-theme="dark"] .admin-storyboard-sample-review-form label,
html[data-theme="dark"] .admin-storyboard-sample-notes p,
html[data-theme="dark"] .admin-storyboard-sample-notes strong,
html[data-theme="dark"] .admin-storyboard-sample-approved small,
html[data-theme="dark"] .admin-storyboard-master-lede,
html[data-theme="dark"] .admin-storyboard-master-grid span,
html[data-theme="dark"] .admin-storyboard-master-grid p,
html[data-theme="dark"] .admin-storyboard-intake-summary small,
html[data-theme="dark"] .admin-storyboard-intake-callout span,
html[data-theme="dark"] .admin-storyboard-previs-card p,
html[data-theme="dark"] .admin-storyboard-artifact-revisions span,
html[data-theme="dark"] .admin-storyboard-create-form .field-label small {
  color: rgba(226, 232, 240, 0.66);
}

html[data-theme="dark"] .admin-storyboard-meta-grid div,
html[data-theme="dark"] .admin-story-bible-ladder div,
html[data-theme="dark"] .admin-story-bible-meta-grid div,
html[data-theme="dark"] .admin-story-bible-character-grid article,
html[data-theme="dark"] .admin-story-bible-episode-grid article,
html[data-theme="dark"] .admin-storyboard-story-copy,
html[data-theme="dark"] .admin-storyboard-advanced,
html[data-theme="dark"] .admin-storyboard-decision-meta div,
html[data-theme="dark"] .admin-storyboard-binding-intro,
html[data-theme="dark"] .admin-storyboard-binding-form,
html[data-theme="dark"] .admin-storyboard-review-grid section,
html[data-theme="dark"] .admin-storyboard-review-lists section,
html[data-theme="dark"] .admin-storyboard-review-next,
html[data-theme="dark"] .admin-storyboard-json-editor,
html[data-theme="dark"] .admin-storyboard-scene-sheet-meta div,
html[data-theme="dark"] .admin-storyboard-scene-card,
html[data-theme="dark"] .admin-storyboard-scene-card dl div,
html[data-theme="dark"] .admin-storyboard-production-bridge dl div,
html[data-theme="dark"] .admin-storyboard-version-list article,
html[data-theme="dark"] .admin-storyboard-job-card,
html[data-theme="dark"] .admin-storyboard-previs-card,
html[data-theme="dark"] .admin-storyboard-artifact-revisions article,
html[data-theme="dark"] .admin-storyboard-binding-card dl div,
html[data-theme="dark"] .admin-storyboard-binding-source-grid section,
html[data-theme="dark"] .admin-storyboard-hook-card dl div {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .admin-storyboard-job-card p,
html[data-theme="dark"] .admin-storyboard-job-card small,
html[data-theme="dark"] .admin-storyboard-version-list span,
html[data-theme="dark"] .admin-storyboard-version-list small,
html[data-theme="dark"] .admin-storyboard-edit-panel > summary small {
  color: rgba(226, 232, 240, 0.62);
}

html[data-theme="dark"] .admin-storyboard-hero-steps span,
html[data-theme="dark"] .admin-story-bible-panel-head > span,
html[data-theme="dark"] .admin-storyboard-chip-list span,
html[data-theme="dark"] .admin-storyboard-decision-card-head span,
html[data-theme="dark"] .admin-storyboard-packet-link span,
html[data-theme="dark"] .admin-storyboard-binding-title-row span,
html[data-theme="dark"] .admin-storyboard-hook-card > div > span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(226, 232, 240, 0.74);
}

html[data-theme="dark"] .admin-storyboard-binding-source-thumb {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .admin-storyboard-binding-card.is-blocked {
  border-color: rgba(251, 113, 133, 0.2);
  background: rgba(76, 29, 50, 0.28);
}

html[data-theme="dark"] .admin-storyboard-binding-card.is-current {
  border-color: rgba(251, 191, 36, 0.2);
  background: rgba(69, 26, 3, 0.24);
}

html[data-theme="dark"] .admin-storyboard-binding-card.is-needed {
  border-color: rgba(147, 197, 253, 0.18);
  background: rgba(30, 41, 59, 0.82);
}

html[data-theme="dark"] .admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-ready {
  border-color: rgba(45, 212, 191, 0.2);
  background: rgba(20, 184, 166, 0.15);
  color: rgba(204, 251, 241, 0.94);
}

html[data-theme="dark"] .admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-current {
  border-color: rgba(251, 191, 36, 0.24);
  background: rgba(180, 83, 9, 0.2);
  color: rgba(254, 243, 199, 0.94);
}

html[data-theme="dark"] .admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-needed {
  border-color: rgba(147, 197, 253, 0.24);
  background: rgba(37, 99, 235, 0.18);
  color: rgba(219, 234, 254, 0.94);
}

html[data-theme="dark"] .admin-storyboard-binding-title-row .admin-storyboard-reference-pill.is-blocked {
  border-color: rgba(251, 113, 133, 0.24);
  background: rgba(190, 18, 60, 0.2);
  color: rgba(255, 228, 230, 0.94);
}

html[data-theme="dark"] .admin-storyboard-binding-source-grid section span,
html[data-theme="dark"] .admin-storyboard-binding-source-grid section p {
  color: rgba(226, 232, 240, 0.62);
}

html[data-theme="dark"] .admin-story-bible-flow span,
html[data-theme="dark"] .admin-story-bible-rule-list span {
  border-color: rgba(20, 184, 166, 0.16);
  background: rgba(20, 184, 166, 0.12);
  color: rgba(153, 246, 228, 0.92);
}

html[data-theme="dark"] .admin-story-bible-core-line,
html[data-theme="dark"] .admin-story-bible-meta-grid strong {
  color: rgba(248, 250, 252, 0.9) !important;
}

html[data-theme="dark"] .admin-story-bible-rule-card {
  border-color: rgba(245, 158, 11, 0.15);
  background: rgba(120, 53, 15, 0.12);
}

/* Studio production workspace is dark-only, independent of the global site theme. */
body:has(.admin-studio-page) {
  --foreground: #f4f6f8;
  --muted-foreground: #a7b0bd;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --surface: #0b0d10;
  --surface-soft: #14171c;
  --surface-muted: #181c22;
  --accent: #88d8ca;
  --accent-strong: #d6fff7;
  --accent-care: #74e0c8;
  --border: #2a3038;
  --border-soft: rgba(167, 176, 189, 0.16);
  --border-strong: rgba(136, 216, 202, 0.32);
  --studio-admin-text: #f4f6f8;
  --studio-admin-muted: #a7b0bd;
  --studio-admin-surface: rgba(20, 23, 28, 0.96);
  --studio-admin-surface-strong: #181c22;
  --studio-admin-surface-soft: rgba(24, 28, 34, 0.86);
  --studio-admin-card: rgba(24, 28, 34, 0.9);
  --studio-admin-card-soft: rgba(255, 255, 255, 0.055);
  --studio-admin-control: rgba(10, 12, 16, 0.96);
  --studio-admin-border: rgba(167, 176, 189, 0.16);
  --studio-admin-border-soft: rgba(167, 176, 189, 0.12);
  --studio-admin-brand: #ffc800;
  --studio-admin-brand-deep: #ffd84d;
  --studio-admin-brand-soft: rgba(255, 200, 0, 0.12);
  --studio-admin-brand-border: rgba(255, 200, 0, 0.42);
  --studio-admin-blue: #9ad9ff;
  --studio-admin-blue-strong: #ccecff;
  --studio-admin-blue-soft: rgba(154, 217, 255, 0.1);
  --studio-admin-blue-border: rgba(154, 217, 255, 0.24);
  --studio-admin-care: #74e0c8;
  --studio-admin-care-soft: rgba(116, 224, 200, 0.12);
  --studio-admin-care-border: rgba(116, 224, 200, 0.28);
  --studio-admin-danger: #ff9f9f;
  --studio-admin-danger-soft: rgba(255, 159, 159, 0.1);
  --studio-admin-danger-border: rgba(255, 159, 159, 0.28);
  --studio-admin-secondary-bg: rgba(255, 255, 255, 0.08);
  --studio-admin-secondary-text: #f4f6f8;
  --studio-admin-secondary-hover: rgba(255, 255, 255, 0.12);
  --studio-admin-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  --studio-admin-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.22);
  color-scheme: dark;
  background: #0b0d10;
}

body:has(.admin-studio-page) .site-main,
body:has(.admin-studio-page) .admin-studio-page {
  background: transparent;
}

.admin-studio-route-loading {
  min-height: min(720px, calc(100svh - 96px));
  align-content: center;
  gap: clamp(28px, 5vw, 52px);
}

.admin-studio-route-loading-dock {
  position: sticky;
  z-index: 4;
  bottom: clamp(24px, 7vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  width: min(760px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border) 74%, transparent);
  border-radius: 28px;
  background: color-mix(in srgb, var(--studio-admin-control) 86%, transparent);
  box-shadow: var(--studio-admin-shadow);
  backdrop-filter: blur(22px);
}

.admin-studio-route-loading-input,
.admin-studio-route-loading-actions span,
.admin-studio-route-loading-grid article > div,
.admin-studio-route-loading-grid article span,
.admin-studio-route-loading-grid article strong,
.admin-studio-route-loading-grid article small {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--studio-admin-text) 13%, transparent);
}

.admin-studio-route-loading-input::after,
.admin-studio-route-loading-actions span::after,
.admin-studio-route-loading-grid article > div::after,
.admin-studio-route-loading-grid article span::after,
.admin-studio-route-loading-grid article strong::after,
.admin-studio-route-loading-grid article small::after {
  position: absolute;
  inset: 0;
  content: "";
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--studio-admin-text) 24%, transparent), transparent);
  animation: loading-shimmer 1.35s ease-in-out infinite;
}

.admin-studio-route-loading-input {
  height: 42px;
  border-radius: 18px;
}

.admin-studio-route-loading-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.admin-studio-route-loading-actions span {
  width: 42px;
  height: 42px;
  border-radius: 999px;
}

.admin-studio-route-loading-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 18px;
  width: min(1120px, 100%);
  margin: 0 auto;
}

.admin-studio-route-loading-grid article {
  display: grid;
  gap: 11px;
  min-height: 208px;
  padding: 14px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 18px;
  background: color-mix(in srgb, var(--studio-admin-card) 82%, transparent);
  box-shadow: var(--studio-admin-shadow-soft);
}

.admin-studio-route-loading-grid article.is-mini {
  border-color: var(--studio-admin-brand-border);
  background:
    linear-gradient(180deg, var(--studio-admin-brand-soft), transparent 52%),
    color-mix(in srgb, var(--studio-admin-card) 84%, transparent);
}

.admin-studio-route-loading-grid article > div {
  height: 92px;
  border-radius: 14px;
}

.admin-studio-route-loading-grid article span,
.admin-studio-route-loading-grid article strong,
.admin-studio-route-loading-grid article small {
  border-radius: 999px;
}

.admin-studio-route-loading-grid article span {
  width: 56px;
  height: 10px;
}

.admin-studio-route-loading-grid article strong {
  width: 82%;
  height: 18px;
}

.admin-studio-route-loading-grid article small {
  width: 64%;
  height: 12px;
}

@media (max-width: 820px) {
  .admin-studio-route-loading-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-route-loading-dock {
    grid-template-columns: minmax(0, 1fr);
  }
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero,
  .admin-story-bible-hero,
  .admin-story-bible-panel,
  .admin-story-bible-flow a,
  .admin-storyboard-level-map a,
  .admin-storyboard-level-map > span,
  .admin-storyboard-review-map > div,
  .admin-storyboard-panel,
  .admin-storyboard-decision,
  .admin-storyboard-decision-card,
  .admin-storyboard-packet-link,
  .admin-storyboard-binding-card,
  .admin-storyboard-hook-card,
  .admin-storyboard-export-card,
  .admin-storyboard-ingredient-strip,
  .admin-storyboard-workspace-tabs,
  .admin-storyboard-project-map,
  .admin-storyboard-project-map-grid a
) {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-production-bridge,
  .admin-storyboard-production-bridge.is-live,
  .admin-storyboard-run-status > div,
  .admin-storyboard-run-status > div.is-live,
  .admin-storyboard-run-status > div.is-warning,
  .admin-storyboard-next-action,
  .admin-storyboard-operator-guide,
  .admin-storyboard-operator-steps > div,
  .admin-storyboard-operator-steps > div.is-current,
  .admin-storyboard-operator-blockers,
  .admin-storyboard-review-guide,
  .admin-storyboard-sample-approval,
  .admin-storyboard-sample-approved,
  .admin-storyboard-sample-card,
  .admin-storyboard-sample-runway,
  .admin-storyboard-sample-lanes > div,
  .admin-storyboard-sample-runner-lock,
  .admin-storyboard-sample-output,
  .admin-storyboard-master-card,
  .admin-storyboard-master-grid section,
  .admin-storyboard-master-grid section.is-current,
  .admin-storyboard-master-grid section.is-done,
  .admin-storyboard-master-grid section.is-blocked,
  .admin-storyboard-master-details,
  .admin-storyboard-intake-callout,
  .admin-storyboard-form-note,
  .admin-storyboard-meta-grid div,
  .admin-storyboard-story-copy,
  .admin-storyboard-advanced,
  .admin-storyboard-decision-meta div,
  .admin-storyboard-binding-intro,
  .admin-storyboard-binding-form,
  .admin-storyboard-review-grid section,
  .admin-storyboard-review-lists section,
  .admin-storyboard-review-next,
  .admin-storyboard-json-editor,
  .admin-storyboard-scene-sheet-meta div,
  .admin-storyboard-scene-card,
  .admin-storyboard-scene-card dl div,
  .admin-storyboard-production-bridge dl div,
  .admin-storyboard-version-list article,
  .admin-storyboard-job-card,
  .admin-storyboard-previs-card,
  .admin-storyboard-artifact-revisions article,
  .admin-storyboard-binding-card dl div,
  .admin-storyboard-binding-source-grid section,
  .admin-storyboard-hook-card dl div,
  .admin-storyboard-structured-list,
  .admin-storyboard-sample-notes,
  .admin-storyboard-sample-edit
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero p,
  .admin-story-bible-hero p,
  .admin-story-bible-flow small,
  .admin-storyboard-level-map span span,
  .admin-storyboard-level-map a span,
  .admin-storyboard-review-map span,
  .admin-story-bible-panel p,
  .admin-story-bible-rule-card ul,
  .admin-story-bible-meta-grid span,
  .admin-story-bible-character-grid span,
  .admin-story-bible-episode-grid span,
  .admin-story-bible-episode-grid small,
  .admin-storyboard-packet-link small,
  .admin-storyboard-result-summary span,
  .admin-storyboard-checkbox,
  .admin-storyboard-meta-grid span,
  .admin-storyboard-empty,
  .admin-storyboard-binding-intro p,
  .admin-storyboard-binding-card p,
  .admin-storyboard-binding-card small,
  .admin-storyboard-binding-source-grid section span,
  .admin-storyboard-binding-source-grid section p,
  .admin-storyboard-review p,
  .admin-storyboard-review ul,
  .admin-storyboard-review-score small,
  .admin-storyboard-scene-sheet-meta span,
  .admin-storyboard-scene-card p,
  .admin-storyboard-scene-card small,
  .admin-storyboard-hook-card p,
  .admin-storyboard-export-card p,
  .admin-storyboard-export-card small,
  .admin-storyboard-production-bridge span,
  .admin-storyboard-production-bridge p,
  .admin-storyboard-production-bridge dt,
  .admin-storyboard-run-status span,
  .admin-storyboard-run-status p,
  .admin-storyboard-next-action p,
  .admin-storyboard-decision-head p,
  .admin-storyboard-decision-card p,
  .admin-storyboard-decision-meta span,
  .admin-storyboard-operator-steps p,
  .admin-storyboard-review-guide p,
  .admin-storyboard-sample-runway p,
  .admin-storyboard-sample-runner-lock p,
  .admin-storyboard-json-editor > summary small,
  .admin-storyboard-sample-card-head strong,
  .admin-storyboard-sample-card-body strong,
  .admin-storyboard-sample-card-head p,
  .admin-storyboard-sample-card-body p,
  .admin-storyboard-sample-lanes p,
  .admin-storyboard-sample-output p,
  .admin-storyboard-sample-notes p,
  .admin-storyboard-sample-notes strong,
  .admin-storyboard-sample-approved small,
  .admin-storyboard-master-lede,
  .admin-storyboard-master-grid span,
  .admin-storyboard-master-grid p,
  .admin-storyboard-intake-summary small,
  .admin-storyboard-intake-callout span,
  .admin-storyboard-previs-card p,
  .admin-storyboard-artifact-revisions span,
  .admin-storyboard-create-form .field-label small,
  .admin-storyboard-structured-list-head p
) {
  color: rgba(244, 246, 248, 0.68);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero-steps span,
  .admin-story-bible-panel-head > span,
  .admin-storyboard-chip-list span,
  .admin-storyboard-decision-card-head span,
  .admin-storyboard-packet-link span,
  .admin-storyboard-binding-title-row span,
  .admin-storyboard-hook-card > div > span,
  .admin-storyboard-master-chip-list span,
  .admin-storyboard-ingredient-chips span
) {
  border-color: var(--studio-admin-border-soft);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 246, 248, 0.78);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero-steps span.is-done,
  .admin-storyboard-review-map > div.is-done,
  .admin-storyboard-master-grid section.is-done,
  .admin-storyboard-sample-approved,
  .admin-storyboard-result-summary.is-live
) {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-review-map > div.is-current,
  .admin-storyboard-master-grid section.is-current,
  .admin-storyboard-operator-steps > div.is-current,
  .admin-storyboard-review-guide
) {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-master-grid section.is-blocked,
  .admin-storyboard-result-summary.is-blocked
) {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-soft);
}

.admin-storyboard-workspace-tabs {
  position: sticky;
  z-index: 7;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
  backdrop-filter: blur(16px);
}

.admin-storyboard-workspace-tabs a {
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  color: rgba(244, 246, 248, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.admin-storyboard-workspace-tabs a:is(:hover, :focus-visible),
.admin-storyboard-workspace-tabs a.is-active {
  border-color: var(--studio-admin-brand-border);
  background: var(--studio-admin-brand-soft);
  color: #ffe9a1;
}

.admin-storyboard-workspace-tabs a.is-ready {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
  color: #b7fff0;
}

.admin-storyboard-ingredient-strip {
  display: grid;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
}

.admin-storyboard-ingredient-strip h2,
.admin-storyboard-ingredient-strip p {
  margin: 0;
}

.admin-storyboard-flow-board {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
  background: rgba(11, 13, 16, 0.42);
}

.admin-storyboard-flow-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-flow-columns section {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 150px;
  padding: 12px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(24, 28, 34, 0.78);
}

.admin-storyboard-flow-columns section > div:first-child {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-storyboard-flow-columns span,
.admin-storyboard-flow-columns strong,
.admin-storyboard-flow-columns p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-flow-columns section > div:first-child span {
  color: rgba(244, 246, 248, 0.52);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-storyboard-flow-columns section > div:first-child strong {
  color: #f4f6f8;
  font-size: 0.86rem;
}

.admin-storyboard-flow-columns p {
  color: rgba(244, 246, 248, 0.66);
  font-size: 0.84rem;
  line-height: 1.45;
}

.admin-storyboard-mini-scene-stack {
  display: grid;
  gap: 6px;
}

.admin-storyboard-mini-scene-stack span {
  display: block;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-storyboard-command-bar {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(32, 38, 50, 0.82), rgba(11, 13, 16, 0.72)),
    radial-gradient(circle at top right, rgba(136, 216, 202, 0.12), transparent 38%);
}

.admin-storyboard-command-context {
  display: grid;
  grid-template-columns: minmax(190px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.admin-storyboard-command-context h2,
.admin-storyboard-command-context p,
.admin-storyboard-command-context small {
  margin: 0;
}

.admin-storyboard-command-context small {
  display: block;
  margin-top: 5px;
  color: rgba(244, 246, 248, 0.58);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.admin-storyboard-command-selected,
.admin-storyboard-command-shelf,
.admin-storyboard-command-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-storyboard-command-selected button,
.admin-storyboard-command-selected > span {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 7px 10px;
  cursor: pointer;
  border: 1px solid var(--studio-admin-care-border);
  border-radius: 999px;
  background: var(--studio-admin-care-soft);
  color: #b7fff0;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-storyboard-command-selected > span {
  cursor: default;
  border-color: var(--studio-admin-border-soft);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(244, 246, 248, 0.58);
}

.admin-storyboard-command-dropzone {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px dashed var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.4);
}

.admin-storyboard-command-dropzone > strong {
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-command-shelf button {
  display: grid;
  gap: 3px;
  min-width: min(180px, 100%);
  max-width: 260px;
  padding: 9px 10px;
  cursor: grab;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--studio-admin-text);
  text-align: left;
}

.admin-storyboard-command-shelf button.is-selected {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

.admin-storyboard-command-shelf button span {
  color: rgba(244, 246, 248, 0.5);
  font-size: 0.66rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-command-shelf button strong,
.admin-storyboard-command-shelf button small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-command-shelf button small {
  color: rgba(244, 246, 248, 0.6);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.25;
}

.admin-storyboard-command-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.admin-storyboard-command-composer textarea {
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(8, 10, 14, 0.92);
  color: var(--studio-admin-text);
  line-height: 1.4;
}

.admin-storyboard-command-composer textarea::placeholder {
  color: rgba(244, 246, 248, 0.45);
}

.admin-storyboard-command-composer .button {
  align-self: stretch;
  white-space: nowrap;
}

.admin-storyboard-command-briefing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-storyboard-command-briefing section {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.admin-storyboard-command-briefing section.is-ready {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

.admin-storyboard-command-briefing section.is-locked {
  border-color: var(--studio-admin-warning-border);
  background: var(--studio-admin-warning-soft);
}

.admin-storyboard-command-briefing section.is-blocked {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-soft);
}

.admin-storyboard-command-briefing span {
  color: rgba(244, 246, 248, 0.52);
  font-size: 0.68rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-storyboard-command-briefing strong,
.admin-storyboard-command-briefing p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-command-briefing strong {
  color: var(--studio-admin-text);
  font-size: 0.88rem;
}

.admin-storyboard-command-briefing p {
  color: rgba(244, 246, 248, 0.64);
  font-size: 0.8rem;
  line-height: 1.4;
}

.admin-storyboard-command-preview {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--studio-admin-brand-border);
  border-radius: 8px;
  background: var(--studio-admin-brand-soft);
}

.admin-storyboard-command-preview strong,
.admin-storyboard-command-preview p,
.admin-storyboard-command-preview ul {
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-command-preview p,
.admin-storyboard-command-preview li {
  color: rgba(244, 246, 248, 0.68);
  font-size: 0.84rem;
  line-height: 1.4;
}

.admin-storyboard-command-preview ul {
  display: grid;
  gap: 3px;
  padding-left: 18px;
}

.admin-storyboard-command-examples span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(244, 246, 248, 0.68);
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1;
}

.admin-storyboard-ingredient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-storyboard-ingredient-chips span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  overflow-wrap: anywhere;
}

.admin-storyboard-ingredient-visual-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.admin-storyboard-ingredient-visual-list span {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-width: min(210px, 100%);
  max-width: 270px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--studio-admin-text);
  overflow: hidden;
}

.admin-storyboard-ingredient-visual-list.is-compact span {
  grid-template-columns: 28px minmax(0, 1fr);
  min-width: min(155px, 100%);
  max-width: 220px;
  padding: 6px 8px;
}

.admin-storyboard-ingredient-visual-list span.is-character {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

.admin-storyboard-ingredient-visual-list span.is-background {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-blue-soft);
}

.admin-storyboard-ingredient-visual-list span.is-safety {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-soft);
}

.admin-storyboard-ingredient-visual-list span.is-status {
  border-color: var(--studio-admin-brand-border);
  background: var(--studio-admin-brand-soft);
}

.admin-storyboard-ingredient-visual-list i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  background: rgba(8, 10, 14, 0.5);
  color: var(--studio-admin-brand-deep);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 950;
}

.admin-storyboard-ingredient-visual-list.is-compact i {
  width: 28px;
  height: 28px;
  font-size: 0.72rem;
}

.admin-storyboard-ingredient-visual-list i.has-image {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.admin-storyboard-ingredient-visual-list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-storyboard-ingredient-visual-list strong,
.admin-storyboard-ingredient-visual-list small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-ingredient-visual-list strong {
  color: var(--studio-admin-text);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.12;
}

.admin-storyboard-ingredient-visual-list small {
  grid-column: 2;
  color: var(--studio-admin-muted);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.22;
}

.admin-storyboard-ingredient-visual-list.is-compact small {
  display: none;
}

.admin-storyboard-project-map {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px);
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
}

.admin-storyboard-project-map-head {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.admin-storyboard-project-map-head h2,
.admin-storyboard-project-map-head p {
  margin: 0;
}

.admin-storyboard-project-map-head p {
  max-width: 620px;
  color: rgba(244, 246, 248, 0.66);
  line-height: 1.45;
}

.admin-storyboard-project-map-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-storyboard-project-map-grid a {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 148px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
  text-decoration: none;
}

.admin-storyboard-project-map-grid a:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border);
  background: rgba(154, 217, 255, 0.08);
}

.admin-storyboard-project-map-grid a.is-done {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-care-soft);
}

.admin-storyboard-project-map-grid a.is-current {
  border-color: rgba(245, 158, 11, 0.28);
  background: rgba(245, 158, 11, 0.12);
}

.admin-storyboard-project-map-grid a.is-blocked {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-soft);
}

.admin-storyboard-project-map-grid span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-storyboard-project-map-grid strong,
.admin-storyboard-project-map-grid p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-storyboard-project-map-grid p {
  color: rgba(244, 246, 248, 0.66);
  font-size: 0.82rem;
  line-height: 1.45;
}

body:has(.admin-studio-page) .admin-storyboard-create-form :is(input, textarea, select),
body:has(.admin-studio-page) .admin-storyboard-json-editor textarea,
body:has(.admin-studio-page) .admin-storyboard-sample-card-head input,
body:has(.admin-studio-page) .admin-storyboard-sample-card-head select,
body:has(.admin-studio-page) .admin-storyboard-sample-card-body textarea {
  border-color: var(--studio-admin-border-soft);
  background: rgba(8, 10, 14, 0.92);
  color: var(--studio-admin-text);
}

.admin-studio-home-page {
  display: grid;
  gap: 16px;
}

.admin-studio-home-hero,
.admin-studio-home-board,
.admin-studio-home-ingredients,
.admin-studio-home-activity {
  border: 1px solid var(--studio-admin-border);
  border-radius: 8px;
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

.admin-studio-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: clamp(18px, 3vw, 30px);
}

.admin-studio-home-hero h1,
.admin-studio-home-hero p,
.admin-studio-home-section-head h2,
.admin-studio-home-section-head p {
  margin: 0;
}

.admin-studio-home-hero h1 {
  max-width: 900px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
}

.admin-studio-home-hero p {
  max-width: 760px;
  margin-top: 12px;
  color: var(--studio-admin-muted);
  line-height: 1.5;
}

.admin-studio-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-studio-home-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.admin-studio-home-board a,
.admin-studio-home-project-list a {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: var(--studio-admin-card);
  color: inherit;
  text-decoration: none;
}

.admin-studio-home-board a:is(:hover, :focus-visible),
.admin-studio-home-project-list a:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border);
  background: rgba(154, 217, 255, 0.08);
}

.admin-studio-home-board span,
.admin-studio-home-project-list span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(244, 246, 248, 0.72);
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-home-board strong,
.admin-studio-home-board p,
.admin-studio-home-board small,
.admin-studio-home-project-list strong,
.admin-studio-home-project-list p,
.admin-studio-home-project-list small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-studio-home-board p,
.admin-studio-home-project-list p,
.admin-studio-home-project-list small,
.admin-studio-home-board small {
  color: var(--studio-admin-muted);
  line-height: 1.45;
}

.admin-studio-home-ingredients {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
}

.admin-studio-home-character-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-home-character-strip a {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: var(--studio-admin-card);
  color: inherit;
  text-decoration: none;
}

.admin-studio-home-character-strip a:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-care-border);
  background: rgba(116, 224, 200, 0.08);
}

.admin-studio-home-character-strip a > div {
  overflow: hidden;
  display: grid;
  height: 118px;
  place-items: center;
  border: 1px solid var(--studio-admin-border-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(244, 246, 248, 0.7);
  font-size: 1.1rem;
  font-weight: 950;
}

.admin-studio-home-character-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-home-character-strip strong,
.admin-studio-home-character-strip span,
.admin-studio-home-character-strip small {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-studio-home-character-strip strong {
  font-size: 0.9rem;
}

.admin-studio-home-character-strip span,
.admin-studio-home-character-strip small {
  color: var(--studio-admin-muted);
  font-size: 0.76rem;
  line-height: 1.25;
}

.admin-studio-home-activity {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2vw, 20px);
}

.admin-studio-home-section-head {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
}

.admin-studio-home-project-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-flow-home {
  display: grid;
  gap: 18px;
  max-width: 1440px;
  position: relative;
}

.admin-studio-flow-create {
  display: grid;
  min-height: clamp(240px, 34vh, 420px);
  place-items: center;
  gap: 22px;
  padding: clamp(28px, 7vw, 76px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    #050505;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
}

.admin-studio-flow-create > div {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.admin-studio-flow-create span,
.admin-studio-flow-breadcrumb span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-create strong {
  color: #ffffff;
  font-size: clamp(2.3rem, 7vw, 6rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
}

.admin-studio-flow-create small {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.94rem;
  font-weight: 820;
  line-height: 1.35;
}

.admin-studio-flow-create .button {
  min-height: 56px;
  padding-inline: 28px;
  border-radius: 999px;
  font-size: 1rem;
}

.admin-studio-flow-create-hub {
  position: fixed;
  top: 56%;
  left: 50%;
  z-index: 40;
  min-height: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

@media (min-width: 1024px) and (max-width: 1359px) {
  .admin-studio-flow-create-hub {
    left: calc(var(--sidebar-rail-width) + ((100vw - var(--sidebar-rail-width)) / 2));
  }
}

@media (min-width: 1360px) {
  .admin-studio-flow-create-hub {
    left: calc(var(--sidebar-rail-width) + ((100vw - var(--sidebar-rail-width)) / 2));
  }
}

@media (min-width: 1024px) {
  body:has(.admin-studio-page) .site-main-shell.is-studio-sidebar-pinned {
    margin-left: var(--sidebar-width);
  }

  .site-main-shell.is-studio-sidebar-pinned .admin-studio-flow-create-hub {
    left: calc(var(--sidebar-width) + ((100vw - var(--sidebar-width)) / 2));
  }
}

@media (max-width: 680px) {
  .admin-studio-flow-create-hub {
    top: 58%;
  }
}

.admin-studio-flow-create-pill {
  display: inline-flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 40px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  background: rgba(78, 78, 84, 0.58);
  color: #ffffff;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-size: 1.08rem;
  font-weight: 900;
  text-decoration: none;
  backdrop-filter: blur(18px) saturate(130%);
  pointer-events: auto;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-create-pill:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(98, 98, 105, 0.66);
  box-shadow:
    0 30px 86px rgba(0, 0, 0, 0.44),
    0 0 0 7px rgba(255, 255, 255, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.admin-studio-source-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(245, 158, 11, 0.24);
  border-radius: 8px;
  background: rgba(255, 251, 235, 0.86);
  color: #92400e;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-source-notice strong {
  color: #78350f;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-studio-source-notice span {
  color: #92400e;
  font-weight: 760;
}

.admin-studio-source-notice.is-db-unavailable {
  border-color: rgba(220, 38, 38, 0.24);
  background: rgba(254, 242, 242, 0.88);
  color: #991b1b;
}

.admin-studio-source-notice.is-db-unavailable strong,
.admin-studio-source-notice.is-db-unavailable span {
  color: #991b1b;
}

.admin-studio-flow-season-hero {
  min-height: clamp(200px, 28vh, 340px);
}

.admin-studio-flow-season-hero strong {
  max-width: 980px;
  font-size: clamp(1.9rem, 5vw, 4.8rem);
}

.admin-studio-flow-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.82rem;
  font-weight: 850;
}

.admin-studio-flow-breadcrumb a {
  color: var(--studio-admin-text, #111827);
  text-decoration: none;
}

.admin-studio-flow-breadcrumb a:is(:hover, :focus-visible) {
  color: #ffc800;
}

.admin-studio-flow-breadcrumb a::after {
  content: "/";
  margin-left: 8px;
  color: var(--studio-admin-faint, #6b7280);
}

.admin-studio-flow-season-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.admin-studio-flow-auto-refresh {
  position: fixed;
  right: max(24px, calc((100vw - 638px) / 2));
  bottom: 150px;
  left: max(24px, calc((100vw - 638px) / 2));
  z-index: 80;
  width: fit-content;
  max-width: min(638px, calc(100vw - 48px));
  margin-inline: auto;
  padding: 8px 12px;
  border: 1px solid var(--studio-admin-blue-border, rgba(37, 99, 235, 0.24));
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.12)), transparent),
    rgba(24, 24, 23, 0.82);
  color: var(--studio-admin-text, #111827);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  pointer-events: none;
  backdrop-filter: blur(18px) saturate(125%);
}

body:has(.admin-studio-page) .admin-studio-flow-auto-refresh {
  color: #ffffff;
}

.admin-studio-flow-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.admin-studio-flow-project-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 232px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-project-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 0, 0.72);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.admin-studio-flow-project-card.is-opening,
.admin-studio-flow-season-grid > a.is-opening {
  cursor: progress;
  border-color: rgba(255, 200, 0, 0.88);
  transform: translateY(-1px) scale(0.995);
}

.admin-studio-flow-project-card > div {
  overflow: hidden;
  display: grid;
  aspect-ratio: 16 / 8.6;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(37, 99, 235, 0.18)),
    #111827;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 950;
}

.admin-studio-flow-project-card.is-mini > div {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(116, 224, 200, 0.18)),
    #060606;
}

.admin-studio-flow-project-card.is-special > div {
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.24), rgba(59, 130, 246, 0.18)),
    #111827;
}

.admin-studio-flow-project-card.is-mini > div span {
  display: inline-grid;
  width: 82px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-flow-project-card > div.has-image {
  background: #111827;
}

.admin-studio-flow-project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-flow-project-card section {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.admin-studio-flow-project-card span,
.admin-studio-flow-project-card small,
.admin-studio-flow-project-card em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-flow-project-card section > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-source-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border: 1px solid rgba(100, 116, 139, 0.22);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.82);
  color: #475569;
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-studio-source-badge.is-hybrid {
  border-color: rgba(20, 184, 166, 0.28);
  background: rgba(240, 253, 250, 0.92);
  color: #0f766e;
}

.admin-studio-source-badge.is-storyboard {
  border-color: rgba(99, 102, 241, 0.24);
  background: rgba(238, 242, 255, 0.9);
  color: #4f46e5;
}

.admin-studio-source-badge.is-docs_fallback {
  border-color: rgba(245, 158, 11, 0.34);
  background: rgba(255, 251, 235, 0.94);
  color: #b45309;
}

.admin-studio-source-badge.is-static {
  border-color: rgba(100, 116, 139, 0.18);
  background: rgba(241, 245, 249, 0.9);
  color: #64748b;
}

.admin-studio-flow-project-card strong {
  min-width: 0;
  margin: 0;
  color: #111827;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-flow-project-card small {
  color: #4b5563;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-flow-project-card em {
  color: #1d4ed8;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.admin-studio-flow-season-grid > :is(a, button),
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  min-height: 232px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-flow-season-grid > :is(a, button):is(:hover, :focus-visible),
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell:is(:hover, :focus-within) {
  border-color: rgba(255, 200, 0, 0.72);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.admin-studio-flow-episode-card-link {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.admin-studio-flow-link-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(5, 7, 13, 0.76);
  color: #ffffff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(125%);
  transition: opacity 120ms ease;
}

.admin-studio-flow-link-loading svg {
  width: 25px;
  height: 25px;
  animation: admin-studio-spin 820ms linear infinite;
}

.admin-studio-flow-link-loading strong {
  max-width: 82%;
  color: #ffffff !important;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.15;
}

.admin-studio-flow-project-card.is-opening .admin-studio-flow-link-loading,
.admin-studio-flow-season-grid > a.is-opening .admin-studio-flow-link-loading,
.admin-studio-flow-episode-card-shell > a.is-opening .admin-studio-flow-link-loading {
  opacity: 1;
}

.admin-studio-flow-command-card-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid rgba(59, 130, 246, 0.22);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 0.7rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-season-grid > .admin-studio-flow-command-card:is(:hover, :focus-visible) .admin-studio-flow-command-card-hint {
  opacity: 1;
  transform: translateY(0);
}

.admin-studio-flow-season-grid > :is(a, button) > div,
.admin-studio-flow-episode-card-shell > a > div {
  overflow: hidden;
  display: grid;
  aspect-ratio: 16 / 8.6;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(37, 99, 235, 0.18)),
    #111827;
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 950;
}

.admin-studio-flow-season-grid > :is(a, button) > div.has-image,
.admin-studio-flow-episode-card-shell > a > div.has-image {
  background: #111827;
}

.admin-studio-flow-season-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-flow-season-grid section {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.admin-studio-flow-season-grid span,
.admin-studio-flow-season-grid small,
.admin-studio-flow-season-grid em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-flow-season-grid span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-season-grid strong {
  min-width: 0;
  margin: 0;
  color: #111827;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-flow-season-grid small {
  color: #4b5563;
  font-size: 0.78rem;
  line-height: 1.35;
}

.admin-studio-flow-season-grid em {
  color: #1d4ed8;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.admin-studio-flow-episode-progress {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background: var(--studio-admin-surface-soft, rgba(248, 250, 252, 0.92));
}

.admin-studio-flow-episode-progress-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-header span,
.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-header strong {
  color: var(--studio-admin-text, #111827);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-header span {
  color: var(--studio-admin-blue-strong, #1d4ed8);
}

.admin-studio-flow-episode-progress-track {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--studio-admin-border, rgba(17, 24, 39, 0.1));
}

.admin-studio-flow-episode-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--studio-admin-blue-strong, #2563eb), var(--studio-admin-brand, #facc15));
  transition: width 280ms ease;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress p {
  margin: 0;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.admin-studio-flow-episode-progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-steps span {
  width: fit-content;
  padding: 4px 6px;
  border: 1px solid var(--studio-admin-border-soft, rgba(17, 24, 39, 0.08));
  border-radius: 999px;
  background: var(--studio-admin-card-soft, rgba(17, 24, 39, 0.04));
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-steps span.is-done {
  border-color: var(--studio-admin-care-border, rgba(22, 163, 74, 0.22));
  background: var(--studio-admin-care-soft, rgba(22, 163, 74, 0.1));
  color: var(--studio-admin-care, #15803d);
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-steps span.is-running {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.26));
  background: var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.11));
  color: var(--studio-admin-blue-strong, #1d4ed8);
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-progress-steps span.is-blocked {
  border-color: var(--studio-admin-danger-border, rgba(220, 38, 38, 0.22));
  background: var(--studio-admin-danger-soft, rgba(220, 38, 38, 0.08));
  color: var(--studio-admin-danger, #b91c1c);
}

.admin-studio-flow-episode-progress.is-running {
  position: relative;
  overflow: hidden;
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.24));
  background:
    linear-gradient(90deg, var(--studio-admin-blue-soft, rgba(239, 246, 255, 0.94)), transparent 72%),
    var(--studio-admin-surface-soft, rgba(239, 246, 255, 0.94));
}

.admin-studio-flow-episode-progress.is-running::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.3) 42%, transparent 72%);
  transform: translateX(-120%);
  animation: admin-studio-card-sheen 1.35s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-flow-season-grid > :is(a, button).is-pipeline-running,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.is-pipeline-running {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.34));
}

.admin-studio-flow-season-grid > :is(a, button).is-pipeline-ready,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.is-pipeline-ready {
  border-color: var(--studio-admin-care-border, rgba(22, 163, 74, 0.28));
}

.admin-studio-flow-season-grid > :is(a, button).is-pipeline-review,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.is-pipeline-review {
  border-color: var(--studio-admin-brand-border, rgba(245, 158, 11, 0.34));
}

.admin-studio-flow-episode-card-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 8;
  display: flex;
  gap: 7px;
}

.admin-studio-flow-episode-card-controls form {
  margin: 0;
}

.admin-studio-flow-episode-card-controls button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--studio-admin-brand-border, rgba(245, 158, 11, 0.34));
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface, #ffffff) 86%, var(--studio-admin-brand, #facc15));
  color: var(--studio-admin-text, #111827);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
  cursor: pointer;
}

.admin-studio-flow-episode-card-controls form:last-child button {
  width: 30px;
  padding: 0;
  border-color: var(--studio-admin-border, rgba(17, 24, 39, 0.12));
  background: var(--studio-admin-surface-soft, rgba(248, 250, 252, 0.9));
  color: var(--studio-admin-muted, #64748b);
  font-size: 1.1rem;
}

.admin-studio-flow-episode-card-controls button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

@keyframes admin-studio-card-sheen {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

.admin-studio-flow-season-grid > :is(a, button),
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell {
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9.6;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(135deg, #eef4ff 0%, #f8fafc 46%, #e9eef7 100%);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.14);
}

.admin-studio-flow-episode-card-link {
  position: absolute;
  inset: 0;
  display: block;
}

.admin-studio-flow-season-grid > :is(a, button)::after,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  height: 62%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.9) 72%, rgba(248, 250, 252, 0.98) 100%);
  pointer-events: none;
}

.admin-studio-flow-season-grid > :is(a, button).has-cover::after,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-cover::after,
html[data-theme="dark"] .admin-studio-flow-season-grid > :is(a, button)::after,
html[data-theme="dark"] .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.82) 100%);
}

.admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster,
.admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  background:
    radial-gradient(circle at 45% 30%, rgba(255, 255, 255, 0.86), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(219, 234, 254, 0.5) 44%, rgba(226, 232, 240, 0.9)),
    #eef2f7;
  color: #111827;
  font-size: clamp(2rem, 5vw, 4.5rem);
}

.admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual),
.admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual) {
  position: relative;
  z-index: 1;
  color: rgba(15, 23, 42, 0.78);
  font-size: clamp(2.3rem, 5.6vw, 5.2rem);
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

html[data-theme="dark"] .admin-studio-flow-season-grid > :is(a, button),
html[data-theme="dark"] .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell {
  border-color: rgba(255, 255, 255, 0.12);
  background: #101010;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster,
html[data-theme="dark"] .admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster {
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 255, 255, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(37, 99, 235, 0.18)),
    #111827;
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual),
html[data-theme="dark"] .admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual) {
  color: rgba(255, 255, 255, 0.92);
}

.admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster.has-image,
.admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster.has-image {
  background: #080808;
}

.admin-studio-flow-season-grid > :is(a, button) > .admin-studio-flow-episode-poster img,
.admin-studio-flow-episode-card-shell > a > .admin-studio-flow-episode-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-caption {
  position: absolute;
  right: 16px;
  bottom: 15px;
  left: 16px;
  z-index: 3;
  display: grid;
  gap: 4px;
  padding: 0;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-caption span,
.admin-studio-flow-season-grid .admin-studio-flow-episode-caption strong {
  overflow: hidden;
  min-width: 0;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-caption span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.admin-studio-flow-season-grid > :is(a, button).has-cover .admin-studio-flow-episode-caption span,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-cover .admin-studio-flow-episode-caption span,
html[data-theme="dark"] .admin-studio-flow-season-grid .admin-studio-flow-episode-caption span {
  color: rgba(255, 255, 255, 0.72);
}

.admin-studio-flow-season-grid > :is(a, button).has-cover .admin-studio-flow-episode-caption strong,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-cover .admin-studio-flow-episode-caption strong,
html[data-theme="dark"] .admin-studio-flow-season-grid .admin-studio-flow-episode-caption strong {
  color: #ffffff;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-caption strong {
  font-size: clamp(0.95rem, 1.45vw, 1.2rem);
  font-weight: 950;
  line-height: 1.08;
}

.admin-studio-flow-season-grid .admin-studio-flow-episode-caption small {
  overflow: hidden;
  max-width: 100%;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-flow-season-grid > :is(a, button).has-cover .admin-studio-flow-episode-caption small,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-cover .admin-studio-flow-episode-caption small,
html[data-theme="dark"] .admin-studio-flow-season-grid .admin-studio-flow-episode-caption small {
  color: rgba(255, 255, 255, 0.66);
}

.admin-studio-flow-past-episodes {
  margin-top: 8px;
  padding-bottom: 140px;
}

.admin-studio-flow-past-episodes > summary {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.12));
  border-radius: 999px;
  background: var(--studio-admin-surface, rgba(255, 255, 255, 0.82));
  color: var(--studio-admin-text, #111827);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(14px) saturate(125%);
}

.admin-studio-flow-past-episodes > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-flow-past-episodes > summary strong {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--studio-admin-card-soft, rgba(17, 24, 39, 0.06));
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.72rem;
}

.admin-studio-flow-past-episodes > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.admin-studio-flow-past-episodes article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 16px;
  background: var(--studio-admin-surface, rgba(255, 255, 255, 0.72));
  color: var(--studio-admin-text, #111827);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.1);
}

.admin-studio-flow-past-episodes article span {
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-past-episodes article strong {
  color: inherit;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-flow-past-episodes article p,
.admin-studio-flow-past-episodes article small {
  margin: 0;
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

html[data-theme="dark"] .admin-studio-flow-past-episodes > summary,
html[data-theme="dark"] .admin-studio-flow-past-episodes article {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 24, 0.78);
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .admin-studio-flow-past-episodes > summary strong {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .admin-studio-flow-past-episodes article span,
html[data-theme="dark"] .admin-studio-flow-past-episodes article p,
html[data-theme="dark"] .admin-studio-flow-past-episodes article small {
  color: rgba(255, 255, 255, 0.62);
}

.admin-studio-flow-season-grid .admin-studio-flow-command-card-hint {
  display: none;
}

.admin-studio-flow-episode-loading-visual {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.14), transparent 30%),
    rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.admin-studio-flow-episode-loading-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.17) 42%, transparent 74%);
  transform: translateX(-100%);
  animation: studio-mini-card-shimmer 1.35s linear infinite;
}

.admin-studio-flow-episode-loading-visual i {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.2);
}

.admin-studio-flow-episode-review-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 30%),
    rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.admin-studio-flow-episode-job-state.admin-studio-job-card-state {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 8;
  width: auto;
  max-width: none;
  justify-content: space-between;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.52);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px) saturate(135%);
}

.admin-studio-flow-episode-job-state .admin-studio-job-status {
  flex: 1 1 auto;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: none;
}

.admin-studio-flow-episode-job-state .admin-studio-job-status small {
  display: none;
}

.admin-studio-flow-episode-job-state .admin-studio-job-recovery-actions {
  flex: 0 0 auto;
}

.admin-studio-flow-episode-job-state .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action {
  min-height: 30px;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
}

.admin-studio-flow-episode-job-state .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action.is-dismiss {
  width: 30px;
  background: rgba(17, 24, 39, 0.72);
  color: #ffffff;
}

.admin-studio-flow-episode-card-controls {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.44);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(14px);
}

.admin-studio-flow-episode-card-shell:has(.admin-studio-episode-retry-submit[aria-busy="true"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.18), transparent 30%),
    rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.admin-studio-flow-episode-card-shell:has(.admin-studio-episode-retry-submit[aria-busy="true"])::after {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.86) 100%);
}

.admin-studio-flow-episode-card-controls .admin-studio-action-submit {
  display: inline-flex;
  gap: 0;
  justify-items: center;
}

.admin-studio-flow-episode-card-controls button {
  min-height: 34px;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
}

.admin-studio-flow-episode-card-controls .admin-studio-episode-retry-submit {
  min-width: 86px;
  gap: 7px;
  background: rgba(255, 255, 255, 0.94);
}

.admin-studio-flow-episode-card-controls .admin-studio-episode-retry-submit[aria-busy="true"] {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.16), 0 16px 42px rgba(0, 0, 0, 0.26);
  cursor: wait;
}

.admin-studio-flow-episode-card-controls .admin-studio-episode-retry-submit[aria-busy="true"] .admin-studio-action-spinner {
  width: 13px;
  height: 13px;
}

.admin-studio-flow-episode-card-controls form:last-child button {
  width: 34px;
  min-height: 34px;
  background: rgba(17, 24, 39, 0.74);
  color: #ffffff;
}

.admin-studio-flow-season-grid > :is(a, button).is-pipeline-review,
.admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.is-pipeline-review {
  border-color: rgba(255, 255, 255, 0.18);
}

.admin-studio-flow-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-flow-tools a {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
}

.admin-studio-flow-tools a:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.36);
  background: #eff6ff;
}

.admin-studio-flow-tools span {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-tools strong,
.admin-studio-flow-tools small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-flow-tools small {
  color: #6b7280;
  line-height: 1.35;
}

.admin-studio-flow-launch-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.admin-studio-flow-launch-card {
  display: grid;
  align-content: end;
  gap: 7px;
  min-width: 0;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-launch-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 0, 0.72);
  box-shadow: 0 24px 62px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.admin-studio-flow-launch-card.is-mini {
  min-height: 172px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.16), rgba(37, 99, 235, 0.12)),
    #111827;
  color: #ffffff;
}

.admin-studio-flow-launch-card.is-client {
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.2), transparent 32%),
    linear-gradient(135deg, rgba(21, 24, 31, 0.98), rgba(35, 43, 58, 0.98));
  color: #ffffff;
}

.admin-studio-flow-launch-card span {
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  color: #4b5563;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-launch-card.is-mini span {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}

.admin-studio-flow-launch-card.is-client span {
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.76);
}

.admin-studio-flow-launch-card strong,
.admin-studio-flow-launch-card small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-flow-launch-card strong {
  font-size: 1.02rem;
  line-height: 1.08;
}

.admin-studio-flow-launch-card.is-mini strong {
  font-size: clamp(1.65rem, 3vw, 2.55rem);
}

.admin-studio-flow-launch-card.is-client strong {
  font-size: clamp(1.28rem, 2vw, 1.8rem);
}

.admin-studio-flow-launch-card small {
  color: #6b7280;
  font-size: 0.78rem;
  line-height: 1.3;
}

.admin-studio-flow-launch-card.is-mini small {
  color: rgba(255, 255, 255, 0.68);
}

.admin-studio-flow-launch-card.is-client small {
  color: rgba(255, 255, 255, 0.66);
}

.admin-studio-flow-character-rail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
}

.admin-studio-flow-character-rail > div:first-child {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-flow-character-rail > div:first-child span {
  color: #111827;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-studio-flow-character-rail > div:first-child a {
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-studio-flow-character-rail > div:last-child {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: minmax(108px, 128px);
  grid-auto-flow: column;
  gap: 10px;
  padding-bottom: 2px;
}

.admin-studio-flow-character-rail > div:last-child > a {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: #111827;
  text-decoration: none;
}

.admin-studio-flow-character-rail i {
  overflow: hidden;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  font-style: normal;
  font-weight: 950;
}

.admin-studio-flow-character-rail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-flow-character-rail strong {
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.admin-studio-create-season-page {
  display: grid;
  align-content: start;
  gap: 18px;
  max-width: 1240px;
  min-height: calc(100vh - 120px);
  padding-bottom: 148px;
}

.admin-studio-create-hero,
.admin-studio-create-composer,
.admin-studio-create-packet,
.admin-studio-create-review-grid article,
.admin-studio-create-approval {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.16);
}

.admin-studio-create-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  min-height: clamp(240px, 34vh, 420px);
  padding: clamp(24px, 5vw, 56px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent),
    #050505;
  color: #ffffff;
}

.admin-studio-create-hero > div {
  display: grid;
  max-width: 780px;
  gap: 10px;
}

.admin-studio-create-hero span,
.admin-studio-create-gate span,
.admin-studio-create-packet span,
.admin-studio-create-preview-main span,
.admin-studio-create-review-grid span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-create-hero span {
  color: rgba(255, 255, 255, 0.58);
}

.admin-studio-create-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.6rem, 7vw, 6.6rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.9;
}

.admin-studio-create-hero p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.5;
}

.admin-studio-create-steps,
.admin-studio-create-production-gates {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-create-gate {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
}

.admin-studio-create-gate strong {
  min-width: 0;
  color: #111827;
  font-size: 1rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-studio-create-gate p {
  min-width: 0;
  margin: 0;
  color: #4b5563;
  font-size: 0.82rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.admin-studio-create-gate.is-ready {
  border-color: rgba(20, 184, 166, 0.26);
  background: #ecfdf5;
}

.admin-studio-create-gate.is-ready span {
  color: #0f766e;
}

.admin-studio-create-gate.is-review {
  border-color: rgba(245, 158, 11, 0.3);
  background: #fffbeb;
}

.admin-studio-create-gate.is-review span {
  color: #b45309;
}

.admin-studio-create-gate.is-locked {
  background: #f9fafb;
}

.admin-studio-create-composer {
  align-self: center;
  overflow: visible;
  width: min(100%, 760px);
  margin: clamp(76px, 16vh, 170px) auto 0;
  padding: 0;
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(58, 58, 56, 0.68), rgba(24, 24, 23, 0.76)),
    rgba(34, 34, 32, 0.7);
  color: #ffffff;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.36),
    0 2px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px) saturate(135%);
}

.admin-studio-create-composer form {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 50px;
  grid-template-rows: minmax(64px, 1fr) 46px;
  gap: 8px 10px;
  min-height: 132px;
  padding: 15px 15px 12px;
}

.admin-studio-create-composer textarea {
  grid-column: 1 / -1;
  min-height: 64px;
  max-height: 180px;
  width: 100%;
  padding: 6px 18px 0;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff;
  font-family: inherit;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  font-weight: 640;
  line-height: 1.3;
  resize: vertical;
  outline: none !important;
  box-shadow: none !important;
}

.admin-studio-create-composer textarea:focus {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.admin-studio-create-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.admin-studio-create-composer form > div {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 0 4px;
  border-top: 0;
  background: transparent;
}

.admin-studio-create-composer form > div span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.admin-studio-create-settings {
  position: relative;
  flex: 0 0 auto;
}

.admin-studio-create-settings summary {
  appearance: none;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-create-settings summary::-webkit-details-marker {
  display: none;
}

.admin-studio-create-settings summary::marker {
  content: "";
}

.admin-studio-create-settings summary:is(:hover, :focus-visible),
.admin-studio-create-settings[open] summary {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
  transform: translateY(-1px);
}

.admin-studio-create-settings summary svg {
  width: 17px;
  height: 17px;
}

.admin-studio-create-settings-panel {
  position: absolute;
  right: -58px;
  bottom: calc(100% + 14px);
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  width: min(350px, calc(100vw - 44px));
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(54, 54, 52, 0.92), rgba(22, 22, 21, 0.94)),
    rgba(22, 22, 21, 0.92);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(130%);
}

.admin-studio-create-settings-panel label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-create-settings-panel label:first-child {
  grid-column: 1 / -1;
}

.admin-studio-create-settings-panel label span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-create-settings-panel :is(input, select) {
  min-width: 0;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.085);
  color: #ffffff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  outline: none;
}

.admin-studio-create-settings-panel select option {
  color: #111827;
}

.admin-studio-create-settings-panel :is(input, select):focus {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.admin-studio-create-packet {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: stretch;
  justify-content: space-between;
  padding: 18px;
}

.admin-studio-create-packet-copy {
  flex: 1 1 420px;
  display: grid;
  min-width: 0;
  gap: 7px;
  align-content: center;
}

.admin-studio-create-packet strong {
  min-width: 0;
  color: #111827;
  font-size: 1.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.admin-studio-create-packet p {
  display: -webkit-box;
  min-width: 0;
  margin: 0;
  color: #4b5563;
  font-size: 0.9rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.admin-studio-create-packet-next {
  flex: 0 1 390px;
  display: grid;
  min-width: min(100%, 300px);
  gap: 12px;
  align-content: center;
}

.admin-studio-create-packet-status {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #f9fafb;
}

.admin-studio-create-packet-status strong {
  color: #111827;
  font-size: 0.96rem;
  line-height: 1.2;
}

.admin-studio-create-packet-status p {
  display: block;
  color: #4b5563;
  font-size: 0.82rem;
  -webkit-line-clamp: initial;
}

.admin-studio-create-packet-status.is-waiting {
  border-color: rgba(37, 99, 235, 0.24);
  background: #eff6ff;
}

.admin-studio-create-packet-status.is-ready {
  border-color: rgba(22, 163, 74, 0.24);
  background: #f0fdf4;
}

.admin-studio-create-packet-status.is-running {
  border-color: rgba(37, 99, 235, 0.3);
  background: #eff6ff;
}

.admin-studio-create-packet-status.is-running span,
.admin-studio-create-packet-status.is-running strong {
  color: #1d4ed8;
}

.admin-studio-create-packet-status.is-warning {
  border-color: rgba(217, 119, 6, 0.3);
  background: #fffbeb;
}

.admin-studio-create-packet-status.is-warning span,
.admin-studio-create-packet-status.is-warning strong {
  color: #92400e;
}

.admin-studio-create-packet-status.is-error {
  border-color: rgba(220, 38, 38, 0.28);
  background: #fef2f2;
}

.admin-studio-create-packet-status.is-error span,
.admin-studio-create-packet-status.is-error strong {
  color: #991b1b;
}

.admin-studio-create-preview-resume {
  display: grid;
  gap: 10px;
}

.admin-studio-create-preview {
  display: grid;
  gap: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-studio-create-preview-main {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3.4vw, 34px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(3, 7, 18, 0.96)),
    #111827;
  color: #ffffff;
}

.admin-studio-create-preview-main h2 {
  max-width: 980px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 2.45rem);
  font-weight: 950;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-create-preview-main p {
  max-width: 820px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.48;
}

.admin-studio-create-preview-main .admin-studio-create-preview-summary {
  max-width: 920px;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.92rem, 1.1vw, 1rem);
  font-weight: 760;
}

.admin-studio-create-preview-main .admin-studio-create-preview-note {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.8rem;
}

.admin-studio-create-summary-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0 14px 14px;
  padding: 16px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background: var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  box-shadow: var(--studio-admin-card-shadow, 0 12px 30px rgba(15, 23, 42, 0.06));
}

.admin-studio-create-summary-card header {
  display: grid;
  gap: 5px;
}

.admin-studio-create-summary-card header span {
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-create-summary-card header strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.02rem, 1.35vw, 1.26rem);
  font-weight: 950;
  line-height: 1.14;
}

.admin-studio-create-summary-card .admin-studio-create-preview-summary {
  max-width: 980px;
  margin: 0;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.52;
}

.admin-studio-create-summary-card .admin-studio-create-preview-stats span,
.admin-studio-create-summary-card .admin-studio-create-chip-row span {
  border-color: var(--studio-admin-border, rgba(17, 24, 39, 0.08));
  background: var(--studio-admin-chip-bg, rgba(17, 24, 39, 0.04));
  color: var(--studio-admin-chip-text, #374151);
}

.admin-studio-create-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-create-preview-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-transform: none;
}

.admin-studio-create-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-create-chip-row span {
  display: inline-flex;
  max-width: 260px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-create-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.admin-studio-create-decision-focus {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(37, 99, 235, 0.05)),
    #fffbeb;
  color: #111827;
}

.admin-studio-create-decision-focus > div {
  display: grid;
  gap: 8px;
}

.admin-studio-create-decision-focus span,
.admin-studio-create-review-sources summary span {
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-create-decision-focus strong,
.admin-studio-create-review-sources summary strong {
  color: #111827;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-create-decision-focus p {
  margin: 0;
  color: #78350f;
  font-size: 0.84rem;
  font-weight: 730;
  line-height: 1.42;
}

.admin-studio-create-decision-focus ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.admin-studio-create-decision-focus li {
  color: #451a03;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.admin-studio-create-review-sources {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
}

.admin-studio-create-review-sources summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 54px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-create-review-sources summary::-webkit-details-marker {
  display: none;
}

.admin-studio-create-review-sources summary::after {
  content: "+";
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #f9fafb;
  color: #111827;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-create-review-sources[open] summary::after {
  content: "-";
}

.admin-studio-create-review-sources .admin-studio-create-review-grid {
  padding: 0 14px 14px;
}

.admin-studio-create-review-grid article {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  min-height: 152px;
  padding: 16px;
  box-shadow: none;
}

.admin-studio-create-review-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: #374151;
  font-size: 0.8rem;
  line-height: 1.42;
}

.admin-studio-create-review-grid li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-studio-create-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-intake-command-board {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--studio-admin-text, #111827);
  box-shadow: none;
}

.admin-studio-intake-command-board > header {
  order: 1;
}

.admin-studio-intake-command-board > .admin-studio-command-guide {
  order: 2;
}

.admin-studio-intake-command-board > .admin-studio-intake-saved-note {
  order: 3;
}

.admin-studio-intake-command-board > .admin-studio-intake-continue-gate,
.admin-studio-intake-command-board > .admin-studio-intake-primary-grid {
  order: 1;
}

.admin-studio-intake-command-board > .admin-studio-intake-decision-strip {
  order: 2;
}

.admin-studio-intake-command-board > .admin-studio-preview-detail-panel.is-main {
  order: 4;
}

.admin-studio-intake-command-board > .admin-studio-episode-diff-board {
  order: 5;
}

.admin-studio-intake-command-board > .admin-studio-flow-command-dock {
  order: 6;
}

.admin-studio-intake-command-board > .admin-studio-preview-detail-panel.is-advanced {
  order: 7;
}

.admin-studio-intake-command-board > .admin-studio-episode-diff-board + .admin-studio-preview-detail-panel.is-advanced {
  order: 7;
}

.admin-studio-intake-command-board header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.admin-studio-intake-command-board header > div {
  display: grid;
  gap: 6px;
}

.admin-studio-intake-command-board header span,
.admin-studio-intake-saved-note span,
.admin-studio-intake-issue-grid button span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-intake-command-board header strong {
  color: #111827;
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-intake-command-board header p {
  max-width: 560px;
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-command-guide {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.admin-studio-command-guide span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 999px;
  background: var(--studio-admin-surface-soft, #f8fafc);
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-command-guide span:last-child {
  border-color: rgba(37, 99, 235, 0.2);
  background: var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.08));
  color: var(--studio-admin-blue-strong, #1d4ed8);
}

.admin-studio-intake-continue-gate {
  display: flex;
  justify-content: flex-end;
}

.admin-studio-intake-continue-card {
  position: relative;
  width: min(420px, 100%);
  min-height: 118px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 28%, transparent);
  border-radius: 12px;
  background:
    radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 9%, transparent), color-mix(in srgb, #14b8a6 7%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 82%, transparent),
    0 18px 44px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-intake-continue-card > form {
  display: contents;
}

.admin-studio-intake-continue-card:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 46%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 82%, transparent),
    0 22px 52px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 14%, transparent);
  transform: translateY(-1px);
}

.admin-studio-intake-continue-card.is-selected {
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 62%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 12%, transparent),
    0 24px 56px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 16%, transparent);
  animation: admin-studio-selected-breathe 1.95s ease-in-out infinite;
}

.admin-studio-intake-continue-card.is-selected::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 32%,
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 46%, transparent) 46%,
    color-mix(in srgb, var(--studio-admin-accent, #2563eb) 14%, transparent) 52%,
    transparent 66%,
    transparent 100%
  );
  opacity: 0.62;
  pointer-events: none;
  transform: translateX(-74%);
  animation: admin-studio-selected-sheen 2.25s ease-in-out infinite;
}

.admin-studio-intake-continue-card.is-selected .admin-studio-primary-card-action {
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 48%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent),
    0 13px 28px color-mix(in srgb, var(--studio-admin-text, #111827) 16%, transparent);
  animation: admin-studio-ready-action-pulse 1.45s ease-in-out infinite;
}

.admin-studio-intake-continue-card > .admin-studio-card-main,
.admin-studio-intake-continue-card > form > .admin-studio-card-main,
.admin-studio-intake-continue-card > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within),
.admin-studio-intake-continue-card > form > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within) {
  appearance: none;
  display: grid;
  width: 100%;
  min-height: 116px;
  gap: 8px;
  align-content: start;
  padding: 15px;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  box-shadow: none !important;
  outline: none !important;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform: none !important;
}

.admin-studio-intake-continue-card .admin-studio-card-main:disabled {
  cursor: wait;
}

.admin-studio-intake-continue-card .admin-studio-card-main.is-submitting .admin-studio-primary-card-action {
  animation: admin-studio-ready-action-pulse 1s ease-in-out infinite;
}

.admin-studio-intake-continue-card .admin-studio-card-main.is-submitting .admin-studio-primary-card-action svg {
  animation: admin-studio-spin 0.9s linear infinite;
}

.admin-studio-intake-continue-card .admin-studio-card-main span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 78%, transparent);
  color: var(--studio-admin-blue-strong, #1d4ed8);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-intake-continue-card .admin-studio-card-main strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.12rem, 1.8vw, 1.48rem);
  font-weight: 950;
  line-height: 1;
}

.admin-studio-intake-continue-card .admin-studio-card-main small {
  max-width: 300px;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.35;
}

.admin-studio-intake-continue-gate.is-floating {
  position: fixed;
  right: max(24px, calc((100vw - 638px) / 2));
  bottom: 168px;
  left: max(24px, calc((100vw - 638px) / 2));
  z-index: 44;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

body:has(.admin-studio-flow-command-dock.has-tray-items) .admin-studio-intake-continue-gate.is-floating {
  bottom: 214px;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card {
  width: min(352px, 100%);
  min-height: 78px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 0%, rgba(125, 211, 252, 0.32), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(52, 52, 50, 0.78), rgba(20, 20, 19, 0.86));
  color: #ffffff;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(135%);
  pointer-events: auto;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card::after {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -52%;
  width: 44%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.34) 50%, rgba(125, 211, 252, 0.12) 68%, transparent 100%);
  opacity: 0;
  transform: translateX(-30%) skewX(-12deg);
  animation: admin-studio-looks-good-sweep 2.8s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card:is(:hover, :focus-within) {
  box-shadow:
    0 26px 78px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(147, 197, 253, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card > .admin-studio-card-main,
.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card > form > .admin-studio-card-main,
.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within),
.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card > form > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within) {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 76px;
  gap: 5px 12px;
  align-content: center;
  padding: 13px 14px 13px 16px;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main span {
  grid-column: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main strong {
  grid-column: 1;
  color: #ffffff;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main small {
  grid-column: 1;
  max-width: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  line-height: 1.2;
}

.admin-studio-intake-continue-gate.is-floating .admin-studio-primary-card-action {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  min-height: 46px;
  padding: 0 14px 0 16px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.96);
  color: #111827;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    0 0 0 4px rgba(255, 255, 255, 0.08);
}

html[data-theme="light"] .admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card {
  background:
    radial-gradient(circle at 86% 0%, rgba(37, 99, 235, 0.13), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(20, 184, 166, 0.1), transparent 38%),
    rgba(255, 255, 255, 0.88);
  color: #111827;
  box-shadow:
    0 22px 64px rgba(15, 23, 42, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

html[data-theme="light"] .admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main span {
  color: rgba(15, 23, 42, 0.5);
}

html[data-theme="light"] .admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main strong {
  color: #111827;
}

html[data-theme="light"] .admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card .admin-studio-card-main small {
  color: rgba(15, 23, 42, 0.6);
}

@media (max-width: 700px) {
  .admin-studio-intake-continue-gate.is-floating {
    right: 12px;
    bottom: 130px;
    left: 12px;
    justify-content: center;
  }

  body:has(.admin-studio-flow-command-dock.has-tray-items) .admin-studio-intake-continue-gate.is-floating {
    bottom: 180px;
  }

  .admin-studio-intake-continue-gate.is-floating .admin-studio-intake-continue-card {
    width: min(100%, 360px);
  }
}

.admin-studio-intake-approved-state {
  display: grid;
  gap: 7px;
  margin: 0 0 4px;
  padding: 15px 16px;
  border: 1px solid color-mix(in srgb, #22c55e 24%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  border-radius: 16px;
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, #22c55e 16%, transparent), transparent 32%),
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent);
  color: var(--studio-admin-text, #111827);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
    0 14px 32px color-mix(in srgb, #22c55e 7%, transparent);
}

.admin-studio-intake-approved-state span {
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, #22c55e 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #22c55e 10%, transparent);
  color: color-mix(in srgb, #15803d 86%, var(--studio-admin-text, #111827));
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-intake-approved-state strong {
  color: var(--studio-admin-text, #111827);
  font-size: 1.02rem;
  font-weight: 940;
  line-height: 1.14;
}

.admin-studio-intake-approved-state p {
  max-width: 620px;
  margin: 0;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

@keyframes admin-studio-looks-good-sweep {
  0%,
  44% {
    transform: translateX(-30%) skewX(-12deg);
    opacity: 0;
  }
  55% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(345%) skewX(-12deg);
    opacity: 0;
  }
}

.admin-studio-intake-primary-grid {
  grid-template-columns: minmax(0, min(520px, 100%));
  justify-content: flex-start;
}

.admin-studio-intake-primary-grid .admin-studio-intake-issue-card {
  width: min(520px, 100%);
  min-height: 132px;
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 34%, transparent);
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 12%, transparent), rgba(20, 184, 166, 0.08)),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 86%, transparent),
    0 18px 44px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent);
}

.admin-studio-intake-decision-strip {
  display: grid;
  gap: 10px;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card {
  min-height: 0;
  padding: 12px 14px;
}

.admin-studio-intake-decision-strip .admin-studio-card-main {
  position: relative;
  min-height: 0;
  padding-right: 0;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main,
.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.admin-studio-intake-decision-strip .admin-studio-card-main strong {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}

.admin-studio-intake-decision-strip .admin-studio-card-main small {
  margin-top: 0;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working .admin-studio-card-main small:empty {
  display: none;
}

.admin-studio-intake-primary-grid .admin-studio-card-main {
  min-height: 104px;
  padding: 0;
}

.admin-studio-intake-primary-grid .admin-studio-card-main strong {
  max-width: 420px;
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.38rem, 2.5vw, 2.12rem);
  line-height: 0.98;
  letter-spacing: 0;
  -webkit-line-clamp: 1;
}

.admin-studio-intake-primary-grid .admin-studio-card-main span {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 72%, transparent);
  color: var(--studio-admin-blue-strong, #1d4ed8);
}

.admin-studio-intake-primary-grid .admin-studio-card-main small {
  max-width: 440px;
  margin-top: 0;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-studio-primary-card-action {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  justify-self: end;
  gap: 9px;
  margin-top: 12px;
  padding: 11px 14px 11px 16px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-text, #111827) 92%, transparent);
  color: var(--studio-admin-surface-strong, #ffffff);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 920;
  line-height: 1;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--studio-admin-text, #111827) 13%, transparent);
}

.admin-studio-primary-card-action svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
  transition: transform 160ms ease;
}

.admin-studio-intake-issue-card.is-primary:is(:hover, :focus-within) .admin-studio-primary-card-action svg {
  transform: translateX(2px);
}

.admin-studio-preview-detail-panel {
  display: grid;
  min-width: 0;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 10px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 78%, transparent);
  color: var(--studio-admin-text, #111827);
  overflow: clip;
}

.admin-studio-preview-detail-panel > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 13px 14px;
  color: var(--studio-admin-text, #111827);
  cursor: pointer;
  list-style: none;
}

.admin-studio-preview-detail-panel > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-preview-detail-panel > summary::after {
  content: "+";
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 999px;
  color: var(--studio-admin-muted, #6b7280);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
}

.admin-studio-preview-detail-panel[open] > summary {
  border-bottom: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
}

.admin-studio-preview-detail-panel.is-main > summary {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 7%, transparent), rgba(20, 184, 166, 0.055)),
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 92%, transparent);
}

.admin-studio-preview-detail-panel.is-advanced {
  opacity: 0.88;
}

.admin-studio-preview-detail-panel.is-advanced > summary {
  min-height: 48px;
  background: color-mix(in srgb, var(--studio-admin-surface-soft, #f8fafc) 74%, transparent);
}

.admin-studio-preview-detail-panel[open] > summary::after {
  content: "-";
}

.admin-studio-preview-detail-panel > summary span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--studio-admin-surface-soft, #f8fafc);
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.7rem;
  font-weight: 930;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-preview-detail-panel > summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--studio-admin-text, #111827);
  font-size: 0.94rem;
  font-weight: 920;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-preview-detail-panel > summary small {
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.75rem;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.admin-studio-preview-detail-panel > :not(summary) {
  padding: 14px;
}

.admin-studio-intake-saved-note {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  border-radius: 8px;
  background: #f0fdf4;
}

.admin-studio-intake-saved-note span {
  color: #15803d;
}

.admin-studio-intake-saved-note p {
  display: -webkit-box;
  margin: 0;
  color: #166534;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.admin-studio-intake-issue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.admin-studio-intake-issue-grid button {
  appearance: none;
  display: grid;
  min-height: 118px;
  gap: 8px;
  align-content: start;
  padding: 13px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  font: inherit;
  text-align: left;
  cursor: grab;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-intake-issue-grid button:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.28);
  background: #eff6ff;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  outline: none;
  transform: translateY(-2px);
}

.admin-studio-intake-issue-grid button.is-primary {
  border-color: rgba(37, 99, 235, 0.24);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(20, 184, 166, 0.08)),
    #eff6ff;
}

.admin-studio-intake-issue-grid button.is-primary span {
  color: #1d4ed8;
}

.admin-studio-intake-issue-grid button.is-selected,
.admin-studio-episode-prep-grid button.is-selected {
  border-color: rgba(37, 99, 235, 0.52);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(20, 184, 166, 0.08)),
    #eff6ff;
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 16px 34px rgba(37, 99, 235, 0.13);
  transform: translateY(-2px);
}

.admin-studio-intake-issue-grid button.is-selected::after,
.admin-studio-episode-prep-grid button.is-selected::after {
  content: "Selected";
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 6px 8px;
  border-radius: 999px;
  background: #2563eb;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-intake-issue-grid button:active {
  cursor: grabbing;
}

.admin-studio-intake-issue-grid button strong {
  color: #111827;
  font-size: 0.88rem;
  font-weight: 880;
  line-height: 1.25;
}

.admin-studio-intake-issue-card > .admin-studio-card-main strong {
  display: -webkit-box;
  min-width: 0;
  color: var(--studio-admin-text, #111827);
  font-size: 0.88rem;
  font-weight: 880;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.admin-studio-intake-issue-grid button small {
  margin-top: auto;
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-character-prep-board {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.admin-studio-season-bible-board {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.admin-studio-episode-prep-board {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.admin-studio-episode-diff-board {
  display: grid;
  gap: 14px;
  padding-top: 2px;
}

.admin-studio-character-prep-board header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.admin-studio-season-bible-board header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.admin-studio-episode-prep-board header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.admin-studio-episode-diff-board header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.admin-studio-character-prep-board header > div {
  display: grid;
  gap: 6px;
}

.admin-studio-season-bible-board header > div {
  display: grid;
  gap: 6px;
}

.admin-studio-episode-prep-board header > div {
  display: grid;
  gap: 6px;
}

.admin-studio-episode-diff-board header > div {
  display: grid;
  gap: 6px;
}

.admin-studio-character-prep-board header span,
.admin-studio-season-bible-board header span,
.admin-studio-episode-prep-board header span,
.admin-studio-episode-diff-board header span,
.admin-studio-episode-diff-grid article > div span,
.admin-studio-episode-diff-grid section span,
.admin-studio-season-bible-card span,
.admin-studio-season-bible-card dt,
.admin-studio-episode-prep-grid button span,
.admin-studio-character-prep-status {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-prep-board header strong {
  color: #111827;
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-season-bible-board header strong {
  color: #111827;
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-episode-prep-board header strong {
  color: #111827;
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-episode-diff-board header strong {
  color: #111827;
  font-size: clamp(1.1rem, 1.6vw, 1.42rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-character-prep-board header p {
  max-width: 560px;
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-season-bible-board header p {
  max-width: 560px;
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-episode-prep-board header p {
  max-width: 560px;
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-episode-diff-board header p {
  max-width: 560px;
  margin: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-episode-prep-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-season-bible-card {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background: var(--studio-admin-surface-soft, #f9fafb);
  color: var(--studio-admin-text, #111827);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-season-bible-card:is(:hover, :focus-within) {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.28));
  background: var(--studio-admin-hover-bg, #eff6ff);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.admin-studio-season-bible-card.is-selected {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.52));
  background:
    linear-gradient(135deg, var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.12)), rgba(20, 184, 166, 0.08)),
    var(--studio-admin-hover-bg, #eff6ff);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 16px 34px rgba(37, 99, 235, 0.13);
}

.admin-studio-season-bible-card.is-selected::after {
  content: "Selected";
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--studio-admin-accent, #2563eb);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-season-bible-card > .admin-studio-card-main {
  appearance: none;
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: grab;
}

.admin-studio-season-bible-card strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.05rem, 1.3vw, 1.32rem);
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-season-bible-card small,
.admin-studio-season-bible-card dd {
  margin: 0;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.8rem;
  font-weight: 730;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.admin-studio-season-bible-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
}

.admin-studio-season-bible-card dl div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.08));
  border-radius: 8px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 72%, transparent);
}

.admin-studio-season-bible-field {
  appearance: none;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.08));
  border-radius: 8px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 76%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: grab;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.admin-studio-season-bible-field:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.36));
  background:
    linear-gradient(135deg, var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.1)), rgba(20, 184, 166, 0.06)),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.admin-studio-season-bible-field.is-selected {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.55));
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(20, 184, 166, 0.08)),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 12px 26px rgba(37, 99, 235, 0.13);
}

.admin-studio-episode-prep-grid button {
  appearance: none;
  display: grid;
  min-height: 0;
  gap: 8px;
  align-content: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: grab;
  transition: none;
}

.admin-studio-episode-prep-grid button:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

.admin-studio-episode-prep-grid button:active {
  cursor: grabbing;
}

.admin-studio-episode-prep-grid i {
  display: inline-grid;
  width: fit-content;
  min-height: 32px;
  min-width: 54px;
  place-items: center;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 940;
  line-height: 1;
}

.admin-studio-episode-prep-grid strong {
  min-width: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 930;
  line-height: 1.13;
  overflow-wrap: anywhere;
}

.admin-studio-episode-prep-grid small {
  display: block;
  min-width: 0;
  color: #4b5563;
  font-size: 0.84rem;
  font-weight: 730;
  line-height: 1.45;
  overflow: visible;
  white-space: normal;
}

.admin-studio-episode-diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}

.admin-studio-episode-diff-grid article {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.07), rgba(20, 184, 166, 0.055)),
    #ffffff;
  color: #111827;
}

.admin-studio-episode-diff-grid article.is-applied {
  border-color: rgba(22, 163, 74, 0.22);
  background: #f0fdf4;
}

.admin-studio-episode-diff-grid article > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-episode-diff-grid article > div strong {
  display: inline-grid;
  min-height: 32px;
  min-width: 54px;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 940;
}

.admin-studio-episode-diff-grid section {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
}

.admin-studio-episode-diff-grid section strong {
  color: #111827;
  font-size: 0.94rem;
  font-weight: 930;
  line-height: 1.15;
}

.admin-studio-episode-diff-grid :is(section p, article > p, li) {
  margin: 0;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.admin-studio-episode-diff-grid ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.admin-studio-episode-diff-grid form {
  display: flex;
  justify-content: flex-end;
}

.admin-studio-episode-diff-grid button {
  appearance: none;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-studio-character-prep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 12px;
}

.admin-studio-character-prep-grid article {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
  padding: 13px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background: var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  cursor: grab;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-character-prep-grid article.is-matched {
  border-color: color-mix(in srgb, #22c55e 34%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background: color-mix(in srgb, #ecfdf5 72%, var(--studio-admin-surface-strong, #ffffff));
}

.admin-studio-character-prep-grid article.is-new,
.admin-studio-character-prep-grid article.is-variant {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background: color-mix(in srgb, #fff7ed 74%, var(--studio-admin-surface-strong, #ffffff));
}

.admin-studio-character-prep-grid article.is-offscreen {
  border-color: color-mix(in srgb, var(--studio-admin-muted, #6b7280) 24%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background: color-mix(in srgb, var(--studio-admin-surface-soft, #f9fafb) 84%, var(--studio-admin-surface-strong, #ffffff));
  opacity: 0.88;
}

.admin-studio-character-prep-grid article.is-saved {
  border-color: color-mix(in srgb, #16a34a 46%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background:
    radial-gradient(circle at 96% 10%, color-mix(in srgb, #16a34a 14%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 84%, transparent),
    0 12px 26px color-mix(in srgb, #16a34a 9%, transparent);
}

.admin-studio-character-prep-grid article.is-failed {
  border-color: color-mix(in srgb, #ef4444 46%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background:
    radial-gradient(circle at 96% 10%, color-mix(in srgb, #ef4444 12%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, #ef4444 7%, transparent), color-mix(in srgb, #f97316 4%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
}

.admin-studio-character-prep-grid article.is-needs-choice {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background:
    radial-gradient(circle at 96% 10%, color-mix(in srgb, #f59e0b 13%, transparent), transparent 34%),
    var(--studio-admin-surface-strong, #ffffff);
}

.admin-studio-character-prep-grid article:is(:hover, :focus-within, :focus-visible) {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.28));
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
  transform: translateY(-1px);
}

.admin-studio-character-prep-grid article:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 24%, transparent);
  outline-offset: 2px;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main {
  appearance: none;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px 11px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: inherit;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main:is(:hover, :focus-visible) {
  outline: none;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main i {
  grid-row: 1 / span 2;
  overflow: hidden;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent-soft, #dbeafe) 72%, transparent), transparent),
    var(--studio-admin-surface-soft, #f9fafb);
  color: var(--studio-admin-text, #111827);
  font-style: normal;
  font-weight: 950;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main img.is-turnaround {
  object-fit: contain;
  padding: 3px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.22)),
    var(--studio-admin-surface, #ffffff);
}

.admin-studio-character-prep-grid article > .admin-studio-card-main strong {
  min-width: 0;
  color: var(--studio-admin-text, #111827);
  font-size: 1.01rem;
  font-weight: 930;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main small {
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.admin-studio-character-prep-status {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-soft, #f9fafb) 78%, transparent);
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.69rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-studio-character-prep-run-state {
  justify-self: start;
  width: fit-content;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 78%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 62%, transparent);
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.68rem;
  font-weight: 940;
  line-height: 1;
}

.admin-studio-character-prep-grid article.is-saved .admin-studio-character-prep-run-state {
  border-color: color-mix(in srgb, #16a34a 28%, transparent);
  background: color-mix(in srgb, #16a34a 9%, transparent);
  color: #0f7a3b;
}

.admin-studio-character-prep-grid article.is-failed .admin-studio-character-prep-run-state {
  border-color: color-mix(in srgb, #ef4444 28%, transparent);
  background: color-mix(in srgb, #ef4444 8%, transparent);
  color: #b91c1c;
}

.admin-studio-character-prep-grid article.is-needs-choice .admin-studio-character-prep-run-state {
  border-color: color-mix(in srgb, #f59e0b 30%, transparent);
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  color: #92400e;
}

.admin-studio-character-prep-grid footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

.admin-studio-character-prep-grid footer a,
.admin-studio-character-prep-grid footer button,
.admin-studio-character-prep-grid footer span {
  appearance: none;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 999px;
  background: var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  font: inherit;
  font-size: 0.77rem;
  font-weight: 880;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.admin-studio-character-prep-grid footer span {
  color: var(--studio-admin-muted, #4b5563);
  cursor: default;
}

.admin-studio-character-prep-grid footer button:disabled {
  cursor: default;
  opacity: 0.58;
}

.admin-studio-intake-issue-card,
.admin-studio-episode-prep-card {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: start;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 8px;
  background: color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 58%, transparent);
  color: var(--studio-admin-text, #111827);
  backdrop-filter: blur(12px) saturate(120%);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-intake-issue-card {
  min-height: 118px;
  padding: 13px;
}

.admin-studio-episode-prep-card {
  min-height: 0;
  padding: 14px 16px;
}

.admin-studio-intake-issue-card:is(:hover, :focus-within),
.admin-studio-episode-prep-card:is(:hover, :focus-within) {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.28));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 6%, transparent), transparent),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 68%, transparent);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card {
  background: color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 34%, transparent);
  box-shadow: none;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card:is(:hover, :focus-within) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 5%, transparent), transparent),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 46%, transparent);
}

.admin-studio-intake-issue-card.is-primary {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.24));
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.1)), rgba(20, 184, 166, 0.08)),
    var(--studio-admin-hover-bg, #eff6ff);
}

.admin-studio-intake-issue-card.is-selected,
.admin-studio-episode-prep-card.is-selected,
.admin-studio-character-prep-grid article.is-selected {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.52));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 12%, transparent), rgba(20, 184, 166, 0.08)),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 58%, transparent);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.1),
    0 16px 34px rgba(37, 99, 235, 0.13);
  animation: admin-studio-selected-breathe 1.95s ease-in-out infinite;
}

.admin-studio-intake-primary-grid .admin-studio-intake-issue-card.is-selected {
  background:
    radial-gradient(circle at 14% 12%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 20%, transparent), transparent 34%),
    linear-gradient(135deg, var(--studio-admin-blue-soft, rgba(37, 99, 235, 0.12)), rgba(20, 184, 166, 0.08)),
    var(--studio-admin-hover-bg, #eff6ff);
}

.admin-studio-intake-issue-card.is-selected::after,
.admin-studio-episode-prep-card.is-selected::after,
.admin-studio-character-prep-grid article.is-selected::after {
  content: "Ready";
  display: inline-flex;
  width: fit-content;
  margin-top: auto;
  padding: 6px 8px;
  border-radius: 999px;
  background: var(--studio-admin-accent, #2563eb);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-intake-issue-card.is-selected:not(.is-working, .is-saved)::before,
.admin-studio-episode-prep-card.is-selected::before,
.admin-studio-character-prep-grid article.is-selected::before,
.admin-studio-season-bible-card.is-selected::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 34%,
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 38%, transparent) 48%,
    color-mix(in srgb, var(--studio-admin-accent, #2563eb) 11%, transparent) 54%,
    transparent 68%,
    transparent 100%
  );
  opacity: 0.5;
  pointer-events: none;
  transform: translateX(-76%);
  animation: admin-studio-selected-sheen 2.35s ease-in-out infinite;
}

.admin-studio-season-bible-card.is-selected {
  animation: admin-studio-selected-breathe 1.95s ease-in-out infinite;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working,
.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved {
  padding: 13px 52px 13px 14px;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working {
  overflow: hidden;
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 24%, transparent);
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 9%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 5%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 44%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
    0 12px 28px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 7%, transparent);
  animation: admin-studio-card-working-pulse 1.9s ease-in-out infinite;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--studio-admin-muted, #6b7280) 15%, transparent);
  border-top-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 72%, var(--studio-admin-muted, #6b7280));
  border-radius: 999px;
  opacity: 0.86;
  animation: admin-studio-spin 980ms linear infinite;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working .admin-studio-card-main::before {
  content: "";
  position: absolute;
  inset: -18px auto -18px -42%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 48%, transparent),
    color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent),
    transparent
  );
  filter: blur(1px);
  opacity: 0.58;
  pointer-events: none;
  transform: skewX(-12deg);
  animation: admin-studio-card-working-sweep 1.25s ease-in-out infinite;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working::after {
  content: none;
  display: none;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working .admin-studio-card-main span {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 6%, transparent);
  color: color-mix(in srgb, var(--studio-admin-blue-strong, #1d4ed8) 78%, var(--studio-admin-muted, #6b7280));
  font-size: 0.67rem;
  letter-spacing: 0.02em;
}

.admin-studio-intake-continue-card.is-working,
.admin-studio-season-bible-card.is-working,
.admin-studio-episode-prep-card.is-working,
.admin-studio-character-prep-grid article.is-working {
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 34%, transparent);
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 6%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 44%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 54%, transparent),
    0 14px 32px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent);
  transform: none;
  animation: admin-studio-card-working-pulse 1.9s ease-in-out infinite;
}

.admin-studio-character-prep-grid article.is-working {
  cursor: progress;
}

.admin-studio-character-prep-grid article.is-working > * {
  position: relative;
  z-index: 2;
}

.admin-studio-character-prep-grid article.is-working::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 28%,
      color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 34%, transparent) 43%,
      color-mix(in srgb, var(--studio-admin-accent, #2563eb) 13%, transparent) 51%,
      color-mix(in srgb, #14b8a6 10%, transparent) 58%,
      transparent 72%,
      transparent 100%
    ),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 8%, transparent), transparent 62%);
  opacity: 0.74;
  pointer-events: none;
  transform: translateX(-76%);
  animation: admin-studio-character-card-working-sweep 1.34s ease-in-out infinite;
}

.admin-studio-intake-continue-card.is-working::after,
.admin-studio-season-bible-card.is-working::after,
.admin-studio-episode-prep-card.is-working::after,
.admin-studio-character-prep-grid article.is-working::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 3;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--studio-admin-muted, #6b7280) 15%, transparent);
  border-top-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 74%, var(--studio-admin-muted, #6b7280));
  border-radius: 999px;
  background: transparent;
  opacity: 0.88;
  animation: admin-studio-spin 980ms linear infinite;
}

.admin-studio-intake-continue-card.is-working > .admin-studio-card-main,
.admin-studio-season-bible-card.is-working > .admin-studio-card-main,
.admin-studio-episode-prep-card.is-working > .admin-studio-card-main,
.admin-studio-character-prep-grid article.is-working > .admin-studio-card-main {
  position: relative;
  overflow: hidden;
}

.admin-studio-intake-continue-card.is-working > .admin-studio-card-main::before,
.admin-studio-season-bible-card.is-working > .admin-studio-card-main::before,
.admin-studio-episode-prep-card.is-working > .admin-studio-card-main::before,
.admin-studio-character-prep-grid article.is-working > .admin-studio-card-main::before {
  content: "";
  position: absolute;
  inset: -18px auto -18px -42%;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 38%, transparent),
    color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent),
    transparent
  );
  filter: blur(1px);
  opacity: 0.58;
  pointer-events: none;
  transform: skewX(-12deg);
  animation: admin-studio-card-working-sweep 1.25s ease-in-out infinite;
}

.admin-studio-character-prep-grid article.is-working > .admin-studio-card-main::before {
  content: none;
}

.admin-studio-character-prep-grid article.is-working .admin-studio-character-prep-run-state {
  border-color: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 28%, transparent);
  background: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, var(--studio-admin-surface-strong, #ffffff));
  color: color-mix(in srgb, var(--studio-admin-blue-strong, #1d4ed8) 78%, var(--studio-admin-text, #111827));
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved {
  overflow: hidden;
  border-color: color-mix(in srgb, #16a34a 42%, transparent);
  background:
    radial-gradient(circle at 98% 4%, color-mix(in srgb, #16a34a 16%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    color-mix(in srgb, var(--studio-admin-card, rgba(255, 255, 255, 0.72)) 44%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 84%, transparent),
    0 10px 24px color-mix(in srgb, #16a34a 9%, transparent);
  transform: none;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved::before {
  content: "✓";
  position: absolute;
  top: 12px;
  right: 13px;
  z-index: 2;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid color-mix(in srgb, #16a34a 28%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #ffffff 82%, transparent), color-mix(in srgb, #16a34a 12%, transparent)),
    color-mix(in srgb, #16a34a 15%, transparent);
  color: #0f7a3b;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 7px 14px color-mix(in srgb, #16a34a 11%, transparent);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved > .admin-studio-card-main {
  gap: 7px;
  cursor: default;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved .admin-studio-card-main span {
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, #16a34a 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 8%, transparent);
  color: #0f7a3b;
  font-size: 0.67rem;
  letter-spacing: 0.02em;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved .admin-studio-card-main strong {
  color: color-mix(in srgb, var(--studio-admin-text, #111827) 90%, #15803d);
  font-weight: 900;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved .admin-studio-card-main small {
  color: color-mix(in srgb, #15803d 84%, var(--studio-admin-muted, #6b7280));
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved::after {
  content: none;
  display: none;
}

.admin-studio-intake-decision-strip.is-resolved {
  opacity: 0.96;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main {
  cursor: default;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved {
  min-height: 0;
  padding: 12px 48px 12px 13px;
  border-color: color-mix(in srgb, #16a34a 34%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  background:
    radial-gradient(circle at 98% 4%, color-mix(in srgb, #16a34a 13%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 84%, transparent),
    0 10px 24px color-mix(in srgb, #16a34a 9%, transparent);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main,
.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, #16a34a 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #16a34a 8%, transparent);
  color: color-mix(in srgb, #15803d 86%, var(--studio-admin-muted, #6b7280));
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main strong {
  display: block;
  min-width: 0;
  color: color-mix(in srgb, var(--studio-admin-text, #111827) 90%, #15803d);
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.24;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-resolved > .admin-studio-card-main small {
  display: block;
  margin: 0;
  color: color-mix(in srgb, #15803d 78%, var(--studio-admin-muted, #6b7280));
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.3;
}

.admin-studio-intake-applied-details {
  display: grid;
  border: 1px solid color-mix(in srgb, #16a34a 18%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  border-radius: 10px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 46%, transparent);
  color: var(--studio-admin-text, #111827);
  overflow: clip;
}

.admin-studio-intake-applied-details > summary {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.admin-studio-intake-applied-details > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-intake-applied-details > summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, #16a34a 22%, var(--studio-admin-border, rgba(17, 24, 39, 0.1)));
  border-radius: 999px;
  color: color-mix(in srgb, #15803d 84%, var(--studio-admin-muted, #6b7280));
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-intake-applied-details[open] > summary::after {
  content: "−";
}

.admin-studio-intake-applied-details > summary span {
  color: color-mix(in srgb, #15803d 78%, var(--studio-admin-muted, #6b7280));
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-intake-applied-details > summary strong {
  color: color-mix(in srgb, var(--studio-admin-text, #111827) 86%, #15803d);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-intake-applied-details .admin-studio-intake-decision-strip {
  padding: 0 10px 10px;
}

@keyframes admin-studio-card-working-sweep {
  0% {
    transform: translateX(0) skewX(-12deg);
    opacity: 0;
  }
  18% {
    opacity: 0.72;
  }
  72% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(420%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes admin-studio-character-card-working-sweep {
  0% {
    transform: translateX(-86%);
    opacity: 0;
  }
  15% {
    opacity: 0.72;
  }
  70% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(86%);
    opacity: 0;
  }
}

@keyframes admin-studio-card-working-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
      0 12px 28px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 7%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
      0 15px 34px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent);
  }
}

.admin-studio-intake-issue-card > .admin-studio-card-main,
.admin-studio-episode-prep-card > .admin-studio-card-main {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 0;
  gap: 8px 10px;
  align-content: start;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: grab;
  transform: none;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card {
  min-height: 124px;
  border-color: color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 88%, transparent);
  background: var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 88%, transparent),
    0 12px 30px color-mix(in srgb, var(--studio-admin-text, #111827) 5%, transparent);
  backdrop-filter: none;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card:is(:hover, :focus-within) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 4%, transparent), transparent),
    var(--studio-admin-surface-strong, #ffffff);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 90%, transparent),
    0 14px 34px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 8%, transparent);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-selected {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 9%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-working {
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 9%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--studio-admin-accent, #2563eb) 5%, transparent), color-mix(in srgb, #14b8a6 4%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card.is-saved {
  background:
    radial-gradient(circle at 98% 4%, color-mix(in srgb, #16a34a 12%, transparent), transparent 32%),
    linear-gradient(135deg, color-mix(in srgb, #16a34a 7%, transparent), color-mix(in srgb, #14b8a6 3%, transparent)),
    var(--studio-admin-surface-strong, #ffffff);
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main,
.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main:is(:hover, :focus, :focus-visible, :focus-within) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  align-items: start;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 74%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-soft, #f8fafc) 70%, transparent);
  color: var(--studio-admin-muted, #5d6b7d);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main strong {
  display: block;
  min-width: 0;
  color: var(--studio-admin-text, #111827);
  font-size: clamp(0.92rem, 1vw, 1.04rem);
  font-weight: 920;
  line-height: 1.24;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

.admin-studio-intake-decision-strip .admin-studio-intake-issue-card > .admin-studio-card-main small {
  display: block;
  margin: 0;
  color: var(--studio-admin-muted, #5d6b7d);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.3;
}

.admin-studio-episode-prep-card > .admin-studio-card-main i {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--studio-admin-accent, #2563eb) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-accent, #2563eb) 6%, transparent);
  color: var(--studio-admin-blue-strong, #1d4ed8);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-episode-prep-card > .admin-studio-card-main strong {
  grid-column: 1;
  grid-row: 1;
  color: var(--studio-admin-text, #111827);
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  font-weight: 930;
  line-height: 1.15;
}

.admin-studio-episode-prep-card > .admin-studio-card-main small {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--studio-admin-muted, #4b5563);
  font-size: 0.84rem;
  font-weight: 730;
  line-height: 1.45;
  white-space: normal;
  overflow: visible;
}

.admin-studio-intake-issue-card > .admin-studio-card-main:is(:hover, :focus-visible),
.admin-studio-episode-prep-card > .admin-studio-card-main:is(:hover, :focus-visible),
.admin-studio-season-bible-card > .admin-studio-card-main:is(:hover, :focus-visible),
.admin-studio-character-prep-grid article > .admin-studio-card-main:is(:hover, :focus-visible) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  outline: none;
  transform: none;
}

.admin-studio-intake-primary-grid .admin-studio-intake-issue-card > .admin-studio-card-main:is(:hover, :focus-visible) {
  background: transparent;
}

.admin-studio-character-prep-grid article {
  position: relative;
}

.admin-studio-character-prep-grid article > .admin-studio-card-main {
  padding-right: 0;
}

.admin-studio-card-main:active {
  cursor: grabbing;
}

.admin-studio-card-more {
  appearance: none;
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.12)) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 82%, transparent);
  color: var(--studio-admin-muted, #6b7280);
  font: inherit;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-card-more:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border, rgba(37, 99, 235, 0.34));
  background: var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  outline: none;
  transform: scale(1.04);
}

.admin-studio-card-more svg {
  width: 16px;
  height: 16px;
}

.admin-studio-intake-issue-card > .admin-studio-card-more,
.admin-studio-season-bible-card > .admin-studio-card-more,
.admin-studio-episode-prep-card > .admin-studio-card-more,
.admin-studio-character-prep-grid article > .admin-studio-card-more {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  place-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 86%, transparent);
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transform: none;
}

.admin-studio-intake-issue-card > .admin-studio-card-more:is(:hover, :focus-visible),
.admin-studio-season-bible-card > .admin-studio-card-more:is(:hover, :focus-visible),
.admin-studio-episode-prep-card > .admin-studio-card-more:is(:hover, :focus-visible),
.admin-studio-character-prep-grid article > .admin-studio-card-more:is(:hover, :focus-visible) {
  background: var(--studio-admin-surface-strong, #ffffff);
  outline: none;
  transform: scale(1.04);
}

.admin-studio-card-inspector {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.52);
  backdrop-filter: blur(12px);
}

.admin-studio-card-inspector > article {
  display: grid;
  width: min(620px, 100%);
  max-height: min(720px, calc(100vh - 40px));
  gap: 16px;
  overflow: auto;
  padding: 18px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.12));
  border-radius: 12px;
  background: var(--studio-admin-surface-strong, #ffffff);
  color: var(--studio-admin-text, #111827);
  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.28);
}

.admin-studio-card-inspector header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-card-inspector header > div {
  display: grid;
  gap: 7px;
}

.admin-studio-card-inspector span,
.admin-studio-card-inspector dt {
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-card-inspector strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.24rem, 2.1vw, 1.8rem);
  font-weight: 950;
  line-height: 1.08;
}

.admin-studio-card-inspector header button {
  appearance: none;
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 999px;
  background: var(--studio-admin-surface-soft, #f8fafc);
  color: var(--studio-admin-text, #111827);
  cursor: pointer;
}

.admin-studio-card-inspector header svg {
  width: 17px;
  height: 17px;
}

.admin-studio-card-inspector p,
.admin-studio-card-inspector dd {
  margin: 0;
  color: var(--studio-admin-text, #111827);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-studio-card-inspector dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-studio-card-inspector dl div {
  display: grid;
  gap: 7px;
  padding: 11px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.08));
  border-radius: 8px;
  background: var(--studio-admin-surface-soft, #f8fafc);
}

.admin-studio-card-inspector footer {
  display: flex;
  justify-content: flex-end;
}

.admin-studio-card-inspector footer button {
  appearance: none;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--studio-admin-text, #111827);
  color: var(--studio-admin-surface-strong, #ffffff);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 920;
  cursor: pointer;
}

.admin-studio-create-plan-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  min-height: 230px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
}

.admin-studio-create-plan-card > div:first-child {
  display: grid;
  gap: 8px;
}

.admin-studio-create-plan-card span,
.admin-studio-create-brief-list dt,
.admin-studio-create-episode-drafts span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-create-plan-card strong {
  min-width: 0;
  color: #111827;
  font-size: clamp(1.1rem, 1.5vw, 1.42rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-create-plan-card p {
  min-width: 0;
  margin: 0;
  color: #4b5563;
  font-size: 0.88rem;
  line-height: 1.46;
  overflow-wrap: anywhere;
}

.admin-studio-create-question-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #374151;
  font-size: 0.8rem;
  line-height: 1.42;
}

.admin-studio-create-answer-form {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.admin-studio-create-answer-form textarea {
  min-height: 112px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background: #f9fafb;
  color: #111827;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.42;
  resize: vertical;
}

.admin-studio-create-answer-form textarea:focus {
  border-color: rgba(37, 99, 235, 0.38);
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-studio-create-brief-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-studio-create-brief-list div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #f9fafb;
}

.admin-studio-create-brief-list dd {
  min-width: 0;
  margin: 0;
  color: #374151;
  font-size: 0.88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.admin-studio-create-episode-drafts {
  display: grid;
  gap: 8px;
}

.admin-studio-create-episode-drafts article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px 10px;
  min-width: 0;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #f9fafb;
}

.admin-studio-create-episode-drafts article span {
  grid-row: 1 / span 2;
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #111827;
}

.admin-studio-create-episode-drafts strong {
  font-size: 0.9rem;
  line-height: 1.18;
}

.admin-studio-create-episode-drafts p {
  display: -webkit-box;
  margin: 0;
  color: #4b5563;
  font-size: 0.78rem;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.admin-studio-create-plan-card.is-wide {
  grid-column: 1 / -1;
}

.admin-studio-create-character-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-create-character-list span {
  display: inline-flex;
  max-width: 240px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #f3f4f6;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-create-locked-note {
  margin-top: auto !important;
  color: #92400e !important;
  font-weight: 850;
}

.admin-studio-create-approval {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  box-shadow: none;
}

.admin-studio-create-approval label {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  color: #374151;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
}

.admin-studio-create-approval-warning {
  display: grid;
  justify-content: stretch;
  gap: 6px;
  border-color: rgba(217, 119, 6, 0.28);
  background: #fffbeb;
  color: #92400e;
}

.admin-studio-create-approval-warning strong {
  color: #92400e;
  font-size: 0.98rem;
}

.admin-studio-create-approval-warning p {
  margin: 0;
  color: #78350f;
  font-size: 0.86rem;
  line-height: 1.45;
}

.studio-minis-page {
  padding-bottom: 320px;
}

body:has(.studio-minis-page:not(.is-mini-flow-workspace)) {
  --studio-minis-canvas: #f6f4ed;
  --studio-minis-surface: #fbfaf6;
  --studio-minis-stage: #f1eee5;
  --studio-minis-page-gutter: clamp(14px, 2.3vw, 28px);
  background: var(--studio-minis-canvas) !important;
}

body:has(.studio-minis-page:not(.is-mini-flow-workspace)) :is(.site-main-shell, .site-main, .studio-minis-page) {
  background: var(--studio-minis-canvas) !important;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-console {
  background: transparent;
}

.studio-minis-page:not(.is-mini-flow-workspace) :is(
  .studio-minis-room-search,
  .studio-minis-room-tabs,
  .studio-minis-room-action-trigger,
  .studio-minis-room-action-menu-panel,
  .studio-minis-room-filter-trigger,
  .studio-minis-room-filter-menu,
  .studio-minis-room-empty,
  .studio-minis-feed-empty
) {
  background: var(--studio-minis-surface);
  border-color: rgba(17, 24, 39, 0.08);
  box-shadow: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card:not(.has-media),
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-new-mini-card {
  background: var(--studio-minis-surface);
  border-color: rgba(17, 24, 39, 0.08);
  box-shadow: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media:is(:hover, :focus-visible) {
  border-color: transparent;
  box-shadow: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media .studio-minis-room-image {
  background: transparent;
  box-shadow: 0 12px 24px rgba(91, 80, 55, 0.08);
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media .studio-minis-room-image img {
  border-radius: inherit;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media.is-working,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-card.has-media.is-failed,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-card.is-image-loading,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-card.is-video-loading,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-card.is-image-stuck,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-card.is-video-stuck {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.72), transparent 36%),
    var(--studio-minis-surface);
  box-shadow: none;
}

body:has(.studio-minis-page.is-mini-flow-workspace) {
  background: #000000;
}

body:has(.studio-minis-page.is-mini-flow-workspace) .site-sidebar,
body:has(.studio-minis-page.is-mini-flow-workspace) .site-overlay,
body:has(.studio-minis-page.is-mini-flow-workspace) .mobile-nav-toggle {
  display: none !important;
}

body:has(.studio-minis-page.is-mini-flow-workspace) .site-main-shell {
  min-height: 100svh;
  background: #000000;
}

body:has(.studio-minis-page.is-mini-flow-workspace) .site-main-shell.is-studio-sidebar-pinned {
  margin-left: 0 !important;
}

body:has(.studio-minis-page.is-mini-flow-workspace) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
  background: #000000;
}

.studio-minis-page.is-mini-flow-workspace {
  min-height: 100svh;
  padding: 0 0 228px;
  background: #000000;
  color: #ffffff;
}

.studio-minis-page [hidden] {
  display: none !important;
}

.studio-minis-console {
  display: grid;
  box-sizing: border-box;
  width: min(1180px, 100%);
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  gap: 22px;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-console {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  gap: 0;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-dock.admin-studio-flow-command-dock,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-dock.admin-studio-flow-command-dock {
  right: auto;
  left: 50%;
  width: min(576px, 56vw);
  max-width: none;
  min-height: 88px;
  padding: 10px 12px;
  border-radius: 20px;
  transform: translateX(-50%);
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-dock.admin-studio-flow-command-dock.has-tray-items,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 148px;
  padding-top: 12px;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-form.admin-studio-flow-command-form,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-form.admin-studio-flow-command-form {
  grid-template-columns: 38px minmax(0, 1fr) max-content;
  grid-template-rows: auto 34px auto;
  gap: 3px 7px;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-form.admin-studio-flow-command-form.has-context,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-form.admin-studio-flow-command-form.has-context {
  grid-template-rows: auto auto 34px auto;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-form.admin-studio-flow-command-form textarea,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-form.admin-studio-flow-command-form textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 30px;
  max-height: min(44vh, 440px);
  padding: 6px 12px 0;
  font-size: 0.88rem;
  line-height: 1.2;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-form.admin-studio-flow-command-form.has-context textarea,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-form.admin-studio-flow-command-form.has-context textarea {
  grid-row: 2;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-dock .admin-studio-flow-command-actions,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-dock .admin-studio-flow-command-actions {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  min-height: 34px;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-quick-dock .admin-studio-flow-command-form.has-context .admin-studio-flow-command-actions,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-quick-dock .admin-studio-flow-command-form.has-context .admin-studio-flow-command-actions {
  grid-row: 3;
}

.studio-minis-console-head {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 10px 0 0;
}

.studio-minis-console-head h1 {
  margin: 0;
  color: #111827;
  font-size: clamp(2rem, 5vw, 4.7rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.96;
}

.studio-minis-console-pipeline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.studio-minis-console-pipeline span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: #ffffff;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.studio-minis-external-flow-shortcut {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 246, 218, 0.72), rgba(255, 255, 255, 0.88)),
    #ffffff;
  box-shadow: 0 12px 34px rgba(31, 25, 16, 0.06);
}

.studio-minis-external-flow-shortcut > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.studio-minis-external-flow-shortcut span {
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.studio-minis-external-flow-shortcut strong {
  color: #111827;
  font-size: 0.96rem;
  font-weight: 940;
  line-height: 1.2;
}

.studio-minis-external-flow-shortcut p {
  max-width: 720px;
  margin: 0;
  color: #6b7280;
  font-size: 0.82rem;
  line-height: 1.4;
}

.studio-minis-room-board,
.studio-minis-room-shell {
  display: grid;
  gap: 16px;
}

.studio-minis-room-board-head {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.studio-minis-room-board-head h1,
.studio-minis-active-room-copy h1 {
  margin: 0;
  color: #111827;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.studio-minis-room-board-head h1 {
  font-size: clamp(2rem, 5vw, 4.2rem);
}

.studio-minis-room-board-head > span {
  color: #6b7280;
  font-size: 0.8rem;
  font-weight: 900;
}

.studio-minis-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr));
  gap: 14px;
  min-width: 0;
}

.studio-minis-room-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  border: 1px dashed rgba(17, 24, 39, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  color: #6b7280;
  font-size: 0.86rem;
  font-weight: 850;
}

.studio-minis-room-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-width: 0;
  gap: 9px;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
  cursor: grab;
}

.studio-minis-room-card.has-media {
  display: block;
  padding: 0;
  border-color: rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  background: #070707;
  color: #ffffff;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2);
}

.studio-minis-room-card:is(:hover, :focus-visible) {
  border-color: rgba(17, 24, 39, 0.18);
  transform: translateY(-1px);
}

.studio-minis-room-card.is-active {
  border-color: rgba(17, 24, 39, 0.22);
  box-shadow:
    0 0 0 3px rgba(17, 24, 39, 0.06),
    0 14px 34px rgba(15, 23, 42, 0.07);
}

.studio-minis-room-card.is-reference-blocked {
  border-color: rgba(220, 38, 38, 0.24);
  box-shadow: 0 14px 34px rgba(127, 29, 29, 0.08);
}

.studio-minis-room-card.is-reference-blocked:not(.has-media) .studio-minis-room-image {
  background:
    linear-gradient(135deg, rgba(254, 242, 242, 0.92), rgba(255, 247, 237, 0.82)),
    #ffffff;
}

.studio-minis-room-card.has-media.is-reference-blocked .studio-minis-room-overlay small {
  color: #fecaca;
}

.studio-minis-room-create-card {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-room-create-card .studio-minis-room-image {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.05), rgba(17, 24, 39, 0.1)),
    #f9fafb;
}

.studio-minis-room-create-card .studio-minis-room-image b {
  font-size: 2.4rem;
}

.studio-minis-room-image {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  border-radius: 7px;
  background: #eef2f7;
}

.studio-minis-room-card.has-media .studio-minis-room-image {
  aspect-ratio: 9 / 14.5;
  border-radius: inherit;
  background: #111827;
}

.studio-minis-room-card.has-media .studio-minis-room-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 66%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  pointer-events: none;
}

.studio-minis-room-card.is-working .studio-minis-room-image::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.14) 44%, transparent 72%),
    rgba(0, 0, 0, 0.1);
  animation: studio-mini-card-shimmer 1.35s linear infinite;
  transform: translateX(-100%);
}

.studio-minis-room-card.is-working .studio-minis-room-image img {
  opacity: 0.42;
  filter: saturate(0.86) blur(1.2px);
}

.studio-minis-room-card.is-optimistic .studio-minis-room-image {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 46%),
    #101318;
}

.studio-minis-room-card.is-optimistic .studio-minis-room-image b {
  opacity: 0;
}

.studio-minis-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-room-image b,
.studio-minis-active-room-image b {
  color: #374151;
  font-size: 2rem;
  font-weight: 950;
}

.studio-minis-room-metric-dock {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  max-width: calc(100% - 20px);
  gap: 6px;
  align-items: center;
}

.studio-minis-room-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  min-width: 0;
}

.studio-minis-room-overlay strong,
.studio-minis-room-overlay small,
.studio-minis-room-metric b {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-overlay strong {
  font-size: 0.92rem;
  font-weight: 950;
}

.studio-minis-room-overlay small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
}

.studio-minis-room-metric {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 28px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(245, 244, 237, 0.86);
  color: #111827;
  backdrop-filter: blur(12px);
}

.studio-minis-room-metric svg {
  flex: 0 0 auto;
  stroke-width: 2.45;
}

.studio-minis-room-metric b {
  color: currentColor;
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
}

.studio-minis-room-metric:is(:nth-child(2), :nth-child(3)) {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
}

.studio-minis-room-card.has-media.is-video-ready {
  border: 0;
}

.studio-minis-room-copy,
.studio-minis-room-title,
.studio-minis-room-stats {
  min-width: 0;
}

.studio-minis-room-copy {
  display: grid;
  gap: 2px;
}

.studio-minis-room-copy strong,
.studio-minis-room-copy small,
.studio-minis-room-title,
.studio-minis-room-stats .studio-minis-room-metric b {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-copy strong {
  color: #111827;
  font-size: 0.94rem;
  font-weight: 950;
}

.studio-minis-room-card.has-media:not(.is-compact) .studio-minis-room-copy {
  display: none;
}

.studio-minis-room-card.has-media .studio-minis-room-copy strong {
  color: #ffffff;
}

.studio-minis-room-copy small,
.studio-minis-room-title {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
}

.studio-minis-room-card.is-reference-blocked:not(.has-media) .studio-minis-room-copy small {
  color: #b91c1c;
}

.studio-minis-room-card.has-media .studio-minis-room-title {
  color: rgba(255, 255, 255, 0.58);
  padding-inline: 2px;
}

.studio-minis-room-title {
  display: block;
}

.studio-minis-room-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.studio-minis-room-stats .studio-minis-room-metric {
  min-width: 30px;
  min-height: 26px;
  padding: 5px 7px;
  background: #f3f4f6;
  color: #374151;
}

.studio-minis-room-card.has-media .studio-minis-room-stats {
  padding-inline: 2px;
}

.studio-minis-room-card.has-media .studio-minis-room-stats .studio-minis-room-metric {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.78);
}

.studio-minis-room-card.has-media.is-video-ready .studio-minis-room-stats .studio-minis-room-metric:nth-child(2) {
  background: rgba(255, 255, 255, 0.88);
  color: #111827;
}

.studio-minis-active-room {
  display: grid;
  grid-template-columns: minmax(132px, 186px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.studio-minis-active-room-image {
  overflow: hidden;
  display: grid;
  min-height: 178px;
  place-items: center;
  border-radius: 7px;
  background: #eef2f7;
}

.studio-minis-active-room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-active-room-copy {
  display: grid;
  align-content: center;
  min-width: 0;
  gap: 9px;
}

.studio-minis-active-room-copy h1 {
  font-size: clamp(2rem, 5vw, 4.6rem);
}

.studio-minis-active-room-copy p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: #4b5563;
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.45;
}

.studio-minis-active-room-copy > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.studio-minis-active-room-copy > div span {
  display: inline-flex;
  padding: 7px 9px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.studio-minis-room-cast-rail {
  display: grid;
  gap: 10px;
}

.studio-minis-room-waiting {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.studio-minis-cast-tray-dock {
  position: fixed;
  right: max(24px, calc((100vw - 760px) / 2));
  bottom: 210px;
  left: max(24px, calc((100vw - 760px) / 2));
  z-index: 51;
  width: auto;
  max-width: 760px;
  margin-inline: auto;
  isolation: isolate;
  transition: bottom 190ms ease;
}

.studio-minis-cast-tray-dock::before,
.studio-minis-cast-tray-dock::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 1px;
  bottom: 1px;
  z-index: 2;
  width: 44px;
  border-radius: 18px;
}

.studio-minis-cast-tray-dock::before {
  left: 0;
  background: linear-gradient(90deg, rgba(23, 22, 21, 0.96), rgba(23, 22, 21, 0));
}

.studio-minis-cast-tray-dock::after {
  right: 0;
  background: linear-gradient(270deg, rgba(23, 22, 21, 0.96), rgba(23, 22, 21, 0));
}

.studio-minis-cast-tray-nav {
  appearance: none;
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.94);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background 160ms ease;
  backdrop-filter: blur(18px) saturate(130%);
}

.studio-minis-cast-tray-nav[hidden] {
  display: none;
}

.studio-minis-cast-tray-dock:is(:hover, :focus-within) .studio-minis-cast-tray-nav {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.studio-minis-cast-tray-nav:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.18);
}

.studio-minis-cast-tray-nav.is-prev {
  left: 8px;
}

.studio-minis-cast-tray-nav.is-next {
  right: 8px;
}

.studio-minis-character-tray {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(42, 40, 38, 0.7), rgba(24, 22, 21, 0.78)),
    rgba(24, 22, 21, 0.68);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(22px) saturate(130%);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.studio-minis-character-tray::-webkit-scrollbar {
  display: none;
}

.studio-minis-character-tray-item {
  appearance: none;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto;
  flex: 0 0 124px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 6px 8px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: grab;
}

.studio-minis-character-tray-item:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.studio-minis-character-tray-item span {
  overflow: hidden;
  display: grid;
  grid-row: 1;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
}

.studio-minis-character-tray-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-character-tray-item b {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1rem;
  font-weight: 950;
}

.studio-minis-character-tray-item strong {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-character-tray-item strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 950;
}

.studio-minis-character-tray-item.is-create {
  flex-basis: 96px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.035);
}

.studio-minis-room-rail {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: 122px;
  grid-auto-flow: column;
  gap: 9px;
  padding-bottom: 3px;
}

.studio-minis-room-card.is-compact {
  grid-template-rows: auto auto;
  gap: 7px;
}

.studio-minis-room-card.is-compact .studio-minis-room-image {
  aspect-ratio: 1;
}

.studio-minis-room-media {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.studio-minis-room-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(260px, 460px) minmax(260px, 1.2fr);
  gap: 10px;
  align-items: center;
  padding: 0 2px;
}

.studio-minis-room-heading {
  display: inline-flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
  justify-self: start;
}

.studio-minis-room-heading strong {
  overflow: hidden;
  max-width: 180px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  width: min(100%, 460px);
  justify-self: center;
  min-height: 40px;
  padding: 4px 5px 4px 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.075), rgba(17, 24, 39, 0.045)),
    rgba(245, 241, 232, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(15, 23, 42, 0.045);
  backdrop-filter: blur(18px);
}

.studio-minis-room-search > svg {
  grid-column: 1;
  color: #6b7280;
}

.studio-minis-room-search input {
  grid-column: 2;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent !important;
  color: #111827;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  outline: none;
  box-shadow: none !important;
}

.studio-minis-room-search input::-webkit-search-cancel-button,
.studio-minis-room-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.studio-minis-room-search input::placeholder {
  color: #9ca3af;
}

.studio-minis-room-search-clear {
  appearance: none;
  grid-column: 3;
  justify-self: end;
  display: inline-grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: #6b7280;
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.studio-minis-room-search-clear:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.12);
  color: #111827;
  outline: none;
  transform: scale(1.03);
}

.studio-minis-room-search-clear.is-empty,
.studio-minis-room-search-clear:disabled {
  opacity: 0;
  pointer-events: none;
  transform: none;
}

.studio-minis-room-filter {
  position: relative;
  min-width: 128px;
}

.studio-minis-room-filter-trigger {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.085);
  color: #374151;
  font: inherit;
  cursor: pointer;
}

.studio-minis-room-filter-trigger > span {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 930;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-filter-trigger em,
.studio-minis-room-filter-menu button em {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.09);
  color: #374151;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.studio-minis-room-filter-trigger:is(:hover, :focus-visible),
.studio-minis-room-filter.is-open .studio-minis-room-filter-trigger {
  border-color: rgba(17, 24, 39, 0.18);
  background: rgba(17, 24, 39, 0.12);
  outline: none;
}

.studio-minis-room-filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  width: 190px;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 246, 240, 0.76)),
    rgba(247, 244, 236, 0.9);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px);
}

.studio-minis-room-filter-menu button {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 0 9px 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  font: inherit;
  cursor: pointer;
}

.studio-minis-room-filter-menu button span {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-filter-menu button:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.07);
  outline: none;
}

.studio-minis-room-filter-menu button.is-selected {
  background: #111827;
  color: #ffffff;
}

.studio-minis-room-filter-menu button.is-selected em {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.studio-minis-room-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.studio-minis-room-action-menu {
  position: relative;
  display: inline-flex;
}

.studio-minis-room-action-menu.is-open {
  z-index: 95;
}

.studio-minis-room-action-trigger {
  appearance: none;
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  font: inherit;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}

.studio-minis-room-action-trigger:is(:hover, :focus-visible),
.studio-minis-room-action-menu.is-open .studio-minis-room-action-trigger {
  border-color: rgba(17, 24, 39, 0.18);
  background: rgba(17, 24, 39, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.studio-minis-room-action-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  display: grid;
  width: 190px;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 246, 240, 0.8)),
    rgba(247, 244, 236, 0.94);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px);
}

.studio-minis-room-action-menu-panel form {
  margin: 0;
}

.studio-minis-room-action-menu-panel :is(a, button) {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 920;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
}

.studio-minis-room-action-menu-panel :is(a, button) span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-room-action-menu-panel :is(a, button):is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.07);
  color: #111827;
  outline: none;
}

.studio-minis-room-tabs {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(18px);
}

.studio-minis-room-tabs button {
  appearance: none;
  display: inline-flex;
  min-height: 32px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.studio-minis-room-tabs button:is(:hover, :focus-visible),
.studio-minis-room-tabs button.is-selected {
  background: #111827;
  color: #ffffff;
  outline: none;
}

.studio-minis-room-tabs button span {
  display: inline-grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.62rem;
  font-weight: 950;
  line-height: 1;
}

.studio-minis-media-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.studio-minis-room-media .studio-minis-feed {
  min-height: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.studio-minis-room-media .studio-minis-media-grid {
  overflow: visible;
  grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr));
  grid-auto-columns: auto;
  grid-auto-flow: row;
  gap: 14px;
  padding: 0;
  scroll-snap-type: none;
}

.studio-minis-room-media .studio-minis-media-card {
  aspect-ratio: 9 / 14.5;
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.2);
}

.studio-minis-room-media .studio-minis-section-head {
  padding: 0 2px;
}

.studio-minis-room-media .studio-minis-section-head span {
  color: var(--foreground);
}

.studio-minis-room-media .studio-minis-section-head small {
  color: var(--muted-foreground);
}

.studio-minis-room-media .studio-minis-feed-empty {
  min-height: 220px;
  border: 1px dashed rgba(17, 24, 39, 0.14);
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(520px, 100%);
  min-height: 210px;
  place-items: center;
  gap: 14px;
  padding: 28px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28)),
    rgba(255, 255, 255, 0.4);
  color: #111827;
  text-align: center;
  box-shadow:
    0 28px 70px rgba(69, 58, 32, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 20px;
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.68);
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty div:last-of-type {
  display: grid;
  gap: 6px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty strong {
  color: #111827;
  font-size: 1.05rem;
  font-weight: 920;
  letter-spacing: 0;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty span {
  color: rgba(17, 24, 39, 0.58);
  font-size: 0.86rem;
  font-weight: 760;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  color: #111827;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 880;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty button:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.studio-minis-feed {
  display: grid;
  min-width: 0;
  min-height: 410px;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.studio-minis-section-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.studio-minis-section-title {
  display: inline-flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.studio-minis-room-back-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.studio-minis-room-back-button:is(:hover, :focus-visible) {
  border-color: var(--border-strong);
  background: var(--foreground);
  color: var(--surface);
  outline: none;
  transform: translateY(-1px);
}

.studio-minis-section-head span {
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.studio-minis-feed .studio-minis-section-head span {
  color: rgba(255, 255, 255, 0.92);
}

.studio-minis-section-head small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
}

.studio-minis-feed .studio-minis-section-head small {
  color: rgba(255, 255, 255, 0.54);
}

.studio-minis-room-media .studio-minis-feed .studio-minis-section-head span {
  color: var(--foreground);
}

.studio-minis-room-media .studio-minis-feed .studio-minis-section-head small {
  color: var(--muted-foreground);
}

.studio-minis-media-grid {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: clamp(158px, 18vw, 218px);
  grid-auto-flow: column;
  gap: 14px;
  padding: 0 2px 8px;
  scroll-snap-type: x proximity;
}

.studio-minis-media-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-width: 0;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  scroll-snap-align: start;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.34);
}

.studio-minis-new-mini-card {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.28);
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.studio-minis-new-mini-card.is-reference-blocked {
  border-color: rgba(248, 113, 113, 0.38);
  cursor: not-allowed;
  opacity: 0.84;
}

.studio-minis-new-mini-card.is-reference-resolve {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.studio-minis-new-mini-card.is-reference-blocked .studio-minis-new-mini-visual {
  background:
    linear-gradient(145deg, rgba(248, 113, 113, 0.18), rgba(255, 255, 255, 0.03)),
    #181212;
}

.studio-minis-new-mini-card.is-reference-blocked .studio-minis-media-title small {
  color: #fecaca;
}

.studio-minis-media-card-open {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.studio-minis-media-card.is-image-loading,
.studio-minis-media-card.is-video-loading,
.studio-minis-media-card.is-image-stuck,
.studio-minis-media-card.is-video-stuck {
  cursor: wait;
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    #101010;
}

.studio-minis-media-card img,
.studio-minis-media-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-media-loading-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.12), transparent 28%),
    linear-gradient(110deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.studio-minis-media-loading-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  filter: saturate(0.8) blur(2px);
  transform: scale(1.04);
}

.studio-minis-new-mini-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
    #151515;
}

.studio-minis-new-mini-visual img {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  filter: saturate(0.82) blur(1px);
  transform: scale(1.03);
}

.studio-minis-new-mini-visual i {
  position: relative;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

.studio-minis-media-loading-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.16) 42%, transparent 74%);
  animation: studio-mini-card-shimmer 1.35s linear infinite;
  transform: translateX(-100%);
}

.studio-minis-media-loading-visual i {
  position: relative;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 42px rgba(255, 255, 255, 0.2);
}

.studio-minis-media-card.is-image-stuck,
.studio-minis-media-card.is-video-stuck {
  cursor: pointer;
}

.studio-minis-media-card.is-image-stuck .studio-minis-media-loading-visual::before,
.studio-minis-media-card.is-video-stuck .studio-minis-media-loading-visual::before {
  animation: none;
  transform: none;
  opacity: 0.28;
}

.studio-minis-media-card.is-image-stuck .studio-minis-media-loading-visual i,
.studio-minis-media-card.is-video-stuck .studio-minis-media-loading-visual i {
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 950;
  animation: none;
}

.studio-minis-media-recovery-actions {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.44);
  backdrop-filter: blur(14px);
}

.studio-minis-media-recovery-actions form {
  margin: 0;
}

.studio-minis-media-stage-button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.studio-minis-media-stage-button:hover:not(:disabled),
.studio-minis-media-stage-button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  background: #ffffff;
}

.studio-minis-media-stage-button.is-cancel {
  background: rgba(17, 24, 39, 0.74);
  color: #ffffff;
}

.studio-minis-media-stage-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.studio-minis-media-stage-button .is-spinning {
  animation: spin 0.9s linear infinite;
}

@keyframes studio-mini-card-shimmer {
  to {
    transform: translateX(100%);
  }
}

.studio-minis-media-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72));
  pointer-events: none;
}

.studio-minis-media-kind {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: #111827;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-media-type-badge svg {
  display: block;
  width: 14px;
  height: 14px;
}

.studio-minis-media-kind.is-posted {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(22, 163, 74, 0.92);
  color: #ffffff;
  box-shadow: 0 10px 28px rgba(22, 101, 52, 0.28);
}

@media (max-width: 520px) {
  .studio-minis-room-search {
    grid-template-columns: auto minmax(0, 1fr);
    border-radius: 18px;
  }

  .studio-minis-external-upload-prompts,
  .studio-minis-external-upload-forms,
  .studio-minis-external-upload-row {
    grid-template-columns: 1fr;
  }

  .studio-minis-room-filter {
    grid-column: 1 / -1;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .studio-minis-room-toolbar {
    grid-template-columns: 1fr;
  }

  .studio-minis-room-heading,
  .studio-minis-room-search,
  .studio-minis-room-actions {
    width: 100%;
    justify-self: stretch;
  }

  .studio-minis-room-actions {
    justify-content: center;
  }
}

.studio-minis-media-source-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: grid;
  grid-template-columns: 24px minmax(0, auto);
  max-width: calc(100% - 54px);
  min-height: 28px;
  gap: 5px;
  align-items: center;
  padding: 2px 7px 2px 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.48);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  backdrop-filter: blur(14px);
}

.studio-minis-media-card.is-video-stuck .studio-minis-media-source-link {
  top: 54px;
}

.studio-minis-media-source-link img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.studio-minis-media-source-link span {
  overflow: hidden;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-media-source-link:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  outline: none;
}

.studio-minis-media-platforms {
  position: absolute;
  right: 10px;
  bottom: 46px;
  left: 10px;
  z-index: 2;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-media-title {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  min-width: 0;
  gap: 3px;
}

.studio-minis-media-title b,
.studio-minis-media-title small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-media-title b {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.17;
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 950;
}

.studio-minis-media-title small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.68rem;
  font-weight: 850;
}

.studio-minis-media-card.is-image-loading .studio-minis-media-title small,
.studio-minis-media-card.is-video-loading .studio-minis-media-title small,
.studio-minis-media-card.is-image-stuck .studio-minis-media-title small,
.studio-minis-media-card.is-video-stuck .studio-minis-media-title small {
  width: max-content;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
}

.studio-minis-flow-topbar {
  z-index: 64;
  grid-template-columns: 36px minmax(0, 1fr) max-content;
  gap: 10px;
  min-height: 60px;
  padding: 10px 14px;
  background: #000000;
  color: #ffffff;
}

.studio-minis-flow-title {
  display: flex;
  min-width: 0;
  gap: 4px;
  align-items: center;
}

.studio-minis-flow-title-text,
.studio-minis-flow-title-menu,
.studio-minis-flow-title-save {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.studio-minis-flow-title-text {
  display: block;
  min-width: 0;
  max-width: min(48vw, 760px);
  padding: 3px 0;
  text-align: left;
}

.studio-minis-flow-title strong {
  overflow: hidden;
  min-width: 0;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-flow-title-menu,
.studio-minis-flow-title-save {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.studio-minis-flow-title-menu:is(:hover, :focus-visible),
.studio-minis-flow-title-save:is(:hover, :focus-visible),
.studio-minis-flow-title-text:is(:hover, :focus-visible) {
  color: #ffffff;
  outline: none;
}

.studio-minis-flow-title-menu:is(:hover, :focus-visible),
.studio-minis-flow-title-save:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.13);
}

.studio-minis-flow-title-form {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
}

.studio-minis-flow-title-form input {
  width: min(48vw, 520px);
  min-width: 160px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 860;
  outline: none;
}

.studio-minis-flow-title-form input:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.studio-minis-flow-topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.studio-minis-flow-icon-button,
.studio-minis-flow-pill-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.studio-minis-flow-icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #ffffff;
}

.studio-minis-flow-icon-button.is-back {
  justify-self: start;
}

.studio-minis-flow-icon-button:is(:hover, :focus-visible),
.studio-minis-flow-pill-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.studio-minis-flow-icon-button:disabled {
  cursor: default;
  opacity: 0.34;
}

.studio-minis-flow-pill-button {
  min-height: 32px;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 840;
  line-height: 1;
  white-space: nowrap;
}

.studio-minis-flow-pill-button.is-done {
  background: #ffffff;
  color: #050505;
}

.studio-minis-flow-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(206px, 284px);
  min-height: 100svh;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  padding: 64px clamp(18px, 2.4vw, 34px) 222px;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
}

.studio-minis-flow-workspace.is-history-hidden {
  grid-template-columns: minmax(0, 1fr) 0;
}

.studio-minis-flow-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  height: 100%;
  place-items: center;
}

.studio-minis-flow-stage-frame {
  position: relative;
  display: grid;
  width: min(42vw, 420px);
  height: min(62svh, calc(100svh - 330px), 640px);
  min-height: 0;
  place-items: center;
  border-radius: 22px;
  background: #050505;
}

.studio-minis-flow-stage-frame.is-video {
  width: min(42vw, 420px);
  max-width: calc(100vw - 380px);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 32%),
    #050505;
}

.studio-minis-flow-stage-edit {
  appearance: none;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}

.studio-minis-flow-stage-media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #050505;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

video.studio-minis-flow-stage-media {
  object-fit: contain;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #050505;
}

.studio-minis-flow-loading-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.studio-minis-flow-loading-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.24;
  filter: blur(2px) saturate(0.86);
  object-fit: cover;
  transform: scale(1.04);
}

.studio-minis-flow-loading-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.18) 44%, transparent 74%),
    rgba(255, 255, 255, 0.04);
  animation: studio-mini-card-shimmer 1.35s linear infinite;
  transform: translateX(-100%);
}

.studio-minis-flow-loading-visual i {
  position: relative;
  z-index: 1;
  display: block;
  width: 38px;
  height: 38px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-top-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  font-style: normal;
  animation: spin 0.9s linear infinite;
}

.studio-minis-flow-loading-copy {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(8, 8, 8, 0.7);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.studio-minis-flow-loading-copy b {
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
}

.studio-minis-flow-loading-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-flow-loading-visual.is-stuck::before {
  animation: none;
  transform: none;
  opacity: 0.32;
}

.studio-minis-flow-loading-visual.is-stuck i {
  display: grid;
  place-items: center;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-size: 1.2rem;
  font-weight: 950;
  animation: none;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
}

.studio-minis-flow-empty-stage {
  display: grid;
  width: min(42vw, 430px);
  height: min(calc(100svh - 230px), 708px);
  min-height: 380px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.88rem;
  font-weight: 820;
}

.studio-minis-flow-history {
  overflow-y: auto;
  align-self: center;
  max-height: calc(100svh - 152px);
  padding: 8px 2px 8px 0;
  scrollbar-width: none;
}

.studio-minis-flow-history::-webkit-scrollbar {
  display: none;
}

.studio-minis-flow-history-list {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.studio-minis-flow-history-item {
  appearance: none;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.studio-minis-flow-history-item.is-selected {
  grid-template-columns: 112px minmax(0, 1fr);
  width: 100%;
}

.studio-minis-flow-history-thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 72px;
  aspect-ratio: 9 / 16;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.08);
}

.studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  width: 112px;
  border: 2px solid #ffffff;
  border-radius: 18px;
}

.studio-minis-flow-history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-flow-history-thumb b {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-weight: 950;
}

.studio-minis-flow-history-copy {
  display: grid;
  min-width: 0;
  gap: 0;
  padding-bottom: 0;
}

.studio-minis-flow-history-copy strong {
  overflow: hidden;
  min-width: 0;
  color: #ffffff;
  text-overflow: ellipsis;
}

.studio-minis-flow-history-copy strong {
  display: -webkit-box;
  font-size: 0.82rem;
  font-weight: 920;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.studio-minis-flow-history-copy small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-flow-history-item.is-selected .studio-minis-flow-history-copy small {
  color: rgba(255, 255, 255, 0.78);
}

.studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  border-color: rgba(255, 255, 255, 0.7);
}

body[data-studio-mini-image-focus="true"] {
  overflow: hidden;
}

body[data-studio-mini-image-focus="true"] .studio-minis-cast-tray-dock {
  display: none;
}

.studio-minis-image-focus-stage {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 188px;
  left: 0;
  z-index: 44;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: 58px 24px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 32%),
    #050505;
}

.studio-minis-image-focus-close {
  appearance: none;
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 46;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: rgba(16, 16, 15, 0.72);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backdrop-filter: blur(18px) saturate(130%);
}

.studio-minis-image-focus-close:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(32, 32, 30, 0.88);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.studio-minis-image-focus-media {
  display: grid;
  width: min(100%, 820px);
  height: 100%;
  min-height: 0;
  place-items: center;
}

.studio-minis-image-focus-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.studio-minis-feed-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.9rem;
  font-weight: 850;
}

.studio-minis-upload-rail {
  display: grid;
  gap: 10px;
}

.studio-minis-upload-list {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: minmax(210px, 260px);
  grid-auto-flow: column;
  gap: 10px;
  padding-bottom: 2px;
}

.studio-minis-upload-list a,
.studio-minis-upload-empty {
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: transparent;
}

.studio-minis-upload-list a {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.studio-minis-upload-list img,
.studio-minis-upload-list > a > span {
  grid-row: 1 / 3;
  width: 54px;
  height: 72px;
  border-radius: 7px;
  object-fit: cover;
  background: #f3f4f6;
}

.studio-minis-upload-list > a > span {
  display: grid;
  place-items: center;
  color: #374151;
  font-size: 1rem;
  font-weight: 950;
}

.studio-minis-upload-list strong,
.studio-minis-upload-list small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-upload-list strong {
  color: #111827;
  font-size: 0.82rem;
  font-weight: 950;
}

.studio-minis-upload-list small {
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 850;
}

.studio-minis-upload-empty {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 850;
}

.studio-minis-upload-empty a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

.studio-minis-quiet-queue {
  overflow-x: auto;
  display: flex;
  gap: 8px;
  padding-bottom: 2px;
}

.studio-minis-quiet-queue a {
  display: grid;
  min-width: 172px;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.studio-minis-quiet-queue strong,
.studio-minis-quiet-queue span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-quiet-queue strong {
  color: #111827;
  font-size: 0.82rem;
  font-weight: 950;
}

.studio-minis-quiet-queue span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
}

.studio-minis-library-console {
  display: grid;
  gap: 12px;
}

.studio-minis-library-head {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.studio-minis-library-head h2 {
  margin: 0;
  color: #111827;
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: 0;
}

.studio-minis-library-head > span {
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 900;
}

.studio-minis-library-grid {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: 118px;
  grid-auto-flow: column;
  gap: 10px;
  padding: 0 2px 4px;
}

.studio-minis-library-grid button {
  appearance: none;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: grab;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.studio-minis-library-grid button.is-queued {
  border-color: rgba(14, 165, 233, 0.48);
  box-shadow:
    0 0 0 3px rgba(14, 165, 233, 0.1),
    0 10px 26px rgba(15, 23, 42, 0.06);
}

.studio-minis-library-thumb {
  overflow: hidden;
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 7px;
  background: #f3f4f6;
}

.studio-minis-library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-library-thumb b {
  color: #374151;
  font-size: 1.7rem;
  font-weight: 950;
}

.studio-minis-library-grid button > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.studio-minis-library-grid strong,
.studio-minis-library-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-library-grid strong {
  color: #111827;
  font-size: 0.84rem;
  font-weight: 950;
}

.studio-minis-library-grid small {
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 850;
}

.studio-minis-advanced-room {
  box-sizing: border-box;
  width: min(1180px, 100%);
  max-width: 100%;
  min-width: 0;
  margin: 10px auto 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.studio-minis-advanced-room > summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #374151;
  font-size: 0.86rem;
  font-weight: 900;
}

.studio-minis-advanced-room-body {
  display: grid;
  gap: 18px;
  padding: 0 14px 14px;
}

.studio-minis-quick-dock {
  position: fixed;
  right: max(18px, calc((100vw - 760px) / 2));
  bottom: 24px;
  left: max(18px, calc((100vw - 760px) / 2));
  z-index: 52;
  overflow: hidden;
  width: auto;
  max-width: 760px;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(31, 41, 55, 0.86), rgba(15, 23, 42, 0.9)),
    rgba(15, 23, 42, 0.82);
  color: #ffffff;
  box-shadow:
    0 24px 70px rgba(2, 6, 23, 0.38),
    0 8px 24px rgba(2, 6, 23, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(26px) saturate(130%);
}

.studio-minis-quick-form {
  display: grid;
  gap: 9px;
  padding: 13px;
}

.studio-minis-quick-drop {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 2px 4px;
}

.studio-minis-quick-drop svg {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 7px;
  border-radius: 50%;
  background: rgba(125, 211, 252, 0.14);
  color: #bae6fd;
}

.studio-minis-quick-drop div {
  min-width: 0;
}

.studio-minis-quick-drop span {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.studio-minis-quick-drop strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-quick-drop.is-active {
  border-radius: 16px;
  background: rgba(125, 211, 252, 0.12);
}

.studio-minis-quick-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
}

.studio-minis-quick-input-row input,
.studio-minis-quick-input-row select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 850;
  outline: none;
}

.studio-minis-quick-input-row input {
  padding: 0 14px;
}

.studio-minis-quick-input-row select {
  padding: 0 10px;
}

.studio-minis-quick-input-row select option {
  color: #111827;
}

.studio-minis-quick-input-row input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.studio-minis-quick-input-row input:focus,
.studio-minis-quick-input-row select:focus {
  border-color: rgba(125, 211, 252, 0.72);
  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.14);
}

.studio-minis-quick-input-row button[type="submit"] {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f8fafc;
  color: #0f172a;
  cursor: pointer;
}

.studio-minis-quick-input-row button[type="submit"]:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.studio-minis-quick-queue {
  overflow-x: auto;
  display: flex;
  gap: 7px;
}

.studio-minis-quick-queue button {
  appearance: none;
  display: inline-grid;
  grid-template-columns: 24px minmax(0, 1fr) 13px;
  flex: 0 0 auto;
  max-width: 160px;
  gap: 6px;
  align-items: center;
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}

.studio-minis-quick-queue button img,
.studio-minis-quick-queue button span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.14);
}

.studio-minis-quick-queue button span {
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 950;
}

.studio-minis-quick-queue button b {
  overflow: hidden;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-quick-shelf {
  overflow-x: auto;
  display: flex;
  min-width: 0;
  gap: 7px;
  padding-bottom: 1px;
}

.studio-minis-quick-shelf button {
  appearance: none;
  display: inline-grid;
  grid-template-columns: 13px 24px minmax(0, 1fr);
  flex: 0 0 auto;
  max-width: 142px;
  gap: 6px;
  align-items: center;
  padding: 5px 9px 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  cursor: grab;
}

.studio-minis-quick-shelf button.is-selected {
  border-color: rgba(125, 211, 252, 0.62);
  background: rgba(125, 211, 252, 0.16);
  color: #ffffff;
}

.studio-minis-quick-shelf button img,
.studio-minis-quick-shelf button span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.14);
}

.studio-minis-quick-shelf button span {
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 950;
}

.studio-minis-quick-shelf button b {
  overflow: hidden;
  min-width: 0;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .studio-minis-page {
    padding-bottom: 320px;
  }

  .studio-minis-page.is-mini-flow-workspace {
    padding-bottom: 214px;
  }

  .studio-minis-console {
    width: min(100% - 20px, 1180px);
    gap: 16px;
  }

  .studio-minis-page.is-mini-flow-workspace .studio-minis-console {
    width: 100%;
    gap: 0;
  }

  .studio-minis-flow-topbar {
    grid-template-columns: 36px minmax(0, 1fr) max-content;
    min-height: 58px;
    padding: 9px 10px;
  }

  .studio-minis-flow-title {
    gap: 8px;
  }

  .studio-minis-flow-title strong {
    max-width: 42vw;
    font-size: 0.9rem;
  }

  .studio-minis-flow-title small {
    display: none;
  }

  .studio-minis-flow-pill-button {
    min-height: 32px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 0.72rem;
  }

  .studio-minis-flow-workspace,
  .studio-minis-flow-workspace.is-history-hidden {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 100svh;
    gap: 12px;
    padding: 68px 10px 204px;
  }

  .studio-minis-flow-stage-frame,
  .studio-minis-flow-empty-stage {
    width: min(76vw, 360px);
    height: min(56svh, calc(100svh - 292px), 560px);
    min-height: 0;
    border-radius: 18px;
  }

  .studio-minis-flow-stage-frame.is-video {
    width: min(76vw, 360px);
    max-width: 76vw;
  }

  .studio-minis-flow-history {
    grid-column: 1 / -1;
    max-height: 96px;
    overflow-x: auto;
    overflow-y: hidden;
    align-self: stretch;
    padding: 0 4px;
  }

  .studio-minis-flow-history-list {
    grid-auto-columns: 66px;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 9px;
  }

  .studio-minis-flow-history-item,
  .studio-minis-flow-history-item.is-selected {
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
  }

  .studio-minis-flow-history-thumb,
  .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
    width: 66px;
    border-radius: 11px;
  }

  .studio-minis-flow-history-copy {
    display: none;
  }

  .studio-minis-console-head,
  .studio-minis-external-flow-shortcut,
  .studio-minis-library-head,
  .studio-minis-room-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .studio-minis-console-head h1,
  .studio-minis-room-board-head h1 {
    font-size: 2.4rem;
  }

  .studio-minis-room-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .studio-minis-cast-tray-dock {
    right: 10px;
    bottom: 182px;
    left: 10px;
    max-width: none;
  }

  .studio-minis-character-tray {
    padding: 7px;
    border-radius: 16px;
  }

  .studio-minis-cast-tray-nav {
    display: none;
  }

  .studio-minis-character-tray-item {
    flex-basis: 114px;
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 5px 7px 5px 5px;
  }

  .studio-minis-character-tray-item span {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .studio-minis-active-room {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 12px;
    padding: 10px;
  }

  .studio-minis-active-room-image {
    min-height: 124px;
  }

  .studio-minis-active-room-copy h1 {
    font-size: 2rem;
  }

  .studio-minis-active-room-copy p:not(.eyebrow) {
    font-size: 0.82rem;
  }

  .studio-minis-media-lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-minis-feed,
  .studio-minis-feed-empty {
    min-height: 260px;
  }

  .studio-minis-room-media .studio-minis-feed {
    min-height: 260px;
  }

  .studio-minis-library-grid {
    grid-auto-columns: 104px;
    grid-template-columns: none;
  }

  .studio-minis-quick-dock {
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 21px;
  }

  .studio-minis-quick-input-row {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .studio-minis-quick-input-row select {
    grid-column: 1 / -1;
    grid-row: 2;
    height: 38px;
  }

  .studio-minis-quick-drop strong {
    font-size: 0.95rem;
  }
}

.admin-studio-flow-command-dock {
  overflow: visible;
  display: grid;
  gap: 8px;
  position: fixed;
  right: max(24px, calc((100vw - 638px) / 2));
  bottom: 34px;
  left: max(24px, calc((100vw - 638px) / 2));
  z-index: 45;
  width: auto;
  max-width: 638px;
  min-height: 102px;
  margin-inline: auto;
  padding: 13px 15px 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(58, 58, 56, 0.68), rgba(24, 24, 23, 0.76)),
    rgba(34, 34, 32, 0.7);
  color: #ffffff;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.36),
    0 2px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px) saturate(135%);
  isolation: isolate;
}

.admin-studio-flow-command-dock:has(.admin-studio-flow-command-picker) {
  z-index: 130;
}

.admin-studio-flow-command-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06), transparent 26%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.admin-studio-flow-source-tray {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  width: min(100%, 360px);
  pointer-events: auto;
}

.admin-studio-flow-source-tray article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  width: 100%;
  min-height: 232px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(44, 44, 42, 0.84), rgba(21, 21, 20, 0.86)),
    rgba(32, 32, 30, 0.72);
  color: #ffffff;
  text-align: left;
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px) saturate(132%);
  pointer-events: auto;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-source-tray article:has(:is(button, summary, a):is(:hover, :focus-visible)) {
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(58, 58, 55, 0.88), rgba(26, 26, 25, 0.9)),
    rgba(38, 38, 36, 0.76);
  transform: translateY(-2px);
}

.admin-studio-flow-source-tray article.is-failed,
.admin-studio-flow-source-tray article.is-stalled {
  border-color: rgba(248, 113, 113, 0.42);
  background:
    linear-gradient(180deg, rgba(68, 34, 34, 0.88), rgba(27, 20, 20, 0.9)),
    rgba(45, 24, 24, 0.76);
}

.admin-studio-flow-source-tray article.is-needs {
  border-color: rgba(251, 191, 36, 0.34);
  background:
    linear-gradient(180deg, rgba(61, 47, 24, 0.88), rgba(28, 25, 18, 0.9)),
    rgba(43, 35, 20, 0.76);
}

.admin-studio-flow-source-tray article.is-blocked {
  border-color: rgba(248, 113, 113, 0.42);
  background:
    linear-gradient(180deg, rgba(68, 30, 35, 0.88), rgba(27, 17, 20, 0.9)),
    rgba(45, 22, 27, 0.76);
}

.admin-studio-flow-source-tray article.is-ready {
  border-color: rgba(74, 222, 128, 0.34);
}

.admin-studio-flow-source-main {
  appearance: none;
  display: grid;
  align-content: start;
  min-width: 0;
  gap: 7px;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: grab;
}

.admin-studio-flow-source-main:active {
  cursor: grabbing;
}

.admin-studio-flow-source-main:disabled {
  cursor: default;
}

.admin-studio-flow-source-main.is-running {
  cursor: wait;
}

.admin-studio-flow-source-main.is-failed span,
.admin-studio-flow-source-main.is-stalled span {
  color: rgba(254, 202, 202, 0.82);
}

.admin-studio-flow-source-main.is-failed small,
.admin-studio-flow-source-main.is-stalled small {
  color: rgba(254, 226, 226, 0.72);
}

.admin-studio-flow-source-main.is-needs span {
  color: rgba(253, 230, 138, 0.82);
}

.admin-studio-flow-source-main.is-blocked span {
  color: rgba(254, 202, 202, 0.86);
}

.admin-studio-flow-source-main.is-blocked small {
  color: rgba(254, 226, 226, 0.74);
}

.admin-studio-flow-source-main.is-ready span {
  color: rgba(187, 247, 208, 0.78);
}

.admin-studio-flow-source-tray span,
.admin-studio-flow-source-menu div button,
.admin-studio-flow-source-menu div a {
  font-family: inherit;
}

.admin-studio-flow-source-main span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.64rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-source-main strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.18;
}

.admin-studio-flow-source-main small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.22;
}

.admin-studio-flow-source-menu {
  position: relative;
  display: grid;
  align-items: stretch;
}

.admin-studio-flow-source-menu summary {
  display: grid;
  width: 42px;
  height: 100%;
  min-height: 232px;
  place-items: center;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, 0.68);
  cursor: pointer;
  list-style: none;
}

.admin-studio-flow-source-menu summary::-webkit-details-marker {
  display: none;
}

.admin-studio-flow-source-menu summary:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.admin-studio-flow-source-menu summary svg {
  width: 18px;
  height: 18px;
}

.admin-studio-flow-source-menu div {
  position: absolute;
  right: 0;
  top: 10px;
  bottom: auto;
  z-index: 2;
  display: grid;
  min-width: 172px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background: rgba(24, 24, 23, 0.94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(20px) saturate(128%);
}

.admin-studio-flow-source-menu div button,
.admin-studio-flow-source-menu div a {
  appearance: none;
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.admin-studio-flow-source-menu div :is(button, a):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

.admin-studio-flow-raw-editor {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(14px);
}

.admin-studio-flow-raw-editor form {
  display: grid;
  width: min(720px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(44, 44, 42, 0.96), rgba(18, 18, 17, 0.98)),
    #171716;
  color: #ffffff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46);
}

.admin-studio-flow-raw-editor form > div {
  display: grid;
  gap: 4px;
}

.admin-studio-flow-raw-editor span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-raw-editor strong {
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 920;
}

.admin-studio-flow-raw-editor p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.4;
}

.admin-studio-flow-raw-editor textarea {
  min-height: 320px;
  max-height: calc(100vh - 320px);
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.48;
  resize: vertical;
}

.admin-studio-flow-raw-editor textarea:focus {
  border-color: rgba(255, 255, 255, 0.34);
  outline: none;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-raw-editor footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.admin-studio-flow-raw-editor footer button {
  appearance: none;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 880;
  cursor: pointer;
}

.admin-studio-flow-raw-editor footer button[type="submit"] {
  border-color: rgba(255, 255, 255, 0.38);
  background: #ffffff;
  color: #171716;
}

.admin-studio-flow-raw-editor footer button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.admin-studio-flow-raw-editor footer button:disabled {
  cursor: default;
  opacity: 0.72;
  transform: none;
}

.admin-studio-flow-raw-editor footer svg {
  width: 16px;
  height: 16px;
  animation: admin-studio-spin 820ms linear infinite;
}

.admin-studio-flow-command-form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 51px;
  grid-template-rows: minmax(30px, 1fr) 42px;
  gap: 8px 10px;
  align-items: end;
  min-width: 0;
  height: 100%;
}

.admin-studio-flow-command-form.has-context {
  grid-template-rows: auto minmax(30px, 1fr) 42px;
}

.admin-studio-flow-command-form.has-context.has-character-actions {
  grid-template-rows: auto auto minmax(30px, 1fr) 42px;
}

.admin-studio-flow-context-row {
  grid-column: 1 / -1;
  grid-row: 1;
  overflow: hidden;
  display: flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
  align-self: start;
  padding: 0 2px 1px;
}

.admin-studio-flow-context-row button {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  max-width: 184px;
  gap: 3px 7px;
  align-items: end;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.065)),
    rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-context-row button.has-preview {
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  max-width: 220px;
  align-items: center;
  padding: 6px 8px 6px 6px;
}

.admin-studio-flow-context-row button.has-preview img,
.admin-studio-flow-context-row button.has-preview > svg:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-context-row button.has-preview > svg:first-child {
  padding: 7px;
  color: rgba(255, 255, 255, 0.68);
}

.admin-studio-flow-context-row button.has-preview span,
.admin-studio-flow-context-row button.has-preview strong {
  grid-column: 2;
}

.admin-studio-flow-context-row button.has-preview > svg:last-child {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.admin-studio-flow-context-row button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-1px);
}

.admin-studio-flow-context-row button.is-sample-command {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

.admin-studio-flow-context-row button.is-sample-command:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
}

.admin-studio-flow-context-row button.is-restore {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.76);
}

.admin-studio-flow-context-row button.is-restore:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 0, 0.48);
  background: rgba(255, 200, 0, 0.1);
}

.admin-studio-flow-context-row button.is-failed,
.admin-studio-flow-context-row button.is-stalled {
  border-color: rgba(248, 113, 113, 0.38);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.08)),
    rgba(248, 113, 113, 0.08);
}

.admin-studio-flow-context-row button.is-failed span,
.admin-studio-flow-context-row button.is-stalled span {
  color: rgba(254, 202, 202, 0.82);
}

.admin-studio-flow-context-row button.is-needs {
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.1);
}

.admin-studio-flow-context-row button.is-blocked {
  border-color: rgba(248, 113, 113, 0.42);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.08)),
    rgba(24, 12, 18, 0.58);
}

.admin-studio-flow-context-row button.is-blocked span {
  color: rgba(254, 202, 202, 0.88);
}

.admin-studio-flow-context-row button.is-ready {
  border-color: rgba(74, 222, 128, 0.28);
}

.admin-studio-flow-context-row button span {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-context-row button strong {
  min-width: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.73rem;
  font-weight: 900;
  line-height: 1.08;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.admin-studio-flow-context-row button svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.58);
}

.admin-studio-flow-upload-preparing {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.73rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-upload-preparing svg {
  width: 14px;
  height: 14px;
  animation: admin-studio-spin 950ms linear infinite;
}

.admin-studio-flow-target-hint {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid rgba(251, 191, 36, 0.34);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.08)),
    rgba(251, 191, 36, 0.07);
  color: rgba(253, 230, 138, 0.94);
  font-size: 0.72rem;
  font-weight: 920;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-character-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0 2px 1px;
}

.admin-studio-flow-character-actions a,
.admin-studio-flow-character-actions button,
.admin-studio-flow-character-actions span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-character-actions button {
  appearance: none;
  cursor: pointer;
}

.admin-studio-flow-character-actions span {
  cursor: default;
  color: rgba(255, 255, 255, 0.58);
}

.admin-studio-flow-character-actions a:is(:hover, :focus-visible),
.admin-studio-flow-character-actions button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-flow-add-menu-wrap {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
}

.admin-studio-flow-dropzone {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  text-align: center;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-dropzone:is(:hover, :focus-within) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateY(-1px);
}

.admin-studio-flow-dropzone input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.admin-studio-flow-dropzone svg {
  width: 22px;
  height: 22px;
}

.admin-studio-flow-hidden-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.admin-studio-flow-command-form textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 28px;
  max-height: 40px;
  width: 100%;
  padding: 2px 18px 0;
  appearance: none;
  border: 0 !important;
  background: transparent !important;
  color: #ffffff;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 640;
  line-height: 1.25;
  text-align: start;
  caret-color: #ffffff;
  resize: none;
  align-self: center;
  outline: none !important;
  box-shadow: none !important;
}

.admin-studio-flow-command-form.has-context textarea {
  grid-row: 2;
}

.admin-studio-flow-command-form.has-context .admin-studio-flow-dropzone,
.admin-studio-flow-command-form.has-context .admin-studio-flow-command-actions {
  grid-row: 3;
}

.admin-studio-flow-command-form.has-context .admin-studio-flow-command-actions {
  grid-column: 2 / 4;
}

.admin-studio-flow-command-form.has-context .admin-studio-flow-add-menu-wrap {
  grid-row: 3;
}

.admin-studio-flow-command-form.has-context.has-character-actions textarea {
  grid-row: 3;
}

.admin-studio-flow-command-form.has-context.has-character-actions .admin-studio-flow-dropzone,
.admin-studio-flow-command-form.has-context.has-character-actions .admin-studio-flow-command-actions {
  grid-row: 4;
}

.admin-studio-flow-command-form.has-context.has-character-actions .admin-studio-flow-add-menu-wrap {
  grid-row: 4;
}

.admin-studio-flow-command-form textarea:focus {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.admin-studio-flow-command-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.admin-studio-flow-command-actions {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-studio-flow-command-action-chip {
  appearance: none;
  overflow: hidden;
  display: inline-flex;
  flex: 0 1 auto;
  width: max-content;
  max-width: min(280px, 42vw);
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  backdrop-filter: blur(12px) saturate(125%);
}

.admin-studio-flow-command-action-chip.is-waiting {
  min-width: 66px;
  max-width: 92px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.58);
}

.admin-studio-flow-command-action-chip.is-toggleable {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-command-action-chip.is-toggleable:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-flow-command-action-chip.is-toggleable::after {
  content: "↕";
  margin-left: 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72em;
  line-height: 1;
}

.admin-studio-flow-command-action-chip:empty {
  display: none;
}

.admin-studio-flow-command-action-chip.is-ready {
  border-color: rgba(116, 224, 200, 0.28);
  background: rgba(116, 224, 200, 0.12);
  color: rgba(255, 255, 255, 0.94);
}

.admin-studio-flow-command-action-chip.is-needs {
  border-color: rgba(250, 204, 21, 0.3);
  background: rgba(250, 204, 21, 0.12);
  color: rgba(255, 255, 255, 0.88);
}

.admin-studio-flow-command-action-chip.is-locked {
  border-color: rgba(248, 113, 113, 0.36);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(255, 255, 255, 0.92);
}

.admin-studio-flow-command-action-chip.is-linkable {
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-command-action-chip.is-linkable:is(:hover, :focus-visible) {
  border-color: rgba(254, 202, 202, 0.56);
  background: rgba(248, 113, 113, 0.2);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-flow-command-dock.is-submitting .admin-studio-flow-command-form {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 36px rgba(96, 165, 250, 0.18),
    0 22px 54px rgba(15, 23, 42, 0.28);
}

.admin-studio-flow-command-dock.is-submitting.is-scene-command .admin-studio-flow-command-form {
  box-shadow: none;
}

.admin-studio-flow-command-dock.is-submitting .admin-studio-flow-context-row button {
  position: relative;
  overflow: hidden;
  border-color: rgba(96, 165, 250, 0.42);
}

.admin-studio-flow-command-dock.is-submitting.is-scene-command .admin-studio-flow-context-row button {
  border-color: rgba(255, 255, 255, 0.16);
}

.admin-studio-flow-command-dock.is-submitting .admin-studio-flow-context-row button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.24), transparent);
  animation: admin-studio-working-sweep 1.25s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-flow-command-dock.is-submitting.is-scene-command .admin-studio-flow-context-row button::after {
  content: none;
}

.admin-studio-flow-command-form.has-context .admin-studio-flow-working-notice {
  grid-row: 4;
}

.admin-studio-flow-command-form.has-context.has-character-actions .admin-studio-flow-working-notice {
  grid-row: 5;
}

.admin-studio-flow-working-notice {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px 9px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.25;
}

.admin-studio-flow-working-notice svg {
  width: 15px;
  height: 15px;
  animation: admin-studio-spin 820ms linear infinite;
}

.admin-studio-flow-submit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font: inherit;
}

.admin-studio-flow-submit:disabled {
  cursor: default;
  opacity: 1;
}

.admin-studio-flow-submit {
  flex: 0 0 48px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #181817;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.admin-studio-flow-submit:is(:hover, :focus-visible) {
  background: #ffffff;
  transform: translateY(-1px);
}

.admin-studio-flow-submit:not(.is-disabled, .is-loading) {
  animation: admin-studio-ready-action-pulse 1.45s ease-in-out infinite;
}

.admin-studio-flow-submit:not(.is-disabled, .is-loading) svg {
  animation: admin-studio-ready-arrow-nudge 1.45s ease-in-out infinite;
}

.admin-studio-flow-submit.is-disabled {
  background: rgba(255, 255, 255, 0.72);
  color: rgba(24, 24, 23, 0.58);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
}

.admin-studio-flow-submit.is-disabled:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.72);
  transform: none;
}

.admin-studio-flow-submit svg {
  width: 20px;
  height: 20px;
}

.admin-studio-flow-submit.is-disabled svg {
  opacity: 0.95;
}

.admin-studio-flow-submit.is-loading {
  background: #ffffff;
  color: #111827;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.2),
    0 0 24px rgba(96, 165, 250, 0.34),
    0 8px 24px rgba(0, 0, 0, 0.24);
}

.admin-studio-flow-submit.is-loading svg {
  animation: admin-studio-spin 820ms linear infinite;
}

.admin-studio-flow-submit.is-loading:is(:hover, :focus-visible) {
  transform: none;
}

@keyframes admin-studio-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes admin-studio-selected-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent),
      0 16px 34px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 13%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 15%, transparent),
      0 21px 44px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent);
  }
}

@keyframes admin-studio-selected-sheen {
  0% {
    transform: translateX(-78%);
    opacity: 0;
  }
  18% {
    opacity: 0.52;
  }
  62% {
    opacity: 0.52;
  }
  100% {
    transform: translateX(78%);
    opacity: 0;
  }
}

@keyframes admin-studio-ready-action-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.025);
  }
}

@keyframes admin-studio-ready-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
.admin-studio-intake-continue-card.is-selected,
.admin-studio-intake-continue-card.is-selected .admin-studio-primary-card-action,
.admin-studio-intake-continue-card.is-working,
  .admin-studio-intake-issue-card.is-selected,
  .admin-studio-season-bible-card.is-working,
  .admin-studio-episode-prep-card.is-selected,
  .admin-studio-episode-prep-card.is-working,
  .admin-studio-character-prep-grid article.is-selected,
  .admin-studio-character-prep-grid article.is-working,
  .admin-studio-season-bible-card.is-selected,
  .admin-studio-flow-submit:not(.is-disabled, .is-loading),
  .admin-studio-flow-submit:not(.is-disabled, .is-loading) svg {
    animation: none;
  }

  .admin-studio-intake-continue-card.is-selected::before,
  .admin-studio-intake-continue-card.is-working::after,
  .admin-studio-intake-continue-card.is-working > .admin-studio-card-main::before,
  .admin-studio-intake-issue-card.is-selected:not(.is-working, .is-saved)::before,
  .admin-studio-season-bible-card.is-working::after,
  .admin-studio-season-bible-card.is-working > .admin-studio-card-main::before,
  .admin-studio-episode-prep-card.is-selected::before,
  .admin-studio-episode-prep-card.is-working::after,
  .admin-studio-episode-prep-card.is-working > .admin-studio-card-main::before,
  .admin-studio-character-prep-grid article.is-selected::before,
  .admin-studio-character-prep-grid article.is-working::after,
  .admin-studio-character-prep-grid article.is-working > .admin-studio-card-main::before,
  .admin-studio-season-bible-card.is-selected::before {
    content: none;
  }
}

.admin-studio-create-composer form > .admin-studio-create-loading-row {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  margin: 2px 0 0;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)),
    rgba(255, 255, 255, 0.1);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.admin-studio-create-loading-row strong,
.admin-studio-create-loading-row small {
  min-width: 0;
  color: #ffffff;
  line-height: 1.25;
}

.admin-studio-create-loading-row strong {
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-studio-create-loading-row small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.admin-studio-create-loading-spinner {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: admin-studio-spin 820ms linear infinite;
}

.admin-studio-create-preview-resume {
  display: grid;
  gap: 10px;
  min-width: min(100%, 320px);
}

.admin-studio-create-preview-resume .button.is-loading {
  border-color: rgba(37, 99, 235, 0.32);
  background: linear-gradient(135deg, #2563eb, #0f172a);
  color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(37, 99, 235, 0.14),
    0 12px 30px rgba(15, 23, 42, 0.2);
}

.admin-studio-create-preview-resume .admin-studio-create-loading-row {
  display: grid;
  grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 235, 0.16);
  border-radius: 16px;
  background: rgba(37, 99, 235, 0.07);
  color: #111827;
}

.admin-studio-create-preview-resume .admin-studio-create-loading-row strong {
  color: #111827;
}

.admin-studio-create-preview-resume .admin-studio-create-loading-row small {
  color: #475569;
}

.admin-studio-create-preview-resume .admin-studio-create-loading-spinner {
  border-color: rgba(37, 99, 235, 0.24);
  border-top-color: #2563eb;
}

.admin-studio-flow-command-preview {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-command-preview span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.66rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-command-preview strong,
.admin-studio-flow-command-preview p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-studio-flow-command-preview strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.78rem;
  line-height: 1.15;
}

.admin-studio-flow-command-preview p {
  display: -webkit-box;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.admin-studio-flow-command-preview.is-ready {
  border-top-color: rgba(116, 224, 200, 0.22);
}

.admin-studio-flow-command-preview.is-locked {
  border-top-color: rgba(255, 200, 0, 0.24);
}

.admin-studio-flow-asset-candidates {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  display: grid;
  grid-auto-columns: minmax(148px, 176px);
  grid-auto-flow: column;
  gap: 7px;
  padding: 0 2px 2px;
}

.admin-studio-flow-asset-candidates article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.admin-studio-flow-asset-candidates article > div {
  overflow: hidden;
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.54);
}

.admin-studio-flow-asset-candidates img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-flow-asset-candidates section {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-flow-asset-candidates strong,
.admin-studio-flow-asset-candidates span,
.admin-studio-flow-asset-candidates small {
  min-width: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.admin-studio-flow-asset-candidates strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.7rem;
  line-height: 1.1;
}

.admin-studio-flow-asset-candidates span,
.admin-studio-flow-asset-candidates small {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.64rem;
}

.studio-minis-quick-form.admin-studio-flow-command-form {
  position: relative;
  grid-template-columns: 38px minmax(0, 1fr) max-content;
  grid-template-rows: auto 34px auto;
  gap: 3px 7px;
  padding: 0;
}

.studio-minis-quick-form.admin-studio-flow-command-form.has-context {
  grid-template-rows: auto auto 34px auto;
}

.studio-minis-quick-dock.admin-studio-flow-command-dock {
  right: auto;
  left: 50%;
  width: min(576px, 56vw);
  max-width: none;
  transform: translateX(-50%);
  z-index: 52;
  min-height: 88px;
  padding: 10px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.91), rgba(24, 25, 24, 0.93)),
    rgba(24, 25, 24, 0.9);
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.07) inset;
  transition:
    min-height 190ms ease,
    padding 190ms ease,
    background 190ms ease;
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 148px;
  padding-top: 12px;
}

body:has(.studio-minis-quick-dock.has-tray-items) .studio-minis-cast-tray-dock {
  bottom: 250px;
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.is-drop-active {
  border-color: rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(180deg, rgba(68, 68, 65, 0.76), rgba(28, 28, 27, 0.82)),
    rgba(34, 34, 32, 0.78);
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.is-drop-active::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 35%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%, rgba(255, 255, 255, 0.05));
}

.studio-minis-quick-form.admin-studio-flow-command-form textarea {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 30px;
  max-height: min(44vh, 440px);
  padding: 6px 12px 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
  font-weight: 620;
  line-height: 1.2;
  overflow: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
  scrollbar-width: thin;
  transition: padding 150ms ease;
}

.studio-minis-quick-form.admin-studio-flow-command-form.has-context textarea {
  grid-row: 2;
  min-height: 30px;
  max-height: min(44vh, 440px);
  padding: 5px 12px 0;
  align-self: center;
}

.studio-minis-quick-form.admin-studio-flow-command-form textarea::-webkit-scrollbar {
  width: 3px;
}

.studio-minis-quick-form.admin-studio-flow-command-form textarea::-webkit-scrollbar-track {
  background: transparent;
}

.studio-minis-quick-form.admin-studio-flow-command-form textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.studio-minis-quick-form.admin-studio-flow-command-form:not(.has-context) textarea {
  padding-top: 6px;
}

.studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  left: auto;
  bottom: auto;
  z-index: 4;
  display: inline-grid;
  width: 34px;
  height: 34px;
  align-self: end;
  place-items: center;
}

.studio-minis-quick-form.admin-studio-flow-command-form.has-context .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  grid-row: 3;
}

.studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
}

.studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.55;
}

.studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.studio-minis-character-picker.admin-studio-flow-command-picker {
  bottom: 142px;
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-mini-story-command-dock {
  max-width: 628px;
}

.admin-studio-mini-story-command-title {
  overflow: hidden;
  display: inline-block;
  max-width: 168px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.admin-studio-mini-story-direction-select {
  display: inline-flex;
  min-width: 0;
  max-width: 196px;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.74);
}

.admin-studio-mini-story-direction-select select {
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  outline: none;
}

.admin-studio-mini-story-direction-select option {
  color: #111827;
}

.studio-minis-character-picker.admin-studio-mini-story-dock-picker {
  bottom: 142px;
}

.studio-minis-character-picker-preview article {
  display: grid;
  gap: 12px;
  width: min(100%, 390px);
  padding: 20px;
  text-align: left;
}

.studio-minis-character-picker-preview article > span {
  overflow: hidden;
  display: grid;
  width: min(100%, 260px);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.07);
}

.studio-minis-character-picker-preview article img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.studio-minis-character-picker-preview article b {
  color: rgba(255, 255, 255, 0.9);
  font-size: 3rem;
  font-weight: 950;
}

.studio-minis-character-picker-preview article strong {
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 920;
  letter-spacing: 0;
}

.studio-minis-character-picker-preview article p {
  max-width: 42ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.45;
}

.studio-minis-source-picker-toggle {
  appearance: none;
  position: absolute;
  bottom: 8px;
  left: 0;
  z-index: 4;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  cursor: pointer;
}

.studio-minis-source-picker-toggle:is(:hover, :focus-visible),
.studio-minis-source-picker-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  outline: none;
}

.studio-minis-source-picker {
  position: absolute;
  bottom: 48px;
  left: 0;
  z-index: 8;
  display: grid;
  width: min(320px, calc(100vw - 48px));
  max-height: 264px;
  gap: 6px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(28, 27, 26, 0.98), rgba(18, 17, 16, 0.98)),
    rgba(18, 17, 16, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px) saturate(120%);
}

.studio-minis-source-picker button {
  appearance: none;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-width: 0;
  padding: 5px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.studio-minis-source-picker p {
  margin: 0;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.3;
}

.studio-minis-source-picker button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.studio-minis-source-picker button > span {
  overflow: hidden;
  display: grid;
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.66);
}

.studio-minis-source-picker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-minis-source-picker strong,
.studio-minis-source-picker small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-source-picker strong {
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1.08;
}

.studio-minis-source-picker small {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.66rem;
  font-weight: 760;
}

.studio-minis-quick-form.admin-studio-flow-command-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.admin-studio-flow-context-row.studio-minis-command-context-row {
  grid-column: 1 / -1;
  grid-row: 1;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  max-width: calc(100% - 4px);
  padding: 0 2px 2px;
  scrollbar-width: none;
}

.admin-studio-flow-context-row.studio-minis-command-context-row::-webkit-scrollbar {
  display: none;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview {
  flex: 0 0 auto;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 54px;
  max-width: 214px;
  padding: 5px 8px 5px 5px;
  border-radius: 16px;
  align-items: center;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-thumb {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1;
  text-transform: none;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-thumb img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: transparent;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-backdrop {
  object-fit: cover;
  filter: blur(7px) saturate(1.18);
  opacity: 0.62;
  transform: scale(1.16);
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-image {
  position: relative;
  z-index: 1;
  object-fit: contain;
  object-position: center;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-thumb b {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 950;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview > span:not(.studio-minis-command-context-thumb),
.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview > strong {
  grid-column: 2;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview > svg:last-child {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview.is-source-reference {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  min-height: 46px;
  max-width: 174px;
  padding: 4px 7px 4px 4px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.075);
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview.is-source-reference .studio-minis-command-context-thumb {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview.is-source-reference > span:not(.studio-minis-command-context-thumb) {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.6rem;
}

.admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview.is-source-reference > strong {
  max-width: 82px;
  font-size: 0.68rem;
}

.studio-minis-quick-dock .admin-studio-flow-command-actions {
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  min-height: 34px;
}

.studio-minis-quick-dock .admin-studio-flow-command-form.has-context .admin-studio-flow-command-actions {
  grid-row: 3;
}

.studio-minis-quick-duration-wrap {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.64rem;
  font-weight: 850;
  white-space: nowrap;
}

.studio-minis-quick-duration-options,
.studio-minis-quick-sequence-options {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.studio-minis-quick-duration-options button,
.studio-minis-quick-sequence-options button {
  height: 24px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.studio-minis-quick-duration-options button:hover,
.studio-minis-quick-duration-options button:focus-visible,
.studio-minis-quick-duration-options button.is-selected,
.studio-minis-quick-sequence-options button:hover,
.studio-minis-quick-sequence-options button:focus-visible,
.studio-minis-quick-sequence-options button.is-selected {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.studio-minis-quick-duration-wrap small {
  max-width: 84px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.46);
  text-overflow: ellipsis;
}

.studio-minis-quick-mode-wrap {
  position: relative;
  display: inline-flex;
}

.studio-minis-quick-mode-badge {
  display: inline-flex;
  min-width: max-content;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.studio-minis-quick-mode-badge:hover,
.studio-minis-quick-mode-badge:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.studio-minis-quick-mode-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 8;
  display: grid;
  min-width: 128px;
  gap: 3px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 12, 12, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.studio-minis-quick-mode-menu button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 8px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.studio-minis-quick-mode-menu button:hover,
.studio-minis-quick-mode-menu button:focus-visible,
.studio-minis-quick-mode-menu button.is-selected {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.studio-minis-quick-dock .admin-studio-flow-submit:disabled {
  opacity: 0.42;
}

.studio-minis-quick-dock .admin-studio-flow-submit {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #171717;
  box-shadow: none;
}

.studio-minis-quick-dock .admin-studio-flow-submit svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.15;
}

.studio-minis-quick-dock .admin-studio-flow-submit:not(:disabled):is(:hover, :focus-visible) {
  background: #ffffff;
  color: #050505;
  transform: translateY(-1px);
}

.studio-minis-quick-dock .admin-studio-flow-submit:not(.is-disabled, .is-loading),
.studio-minis-quick-dock .admin-studio-flow-submit:not(.is-disabled, .is-loading) svg {
  animation: none;
}

.studio-minis-quick-dock .studio-minis-quick-submit.is-pending:disabled {
  opacity: 1;
  cursor: progress;
}

.studio-minis-submit-status {
  min-width: max-content;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.studio-minis-tray-notice {
  display: flex;
  grid-column: 1 / -1;
  grid-row: 3;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.2;
}

.studio-minis-tray-notice.is-blocked {
  color: #fecaca;
}

.studio-minis-tray-notice span {
  min-width: 0;
}

.studio-minis-tray-notice a {
  flex: 0 0 auto;
  color: #ffffff;
  font-weight: 920;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.studio-minis-reference-resolve-panel {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(254, 242, 242, 0.82), rgba(255, 247, 237, 0.72)),
    #ffffff;
}

.studio-minis-reference-resolve-panel > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.studio-minis-reference-resolve-panel span {
  color: #b91c1c;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.studio-minis-reference-resolve-panel p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #7f1d1d;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.25;
}

.studio-minis-reference-resolve-panel .button {
  flex: 0 0 auto;
  gap: 6px;
}

.studio-minis-quick-form.admin-studio-flow-command-form.has-context .studio-minis-tray-notice {
  grid-row: 4;
}

@media (max-width: 700px) {
  .studio-minis-quick-dock.admin-studio-flow-command-dock {
    right: auto;
    bottom: 12px;
    left: 50%;
    width: min(100vw - 20px, 496px);
    transform: translateX(-50%);
    min-height: 128px;
    padding: 13px 13px 12px;
    border-radius: 24px;
  }

  .studio-minis-quick-dock.admin-studio-flow-command-dock.has-tray-items {
    min-height: 166px;
    padding-top: 15px;
  }

  body:has(.studio-minis-quick-dock.has-tray-items) .studio-minis-cast-tray-dock {
    bottom: 216px;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form {
    grid-template-columns: 42px minmax(0, 1fr) max-content;
    grid-template-rows: auto 40px auto;
    gap: 6px 8px;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form.has-context {
    grid-template-rows: auto auto 40px auto;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form textarea {
    max-height: min(42vh, 360px);
    padding: 8px 12px 0;
    font-size: 0.92rem;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form.has-context textarea {
    min-height: 32px;
    max-height: min(42vh, 360px);
    padding: 7px 12px 0;
  }

  .studio-minis-source-picker-toggle {
    bottom: 4px;
    width: 32px;
    height: 32px;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
    left: auto;
    bottom: auto;
    width: 40px;
    height: 40px;
  }

  .studio-minis-quick-form.admin-studio-flow-command-form .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo {
    width: 40px;
    height: 40px;
  }

  .studio-minis-character-picker.admin-studio-flow-command-picker {
    bottom: 118px;
  }

  .studio-minis-source-picker {
    bottom: 42px;
    width: min(300px, calc(100vw - 38px));
    max-height: 226px;
  }

  .admin-studio-flow-context-row.studio-minis-command-context-row {
    gap: 7px;
  }

  .admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 50px;
    max-width: 192px;
    border-radius: 15px;
  }

  .admin-studio-flow-context-row.studio-minis-command-context-row button.has-preview .studio-minis-command-context-thumb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .studio-minis-quick-dock .admin-studio-flow-command-actions {
    grid-column: 2 / 4;
    gap: 5px;
    min-height: 34px;
  }

  .admin-studio-flow-command-action-chip {
    max-width: min(250px, calc(100vw - 132px));
    min-height: 32px;
    padding: 7px 11px;
    font-size: 0.68rem;
  }

  .studio-minis-quick-duration-wrap {
    max-width: calc(100vw - 126px);
    gap: 3px;
  }

  .studio-minis-quick-duration-wrap small {
    display: none;
  }

  .studio-minis-submit-status {
    display: none;
  }
}

@media (max-width: 700px) {
  .studio-minis-image-focus-stage {
    bottom: 170px;
    padding: 52px 12px 12px;
  }

  .studio-minis-image-focus-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }

  .studio-minis-image-focus-media img {
    border-radius: 8px;
  }
}

.admin-studio-flow-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  gap: 14px;
  padding: 32px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  text-align: center;
}

.admin-studio-flow-empty.is-working {
  position: relative;
  overflow: hidden;
  border-color: rgba(59, 130, 246, 0.3);
}

.admin-studio-flow-empty.is-working::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.12), transparent),
    radial-gradient(circle at 50% 0%, rgba(96, 165, 250, 0.16), transparent 42%);
  animation: admin-studio-working-sweep 2.2s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-flow-empty.is-working > * {
  position: relative;
  z-index: 1;
}

.admin-studio-flow-empty.is-retry {
  border-color: rgba(248, 113, 113, 0.32);
}

.admin-studio-flow-empty-spinner {
  display: inline-grid;
  grid-template-columns: repeat(3, 10px);
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

.admin-studio-flow-empty-spinner span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.32;
  animation: admin-studio-working-dot 1.05s ease-in-out infinite;
}

.admin-studio-flow-empty-spinner span:nth-child(2) {
  animation-delay: 120ms;
}

.admin-studio-flow-empty-spinner span:nth-child(3) {
  animation-delay: 240ms;
}

.admin-studio-flow-empty p {
  max-width: 460px;
  margin: 0;
  color: #4b5563;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
}

.admin-studio-mini-stories-empty-note {
  display: grid;
  min-height: min(48vh, 420px);
  place-items: center;
  padding: 24px 16px 180px;
  color: var(--studio-workspace-muted, #64748b);
  text-align: center;
}

.admin-studio-mini-stories-empty-note p {
  margin: 0;
  color: inherit;
  font-size: 0.92rem;
  font-weight: 780;
  line-height: 1.4;
}

.admin-studio-mini-story-board-summary {
  display: -webkit-box;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 64%, transparent);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html[data-theme="dark"] .admin-studio-mini-story-board-summary {
  color: rgba(245, 247, 251, 0.58);
}

.admin-studio-site-shot-panel {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
}

.admin-studio-site-shot-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.admin-studio-site-shot-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-site-shot-head span {
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 48%, transparent);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-site-shot-head h2 {
  margin: 0;
  color: var(--studio-workspace-text, #111827);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.95;
}

.admin-studio-site-shot-head p {
  max-width: 560px;
  margin: 0;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 58%, transparent);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-studio-site-shot-head > a {
  display: inline-flex;
  min-height: 38px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--studio-workspace-text, #111827);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.admin-studio-site-shot-head > a:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.94);
  transform: translateY(-1px);
}

.admin-studio-site-shot-grid {
  display: grid;
  grid-auto-columns: minmax(250px, 31%);
  grid-auto-flow: column;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 16px;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
}

.admin-studio-site-shot-grid::-webkit-scrollbar {
  height: 8px;
}

.admin-studio-site-shot-grid::-webkit-scrollbar-track {
  background: transparent;
}

.admin-studio-site-shot-grid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.26);
}

.admin-studio-site-shot-card {
  display: grid;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--studio-workspace-text, #111827);
  text-decoration: none;
  scroll-snap-align: start;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.admin-studio-site-shot-card:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.11);
  transform: translateY(-2px);
}

.admin-studio-site-shot-media {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.76), transparent 26%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(148, 163, 184, 0.16)),
    #f6f7f9;
}

.admin-studio-site-shot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-site-shot-media span {
  color: rgba(15, 23, 42, 0.36);
  font-size: clamp(2.8rem, 8vw, 5.8rem);
  font-weight: 950;
  line-height: 1;
}

.admin-studio-site-shot-copy {
  display: grid;
  gap: 6px;
  padding: 14px 15px 16px;
}

.admin-studio-site-shot-copy span,
.admin-studio-site-shot-copy small {
  overflow: hidden;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 52%, transparent);
  font-size: 0.68rem;
  font-weight: 880;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-site-shot-copy strong {
  overflow: hidden;
  color: var(--studio-workspace-text, #111827);
  font-size: 0.98rem;
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .admin-studio-site-shot-head span,
html[data-theme="dark"] .admin-studio-site-shot-head p {
  color: rgba(245, 247, 251, 0.58);
}

html[data-theme="dark"] .admin-studio-site-shot-head h2 {
  color: rgba(255, 255, 255, 0.96);
}

html[data-theme="dark"] .admin-studio-site-shot-head > a {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}

html[data-theme="dark"] .admin-studio-site-shot-head > a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-site-shot-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .admin-studio-site-shot-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #101010;
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-site-shot-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .admin-studio-site-shot-media {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), rgba(148, 163, 184, 0.08)),
    #050505;
}

html[data-theme="dark"] .admin-studio-site-shot-copy span,
html[data-theme="dark"] .admin-studio-site-shot-copy small {
  color: rgba(245, 247, 251, 0.58);
}

html[data-theme="dark"] .admin-studio-site-shot-copy strong {
  color: rgba(255, 255, 255, 0.94);
}

.admin-studio-site-assets-page {
  gap: 20px;
}

.admin-studio-site-assets-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: end;
  margin: 0 0 10px;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.admin-studio-site-assets-hero > div:first-child {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-site-assets-hero span {
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 48%, transparent);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-site-assets-hero h1 {
  margin: 0;
  color: var(--studio-workspace-text, #111827);
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.94;
}

.admin-studio-site-assets-hero p {
  max-width: 620px;
  margin: 0;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 58%, transparent);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.36;
}

.admin-studio-site-assets-hero dl {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
  margin: 0;
}

.admin-studio-site-assets-hero dl div {
  min-width: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.admin-studio-site-assets-hero dt {
  margin: 0 0 5px;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 46%, transparent);
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-site-assets-hero dd {
  margin: 0;
  color: var(--studio-workspace-text, #111827);
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-site-assets-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-site-assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 16px;
}

.admin-studio-site-assets-tile {
  display: grid;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.admin-studio-site-assets-media {
  display: grid;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(148, 163, 184, 0.15)),
    #f6f7f9;
}

.admin-studio-site-assets-media img,
.admin-studio-site-assets-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-site-assets-media video {
  background: #050505;
}

.admin-studio-site-assets-media span {
  color: rgba(15, 23, 42, 0.36);
  font-size: clamp(3rem, 9vw, 6rem);
  font-weight: 950;
  line-height: 1;
}

.admin-studio-site-assets-copy {
  display: grid;
  gap: 7px;
  padding: 16px 16px 0;
}

.admin-studio-site-assets-copy span,
.admin-studio-site-assets-copy small {
  overflow: hidden;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 52%, transparent);
  font-size: 0.68rem;
  font-weight: 860;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-site-assets-copy h2 {
  margin: 0;
  overflow: hidden;
  color: var(--studio-workspace-text, #111827);
  font-size: 1.04rem;
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-site-assets-copy p {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 62%, transparent);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-site-assets-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 0;
}

.admin-studio-site-assets-links a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--studio-workspace-text, #111827);
  font-size: 0.72rem;
  font-weight: 880;
  text-decoration: none;
}

.admin-studio-site-assets-links a:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.admin-studio-site-assets-upload {
  display: grid;
  gap: 10px;
  margin: 16px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.72);
}

.admin-studio-site-assets-upload label {
  display: grid;
  gap: 6px;
}

.admin-studio-site-assets-upload label span {
  color: color-mix(in srgb, var(--studio-workspace-text, #111827) 58%, transparent);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-site-assets-upload input[type="file"],
.admin-studio-site-assets-upload input[type="text"] {
  min-height: 36px;
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--studio-workspace-text, #111827);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-studio-site-assets-upload input[type="text"] {
  padding: 0 10px;
}

html[data-theme="dark"] .admin-studio-site-assets-hero,
html[data-theme="dark"] .admin-studio-site-assets-tile {
  border-color: rgba(255, 255, 255, 0.1);
  background: #101010;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .admin-studio-site-assets-hero span,
html[data-theme="dark"] .admin-studio-site-assets-hero p,
html[data-theme="dark"] .admin-studio-site-assets-copy span,
html[data-theme="dark"] .admin-studio-site-assets-copy small,
html[data-theme="dark"] .admin-studio-site-assets-copy p,
html[data-theme="dark"] .admin-studio-site-assets-upload label span {
  color: rgba(245, 247, 251, 0.58);
}

html[data-theme="dark"] .admin-studio-site-assets-hero h1,
html[data-theme="dark"] .admin-studio-site-assets-hero dd,
html[data-theme="dark"] .admin-studio-site-assets-copy h2 {
  color: rgba(255, 255, 255, 0.95);
}

html[data-theme="dark"] .admin-studio-site-assets-hero dl div,
html[data-theme="dark"] .admin-studio-site-assets-upload {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .admin-studio-site-assets-hero dt,
html[data-theme="dark"] .admin-studio-site-assets-links a {
  color: rgba(245, 247, 251, 0.66);
}

html[data-theme="dark"] .admin-studio-site-assets-media {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 26%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), rgba(148, 163, 184, 0.08)),
    #050505;
}

html[data-theme="dark"] .admin-studio-site-assets-links a,
html[data-theme="dark"] .admin-studio-site-assets-upload input[type="file"],
html[data-theme="dark"] .admin-studio-site-assets-upload input[type="text"] {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .admin-studio-site-assets-links a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  .admin-studio-site-assets-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-studio-site-assets-actions {
    justify-content: flex-start;
  }
}

.admin-studio-site-assets-page {
  max-width: 1440px;
}

.admin-studio-site-assets-topbar-actions {
  gap: 8px;
}

.admin-studio-site-assets-workspace-hero {
  margin: 0;
}

.admin-studio-site-assets-workspace-hero p,
.admin-studio-site-assets-workspace-hero .admin-studio-episode-next p {
  max-width: 620px;
  margin: 0;
  color: currentColor;
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.45;
  opacity: 0.7;
}

.admin-studio-site-assets-workspace-hero .admin-studio-episode-next {
  align-content: end;
}

.admin-studio-site-assets-status-grid {
  margin-top: -2px;
}

.admin-studio-site-assets-mode-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: -4px;
}

.admin-studio-site-assets-mode-nav a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--studio-admin-border, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface, #ffffff) 88%, transparent);
  color: var(--studio-admin-text, #111827);
  font-size: 0.76rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: var(--studio-admin-shadow-soft, 0 12px 30px rgba(15, 23, 42, 0.08));
}

.admin-studio-site-assets-mode-nav a:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--studio-admin-brand, #2563eb) 36%, var(--studio-admin-border, rgba(15, 23, 42, 0.1)));
  box-shadow: var(--studio-admin-shadow, 0 18px 42px rgba(15, 23, 42, 0.14));
  transform: translateY(-1px);
}

.admin-studio-site-assets-board {
  display: grid;
  gap: 12px;
}

.admin-studio-site-assets-board > header {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
  min-width: 0;
}

.admin-studio-site-assets-board > header > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-site-assets-board > header span {
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-site-assets-board > header strong {
  color: var(--studio-admin-text, #111827);
  font-size: clamp(1.35rem, 2.8vw, 2.4rem);
  font-weight: 950;
  line-height: 0.98;
}

.admin-studio-site-assets-board > header small {
  max-width: 480px;
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.35;
  text-align: right;
}

.admin-studio-site-assets-shot-board {
  grid-template-columns: 1fr;
  gap: 14px;
  padding-bottom: 170px;
}

.admin-studio-site-assets-shot-board .admin-studio-site-assets-shot {
  grid-template-columns: minmax(330px, 44%) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  border-radius: 18px;
}

.admin-studio-site-assets-shot-board .admin-studio-site-assets-shot > section {
  align-content: start;
  gap: 10px;
  padding: 16px;
}

.admin-studio-site-assets-media-slot {
  aspect-ratio: 16 / 9;
  align-self: start;
  min-height: 0;
}

.admin-studio-site-assets-media-slot > b {
  -webkit-line-clamp: 2;
}

.admin-studio-site-assets-media-slot.is-empty > div {
  opacity: 1;
  transform: none;
}

.admin-studio-site-assets-media-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.54);
  color: #ffffff;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.admin-studio-site-assets-logline {
  display: -webkit-box;
  min-height: 2.7em;
  margin: -2px 0 0;
  overflow: hidden;
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-site-assets-shot-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-site-assets-shot-state span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--studio-admin-border, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface, #ffffff) 74%, transparent);
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-site-assets-shot-state span.is-ready {
  border-color: color-mix(in srgb, #16a34a 28%, var(--studio-admin-border, rgba(15, 23, 42, 0.1)));
  color: color-mix(in srgb, #15803d 80%, var(--studio-admin-text, #111827));
}

.admin-studio-site-assets-shot-state span.is-missing {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--studio-admin-border, rgba(15, 23, 42, 0.1)));
  color: color-mix(in srgb, #92400e 76%, var(--studio-admin-muted, #64748b));
}

.admin-studio-site-assets-page .admin-studio-site-assets-links {
  gap: 7px;
  padding: 0;
}

.admin-studio-site-assets-page .admin-studio-site-assets-links a {
  min-height: 30px;
  background: transparent;
}

.admin-studio-site-assets-upload-panel {
  margin-top: 2px;
  border-radius: 16px;
}

.admin-studio-site-assets-upload-panel > summary {
  min-height: 42px;
}

.admin-studio-site-assets-upload-panel > summary > span {
  display: grid;
  gap: 3px;
}

.admin-studio-site-assets-upload-panel > summary strong {
  color: var(--studio-admin-text, #111827);
  font-size: 0.82rem;
}

.admin-studio-site-assets-upload-panel > summary small {
  color: var(--studio-admin-muted, #64748b);
  font-size: 0.72rem;
}

.admin-studio-site-assets-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.admin-studio-site-assets-upload-grid .studio-minis-external-upload-form {
  min-width: 0;
  margin: 0;
}

.admin-studio-site-assets-upload-grid input[type="file"],
.admin-studio-site-assets-upload-grid input[type="text"],
.admin-studio-site-assets-upload-grid input[type="number"] {
  width: 100%;
}

html[data-theme="dark"] .admin-studio-site-assets-mode-nav a {
  border-color: var(--studio-admin-border-soft, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--studio-admin-card, #111111) 86%, transparent);
  color: var(--studio-admin-text, #f8fafc);
}

html[data-theme="dark"] .admin-studio-site-assets-shot-state span {
  border-color: var(--studio-admin-border-soft, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--studio-admin-card, #111111) 70%, transparent);
}

html[data-theme="dark"] .admin-studio-site-assets-shot-state span.is-ready {
  color: #86efac;
}

html[data-theme="dark"] .admin-studio-site-assets-shot-state span.is-missing {
  color: #fcd34d;
}

html[data-theme="dark"] .admin-studio-site-assets-upload-panel > summary strong {
  color: var(--studio-admin-text, #f8fafc);
}

html[data-theme="dark"] .admin-studio-site-assets-upload-panel > summary small,
html[data-theme="dark"] .admin-studio-site-assets-logline {
  color: var(--studio-admin-muted, #9ca3af);
}

@media (max-width: 760px) {
  .admin-studio-site-assets-board > header {
    align-items: start;
    flex-direction: column;
  }

  .admin-studio-site-assets-board > header small {
    max-width: none;
    text-align: left;
  }

  .admin-studio-site-assets-mode-nav {
    justify-content: flex-start;
  }

  .admin-studio-site-assets-upload-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-site-assets-shot-board .admin-studio-site-assets-shot {
    grid-template-columns: 1fr;
  }
}

.admin-studio-flow-empty-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.admin-studio-flow-empty-steps span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 999px;
  color: var(--studio-admin-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

@keyframes admin-studio-working-dot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  36% {
    opacity: 0.9;
    transform: translateY(-5px);
  }
}

@keyframes admin-studio-working-sweep {
  0% {
    transform: translateX(-45%);
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(45%);
    opacity: 0.35;
  }
}

.admin-studio-episode-board {
  display: grid;
  gap: 18px;
  max-width: 1440px;
}

.admin-studio-episode-flow-topbar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-episode-flow-topbar > div:first-child {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-episode-flow-topbar > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-episode-flow-topbar span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-episode-flow-topbar strong {
  color: #111827;
  font-size: clamp(1.65rem, 3vw, 3.2rem);
  font-weight: 950;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.admin-studio-episode-flow-topbar small {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 760;
}

.admin-studio-episode-advanced-link-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: -6px;
}

.admin-studio-episode-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
  align-items: stretch;
}

.admin-studio-episode-hero > div,
.admin-studio-episode-next,
.admin-studio-episode-status-grid > div,
.admin-studio-episode-ingredients,
.admin-studio-episode-runway,
.admin-studio-episode-dryrun,
.admin-studio-episode-sample-card,
.admin-studio-episode-advanced {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.2);
}

.admin-studio-episode-hero > div {
  display: grid;
  align-content: end;
  gap: 10px;
  min-height: clamp(220px, 32vh, 380px);
  padding: clamp(22px, 4vw, 42px);
}

.admin-studio-episode-hero > div:first-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    #050505;
  color: #ffffff;
}

.admin-studio-episode-hero span,
.admin-studio-episode-status-grid span,
.admin-studio-episode-runway span,
.admin-studio-episode-dryrun span,
.admin-studio-episode-sample-title span,
.admin-studio-episode-ingredients > div:first-child span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-episode-hero > div:first-child span {
  color: rgba(255, 255, 255, 0.62);
}

.admin-studio-episode-hero strong {
  min-width: 0;
  margin: 0;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.93;
  overflow-wrap: anywhere;
}

.admin-studio-episode-next strong {
  color: #111827;
  font-size: clamp(1.4rem, 2.4vw, 2.5rem);
}

.admin-studio-episode-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-episode-status-grid > div {
  display: grid;
  gap: 8px;
  padding: 14px;
  box-shadow: none;
}

.admin-studio-episode-status-grid strong {
  min-width: 0;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.admin-studio-episode-ingredients {
  display: grid;
  gap: 12px;
  padding: 14px;
  box-shadow: none;
}

.admin-studio-episode-ingredients > div:first-child {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
}

.admin-studio-episode-ingredients > div:last-child {
  overflow-x: auto;
  display: grid;
  grid-auto-columns: minmax(110px, 140px);
  grid-auto-flow: column;
  gap: 10px;
  padding-bottom: 2px;
}

.admin-studio-episode-ingredients > div:last-child > span {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-studio-episode-ingredients i {
  overflow: hidden;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  font-style: normal;
  font-weight: 950;
}

.admin-studio-episode-ingredients img,
.admin-studio-episode-sample-chips img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-episode-ingredients strong {
  min-width: 0;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.admin-studio-episode-runway,
.admin-studio-episode-dryrun,
.admin-studio-episode-advanced {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  box-shadow: none;
}

.admin-studio-episode-runway > div:first-child,
.admin-studio-episode-dryrun > div,
.admin-studio-episode-advanced {
  min-width: 0;
}

.admin-studio-episode-runway strong,
.admin-studio-episode-dryrun strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 1.05rem;
}

.admin-studio-episode-runway p,
.admin-studio-episode-dryrun p,
.admin-studio-episode-advanced span {
  min-width: 0;
  margin: 5px 0 0;
  color: #4b5563;
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.admin-studio-episode-runway > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-episode-generate-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-episode-generate-form label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-studio-episode-dryrun {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-studio-episode-dryrun.is-live {
  grid-template-columns: 1fr;
  border-color: rgba(5, 150, 105, 0.24);
  background: #ecfdf5;
}

.admin-studio-episode-sample-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.admin-studio-episode-five-shot-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
  align-items: start;
}

.admin-studio-episode-sample-launch {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 118px;
  padding: 18px;
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.2), transparent 26%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 23, 42, 0.03)),
    rgba(255, 255, 255, 0.72);
  color: #111827;
  text-align: left;
  box-shadow: 0 18px 48px rgba(37, 99, 235, 0.12);
  outline: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.admin-studio-episode-sample-launch::after {
  content: "Drag or click";
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.9);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-episode-sample-launch:is(:hover, :focus-visible) {
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow:
    0 0 0 1px rgba(59, 130, 246, 0.12),
    0 20px 54px rgba(37, 99, 235, 0.18);
  transform: translateY(-2px);
}

.admin-studio-episode-sample-launch.is-command-selected {
  border-color: rgba(37, 99, 235, 0.72);
  background:
    radial-gradient(circle at 88% 12%, rgba(250, 204, 21, 0.24), transparent 26%),
    linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(15, 23, 42, 0.04)),
    rgba(239, 246, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.18),
    0 0 0 7px rgba(37, 99, 235, 0.08),
    0 24px 62px rgba(37, 99, 235, 0.24);
  transform: translateY(-3px);
}

.admin-studio-episode-sample-launch.is-command-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.42) 42%, transparent 68%);
  transform: translateX(-120%);
  animation: admin-studio-working-sweep 1.55s ease-in-out 1;
  pointer-events: none;
}

.admin-studio-episode-sample-launch.is-command-selected::after {
  content: "In Command Bar";
  background: rgba(37, 99, 235, 0.94);
}

.admin-studio-episode-sample-launch > span {
  color: #2563eb;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-studio-episode-sample-launch > strong {
  max-width: 560px;
  color: #111827;
  font-size: clamp(1.35rem, 3vw, 2.45rem);
  font-weight: 950;
  line-height: 0.98;
}

.admin-studio-episode-sample-launch > small {
  max-width: 560px;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 760;
}

.admin-studio-episode-sample-launch .admin-studio-flow-command-card-hint {
  display: none;
}

.admin-studio-episode-mode-nav {
  display: inline-flex;
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  gap: 8px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.admin-studio-episode-mode-nav a {
  display: inline-flex;
  width: 46px;
  height: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  font-size: 0;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.admin-studio-episode-mode-nav a svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.admin-studio-episode-mode-nav a:is(:hover, :focus-visible),
.admin-studio-episode-mode-nav a.is-active {
  background: #111827;
  border-color: rgba(15, 23, 42, 0.12);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  transform: translateY(-1px);
}

html[data-theme="dark"] .admin-studio-episode-mode-nav {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-episode-mode-nav a {
  border-color: rgba(248, 250, 252, 0.12);
  background: rgba(24, 24, 27, 0.82);
  color: rgba(248, 250, 252, 0.78);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .admin-studio-episode-mode-nav a:is(:hover, :focus-visible),
html[data-theme="dark"] .admin-studio-episode-mode-nav a.is-active {
  background: #f8fafc;
  border-color: rgba(248, 250, 252, 0.18);
  color: #0f172a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
}

.admin-studio-episode-finish-strip {
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-end;
}

.admin-studio-episode-finish-card {
  position: relative;
  display: grid;
  min-height: 116px;
  gap: 12px;
  align-content: space-between;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0%, rgba(37, 99, 235, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.72);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  color: #0f172a;
  text-decoration: none;
  backdrop-filter: blur(18px);
}

.admin-studio-episode-finish-card.is-music {
  width: min(620px, 100%);
  min-height: 96px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  align-content: center;
}

.admin-studio-episode-finish-card.is-music > details {
  align-self: center;
  justify-self: end;
  margin-top: 2px;
}

.admin-studio-episode-finish-card.is-music > details[open] {
  grid-column: 1 / -1;
  justify-self: stretch;
  padding: 12px;
}

.admin-studio-episode-finish-card.is-music > form {
  justify-self: end;
}

.admin-studio-music-job-state.admin-studio-job-card-state {
  justify-self: end;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

.admin-studio-music-job-state .admin-studio-job-status {
  background: transparent;
}

.admin-studio-episode-finish-card::after {
  content: "";
  position: absolute;
  inset: auto 14px 10px 14px;
  height: 3px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.28);
}

.admin-studio-episode-finish-card.is-ready::after {
  background: linear-gradient(90deg, #22c55e, #38bdf8);
}

.admin-studio-episode-finish-card.is-working::after {
  background: linear-gradient(90deg, #60a5fa, #facc15, #60a5fa);
  background-size: 180% 100%;
  animation: studio-episode-finish-card-progress 1.35s ease-in-out infinite;
}

.admin-studio-episode-finish-card.is-failed::after {
  background: linear-gradient(90deg, #f97316, #ef4444);
}

@keyframes studio-episode-finish-card-progress {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 180% 50%;
  }
}

.admin-studio-episode-finish-card > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-studio-episode-finish-card span {
  width: fit-content;
  color: #2563eb;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-studio-episode-finish-card strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-episode-finish-card small {
  display: -webkit-box;
  overflow: hidden;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.32;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-episode-finish-card button,
.admin-studio-episode-finish-card summary {
  white-space: nowrap;
  width: fit-content;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 920;
  cursor: pointer;
}

.admin-studio-episode-finish-card.is-music > details > summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.76);
  color: #111827;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.28);
}

.admin-studio-episode-finish-card.is-music > details[open] > summary {
  margin-bottom: 12px;
}

.admin-studio-episode-finish-card button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.admin-studio-episode-finish-card > details {
  position: relative;
  z-index: 2;
}

.admin-studio-episode-finish-card > details[open] {
  margin: 0 -6px -6px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

.admin-studio-episode-tools-drawer {
  position: relative;
  z-index: 180;
  margin-left: auto;
  justify-self: end;
}

.admin-studio-episode-finish-strip.is-topbar {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-end;
}

.admin-studio-episode-finish-strip.is-topbar .admin-studio-episode-tools-drawer {
  margin-left: 0;
}

.admin-studio-episode-finish-strip.is-topbar .admin-studio-episode-tools-drawer > summary {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-color: var(--studio-workspace-border);
  background: var(--studio-workspace-card, var(--studio-workspace-surface));
  color: var(--studio-workspace-text);
  box-shadow: none;
  backdrop-filter: none;
}

.admin-studio-episode-finish-strip.is-topbar .admin-studio-episode-tools-drawer > summary svg {
  width: 20px;
  height: 20px;
}

.admin-studio-episode-finish-strip.is-topbar .admin-studio-episode-tools-grid {
  top: calc(100% + 12px);
}

.admin-studio-episode-tools-drawer[open] {
  z-index: 220;
}

.admin-studio-episode-tools-drawer > summary {
  display: inline-flex;
  width: 46px;
  height: 46px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #334155;
  font-size: 0.75rem;
  font-weight: 920;
  list-style: none;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(16px);
}

.admin-studio-episode-tools-drawer > summary svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.admin-studio-episode-tools-drawer > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-episode-tools-drawer[open] > summary {
  background: #111827;
  color: #ffffff;
}

.admin-studio-episode-tools-grid {
  position: absolute;
  z-index: 221;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(780px, calc(100vw - 48px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 24px;
  background: rgba(248, 250, 252, 0.82);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(22px);
}

.admin-studio-episode-tools-grid .admin-studio-episode-finish-card {
  width: 100%;
  min-height: 104px;
  box-shadow: none;
}

.admin-studio-episode-tools-grid .admin-studio-episode-finish-card.is-music {
  grid-column: 1 / -1;
}

.admin-studio-episode-finish-card.is-external-upload {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.24);
  text-align: left;
  cursor: pointer;
}

.admin-studio-episode-finish-card.is-external-upload > svg {
  position: absolute;
  right: 14px;
  bottom: 18px;
  color: currentColor;
  opacity: 0.62;
}

.admin-studio-episode-finish-card.is-external-upload:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-studio-episode-upload-dialog {
  position: fixed;
  inset: 0;
  z-index: 360;
  display: grid;
  place-items: center;
  padding: 18px;
}

.admin-studio-episode-upload-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.admin-studio-episode-upload-modal {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 920px);
  max-height: min(820px, calc(100vh - 36px));
  gap: 14px;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.1));
  border-radius: 20px;
  background: var(--studio-workspace-card, #fbfaf6);
  color: var(--studio-workspace-text, #111827);
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.26);
}

.admin-studio-episode-upload-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-studio-episode-upload-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-studio-episode-upload-head span,
.admin-studio-episode-upload-form span {
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-episode-upload-head strong {
  color: var(--studio-workspace-text, #0f172a);
  font-size: 1.08rem;
  font-weight: 920;
  line-height: 1.12;
}

.admin-studio-episode-upload-head small {
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.35;
}

.admin-studio-episode-upload-head > button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.08));
  border-radius: 999px;
  background: var(--studio-workspace-surface, rgba(255, 255, 255, 0.72));
  color: var(--studio-workspace-text, #0f172a);
  cursor: pointer;
}

.admin-studio-episode-upload-form {
  display: grid;
  gap: 13px;
}

.admin-studio-episode-upload-scene-select,
.admin-studio-episode-upload-notes {
  display: grid;
  gap: 7px;
}

.admin-studio-episode-upload-scene-select select,
.admin-studio-episode-upload-notes input,
.admin-studio-episode-upload-prompts textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.08));
  border-radius: 12px;
  background: var(--studio-workspace-surface, rgba(255, 255, 255, 0.66));
  color: var(--studio-workspace-text, #111827);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  outline: none;
}

.admin-studio-episode-upload-scene-select select,
.admin-studio-episode-upload-notes input {
  min-height: 40px;
  padding: 0 12px;
}

.admin-studio-episode-upload-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-episode-upload-status span {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--studio-workspace-chip-bg, rgba(17, 24, 39, 0.06));
  color: var(--studio-workspace-chip-text, rgba(17, 24, 39, 0.58));
}

.admin-studio-episode-upload-prompts,
.admin-studio-episode-upload-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-episode-upload-prompts article {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  background: var(--studio-workspace-surface, rgba(255, 255, 255, 0.54));
}

.admin-studio-episode-upload-prompts article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-studio-episode-upload-prompts button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.08));
  border-radius: 999px;
  background: var(--studio-workspace-card, #ffffff);
  color: var(--studio-workspace-text, #111827);
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.admin-studio-episode-upload-prompts textarea {
  min-height: 118px;
  resize: vertical;
  padding: 10px;
  line-height: 1.35;
}

.admin-studio-episode-upload-dropzone {
  display: grid;
  min-height: 154px;
  place-items: center;
  gap: 7px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--studio-workspace-text, #111827) 20%, transparent);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(20, 184, 166, 0.045)),
    var(--studio-workspace-surface, rgba(255, 255, 255, 0.58));
  color: var(--studio-workspace-text, #111827);
  text-align: center;
  cursor: pointer;
}

.admin-studio-episode-upload-dropzone.is-dragging,
.admin-studio-episode-upload-dropzone.has-file {
  border-color: color-mix(in srgb, var(--studio-workspace-text, #111827) 34%, transparent);
  background: var(--studio-workspace-card-hover, rgba(255, 255, 255, 0.82));
}

.admin-studio-episode-upload-dropzone > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
  background: var(--studio-workspace-chip-bg, rgba(17, 24, 39, 0.06));
  color: var(--studio-workspace-text, #111827);
}

.admin-studio-episode-upload-dropzone strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--studio-workspace-text, #111827);
  font-size: 0.92rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-episode-upload-dropzone small {
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.76rem;
  font-weight: 720;
}

.admin-studio-episode-upload-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-studio-episode-upload-submit {
  display: inline-flex;
  min-height: 40px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--studio-workspace-text, #111827);
  color: var(--studio-workspace-canvas, #ffffff);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-studio-episode-upload-submit svg {
  flex: 0 0 auto;
}

.admin-studio-episode-upload-submit:disabled svg {
  animation: admin-studio-spin 850ms linear infinite;
}

.admin-studio-episode-upload-submit:disabled {
  cursor: wait;
  opacity: 0.62;
}

.admin-studio-episode-upload-form .admin-studio-episode-upload-result {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(22, 101, 52, 0.1);
  color: #166534;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: none;
}

.admin-studio-episode-upload-form .admin-studio-episode-upload-result.is-error {
  background: rgba(153, 27, 27, 0.1);
  color: #991b1b;
}

.admin-studio-episode-board.is-insert-board {
  padding-bottom: 60px;
}

.admin-studio-episode-insert-board {
  display: grid;
  gap: 12px;
  padding-bottom: 48px;
}

.admin-studio-episode-insert-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(130px, 0.55fr) minmax(320px, 1.35fr) minmax(190px, 0.75fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.1));
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(248, 250, 252, 0.52)),
    var(--studio-workspace-card, rgba(255, 255, 255, 0.72));
  color: var(--studio-workspace-text, #111827);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.admin-studio-episode-insert-scene {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.admin-studio-episode-insert-scene > a {
  display: block;
  min-width: 0;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

.admin-studio-episode-insert-scene .admin-studio-episode-media-slot {
  width: 76px;
  height: 112px;
  aspect-ratio: auto;
  border-radius: 14px;
}

.admin-studio-episode-insert-scene .admin-studio-episode-media-slot > b,
.admin-studio-episode-insert-scene .admin-studio-episode-media-kind,
.admin-studio-episode-insert-scene .admin-studio-episode-selected-still {
  display: none;
}

.admin-studio-episode-insert-scene > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.admin-studio-episode-insert-scene span {
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.admin-studio-episode-insert-scene strong {
  color: var(--studio-workspace-text, #111827);
  font-size: 0.96rem;
  font-weight: 950;
  line-height: 1.08;
}

.admin-studio-episode-insert-characters {
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  padding: 4px 0;
}

.admin-studio-episode-insert-characters span {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  background: var(--studio-workspace-chip-bg, rgba(17, 24, 39, 0.06));
  color: var(--studio-workspace-chip-text, #334155);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-studio-episode-insert-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.admin-studio-episode-insert-prompts section {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 11px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.08));
  border-radius: 16px;
  background: var(--studio-workspace-surface, rgba(255, 255, 255, 0.58));
}

.admin-studio-episode-insert-prompts section > div {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-studio-episode-insert-prompts strong {
  color: var(--studio-workspace-text, #111827);
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-studio-episode-insert-prompts button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--studio-workspace-border, rgba(15, 23, 42, 0.1));
  border-radius: 999px;
  background: var(--studio-workspace-card, #ffffff);
  color: var(--studio-workspace-text, #111827);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-studio-episode-insert-prompts button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.admin-studio-episode-insert-prompts p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.admin-studio-episode-insert-dropzone {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 150px;
  gap: 8px;
  align-content: center;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--studio-workspace-text, #111827) 22%, transparent);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.075), rgba(245, 158, 11, 0.07)),
    var(--studio-workspace-surface, rgba(255, 255, 255, 0.6));
}

.admin-studio-episode-insert-dropzone.is-dragging {
  border-color: rgba(37, 99, 235, 0.56);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(245, 158, 11, 0.12)),
    var(--studio-workspace-card, rgba(255, 255, 255, 0.82));
}

.admin-studio-episode-insert-dropzone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.admin-studio-episode-insert-dropzone > button {
  display: grid;
  gap: 7px;
  justify-items: center;
  width: 100%;
  min-height: 108px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--studio-workspace-text, #111827);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.admin-studio-episode-insert-dropzone > button:disabled {
  cursor: progress;
}

.admin-studio-episode-insert-dropzone.is-uploaded {
  border-color: color-mix(in srgb, #16a34a 52%, transparent);
}

.admin-studio-episode-insert-dropzone.is-error {
  border-color: color-mix(in srgb, #dc2626 56%, transparent);
}

.admin-studio-episode-insert-drop-icons {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: var(--studio-workspace-chip-bg, rgba(17, 24, 39, 0.06));
  color: var(--studio-workspace-text, #111827);
}

.admin-studio-episode-insert-dropzone strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--studio-workspace-text, #111827);
  font-size: 0.84rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-episode-insert-dropzone small {
  color: var(--studio-workspace-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 740;
}

.admin-studio-episode-insert-drop-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-self: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
}

.admin-studio-episode-insert-drop-status svg {
  flex: 0 0 auto;
}

.admin-studio-episode-insert-drop-status.is-pending svg {
  animation: admin-studio-spin 850ms linear infinite;
}

.admin-studio-episode-insert-drop-status.is-uploaded {
  background: rgba(22, 101, 52, 0.92);
}

.admin-studio-episode-insert-drop-status.is-error {
  background: rgba(153, 27, 27, 0.92);
}

html[data-theme="dark"] .admin-studio-episode-insert-row {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    rgba(19, 19, 19, 0.86);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] .admin-studio-episode-insert-prompts section,
html[data-theme="dark"] .admin-studio-episode-insert-dropzone {
  background: rgba(255, 255, 255, 0.055);
}

@media (max-width: 1200px) {
  .admin-studio-episode-insert-row {
    grid-template-columns: minmax(180px, 0.8fr) minmax(320px, 1.3fr) minmax(190px, 0.75fr);
  }

  .admin-studio-episode-insert-characters {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .admin-studio-episode-insert-row,
  .admin-studio-episode-insert-prompts {
    grid-template-columns: 1fr;
  }
}

.admin-studio-episode-finish-card.is-lyrics {
  min-height: 104px;
}

.admin-studio-episode-finish-card.is-lyrics > details {
  display: grid;
  gap: 10px;
}

.admin-studio-episode-finish-card.is-lyrics > details > summary {
  display: grid;
  width: 100%;
  min-height: 0;
  justify-content: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  list-style: none;
  box-shadow: none;
  text-align: left;
}

.admin-studio-episode-finish-card.is-lyrics > details > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-episode-finish-card.is-mini-story-room {
  min-height: 104px;
}

.admin-studio-episode-finish-card.is-mini-story-room > details {
  display: grid;
  gap: 10px;
}

.admin-studio-episode-finish-card.is-mini-story-room > details > summary {
  display: grid;
  width: 100%;
  min-height: 0;
  justify-content: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  list-style: none;
  box-shadow: none;
  text-align: left;
}

.admin-studio-episode-finish-card.is-mini-story-room > details > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-mini-story-room-panel {
  display: grid;
  gap: 10px;
}

.admin-studio-mini-story-room-panel section {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.admin-studio-mini-story-room-panel section > span {
  color: #2563eb;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-studio-mini-story-room-panel section > strong {
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 950;
}

.admin-studio-mini-story-room-panel p {
  margin: 0;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.38;
}

.admin-studio-mini-story-room-panel section > div {
  display: grid;
  gap: 7px;
}

.admin-studio-mini-story-room-panel article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-studio-mini-story-room-panel article strong {
  color: #111827;
  font-size: 0.78rem;
  font-weight: 920;
  white-space: normal;
}

.admin-studio-episode-lyrics-list {
  display: grid;
  max-height: 260px;
  gap: 5px;
  margin: 0;
  overflow: auto;
  padding-left: 1.25rem;
  color: #111827;
  font-size: 0.76rem;
  font-weight: 790;
  line-height: 1.35;
}

.admin-studio-episode-lyrics-empty {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-studio-episode-view-tools {
  display: grid;
  grid-column: 1 / -1;
  gap: 9px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.05);
}

.admin-studio-episode-view-tools > span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-studio-episode-view-tools > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-episode-view-tools a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  color: #334155;
  font-size: 0.84rem;
  font-weight: 920;
  text-decoration: none;
}

.admin-studio-episode-view-tools a svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.admin-studio-episode-view-tools a:is(:hover, :focus-visible),
.admin-studio-episode-view-tools a.is-active {
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  outline: none;
}

.admin-studio-episode-finish-card form {
  display: grid;
  gap: 8px;
}

.admin-studio-music-cue-editor {
  display: grid;
  gap: 12px;
}

.admin-studio-music-cue-title,
.admin-studio-music-cue-notes,
.admin-studio-music-cue-upload {
  display: grid;
  gap: 6px;
}

.admin-studio-music-cue-title > span,
.admin-studio-music-cue-notes > span,
.admin-studio-music-cue-upload > span,
.admin-studio-music-cue-grid section > span {
  color: #2563eb;
  font-size: 0.64rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-studio-music-cue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 10px;
}

.admin-studio-music-cue-grid section {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-studio-music-cue-grid ol {
  display: grid;
  gap: 5px;
  max-height: 220px;
  margin: 0;
  overflow: auto;
  padding-left: 1.25rem;
  color: #111827;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.35;
}

.admin-studio-music-cue-grid p {
  margin: 0;
  color: #475569;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.38;
}

.admin-studio-music-cue-advanced {
  border-radius: 14px;
}

.admin-studio-music-cue-advanced > summary {
  min-height: 30px;
  padding: 0 10px;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.22);
}

.admin-studio-music-cue-advanced[open] {
  padding: 8px;
  background: rgba(255, 255, 255, 0.48);
}

.admin-studio-episode-finish-card :is(input, textarea) {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  color: #0f172a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 740;
}

.admin-studio-episode-finish-card input {
  min-height: 34px;
  padding: 0 10px;
}

.admin-studio-episode-finish-card textarea {
  min-height: 84px;
  padding: 10px;
  resize: vertical;
}

.admin-studio-episode-finish-card audio {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 34px;
}

.admin-studio-episode-finish-card:is(:hover, :focus-within) {
  border-color: rgba(37, 99, 235, 0.32);
  transform: translateY(-1px);
}

html[data-theme="dark"] .admin-studio-episode-finish-card {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    radial-gradient(circle at 20% 0%, rgba(96, 165, 250, 0.14), transparent 34%),
    rgba(17, 20, 27, 0.76);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.36);
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-episode-finish-card span {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-episode-finish-card strong {
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-episode-finish-card small {
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .admin-studio-music-job-state.admin-studio-job-card-state {
  background: rgba(15, 23, 42, 0.5);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .admin-studio-episode-finish-card button,
html[data-theme="dark"] .admin-studio-episode-finish-card summary {
  border-color: rgba(248, 250, 252, 0.18);
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="dark"] .admin-studio-episode-finish-card.is-music > details > summary {
  background: rgba(15, 23, 42, 0.68);
  color: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .admin-studio-episode-finish-card.is-lyrics > details > summary {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-episode-finish-card.is-mini-story-room > details > summary {
  background: transparent;
  color: inherit;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-mini-story-room-panel section > span {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-mini-story-room-panel section > strong,
html[data-theme="dark"] .admin-studio-mini-story-room-panel article strong {
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-mini-story-room-panel p {
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .admin-studio-mini-story-room-panel article {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.58);
}

html[data-theme="dark"] .admin-studio-episode-finish-card > details[open] {
  background: rgba(2, 6, 23, 0.76);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .admin-studio-episode-lyrics-list {
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-episode-lyrics-empty {
  color: rgba(226, 232, 240, 0.72);
}

html[data-theme="dark"] .admin-studio-music-cue-title > span,
html[data-theme="dark"] .admin-studio-music-cue-notes > span,
html[data-theme="dark"] .admin-studio-music-cue-upload > span,
html[data-theme="dark"] .admin-studio-music-cue-grid section > span {
  color: #93c5fd;
}

html[data-theme="dark"] .admin-studio-music-cue-grid section {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(15, 23, 42, 0.58);
}

html[data-theme="dark"] .admin-studio-music-cue-grid ol {
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-music-cue-grid p {
  color: rgba(226, 232, 240, 0.74);
}

html[data-theme="dark"] .admin-studio-music-cue-advanced > summary {
  background: rgba(248, 250, 252, 0.08);
  color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] .admin-studio-music-cue-advanced[open] {
  background: rgba(15, 23, 42, 0.44);
}

html[data-theme="dark"] .admin-studio-episode-finish-card :is(input, textarea) {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
}

html[data-theme="dark"] .admin-studio-episode-tools-drawer > summary {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(12, 14, 18, 0.78);
  color: rgba(226, 232, 240, 0.78);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-studio-episode-tools-drawer[open] > summary {
  background: #f8fafc;
  color: #0f172a;
}

html[data-theme="dark"] .admin-studio-episode-tools-grid {
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(2, 6, 23, 0.84);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .admin-studio-episode-view-tools {
  background: rgba(248, 250, 252, 0.07);
}

html[data-theme="dark"] .admin-studio-episode-view-tools > span {
  color: rgba(226, 232, 240, 0.64);
}

html[data-theme="dark"] .admin-studio-episode-view-tools a {
  color: rgba(226, 232, 240, 0.82);
}

html[data-theme="dark"] .admin-studio-episode-view-tools a:is(:hover, :focus-visible),
html[data-theme="dark"] .admin-studio-episode-view-tools a.is-active {
  background: #f8fafc;
  color: #0f172a;
}

@media (max-width: 1180px) {
  .admin-studio-episode-finish-strip {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .admin-studio-episode-finish-strip {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-studio-episode-finish-card.is-music {
    grid-template-columns: 1fr;
  }

  .admin-studio-episode-finish-card.is-music > :is(form, details) {
    justify-self: start;
  }

  .admin-studio-music-cue-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-episode-tools-grid {
    position: static;
    width: 100%;
    grid-template-columns: 1fr;
    margin-top: 10px;
  }
}

.admin-studio-not-found {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  background: var(--studio-admin-bg);
  color: var(--studio-admin-text);
}

.admin-studio-not-found > section {
  display: grid;
  width: min(760px, 100%);
  gap: 18px;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--studio-admin-border);
  border-radius: 28px;
  background: var(--studio-admin-surface);
  box-shadow: var(--studio-admin-shadow);
}

.admin-studio-not-found span {
  color: var(--studio-admin-brand);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-studio-not-found h1 {
  margin: 0;
  color: var(--studio-admin-text);
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 0.95;
}

.admin-studio-not-found p {
  margin: 0;
  max-width: 560px;
  color: var(--studio-admin-muted);
  font-size: 1rem;
  font-weight: 760;
}

.admin-studio-not-found > section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.site-main-shell-admin-studio,
.site-main-admin-studio {
  background: var(--studio-admin-bg);
  color: var(--studio-admin-text);
}

.site-main-admin-studio > .page-band:first-child {
  min-height: 100vh;
  padding: clamp(32px, 7vw, 84px);
  background: var(--studio-admin-bg);
  color: var(--studio-admin-text);
}

.site-main-admin-studio > .page-band:first-child .page-intro-card {
  max-width: min(860px, 100%);
  border: 1px solid var(--studio-admin-border);
  border-radius: 28px;
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow);
}

.site-main-admin-studio > .page-band:first-child .eyebrow {
  color: var(--studio-admin-brand);
}

.site-main-admin-studio > .page-band:first-child h1 {
  color: var(--studio-admin-text);
}

.site-main-admin-studio > .page-band:first-child p {
  color: var(--studio-admin-muted);
}

.admin-studio-episode-five-shot-board article {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.admin-studio-episode-production-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.admin-studio-episode-scene-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 14px;
}

.admin-studio-episode-generated-still-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding-bottom: 170px;
}

.admin-studio-episode-preview-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
  padding-bottom: 170px;
}

.admin-studio-episode-preview-strip > a,
.admin-studio-episode-preview-strip-item {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.admin-studio-episode-preview-strip-item.is-failed {
  cursor: default;
}

@media (max-width: 1180px) {
  .admin-studio-episode-generated-still-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .admin-studio-episode-generated-still-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-studio-episode-timing-board {
  display: grid;
  gap: 14px;
  padding-bottom: 170px;
}

.admin-studio-episode-timing-board > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  color: var(--studio-admin-text);
}

.admin-studio-episode-timing-board > header strong {
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 0.95;
}

.admin-studio-episode-timing-board > header span {
  color: var(--studio-admin-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.admin-studio-episode-timing-board > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

.admin-studio-episode-timing-board a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 5px 12px;
  align-items: center;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--studio-admin-border, rgba(17, 24, 39, 0.1));
  border-radius: 16px;
  background: var(--studio-admin-card, #ffffff);
  color: var(--studio-admin-text);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-studio-episode-timing-board a:is(:hover, :focus-visible) {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.18),
    0 18px 42px rgba(15, 23, 42, 0.14);
}

.admin-studio-episode-timing-board a > span {
  color: var(--studio-admin-muted);
  font-size: 0.72rem;
  font-weight: 950;
}

.admin-studio-episode-timing-board a > strong {
  min-width: 0;
  color: var(--studio-admin-text);
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.admin-studio-episode-timing-board a > em {
  color: var(--studio-admin-text);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 950;
}

.admin-studio-episode-timing-board a > small,
.admin-studio-episode-timing-board a > i {
  grid-column: 2 / -1;
  color: var(--studio-admin-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

@media (max-width: 760px) {
  .admin-studio-episode-flow-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-episode-flow-topbar > div:last-child {
    justify-content: flex-start;
  }

  .admin-studio-episode-scene-board {
    grid-template-columns: 1fr;
  }

  .admin-studio-episode-generated-still-board {
    grid-template-columns: 1fr;
  }
}

.admin-studio-episode-scene-board article,
.admin-studio-episode-generated-still-board article {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
}

.admin-studio-episode-scene-card-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  outline: none;
}

.admin-studio-episode-scene-card-open.is-select-only {
  cursor: copy;
}

.admin-studio-episode-scene-card-open:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(96, 165, 250, 0.82);
}

.admin-studio-episode-scene-board article:is(:hover, :focus-within),
.admin-studio-episode-generated-still-board article:is(:hover, :focus-within) {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.16),
    0 18px 42px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}

.admin-studio-episode-media-slot {
  position: relative;
  overflow: hidden;
  display: grid;
  aspect-ratio: 9 / 16;
  place-items: center;
  background:
    radial-gradient(circle at 70% 22%, rgba(255, 255, 255, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.22), rgba(37, 99, 235, 0.18)),
    #101827;
  color: #ffffff;
}

.admin-studio-episode-media-slot.is-empty {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.98));
}

html[data-theme="light"] .admin-studio-episode-media-slot.is-empty {
  background:
    radial-gradient(circle at 50% 16%, rgba(148, 163, 184, 0.18), transparent 34%),
    linear-gradient(180deg, #eef3f9, #dfe7f1);
}

.admin-studio-episode-media-slot.is-compact {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
}

.admin-studio-episode-preview-strip .admin-studio-episode-media-slot.is-compact {
  border: 0;
  box-shadow: none;
}

.admin-studio-episode-media-slot.is-processing,
.admin-studio-episode-media-slot:has(.admin-studio-episode-scene-working-marker),
body:has(.admin-studio-episode-board .admin-studio-flow-command-dock.is-submitting.is-nano-test-command)
  .admin-studio-episode-five-shot-board
  .admin-studio-episode-media-slot {
  border-color: rgba(96, 165, 250, 0.48);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 18px 42px rgba(37, 99, 235, 0.22);
  animation: studio-card-processing-pulse 1.8s ease-in-out infinite;
}

.admin-studio-episode-media-slot.is-processing::before,
.admin-studio-episode-media-slot:has(.admin-studio-episode-scene-working-marker)::before,
body:has(.admin-studio-episode-board .admin-studio-flow-command-dock.is-submitting.is-nano-test-command)
  .admin-studio-episode-five-shot-board
  .admin-studio-episode-media-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, transparent 18%, rgba(147, 197, 253, 0.3) 42%, transparent 68%);
  transform: translateX(-120%);
  animation: admin-studio-working-sweep 1.35s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-episode-media-slot.is-failed {
  border-color: rgba(248, 113, 113, 0.55);
  box-shadow:
    0 0 0 1px rgba(248, 113, 113, 0.2),
    0 18px 42px rgba(127, 29, 29, 0.2);
}

.admin-studio-episode-media-slot.is-failed::after {
  content: "Retry";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(254, 202, 202, 0.42);
  border-radius: 999px;
  background: rgba(69, 10, 10, 0.72);
  color: #fff7ed;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  pointer-events: none;
  box-shadow: 0 12px 26px rgba(127, 29, 29, 0.24);
  backdrop-filter: blur(14px);
}

.admin-studio-episode-media-slot > img,
.admin-studio-episode-media-slot > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-episode-media-slot.has-video > video {
  background: #000000;
}

.admin-studio-episode-media-slot > div {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.admin-studio-episode-media-slot.is-empty > div {
  opacity: 0;
  transform: scale(0.92);
}

.admin-studio-episode-media-slot span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.5rem;
  font-weight: 950;
}

.admin-studio-episode-media-slot strong {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 900;
}

.admin-studio-episode-media-slot > b {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding: 8px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0.72));
  color: #ffffff;
  font-size: 0.74rem;
  line-height: 1.1;
}

.admin-studio-episode-media-open {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  outline: none;
}

.admin-studio-episode-media-open:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(96, 165, 250, 0.82);
}

.admin-studio-episode-media-kind {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #111827;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(12px);
}

.admin-studio-episode-media-kind svg {
  display: block;
}

.admin-studio-episode-media-processing {
  position: absolute;
  inset: auto auto 50% 50%;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: #ffffff;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, 50%);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.28);
}

.admin-studio-episode-media-slot.is-processing .admin-studio-episode-media-processing,
.admin-studio-episode-media-slot:has(.admin-studio-episode-scene-working-marker) .admin-studio-episode-media-processing,
body:has(.admin-studio-episode-board .admin-studio-flow-command-dock.is-submitting.is-nano-test-command)
  .admin-studio-episode-five-shot-board
  .admin-studio-episode-media-slot
  .admin-studio-episode-media-processing {
  display: inline-flex;
}

.admin-studio-episode-media-slot:has(.admin-studio-episode-scene-working-marker) .admin-studio-episode-media-processing {
  display: none;
}

.admin-studio-episode-media-processing > i {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: admin-studio-spin 850ms linear infinite;
}

.admin-studio-episode-media-processing:has(.admin-studio-job-status) {
  padding: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.admin-studio-episode-media-processing .admin-studio-job-status {
  width: max-content;
  max-width: min(92%, 180px);
  white-space: nowrap;
}

.admin-studio-episode-media-processing .admin-studio-job-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-episode-scene-working-marker {
  position: absolute;
  inset: auto auto 50% 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  transform: translate(-50%, 50%);
  pointer-events: none;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(14px);
}

.admin-studio-episode-scene-working-marker > i {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #ffffff;
  border-radius: 999px;
  animation: admin-studio-spin 850ms linear infinite;
}

.admin-studio-episode-scene-working-marker > strong {
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.admin-studio-episode-media-recovery {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  pointer-events: auto;
}

.admin-studio-episode-media-card-state.admin-studio-job-card-state {
  max-width: min(360px, 78vw);
  border-radius: 999px;
}

.admin-studio-episode-media-card-state .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action {
  min-height: 32px;
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact {
  gap: 8px;
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action {
  width: 42px;
  height: 42px;
  min-height: 42px;
  max-width: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action span {
  display: none;
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action svg {
  width: 16px;
  height: 16px;
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action.is-primary {
  background: rgba(37, 99, 235, 0.84);
}

.admin-studio-episode-media-recovery .admin-studio-job-recovery-actions.is-compact .admin-studio-job-recovery-action.is-dismiss {
  background: rgba(127, 29, 29, 0.74);
}

.admin-studio-episode-media-recovery form {
  margin: 0;
}

.admin-studio-episode-media-recovery button {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 950;
  cursor: pointer;
  backdrop-filter: blur(14px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.admin-studio-episode-media-recovery button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(15, 23, 42, 0.92);
  transform: translateY(-1px);
}

.admin-studio-episode-selected-still {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: grid;
  grid-template-columns: 24px minmax(0, auto);
  gap: 5px;
  align-items: center;
  overflow: hidden;
  max-width: calc(100% - 54px);
  min-height: 28px;
  padding: 2px 7px 2px 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.48);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  backdrop-filter: blur(14px);
}

.admin-studio-episode-selected-still img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.admin-studio-episode-selected-still span {
  overflow: hidden;
  color: inherit;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-studio-episode-selected-still:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.9);
  color: #111827;
  outline: none;
}

.admin-studio-episode-scene-board article > section,
.admin-studio-episode-generated-still-board article > section {
  display: grid;
  min-width: 0;
}

.admin-studio-episode-scene-board article > section {
  gap: 0;
  padding: 0;
}

.admin-studio-episode-generated-still-board article > section {
  gap: 10px;
  padding: 12px;
}

.admin-studio-episode-scene-board article > section > .admin-studio-episode-scene-card-title,
.admin-studio-episode-generated-still-board article > section > .admin-studio-episode-scene-card-title {
  display: grid;
  gap: 5px;
  color: inherit;
  text-decoration: none;
}

.admin-studio-episode-scene-board article > section > .admin-studio-episode-scene-card-title {
  min-height: 86px;
  padding: 12px;
}

.admin-studio-episode-generated-still-board article > section > .admin-studio-episode-scene-card-title {
  min-height: 0;
  padding: 0;
}

.admin-studio-episode-scene-board article > section > .admin-studio-episode-scene-card-title > span,
.admin-studio-episode-generated-still-board article > section > .admin-studio-episode-scene-card-title > span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-episode-scene-card-title.is-retry-target {
  cursor: default;
}

.admin-studio-episode-scene-card-title.is-retry-target > span::after {
  content: " · retry";
  color: #dc2626;
}

.admin-studio-episode-scene-board article strong,
.admin-studio-episode-generated-still-board article strong {
  min-width: 0;
  color: #111827;
  font-size: 0.92rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-scene-board article,
.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-generated-still-board article {
  border-color: var(--studio-admin-border);
  background: color-mix(in srgb, var(--studio-admin-surface) 94%, transparent);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-scene-board article:is(:hover, :focus-within),
.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-generated-still-board article:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--studio-admin-brand) 42%, var(--studio-admin-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--studio-admin-brand) 14%, transparent),
    var(--studio-admin-shadow);
}

.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-scene-board article > section > .admin-studio-episode-scene-card-title > span,
.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-generated-still-board article > section > .admin-studio-episode-scene-card-title > span {
  color: var(--studio-admin-muted);
}

.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-scene-board article strong,
.admin-studio-episode-board.is-mini-story-board .admin-studio-episode-generated-still-board article strong {
  color: var(--studio-admin-text);
}

html[data-theme="dark"] .admin-studio-episode-board.is-mini-story-board .admin-studio-episode-scene-board article,
html[data-theme="dark"] .admin-studio-episode-board.is-mini-story-board .admin-studio-episode-generated-still-board article {
  border-color: var(--studio-admin-border-soft);
  background: color-mix(in srgb, var(--studio-admin-card) 88%, #05070a 12%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.admin-studio-episode-media-detail {
  display: grid;
  gap: 20px;
  min-height: 0;
  padding-bottom: 220px;
}

body:has(.admin-studio-episode-board.is-scene-detail) {
  overflow: hidden;
  background: #f5f7fb !important;
}

body:has(.admin-studio-episode-board.is-scene-detail) .site-sidebar,
body:has(.admin-studio-episode-board.is-scene-detail) .site-overlay,
body:has(.admin-studio-episode-board.is-scene-detail) .mobile-nav-toggle {
  display: none !important;
}

body:has(.admin-studio-episode-board.is-scene-detail) :is(.site-main-shell, .site-main) {
  background: #f5f7fb !important;
}

body:has(.admin-studio-episode-board.is-scene-detail) .site-main-shell,
body:has(.admin-studio-episode-board.is-scene-detail) .site-main-shell.is-studio-sidebar-pinned {
  min-height: 100svh;
  margin-left: 0 !important;
}

body:has(.admin-studio-episode-board.is-scene-detail) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
}

.admin-studio-episode-board.is-scene-detail {
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  padding: 18px clamp(18px, 2.4vw, 34px) 0;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-flow-breadcrumb {
  display: none;
}

.admin-studio-episode-flow-detail-topbar {
  grid-template-columns: 44px minmax(0, 1fr) max-content;
  left: 0;
  right: 0;
  z-index: 70;
}

.admin-studio-episode-flow-detail-topbar .studio-minis-flow-icon-button {
  font-size: 1.45rem;
  font-weight: 860;
  line-height: 1;
}

.admin-studio-episode-flow-detail-topbar .studio-minis-flow-pill-button {
  white-space: nowrap;
}

.admin-studio-episode-flow-detail-topbar .studio-minis-flow-title {
  justify-content: flex-start;
  text-align: left;
}

.admin-studio-episode-flow-detail-topbar .studio-minis-flow-topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.admin-studio-episode-history-toggle {
  min-width: 88px;
}

.admin-studio-episode-history-toggle.is-active {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

html[data-theme="dark"] .admin-studio-episode-history-toggle.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-mode-nav {
  position: fixed;
  top: 16px;
  right: clamp(16px, 2.4vw, 34px);
  z-index: 64;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-detail {
  height: calc(100svh - 52px);
  gap: 0;
  padding: 0 0 clamp(214px, 24svh, 246px);
  align-content: center;
}

.admin-studio-episode-media-detail-topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--studio-admin-text);
  min-height: 28px;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-detail-topbar {
  position: fixed;
  top: 68px;
  right: clamp(16px, 2.4vw, 34px);
  z-index: 63;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-detail-topbar > a {
  display: none;
}

.admin-studio-episode-media-detail-topbar > a {
  color: var(--studio-admin-muted);
  font-size: 0.9rem;
  font-weight: 900;
  text-decoration: none;
}

.admin-studio-episode-media-detail-topbar > div {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-align: right;
}

.admin-studio-episode-media-detail-topbar span {
  color: var(--studio-admin-muted);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-studio-episode-media-detail-topbar span::after {
  content: "/";
  margin-left: 7px;
  color: var(--studio-admin-faint);
  font-weight: 850;
}

.admin-studio-episode-media-detail-topbar strong {
  color: var(--studio-admin-text);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-episode-scene-inspector {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-episode-scene-inspector-item {
  position: relative;
}

.admin-studio-episode-scene-inspector button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--studio-admin-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface) 78%, transparent);
  color: var(--studio-admin-muted);
  cursor: pointer;
  list-style: none;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
  transform 160ms ease;
}

.admin-studio-episode-scene-inspector button:hover,
.admin-studio-episode-scene-inspector button[aria-expanded="true"] {
  border-color: rgba(96, 165, 250, 0.5);
  background: color-mix(in srgb, var(--studio-admin-surface-strong) 86%, transparent);
  color: var(--studio-admin-text);
  transform: translateY(-1px);
}

.admin-studio-episode-scene-inspector button:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.8);
  outline-offset: 3px;
}

.admin-studio-episode-scene-inspector section {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  width: min(460px, calc(100vw - 36px));
  max-height: min(62vh, 560px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong) 94%, transparent);
  color: var(--studio-admin-text);
  text-align: left;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(24px);
}

.admin-studio-episode-scene-inspector-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.admin-studio-episode-scene-inspector section strong {
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.admin-studio-episode-scene-inspector section .admin-studio-episode-scene-inspector-panel-head button {
  display: inline-flex;
  width: auto;
  height: 30px;
  min-width: 0;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  box-shadow: none;
  color: var(--studio-admin-text);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-episode-scene-inspector section .admin-studio-episode-scene-inspector-panel-head button span {
  display: inline;
}

.admin-studio-episode-scene-inspector section b {
  color: var(--studio-admin-muted);
  font-size: 0.7rem;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-studio-episode-scene-inspector section p,
.admin-studio-episode-scene-inspector section pre,
.admin-studio-episode-scene-inspector section small {
  margin: 0;
  color: var(--studio-admin-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.55;
  text-align: left;
}

.admin-studio-episode-scene-inspector section pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-flow-breadcrumb span:last-child {
  color: var(--studio-admin-text);
  font-size: 0.82rem;
  line-height: 1.25;
  text-transform: none;
}

.admin-studio-episode-media-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(164px, 220px);
  gap: clamp(18px, 2.5vw, 34px);
  align-items: center;
  min-width: 0;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(90px, 118px);
  height: 100%;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: center;
  padding: 0 clamp(8px, 1.4vw, 20px);
}

body[data-episode-scene-history="closed"] .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-workspace {
  grid-template-columns: minmax(0, 1fr) 0;
  gap: 0;
}

body[data-episode-scene-history="closed"] .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history {
  width: 0;
  min-width: 0;
  margin-top: 94px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.admin-studio-episode-media-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-width: 0;
}

.admin-studio-episode-media-stage > .admin-studio-episode-media-slot {
  width: auto;
  height: clamp(340px, min(58vh, calc(100svh - 330px)), 650px);
  max-width: min(100%, 460px);
  border-radius: 28px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot {
  width: auto;
  height: clamp(300px, min(48svh, calc(100svh - 404px)), 500px);
  max-width: min(34vw, 360px, calc(100vw - 430px));
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    #e5e7eb;
  box-shadow: 0 28px 90px rgba(17, 24, 39, 0.12);
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot.has-video {
  background:
    radial-gradient(circle at 50% 18%, rgba(17, 24, 39, 0.06), transparent 34%),
    #eef2f7;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot > :is(img, video) {
  border-radius: inherit;
  box-shadow: 0 30px 70px rgba(17, 24, 39, 0.18);
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot > :is(b, small) {
  display: none;
}

.admin-studio-episode-media-history {
  display: grid;
  gap: 16px;
  align-self: center;
  max-height: clamp(340px, min(58vh, calc(100svh - 330px)), 650px);
  min-width: 0;
  padding: 2px 2px 2px 0;
  overflow: auto;
  scrollbar-width: none;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history {
  justify-items: center;
  align-self: start;
  max-height: calc(100svh - 190px);
  margin-top: 94px;
  padding: 8px 2px 8px 0;
  gap: 14px;
}

.admin-studio-episode-media-history::-webkit-scrollbar {
  display: none;
}

.admin-studio-episode-media-history-form {
  display: contents;
}

.admin-studio-episode-media-history > :is(a, button, div),
.admin-studio-episode-media-history-form > button {
  position: relative;
  overflow: hidden;
  display: grid;
  aspect-ratio: 9 / 16;
  width: min(100%, 154px);
  min-height: 0;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.14), transparent 32%),
    #101827;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  font: inherit;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    opacity 160ms ease;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history > :is(a, button, div),
.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button {
  width: 82px;
  min-height: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  opacity: 0.62;
  box-shadow: none;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history > :is(a, button, div).is-current,
.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button.is-current {
  width: 104px;
  border-radius: 16px;
  opacity: 1;
  box-shadow: none;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button.is-selecting {
  opacity: 1;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button.is-selecting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 255, 255, 0.34) 42%, transparent 70%);
  transform: translateX(-120%);
  animation: admin-studio-working-sweep 1.05s ease-in-out infinite;
  pointer-events: none;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button em {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: #ffffff;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.42);
  font-style: normal;
  animation: admin-studio-spin 850ms linear infinite;
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history > :is(a, button, div):is(:hover, :focus-visible),
.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button:is(:hover, :focus-visible) {
  opacity: 0.92;
  transform: none;
}

.admin-studio-episode-media-history > :is(a, button, div):is(:hover, :focus-visible),
.admin-studio-episode-media-history-form > button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.admin-studio-episode-media-history > :is(a, button, div).is-selected,
.admin-studio-episode-media-history > :is(a, button, div).is-current,
.admin-studio-episode-media-history-form > button.is-current {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 0 0 6px rgba(96, 165, 250, 0.48),
    0 22px 50px rgba(37, 99, 235, 0.26);
}

.admin-studio-episode-media-history :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-episode-media-history i {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.55rem;
  font-style: normal;
  font-weight: 950;
}

.admin-studio-episode-media-history span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.68);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(12px);
}

.admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history span {
  display: none;
}

body:has(.admin-studio-page) .admin-studio-episode-media-detail-topbar :is(a, span) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-media-detail-topbar strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-media-history > :is(a, button, div),
body:has(.admin-studio-page) .admin-studio-episode-media-history-form > button {
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.12), transparent 32%),
    var(--studio-admin-media-bg, #101827);
}

body:has(.admin-studio-page .admin-studio-episode-board.is-scene-detail) .admin-studio-episode-media-history > :is(a, button, div),
body:has(.admin-studio-page .admin-studio-episode-board.is-scene-detail) .admin-studio-episode-media-history-form > button {
  background: transparent;
  border: 0;
  box-shadow: none;
}

body:has(.admin-studio-page .admin-studio-episode-board.is-scene-detail) .admin-studio-episode-media-history > :is(a, button, div).is-current,
body:has(.admin-studio-page .admin-studio-episode-board.is-scene-detail) .admin-studio-episode-media-history > :is(a, button, div).is-selected,
body:has(.admin-studio-page .admin-studio-episode-board.is-scene-detail) .admin-studio-episode-media-history-form > button.is-current {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.admin-studio-episode-board.is-scene-detail) :is(.site-main-shell, .site-main),
html[data-theme="dark"] .admin-studio-episode-board.is-scene-detail {
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot {
  background: #050505;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot.has-video {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 32%),
    #050505;
}

html[data-theme="dark"] .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot > :is(img, video) {
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

@media (max-width: 900px) {
  .admin-studio-episode-media-workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .admin-studio-episode-board.is-scene-detail {
    overflow: auto;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-flow-breadcrumb {
    display: none;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-detail-topbar {
    position: static;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-detail {
    height: auto;
    min-height: calc(100svh - 76px);
    padding-bottom: 196px;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-workspace {
    grid-template-columns: 1fr;
    height: auto;
    padding: 0;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-stage > .admin-studio-episode-media-slot {
    width: min(68vw, 360px);
    max-width: 100%;
    height: clamp(230px, min(42svh, calc(100svh - 330px)), 380px);
  }

  .admin-studio-episode-media-history {
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 96px);
    grid-template-columns: none;
    margin-top: 0;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-studio-episode-media-history > :is(a, button, div),
  .admin-studio-episode-media-history-form > button {
    width: 100%;
    min-height: 104px;
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history > :is(a, button, div),
  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button,
  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history > :is(a, button, div).is-current,
  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history-form > button.is-current {
    width: 100%;
  }
}

@media (max-height: 780px) {
  .admin-studio-episode-media-stage > .admin-studio-episode-media-slot {
    height: max(300px, calc(100vh - 390px));
  }

  .admin-studio-episode-media-history {
    max-height: max(300px, calc(100vh - 390px));
  }

  .admin-studio-episode-board.is-scene-detail .admin-studio-episode-media-history {
    max-height: calc(100svh - 190px);
  }
}

.admin-studio-episode-scene-board article p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #4b5563;
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-studio-episode-scene-board article div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-episode-scene-board small {
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #1e3a8a;
  font-size: 0.7rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-studio-episode-trim {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.78);
}

.admin-studio-episode-trim > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-studio-episode-trim > div span,
.admin-studio-episode-trim small {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-studio-episode-trim > div strong {
  color: #111827;
  font-size: 0.8rem;
}

.admin-studio-episode-trim label {
  position: relative;
  display: grid;
  gap: 6px;
}

.admin-studio-episode-trim input[type="range"] {
  width: 100%;
  accent-color: #2563eb;
}

.admin-studio-episode-trim-track {
  position: relative;
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.2);
}

.admin-studio-episode-trim-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #facc15);
  box-shadow: 0 0 18px rgba(96, 165, 250, 0.34);
}

.admin-studio-episode-trim button {
  min-height: 34px;
  justify-self: end;
  padding: 7px 12px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-studio-episode-trim button:disabled {
  cursor: wait;
  opacity: 0.64;
}

.admin-studio-episode-production-scenes article {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
}

.admin-studio-episode-production-scenes article > div {
  display: grid;
  aspect-ratio: 16 / 8.4;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.22), rgba(37, 99, 235, 0.15)),
    #111827;
  color: #ffffff;
}

.admin-studio-episode-production-scenes article > div span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  font-weight: 950;
}

.admin-studio-episode-production-scenes section {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.admin-studio-episode-production-scenes strong,
.admin-studio-episode-production-scenes small,
.admin-studio-episode-production-scenes p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.admin-studio-episode-production-scenes strong {
  color: #111827;
  font-size: 0.96rem;
  line-height: 1.15;
}

.admin-studio-episode-production-scenes small,
.admin-studio-episode-production-scenes p {
  color: #4b5563;
  font-size: 0.76rem;
  line-height: 1.35;
}

.admin-studio-episode-production-scenes p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.admin-studio-episode-sample-card {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.admin-studio-episode-sample-media {
  overflow: hidden;
  display: grid;
  aspect-ratio: 9 / 12;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.24), rgba(37, 99, 235, 0.16)),
    #111827;
  color: #ffffff;
}

.admin-studio-episode-sample-media > div {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.admin-studio-episode-sample-media span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-weight: 950;
}

.admin-studio-episode-sample-media strong {
  color: #ffffff;
  font-size: 1.4rem;
}

.admin-studio-episode-sample-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-episode-sample-card > section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.admin-studio-episode-sample-title {
  display: grid;
  gap: 6px;
}

.admin-studio-episode-sample-title strong {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.admin-studio-episode-sample-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-episode-sample-chips span {
  display: inline-flex;
  max-width: 100%;
  gap: 6px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: #f7f8fb;
  color: #111827;
  font-size: 0.72rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.admin-studio-episode-sample-chips img {
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.admin-studio-mini-story-reference-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.admin-studio-mini-story-reference-strip.is-detail {
  justify-content: center;
  max-width: min(100%, 620px);
  gap: 8px;
}

.admin-studio-mini-story-reference-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
  padding: 5px 8px 5px 5px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong) 84%, transparent);
  color: var(--studio-admin-text);
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.admin-studio-mini-story-reference-chip.is-set {
  background: color-mix(in srgb, #e0f2fe 42%, var(--studio-admin-surface-strong));
}

.admin-studio-mini-story-reference-chip.is-prop {
  background: color-mix(in srgb, #fef3c7 42%, var(--studio-admin-surface-strong));
}

.admin-studio-mini-story-reference-chip img,
.admin-studio-mini-story-reference-chip i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  object-fit: cover;
}

.admin-studio-mini-story-reference-chip i {
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.08);
  color: var(--studio-admin-muted);
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 950;
}

.admin-studio-mini-story-reference-chip b {
  color: var(--studio-admin-muted);
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.admin-studio-mini-story-reference-chip em {
  min-width: 0;
  color: var(--studio-admin-text);
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-mini-story-reference-strip.is-compact .admin-studio-mini-story-reference-chip em {
  max-width: 118px;
}

.admin-studio-mini-story-shot-timing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.admin-studio-mini-story-shot-timing > :is(span, strong, em) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--studio-admin-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-admin-surface-strong) 82%, transparent);
  color: var(--studio-admin-text);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.admin-studio-mini-story-shot-timing > span {
  border-color: color-mix(in srgb, #60a5fa 36%, var(--studio-admin-border));
  background: color-mix(in srgb, #dbeafe 48%, var(--studio-admin-surface-strong));
  color: #1d4ed8;
}

.admin-studio-mini-story-shot-timing > strong {
  color: var(--studio-admin-muted);
  text-transform: uppercase;
}

.admin-studio-mini-story-shot-timing > em {
  color: #64748b;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-studio-mini-story-shot-timing.is-detail {
  justify-content: center;
}

.admin-studio-mini-story-shot-timing.is-detail > :is(span, strong, em) {
  min-height: 30px;
  padding: 7px 10px;
  font-size: 0.76rem;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.admin-studio-mini-story-reference-strip.is-detail .admin-studio-mini-story-reference-chip {
  padding: 7px 10px 7px 7px;
  font-size: 0.78rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.admin-studio-mini-story-reference-strip.is-detail .admin-studio-mini-story-reference-chip img,
.admin-studio-mini-story-reference-strip.is-detail .admin-studio-mini-story-reference-chip i {
  width: 30px;
  height: 30px;
}

.admin-studio-mini-story-reference-chip small {
  color: #b45309;
  font-size: 0.62rem;
  font-weight: 950;
  text-transform: uppercase;
}

html[data-theme="dark"] .admin-studio-mini-story-reference-chip {
  border-color: var(--studio-admin-border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--studio-admin-text);
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-mini-story-reference-chip.is-set {
  background: color-mix(in srgb, rgba(56, 189, 248, 0.22) 52%, rgba(255, 255, 255, 0.06));
}

html[data-theme="dark"] .admin-studio-mini-story-reference-chip.is-prop {
  background: color-mix(in srgb, rgba(251, 191, 36, 0.2) 52%, rgba(255, 255, 255, 0.06));
}

html[data-theme="dark"] .admin-studio-mini-story-reference-chip i {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-mini-story-shot-timing > :is(span, strong, em) {
  border-color: var(--studio-admin-border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--studio-admin-text);
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-mini-story-shot-timing > span {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(59, 130, 246, 0.16);
  color: #bfdbfe;
}

html[data-theme="dark"] .admin-studio-mini-story-shot-timing > strong,
html[data-theme="dark"] .admin-studio-mini-story-shot-timing > em {
  color: var(--studio-admin-muted);
}

.admin-studio-episode-advanced {
  color: #4b5563;
}

.admin-studio-episode-advanced a {
  color: #1d4ed8;
  font-weight: 900;
  text-decoration: none;
}

.admin-studio-episode-advanced-drawer {
  display: grid;
  gap: 14px;
}

.admin-studio-episode-advanced-drawer > summary {
  width: max-content;
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

.admin-studio-episode-advanced-drawer > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-episode-advanced-drawer[open] > summary {
  background: #111827;
  color: #ffffff;
}

/* Studio color system: readable light/dark modes for the Flow-style workspace. */
body:has(.admin-studio-page) {
  color-scheme: light;
  --foreground: #111827;
  --muted-foreground: #4b5563;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --surface: #f5f7fb;
  --surface-soft: #eef2f7;
  --surface-muted: #e5e7eb;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-care: #059669;
  --border: rgba(17, 24, 39, 0.12);
  --border-soft: rgba(17, 24, 39, 0.08);
  --border-strong: rgba(17, 24, 39, 0.18);
  --studio-room-bg: #f5f7fb;
  --studio-room-glow-blue: rgba(37, 99, 235, 0.12);
  --studio-room-glow-gold: rgba(255, 200, 0, 0.16);
  --studio-admin-text: #111827;
  --studio-admin-muted: #4b5563;
  --studio-admin-faint: #6b7280;
  --studio-admin-inverse-text: #ffffff;
  --studio-admin-surface: #ffffff;
  --studio-admin-surface-strong: #ffffff;
  --studio-admin-surface-soft: #f8fafc;
  --studio-admin-card: #ffffff;
  --studio-admin-card-soft: #f3f4f6;
  --studio-admin-control: #ffffff;
  --studio-admin-placeholder: #9ca3af;
  --studio-admin-border: rgba(17, 24, 39, 0.12);
  --studio-admin-border-soft: rgba(17, 24, 39, 0.08);
  --studio-admin-brand: #ffc800;
  --studio-admin-brand-deep: #d99a00;
  --studio-admin-brand-soft: rgba(255, 200, 0, 0.18);
  --studio-admin-brand-border: rgba(217, 154, 0, 0.42);
  --studio-admin-blue: #2563eb;
  --studio-admin-blue-strong: #1d4ed8;
  --studio-admin-blue-soft: rgba(37, 99, 235, 0.09);
  --studio-admin-blue-border: rgba(37, 99, 235, 0.28);
  --studio-admin-care: #059669;
  --studio-admin-care-soft: rgba(5, 150, 105, 0.1);
  --studio-admin-care-border: rgba(5, 150, 105, 0.28);
  --studio-admin-danger: #dc2626;
  --studio-admin-danger-soft: rgba(220, 38, 38, 0.09);
  --studio-admin-danger-border: rgba(220, 38, 38, 0.28);
  --studio-admin-warning: #d97706;
  --studio-admin-warning-soft: rgba(217, 119, 6, 0.1);
  --studio-admin-warning-border: rgba(217, 119, 6, 0.3);
  --studio-admin-secondary-bg: #111827;
  --studio-admin-secondary-text: #ffffff;
  --studio-admin-secondary-hover: #1d4ed8;
  --studio-admin-chip-bg: #eef2ff;
  --studio-admin-chip-text: #1f2937;
  --studio-admin-chip-border: rgba(17, 24, 39, 0.1);
  --studio-admin-hover-bg: #eff6ff;
  --studio-admin-active-bg: #eff6ff;
  --studio-admin-active-text: #1d4ed8;
  --studio-admin-media-bg: #111827;
  --studio-admin-media-text: #ffffff;
  --studio-admin-media-muted: rgba(255, 255, 255, 0.62);
  --studio-admin-hero-bg: #05070d;
  --studio-admin-hero-text: #ffffff;
  --studio-admin-hero-muted: rgba(255, 255, 255, 0.66);
  --studio-admin-success-bg: #ecfdf5;
  --studio-admin-success-text: #065f46;
  --studio-admin-warning-bg: #fffbeb;
  --studio-admin-warning-text: #92400e;
  --studio-admin-danger-bg: #fef2f2;
  --studio-admin-danger-text: #991b1b;
  --studio-admin-blue-bg: #eff6ff;
  --studio-admin-blue-text: #1d4ed8;
  --studio-admin-sidebar-bg: rgba(255, 255, 255, 0.94);
  --studio-admin-sidebar-text: #111827;
  --studio-admin-sidebar-muted: #6b7280;
  --studio-admin-sidebar-subtle: #f7f8fb;
  --studio-admin-sidebar-border: rgba(17, 24, 39, 0.1);
  --studio-admin-sidebar-active-bg: #111827;
  --studio-admin-sidebar-active-text: #ffffff;
  --studio-admin-sidebar-active-muted: rgba(255, 255, 255, 0.64);
  --studio-admin-sidebar-active-hover-bg: #1f2937;
  --studio-admin-tooltip-bg: rgba(17, 24, 39, 0.96);
  --studio-admin-tooltip-text: #ffffff;
  --studio-admin-tooltip-muted: rgba(255, 255, 255, 0.64);
  --studio-admin-floating-bg: rgba(78, 78, 84, 0.58);
  --studio-admin-floating-hover-bg: rgba(98, 98, 105, 0.66);
  --studio-admin-floating-border: rgba(255, 255, 255, 0.2);
  --studio-admin-shadow: 0 24px 70px rgba(17, 24, 39, 0.16);
  --studio-admin-shadow-soft: 0 14px 36px rgba(17, 24, 39, 0.1);
  --studio-admin-sidebar-shadow: 16px 0 44px rgba(17, 24, 39, 0.1);
  background:
    radial-gradient(circle at 12% 0%, var(--studio-room-glow-blue), transparent 24%),
    radial-gradient(circle at 88% 4%, var(--studio-room-glow-gold), transparent 20%),
    var(--studio-room-bg);
}

html[data-theme="dark"] body:has(.admin-studio-page) {
  color-scheme: dark;
  --foreground: #f8fafc;
  --muted-foreground: #cbd5e1;
  --surface: #05070d;
  --surface-soft: #0f172a;
  --surface-muted: #1f2937;
  --border: rgba(255, 255, 255, 0.16);
  --border-soft: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.22);
  --studio-room-bg: #05070d;
  --studio-room-glow-blue: rgba(37, 99, 235, 0.24);
  --studio-room-glow-gold: rgba(255, 200, 0, 0.12);
  --studio-admin-text: #f8fafc;
  --studio-admin-muted: #cbd5e1;
  --studio-admin-faint: #94a3b8;
  --studio-admin-inverse-text: #111827;
  --studio-admin-surface: #101827;
  --studio-admin-surface-strong: #172033;
  --studio-admin-surface-soft: #0b1220;
  --studio-admin-card: #101827;
  --studio-admin-card-soft: #0b1220;
  --studio-admin-control: #0b1220;
  --studio-admin-placeholder: #64748b;
  --studio-admin-border: rgba(255, 255, 255, 0.16);
  --studio-admin-border-soft: rgba(255, 255, 255, 0.1);
  --studio-admin-brand-deep: #facc15;
  --studio-admin-brand-soft: rgba(255, 200, 0, 0.13);
  --studio-admin-brand-border: rgba(250, 204, 21, 0.34);
  --studio-admin-blue: #60a5fa;
  --studio-admin-blue-strong: #93c5fd;
  --studio-admin-blue-soft: rgba(96, 165, 250, 0.14);
  --studio-admin-blue-border: rgba(96, 165, 250, 0.34);
  --studio-admin-care: #34d399;
  --studio-admin-care-soft: rgba(52, 211, 153, 0.13);
  --studio-admin-care-border: rgba(52, 211, 153, 0.32);
  --studio-admin-danger: #f87171;
  --studio-admin-danger-soft: rgba(248, 113, 113, 0.13);
  --studio-admin-danger-border: rgba(248, 113, 113, 0.34);
  --studio-admin-warning: #f59e0b;
  --studio-admin-warning-soft: rgba(245, 158, 11, 0.14);
  --studio-admin-warning-border: rgba(245, 158, 11, 0.34);
  --studio-admin-secondary-bg: #f8fafc;
  --studio-admin-secondary-text: #111827;
  --studio-admin-secondary-hover: #e0f2fe;
  --studio-admin-chip-bg: rgba(255, 255, 255, 0.08);
  --studio-admin-chip-text: #e5e7eb;
  --studio-admin-chip-border: rgba(255, 255, 255, 0.12);
  --studio-admin-hover-bg: rgba(96, 165, 250, 0.14);
  --studio-admin-active-bg: rgba(96, 165, 250, 0.16);
  --studio-admin-active-text: #bfdbfe;
  --studio-admin-media-bg: #020617;
  --studio-admin-media-text: #ffffff;
  --studio-admin-media-muted: rgba(255, 255, 255, 0.6);
  --studio-admin-hero-bg: #020617;
  --studio-admin-hero-text: #ffffff;
  --studio-admin-hero-muted: rgba(255, 255, 255, 0.64);
  --studio-admin-success-bg: rgba(6, 95, 70, 0.22);
  --studio-admin-success-text: #bbf7d0;
  --studio-admin-warning-bg: rgba(146, 64, 14, 0.24);
  --studio-admin-warning-text: #fde68a;
  --studio-admin-danger-bg: rgba(153, 27, 27, 0.24);
  --studio-admin-danger-text: #fecaca;
  --studio-admin-blue-bg: rgba(30, 64, 175, 0.24);
  --studio-admin-blue-text: #bfdbfe;
  --studio-admin-sidebar-bg: rgba(11, 18, 32, 0.96);
  --studio-admin-sidebar-text: #f8fafc;
  --studio-admin-sidebar-muted: #94a3b8;
  --studio-admin-sidebar-subtle: rgba(255, 255, 255, 0.06);
  --studio-admin-sidebar-border: rgba(255, 255, 255, 0.1);
  --studio-admin-sidebar-active-bg: #f8fafc;
  --studio-admin-sidebar-active-text: #111827;
  --studio-admin-sidebar-active-muted: rgba(17, 24, 39, 0.64);
  --studio-admin-sidebar-active-hover-bg: #e5e7eb;
  --studio-admin-tooltip-bg: rgba(248, 250, 252, 0.98);
  --studio-admin-tooltip-text: #111827;
  --studio-admin-tooltip-muted: rgba(17, 24, 39, 0.64);
  --studio-admin-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --studio-admin-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.24);
  --studio-admin-sidebar-shadow: 16px 0 44px rgba(0, 0, 0, 0.24);
}

body:has(.admin-studio-page) .site-main,
body:has(.admin-studio-page) .admin-studio-page {
  --sidebar-rail-width: 74px;
  color: var(--foreground);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console {
  border-right-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-bg);
  box-shadow: var(--studio-admin-sidebar-shadow);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary),
body:has(.admin-studio-page) .sidebar-studio-brand,
body:has(.admin-studio-page) .sidebar-studio-mission {
  color: var(--studio-admin-sidebar-text);
}

body:has(.admin-studio-page) .sidebar-studio-mission,
body:has(.admin-studio-page) .sidebar-studio-universe {
  border-color: var(--studio-admin-sidebar-border);
}

body:has(.admin-studio-page) .sidebar-studio-mission span {
  color: var(--studio-admin-blue);
}

body:has(.admin-studio-page) .sidebar-studio-universe-current {
  border-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-active-bg);
  color: var(--studio-admin-sidebar-active-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) .sidebar-studio-universe-avatar {
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--studio-admin-brand);
  color: #111827;
}

body:has(.admin-studio-page) .sidebar-studio-universe-copy small {
  color: var(--studio-admin-sidebar-active-muted);
}

body:has(.admin-studio-page) .sidebar-studio-advanced-group summary {
  color: var(--studio-admin-sidebar-muted);
}

body:has(.admin-studio-page) .sidebar-studio-universe-switcher .sidebar-studio-universe-current:hover {
  background: var(--studio-admin-sidebar-active-hover-bg);
}

body:has(.admin-studio-page) .sidebar-studio-universe-switcher a,
body:has(.admin-studio-page) .sidebar-studio-universe-switcher button,
body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-secondary {
  border-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-subtle);
  color: var(--studio-admin-sidebar-text);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-active-bg);
  color: var(--studio-admin-sidebar-active-text);
  box-shadow: none;
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: var(--studio-admin-brand);
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console {
  border-right-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-bg);
  box-shadow: var(--studio-admin-sidebar-shadow);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-current,
html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
  border-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-active-bg);
  color: var(--studio-admin-sidebar-active-text);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-avatar {
  background: var(--studio-admin-brand);
  color: #111827;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-switcher a,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-switcher button,
html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-secondary {
  border-color: var(--studio-admin-sidebar-border);
  background: var(--studio-admin-sidebar-subtle);
  color: var(--studio-admin-sidebar-text);
}

body:has(.admin-studio-page) .admin-studio-page .button-primary {
  border-color: var(--studio-admin-brand-border);
  background: var(--studio-admin-brand);
  color: #111827;
}

body:has(.admin-studio-page) .admin-studio-page .button-secondary {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-secondary-bg);
  color: var(--studio-admin-secondary-text);
}

body:has(.admin-studio-page) .admin-studio-page .button-ghost {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-control);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-page :is(.button-secondary, .button-ghost):is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-hover-bg);
  color: var(--studio-admin-active-text);
}

@media (min-width: 1024px) {
  body:has(.admin-studio-page) .site-sidebar.is-studio-console {
    width: var(--sidebar-rail-width);
    padding: 20px 12px 18px;
    box-shadow: var(--studio-admin-shadow-soft);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-expanded {
    width: var(--sidebar-width);
    padding-inline: 18px;
    box-shadow: var(--studio-admin-sidebar-shadow);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
    width: var(--sidebar-rail-width);
    padding: 20px 12px 18px;
    box-shadow: var(--studio-admin-shadow-soft);
    overflow: visible;
  }

  body:has(.admin-studio-page) .site-main-shell {
    margin-left: var(--sidebar-rail-width);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-desktop-pin-toggle {
    display: flex;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-expanded {
    overflow-y: auto;
    overflow-x: hidden;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-desktop-pin-toggle {
    justify-content: center;
    padding-inline: 0;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-studio-universe {
    justify-items: center;
    padding-inline: 0;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-studio-universe-current {
    grid-template-columns: auto;
    justify-items: center;
    padding-inline: 6px;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) :is(
    .sidebar-desktop-pin-copy,
    .sidebar-studio-universe-copy,
    .sidebar-studio-universe-caret,
    .sidebar-studio-universe-switcher > div,
    .sidebar-link-label,
    .sidebar-language-row,
    .sidebar-theme-row .sidebar-language-label,
    .sidebar-user .meta-label,
    .sidebar-user-meta,
    .sidebar-button span
  ) {
    display: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) :is(
    .sidebar-nav,
    .sidebar-support-actions
  ) {
    justify-items: center;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) :is(
    .sidebar-link,
    .sidebar-link-secondary
  ) {
    position: relative;
    justify-content: center;
    padding-inline: 0;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) :is(
    .sidebar-studio-link,
    .sidebar-link-secondary
  ):is(:hover, :focus-visible) .sidebar-link-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    z-index: 120;
    display: grid;
    width: max-content;
    max-width: 220px;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--studio-admin-border-soft);
    border-radius: 12px;
    background: var(--studio-admin-tooltip-bg);
    color: var(--studio-admin-tooltip-text);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    transform: translateY(-50%);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-link-label :is(span, small) {
    color: inherit;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-link-label small {
    color: var(--studio-admin-tooltip-muted);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-user {
    justify-items: center;
    padding: 10px 8px;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-user-main {
    grid-template-columns: auto;
    justify-items: center;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-user-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-theme-row {
    justify-content: center;
    padding-inline: 0;
  }
}

body:has(.admin-studio-page) .sidebar-studio-rail-head {
  display: grid;
  justify-items: center;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

body:has(.admin-studio-page) .sidebar-studio-rail-home {
  display: grid;
  width: 42px;
  min-height: 48px;
  place-items: center;
  gap: 2px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(30, 41, 59, 0.9);
  text-decoration: none;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-rail-home:is(:hover, :focus-visible),
body:has(.admin-studio-page) .sidebar-studio-universe-rail-menu[open] .sidebar-studio-rail-home {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  outline: none;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-menu {
  position: relative;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-menu summary {
  list-style: none;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-menu summary::-webkit-details-marker {
  display: none;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover {
  position: absolute;
  top: 0;
  left: calc(100% + 13px);
  z-index: 160;
  display: grid;
  width: 246px;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  box-shadow: 0 24px 74px rgba(15, 23, 42, 0.16);
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover :is(a, button) {
  display: grid;
  gap: 2px;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover :is(a, button):is(:hover, :focus-visible),
body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover .is-active {
  background: #eef2f7;
  color: #0f172a;
  outline: none;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover button:disabled {
  cursor: default;
  opacity: 0.58;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover strong {
  font-size: 0.9rem;
  font-weight: 820;
}

body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover small {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 660;
}

body:has(.admin-studio-page) .sidebar-studio-rail-home svg {
  width: 20px;
  height: 20px;
}

body:has(.admin-studio-page) .sidebar-studio-rail-home span {
  font-size: 0.61rem;
  font-weight: 860;
  letter-spacing: 0.04em;
}

body:has(.admin-studio-page) .sidebar-studio-rail-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(135deg, #f4c56a, #e87951 54%, #334155);
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 860;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}

body:has(.admin-studio-page) .sidebar-studio-rail-avatar img,
body:has(.admin-studio-page) .sidebar-studio-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.admin-studio-page) .sidebar-studio-account-menu {
  position: relative;
}

body:has(.admin-studio-page) .sidebar-studio-account-menu summary {
  display: grid;
  padding: 0;
  list-style: none;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-menu summary::-webkit-details-marker {
  display: none;
}

body:has(.admin-studio-page) .sidebar-studio-account-menu summary:is(:hover, :focus-visible) .sidebar-studio-rail-avatar {
  box-shadow: 0 0 0 5px rgba(15, 117, 188, 0.18);
}

body:has(.admin-studio-page) .sidebar-studio-account-popover {
  position: absolute;
  bottom: -2px;
  left: calc(100% + 13px);
  z-index: 160;
  display: grid;
  width: min(328px, calc(100vw - 100px));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  color: #0f172a;
  box-shadow: 0 24px 74px rgba(15, 23, 42, 0.18);
}

body:has(.admin-studio-page) .sidebar-studio-account-profile {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 18px 17px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.82), transparent 30%),
    linear-gradient(135deg, #f4c56a, #e87951 54%, #334155);
  color: #ffffff;
  font-size: 1.28rem;
  font-weight: 840;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
}

body:has(.admin-studio-page) .sidebar-studio-account-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body:has(.admin-studio-page) .sidebar-studio-account-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 840;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-copy small {
  overflow: hidden;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-section {
  display: grid;
  padding: 10px 0;
}

body:has(.admin-studio-page) .sidebar-studio-account-section + .sidebar-studio-account-section {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button) {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 720;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button):is(:hover, :focus-visible) {
  background: #eef2f7;
  color: #0f172a;
  outline: none;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button).is-active {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button):disabled {
  cursor: default;
  opacity: 1;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover svg {
  width: 22px;
  height: 22px;
  color: #64748b;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button) span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button) small {
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 660;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-theme {
  grid-template-columns: 28px minmax(0, 1fr) max-content 16px;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-theme small {
  justify-self: end;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-theme::after {
  content: "›";
  color: #64748b;
  font-size: 1.55rem;
  line-height: 1;
  justify-self: end;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-panel {
  display: grid;
  gap: 10px;
  padding: 8px 14px 14px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #0f172a;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-panel-head strong {
  font-size: 0.78rem;
  font-weight: 880;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-panel-head button {
  display: inline-flex;
  width: auto;
  min-height: 28px;
  gap: 0;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.045);
  color: #475569;
  font-size: 0.72rem;
  font-weight: 780;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-height: 218px;
  overflow: auto;
  padding-right: 2px;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button {
  display: grid;
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 13px;
  background: #f8fafc;
  color: #ffffff;
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: #f8fafc;
  outline: none;
  transform: translateY(-1px);
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button.is-selected {
  border-color: rgba(245, 158, 11, 0.72);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button:disabled {
  cursor: default;
  opacity: 1;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-grid button span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 12px 5px 5px;
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.76), transparent);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 820;
  line-height: 1;
  text-align: left;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-grid.is-loading span {
  display: block;
  aspect-ratio: 1;
  border-radius: 13px;
  background: rgba(15, 23, 42, 0.08);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-message {
  margin: 0;
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 680;
  line-height: 1.35;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-dialog {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 18px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 820px);
  max-height: min(760px, calc(100vh - 36px));
  gap: 14px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 20px;
  background: #f7f3ea;
  color: #111827;
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.28);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head span {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head strong {
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 920;
  line-height: 1.12;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head small {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.35;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > button {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f172a;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > button:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head svg {
  width: 17px;
  height: 17px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current strong {
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 850;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current span {
  overflow: hidden;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-current button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.055);
  color: #334155;
  font-size: 0.76rem;
  font-weight: 820;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  max-height: min(460px, calc(100vh - 274px));
  overflow: auto;
  padding: 2px 2px 4px;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(241, 245, 249, 0.88)),
    #f8fafc;
  color: #ffffff;
  cursor: pointer;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.24);
  outline: none;
  transform: translateY(-1px);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button.is-selected {
  border-color: rgba(245, 158, 11, 0.76);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button:disabled {
  cursor: default;
  opacity: 1;
  transform: none;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 2px;
  min-height: 42px;
  justify-content: flex-start;
  padding: 16px 8px 7px;
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.7), rgba(2, 6, 23, 0));
  text-align: left;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button strong,
body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button small {
  overflow: hidden;
  color: #ffffff;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button strong {
  font-size: 0.66rem;
  font-weight: 880;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button small {
  opacity: 0.78;
  font-size: 0.58rem;
  font-weight: 720;
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid.is-loading span {
  display: block;
  aspect-ratio: 1;
  border-radius: 15px;
  background: rgba(15, 23, 42, 0.08);
}

body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-message {
  padding: 12px 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  color: #475569;
  font-size: 0.82rem;
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-footer {
  border-top: 0;
}

@media (min-width: 1024px) {
  body:has(.admin-studio-page) .site-sidebar.is-studio-console,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-expanded,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-pinned,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
    width: 74px;
    padding: 18px 7px 16px;
    border-right: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 58%, rgba(241, 245, 249, 0.98) 100%);
    box-shadow: none;
    overflow: visible;
  }

  body:has(.admin-studio-page) .site-main-shell,
  body:has(.admin-studio-page) .site-main-shell.is-studio-sidebar-pinned {
    margin-left: 74px;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-desktop-pin-toggle,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-universe,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-advanced-group,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-brand-row,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-theme-row {
    display: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-nav,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-nav-secondary {
    display: grid;
    justify-items: center;
    gap: 5px;
  }

body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-nav {
  margin-top: 14px;
}

  body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
    display: grid;
    width: 58px;
    min-height: 50px;
    justify-items: center;
    align-content: center;
    gap: 3px;
    padding: 0;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: rgba(51, 65, 85, 0.9);
    box-shadow: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary):is(:hover, :focus-visible) {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    outline: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
    background: transparent;
    color: #0f172a;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-icon,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-secondary .sidebar-link-icon {
    width: 29px;
    height: 28px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: currentColor;
    box-shadow: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-icon svg {
    width: 19px;
    height: 19px;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-label,
  body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) .sidebar-link-label {
    position: static;
    display: block;
    width: 100%;
    max-width: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: currentColor;
    box-shadow: none;
    font-size: clamp(0.52rem, 0.82vw, 0.62rem);
    font-weight: 740;
    line-height: 1;
    text-align: center;
    pointer-events: auto;
    transform: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link-label small {
    display: none;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-footer {
    display: grid;
    margin-top: auto;
    justify-items: center;
    gap: 12px;
  }
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-rail-head {
  border-bottom-color: rgba(148, 163, 184, 0.16);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-rail-home {
  color: rgba(203, 213, 225, 0.94);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-rail-home:is(:hover, :focus-visible),
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-menu[open] .sidebar-studio-rail-home {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover {
  border-color: rgba(255, 255, 255, 0.09);
  background: #1b1e24;
  color: #ffffff;
  box-shadow: 0 24px 74px rgba(0, 0, 0, 0.48);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover :is(a, button),
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button) {
  color: #f4f7fb;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover :is(a, button):is(:hover, :focus-visible),
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover .is-active,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button):is(:hover, :focus-visible) {
  background: #2d323b;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover small,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-copy small,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover svg,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover :is(a, button) small,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-theme::after {
  color: #aab4c5;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-profile,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-section + .sidebar-studio-account-section {
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-panel-head {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-panel-head button {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button {
  border-color: rgba(255, 255, 255, 0.08);
  background: #111827;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-popover .sidebar-studio-account-avatar-grid button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: #111827;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-grid.is-loading span {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-message {
  color: #aab4c5;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-dialog-backdrop {
  background: rgba(0, 0, 0, 0.62);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal {
  border-color: rgba(255, 255, 255, 0.09);
  background: #15161c;
  color: #f8fafc;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head span,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head small,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-current span {
  color: #aab4c5;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head strong,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-current strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > button,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-current,
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-message {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > button {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal-head > button:is(:hover, :focus-visible),
html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-current button {
  background: rgba(255, 255, 255, 0.09);
  color: #f8fafc;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.94)),
    #111827;
}

html[data-theme="dark"] body:has(.admin-studio-page) .sidebar-studio-account-avatar-modal .sidebar-studio-account-avatar-grid button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
}

@media (min-width: 1024px) {
  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console,
  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-expanded,
  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-pinned,
  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
    border-right-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #15161c 0%, #111217 58%, #0b0c10 100%);
  }

  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
    color: rgba(203, 213, 225, 0.88);
  }

  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary):is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
    color: #ffffff;
  }

  html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }
}

body:has(.admin-studio-page) :is(
  .admin-studio-hero,
  .admin-studio-page-header,
  .admin-studio-builder-header,
  .admin-studio-generation-card,
  .admin-studio-guest-console,
  .admin-studio-mode-nav,
  .admin-studio-production-rail,
  .admin-studio-source-builder,
  .admin-studio-character-upload,
  .admin-studio-character-url-form,
  .admin-studio-character-create-form,
  .admin-studio-character-create-preview,
  .admin-studio-character-initial-sheet,
  .admin-studio-character-season-panel,
  .admin-studio-character-reference-panel,
  .studio-minis-command-center,
  .studio-minis-builder,
  .studio-minis-daily-queue,
  .studio-minis-output,
  .studio-minis-panel,
  .admin-storyboard-hero,
  .admin-story-bible-hero,
  .admin-story-bible-panel,
  .admin-story-bible-flow a,
  .admin-storyboard-level-map a,
  .admin-storyboard-level-map > span,
  .admin-storyboard-review-map > div,
  .admin-storyboard-panel,
  .admin-storyboard-packet-link,
  .admin-storyboard-binding-card,
  .admin-storyboard-hook-card,
  .admin-storyboard-export-card,
  .admin-storyboard-ingredient-strip,
  .admin-storyboard-workspace-tabs,
  .admin-storyboard-project-map,
  .admin-storyboard-project-map-grid a,
  .admin-storyboard-copilot-main,
  .admin-storyboard-season-projects,
  .admin-storyboard-flow-board,
  .admin-storyboard-command-bar,
  .admin-studio-home-hero,
  .admin-studio-home-board,
  .admin-studio-home-ingredients,
  .admin-studio-home-activity,
  .empty-state
) {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-production-bridge,
  .admin-storyboard-run-status > div,
  .admin-storyboard-next-action,
  .admin-storyboard-operator-guide,
  .admin-storyboard-operator-steps > div,
  .admin-storyboard-operator-blockers,
  .admin-storyboard-review-guide,
  .admin-storyboard-sample-approval,
  .admin-storyboard-sample-approved,
  .admin-storyboard-sample-card,
  .admin-storyboard-sample-runway,
  .admin-storyboard-sample-lanes > div,
  .admin-storyboard-sample-runner-lock,
  .admin-storyboard-sample-output,
  .admin-storyboard-master-card,
  .admin-storyboard-master-grid section,
  .admin-storyboard-master-details,
  .admin-storyboard-intake-callout,
  .admin-storyboard-form-note,
  .admin-storyboard-meta-grid div,
  .admin-storyboard-story-copy,
  .admin-storyboard-advanced,
  .admin-storyboard-binding-intro,
  .admin-storyboard-binding-form,
  .admin-storyboard-review-grid section,
  .admin-storyboard-review-lists section,
  .admin-storyboard-review-next,
  .admin-storyboard-json-editor,
  .admin-storyboard-scene-sheet-meta div,
  .admin-storyboard-scene-card,
  .admin-storyboard-scene-card dl div,
  .admin-storyboard-production-bridge dl div,
  .admin-storyboard-version-list article,
  .admin-storyboard-job-card,
  .admin-storyboard-previs-card,
  .admin-storyboard-artifact-revisions article,
  .admin-storyboard-binding-card dl div,
  .admin-storyboard-binding-source-grid section,
  .admin-storyboard-hook-card dl div,
  .admin-storyboard-structured-list,
  .admin-storyboard-sample-notes,
  .admin-storyboard-sample-edit,
  .admin-storyboard-flow-columns section,
  .admin-storyboard-command-dropzone,
  .admin-storyboard-command-shelf button,
  .admin-storyboard-command-briefing section,
  .admin-studio-home-project-list a,
  .admin-studio-home-character-strip a
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-surface-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero p,
  .admin-story-bible-hero p,
  .admin-story-bible-flow small,
  .admin-storyboard-level-map span span,
  .admin-storyboard-level-map a span,
  .admin-storyboard-review-map span,
  .admin-story-bible-panel p,
  .admin-story-bible-rule-card ul,
  .admin-story-bible-meta-grid span,
  .admin-story-bible-character-grid span,
  .admin-story-bible-episode-grid span,
  .admin-story-bible-episode-grid small,
  .admin-storyboard-packet-link small,
  .admin-storyboard-result-summary span,
  .admin-storyboard-checkbox,
  .admin-storyboard-meta-grid span,
  .admin-storyboard-empty,
  .admin-storyboard-binding-intro p,
  .admin-storyboard-binding-card p,
  .admin-storyboard-binding-card small,
  .admin-storyboard-binding-source-grid section span,
  .admin-storyboard-binding-source-grid section p,
  .admin-storyboard-review p,
  .admin-storyboard-review ul,
  .admin-storyboard-review-score small,
  .admin-storyboard-scene-sheet-meta span,
  .admin-storyboard-scene-card p,
  .admin-storyboard-scene-card small,
  .admin-storyboard-hook-card p,
  .admin-storyboard-export-card p,
  .admin-storyboard-export-card small,
  .admin-storyboard-production-bridge span,
  .admin-storyboard-production-bridge p,
  .admin-storyboard-production-bridge dt,
  .admin-storyboard-run-status span,
  .admin-storyboard-run-status p,
  .admin-storyboard-next-action p,
  .admin-storyboard-operator-steps p,
  .admin-storyboard-review-guide p,
  .admin-storyboard-sample-runway p,
  .admin-storyboard-sample-runner-lock p,
  .admin-storyboard-json-editor > summary small,
  .admin-storyboard-sample-card-head p,
  .admin-storyboard-sample-card-body p,
  .admin-storyboard-sample-lanes p,
  .admin-storyboard-sample-output p,
  .admin-storyboard-sample-notes p,
  .admin-storyboard-sample-notes strong,
  .admin-storyboard-sample-approved small,
  .admin-storyboard-master-lede,
  .admin-storyboard-master-grid span,
  .admin-storyboard-master-grid p,
  .admin-storyboard-intake-summary small,
  .admin-storyboard-intake-callout span,
  .admin-storyboard-previs-card p,
  .admin-storyboard-artifact-revisions span,
  .admin-storyboard-create-form .field-label small,
  .admin-storyboard-structured-list-head p,
  .admin-storyboard-flow-columns p,
  .admin-storyboard-command-context small,
  .admin-storyboard-command-shelf button small,
  .admin-storyboard-command-briefing p,
  .admin-storyboard-command-preview p,
  .admin-storyboard-command-preview li,
  .admin-storyboard-command-examples span,
  .admin-studio-home-hero p,
  .admin-studio-home-board p,
  .admin-studio-home-board small,
  .admin-studio-home-project-list p,
  .admin-studio-home-project-list small
) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-flow-columns section > div:first-child span,
  .admin-storyboard-command-shelf button span,
  .admin-storyboard-command-briefing span,
  .admin-studio-home-board span,
  .admin-studio-home-project-list span,
  .admin-storyboard-season-project-grid span
) {
  color: var(--studio-admin-faint);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-flow-columns section > div:first-child strong,
  .admin-storyboard-command-briefing strong,
  .admin-storyboard-season-project-grid strong,
  .admin-storyboard-season-projects-head strong,
  .admin-storyboard-copilot-main h2
) {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero-steps span,
  .admin-story-bible-panel-head > span,
  .admin-storyboard-chip-list span,
  .admin-storyboard-packet-link span,
  .admin-storyboard-binding-title-row span,
  .admin-storyboard-hook-card > div > span,
  .admin-storyboard-master-chip-list span,
  .admin-storyboard-ingredient-chips span,
  .admin-storyboard-mini-scene-stack span,
  .admin-storyboard-command-selected > span
) {
  border-color: var(--studio-admin-chip-border);
  background: var(--studio-admin-chip-bg);
  color: var(--studio-admin-chip-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-workspace-tabs a,
  .admin-storyboard-command-examples span
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-surface-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-workspace-tabs a:is(:hover, :focus-visible),
  .admin-storyboard-workspace-tabs a.is-active,
  .admin-storyboard-season-project-grid > a:is(:hover, :focus-visible),
  .admin-storyboard-season-project-grid > a.is-selected
) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-active-bg);
  color: var(--studio-admin-active-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-hero-steps span.is-done,
  .admin-storyboard-review-map > div.is-done,
  .admin-storyboard-master-grid section.is-done,
  .admin-storyboard-sample-approved,
  .admin-storyboard-result-summary.is-live,
  .admin-storyboard-command-briefing section.is-ready,
  .admin-storyboard-ingredient-visual-list span.is-character
) {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-success-bg);
  color: var(--studio-admin-success-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-review-map > div.is-current,
  .admin-storyboard-master-grid section.is-current,
  .admin-storyboard-operator-steps > div.is-current,
  .admin-storyboard-review-guide,
  .admin-storyboard-command-briefing section.is-locked,
  .admin-storyboard-ingredient-visual-list span.is-status
) {
  border-color: var(--studio-admin-warning-border);
  background: var(--studio-admin-warning-bg);
  color: var(--studio-admin-warning-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-master-grid section.is-blocked,
  .admin-storyboard-result-summary.is-blocked,
  .admin-storyboard-command-briefing section.is-blocked,
  .admin-storyboard-ingredient-visual-list span.is-safety
) {
  border-color: var(--studio-admin-danger-border);
  background: var(--studio-admin-danger-bg);
  color: var(--studio-admin-danger-text);
}

body:has(.admin-studio-page) .admin-storyboard-ingredient-visual-list span.is-background {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-blue-bg);
  color: var(--studio-admin-blue-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-create-form :is(input, textarea, select),
  .admin-storyboard-copilot-create :is(input, textarea),
  .admin-storyboard-command-composer textarea,
  .admin-storyboard-json-editor textarea,
  .admin-storyboard-sample-card-head input,
  .admin-storyboard-sample-card-head select,
  .admin-storyboard-sample-card-body textarea
) {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-control);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-create-form :is(input, textarea, select),
  .admin-storyboard-copilot-create :is(input, textarea),
  .admin-storyboard-command-composer textarea
)::placeholder {
  color: var(--studio-admin-placeholder);
}

body:has(.admin-studio-page) .admin-studio-flow-create {
  border-color: var(--studio-admin-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent),
    var(--studio-admin-hero-bg);
  color: var(--studio-admin-hero-text);
  box-shadow: var(--studio-admin-shadow);
}

body:has(.admin-studio-page) .admin-studio-flow-create strong {
  color: var(--studio-admin-hero-text);
}

body:has(.admin-studio-page) .admin-studio-flow-breadcrumb a {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-flow-create span {
  color: var(--studio-admin-hero-muted);
}

body:has(.admin-studio-page) .admin-studio-flow-breadcrumb span {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-flow-breadcrumb {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-flow-breadcrumb a:is(:hover, :focus-visible) {
  color: var(--studio-admin-brand);
}

body:has(.admin-studio-page) .admin-studio-flow-breadcrumb a::after {
  color: var(--studio-admin-faint);
}

body:has(.admin-studio-page) .admin-studio-flow-create-pill {
  border-color: var(--studio-admin-floating-border);
  background: var(--studio-admin-floating-bg);
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-flow-create-pill:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.3);
  background: var(--studio-admin-floating-hover-bg);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-season-grid > :is(a, button),
  .admin-studio-flow-project-card,
  .admin-studio-flow-tools a,
  .admin-studio-flow-launch-card,
  .admin-studio-flow-character-rail,
  .admin-studio-flow-empty,
  .admin-studio-create-review-sources,
  .admin-studio-create-review-grid article,
  .admin-studio-intake-command-board,
  .admin-studio-season-bible-card,
  .admin-studio-create-plan-card,
  .admin-studio-create-brief-list div,
  .admin-studio-character-prep-grid article,
  .admin-studio-episode-prep-card,
  .admin-studio-episode-diff-grid article,
  .admin-studio-episode-diff-grid section,
  .admin-studio-episode-hero > div,
  .admin-studio-episode-next,
  .admin-studio-episode-status-grid > div,
  .admin-studio-episode-ingredients,
  .admin-studio-episode-runway,
  .admin-studio-episode-dryrun,
  .admin-studio-episode-scene-board article,
  .admin-studio-episode-generated-still-board article,
  .admin-studio-episode-production-scenes article,
  .admin-studio-episode-sample-card,
  .admin-studio-episode-advanced
) {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
  box-shadow: var(--studio-admin-shadow-soft);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-season-grid > :is(a, button):is(:hover, :focus-visible),
  .admin-studio-flow-project-card:is(:hover, :focus-visible),
  .admin-studio-flow-tools a:is(:hover, :focus-visible),
  .admin-studio-flow-launch-card:is(:hover, :focus-visible),
  .admin-studio-flow-character-rail > div:last-child > a:is(:hover, :focus-visible),
  .admin-studio-intake-issue-grid button:is(:hover, :focus-visible),
  .admin-studio-season-bible-card:is(:hover, :focus-within),
  .admin-studio-episode-prep-card:is(:hover, :focus-within)
) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-hover-bg);
}

body:has(.admin-studio-page) :is(
  .admin-studio-episode-scene-board article,
  .admin-studio-episode-generated-still-board article
):is(:hover, :focus-within) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-hover-bg);
}

body:has(.admin-studio-page) .admin-studio-flow-launch-card.is-mini {
  border-color: var(--studio-admin-border);
  background:
    linear-gradient(135deg, var(--studio-admin-brand-soft), var(--studio-admin-blue-soft)),
    var(--studio-admin-hero-bg);
  color: var(--studio-admin-hero-text);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-project-card > div,
  .admin-studio-flow-project-card > div.has-image,
  .admin-studio-flow-season-grid > :is(a, button) > div,
  .admin-studio-flow-season-grid > :is(a, button) > div.has-image,
  .admin-studio-episode-media-slot,
  .admin-studio-episode-scene-media,
  .admin-studio-episode-production-scenes article > div,
  .admin-studio-episode-sample-media
) {
  background:
    linear-gradient(135deg, var(--studio-admin-brand-soft), var(--studio-admin-blue-soft)),
    var(--studio-admin-media-bg);
  color: var(--studio-admin-media-text);
}

body:has(.admin-studio-page) .admin-studio-episode-hero > div:first-child {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    var(--studio-admin-hero-bg);
  color: var(--studio-admin-hero-text);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-project-card strong,
  .admin-studio-flow-season-grid strong,
  .admin-studio-flow-tools strong,
  .admin-studio-flow-launch-card strong,
  .admin-studio-flow-character-rail strong,
  .admin-studio-flow-character-rail > div:first-child span,
  .admin-studio-create-review-grid li,
  .admin-studio-create-decision-focus strong,
  .admin-studio-create-review-sources summary strong,
  .admin-studio-create-plan-card strong,
  .admin-studio-create-brief-list dd,
  .admin-studio-intake-command-board header strong,
  .admin-studio-intake-issue-grid button strong,
  .admin-studio-character-prep-board header strong,
  .admin-studio-season-bible-board header strong,
  .admin-studio-season-bible-card strong,
  .admin-studio-character-prep-grid article > .admin-studio-card-main strong,
  .admin-studio-episode-prep-board header strong,
  .admin-studio-episode-prep-grid strong,
  .admin-studio-episode-diff-board header strong,
  .admin-studio-episode-diff-grid section strong,
  .admin-studio-episode-next strong,
  .admin-studio-episode-runway strong,
  .admin-studio-episode-dryrun strong,
  .admin-studio-episode-flow-topbar strong,
  .admin-studio-episode-scene-board article strong,
  .admin-studio-episode-production-scenes strong,
  .admin-studio-episode-sample-title strong
) {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-flow-topbar {
  border-color: transparent;
  background: transparent;
  color: var(--studio-admin-text);
  box-shadow: none;
}

body:has(.admin-studio-page) .admin-studio-episode-flow-topbar strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-flow-topbar :is(span, small) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-launch {
  border-color: var(--studio-admin-blue-border);
  background:
    radial-gradient(circle at 88% 12%, var(--studio-admin-brand-soft), transparent 26%),
    linear-gradient(135deg, var(--studio-admin-blue-soft), transparent),
    var(--studio-admin-surface);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-launch > strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-launch > small {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-project-card section > span,
  .admin-studio-flow-project-card small,
  .admin-studio-flow-season-grid span,
  .admin-studio-flow-season-grid small,
  .admin-studio-flow-tools small,
  .admin-studio-flow-launch-card small,
  .admin-studio-flow-character-rail span,
  .admin-studio-flow-character-rail small,
  .admin-studio-create-review-grid span,
  .admin-studio-create-decision-focus span,
  .admin-studio-create-decision-focus p,
  .admin-studio-create-decision-focus li,
  .admin-studio-create-review-sources summary span,
  .admin-studio-create-plan-card span,
  .admin-studio-create-plan-card p,
  .admin-studio-create-brief-list dt,
  .admin-studio-intake-command-board header span,
  .admin-studio-intake-command-board header p,
  .admin-studio-intake-issue-grid button span,
  .admin-studio-intake-issue-grid button small,
  .admin-studio-character-prep-board header span,
  .admin-studio-character-prep-board header p,
  .admin-studio-season-bible-board header span,
  .admin-studio-season-bible-board header p,
  .admin-studio-season-bible-card span,
  .admin-studio-season-bible-card small,
  .admin-studio-season-bible-card dt,
  .admin-studio-season-bible-card dd,
  .admin-studio-character-prep-grid article > .admin-studio-card-main small,
  .admin-studio-character-prep-status,
  .admin-studio-episode-prep-board header span,
  .admin-studio-episode-prep-board header p,
  .admin-studio-episode-prep-grid button span,
  .admin-studio-episode-prep-grid small,
  .admin-studio-episode-diff-board header span,
  .admin-studio-episode-diff-board header p,
  .admin-studio-episode-diff-grid article > div span,
  .admin-studio-episode-diff-grid section span,
  .admin-studio-episode-diff-grid :is(section p, article > p, li),
  .admin-studio-episode-flow-topbar :is(span, small),
  .admin-studio-episode-hero span,
  .admin-studio-episode-status-grid span,
  .admin-studio-episode-runway span,
  .admin-studio-episode-dryrun span,
  .admin-studio-episode-sample-title span,
  .admin-studio-episode-ingredients > div:first-child span,
  .admin-studio-episode-runway p,
  .admin-studio-episode-dryrun p,
  .admin-studio-episode-scene-board article > section > span,
  .admin-studio-episode-scene-board article > section > .admin-studio-episode-scene-card-title > span,
  .admin-studio-episode-scene-board article p,
  .admin-studio-episode-advanced span,
  .admin-studio-episode-production-scenes small,
  .admin-studio-episode-production-scenes p,
  .admin-studio-episode-generate-form label
) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-hero > div:first-child span {
  color: var(--studio-admin-hero-muted);
}

body:has(.admin-studio-page) .admin-studio-flow-launch-card span {
  background: var(--studio-admin-chip-bg);
  color: var(--studio-admin-chip-text);
}

body:has(.admin-studio-page) .admin-studio-flow-launch-card.is-mini :is(strong, small, span) {
  color: inherit;
}

body:has(.admin-studio-page) .admin-studio-flow-command-dock {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(58, 58, 56, 0.68), rgba(24, 24, 23, 0.76)),
    rgba(34, 34, 32, 0.7);
  color: #ffffff;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.36),
    0 2px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

body:has(.admin-studio-page) .admin-studio-flow-command-dock .admin-studio-flow-command-form textarea {
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

body:has(.admin-studio-page) .admin-studio-flow-command-dock .admin-studio-flow-command-form textarea:focus {
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

body:has(.admin-studio-page) .admin-studio-flow-command-dock .admin-studio-flow-command-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.33);
}

body:has(.admin-studio-page) .admin-studio-create-composer {
  border-color: rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(48, 48, 46, 0.88), rgba(18, 18, 17, 0.94)),
    rgba(20, 20, 19, 0.92);
  color: #ffffff;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.38),
    0 2px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body:has(.admin-studio-page) .admin-studio-create-composer textarea {
  border: 0 !important;
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  caret-color: #ffffff;
  outline: none !important;
  box-shadow: none !important;
}

body:has(.admin-studio-page) .admin-studio-create-composer textarea::placeholder {
  color: rgba(255, 255, 255, 0.72);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.72);
}

body:has(.admin-studio-page) .admin-studio-create-composer form > div > span {
  color: rgba(255, 255, 255, 0.9);
}

body:has(.admin-studio-page) .admin-studio-create-composer form > .admin-studio-create-loading-row {
  border-color: rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.22), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-flow-submit.is-loading {
  background: #ffffff;
  color: #111827;
}

body:has(.admin-studio-page) .admin-studio-create-preview-resume .admin-studio-create-loading-row {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(96, 165, 250, 0.12);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-create-preview-resume .admin-studio-create-loading-row strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-create-preview-resume .admin-studio-create-loading-row small {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-create-settings summary {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-create-settings summary:is(:hover, :focus-visible),
body:has(.admin-studio-page) .admin-studio-create-settings[open] summary {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-create-settings-panel {
  border-color: rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(42, 42, 40, 0.98), rgba(17, 17, 16, 0.98)),
    #171716;
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-create-settings-panel label span {
  color: rgba(255, 255, 255, 0.82);
}

body:has(.admin-studio-page) .admin-studio-create-settings-panel :is(input, select) {
  border-color: rgba(255, 255, 255, 0.22);
  background: #f8fafc;
  color: #111827;
  -webkit-text-fill-color: #111827;
}

body:has(.admin-studio-page) .admin-studio-create-settings-panel :is(input, select):focus {
  border-color: rgba(96, 165, 250, 0.72);
  background: #ffffff;
  color: #111827;
  -webkit-text-fill-color: #111827;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.24);
}

body:has(.admin-studio-page) .admin-studio-create-settings-panel select option {
  background: #ffffff;
  color: #111827;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-project-card em, .admin-studio-flow-season-grid em, .admin-studio-flow-character-rail > div:first-child a, .admin-studio-episode-advanced a) {
  color: var(--studio-admin-blue-strong);
}

body:has(.admin-studio-page) .admin-studio-flow-character-rail > div:last-child > a {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-flow-tools span {
  background: var(--studio-admin-secondary-bg);
  color: var(--studio-admin-secondary-text);
}

body:has(.admin-studio-page) :is(
  .admin-studio-flow-character-rail i,
  .admin-studio-home-character-strip a > div,
  .admin-studio-episode-ingredients i
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card-soft);
  color: var(--studio-admin-faint);
}

body:has(.admin-studio-page) .admin-studio-home-character-strip strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) :is(
  .admin-studio-home-character-strip span,
  .admin-studio-home-character-strip small
) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-dryrun.is-live {
  border-color: var(--studio-admin-care-border);
  background: var(--studio-admin-success-bg);
  color: var(--studio-admin-success-text);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-chips span {
  border-color: var(--studio-admin-chip-border);
  background: var(--studio-admin-chip-bg);
  color: var(--studio-admin-chip-text);
}

body:has(.admin-studio-page) .admin-studio-episode-scene-board small {
  background: var(--studio-admin-chip-bg);
  color: var(--studio-admin-chip-text);
}

body:has(.admin-studio-page) .admin-studio-episode-trim {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-surface-soft);
}

body:has(.admin-studio-page) .admin-studio-episode-trim > div strong {
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-trim > div span,
body:has(.admin-studio-page) .admin-studio-episode-trim small {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-trim-track {
  background: var(--studio-admin-border-soft);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-media span {
  color: var(--studio-admin-media-muted);
}

body:has(.admin-studio-page) .admin-studio-episode-sample-media strong {
  color: var(--studio-admin-media-text);
}

body:has(.admin-studio-page) .admin-studio-episode-media-slot > b,
body:has(.admin-studio-page) .admin-studio-episode-media-slot strong,
body:has(.admin-studio-page) .admin-studio-episode-media-slot span {
  color: var(--studio-admin-media-text);
}

body:has(.admin-studio-page) .admin-studio-episode-media-slot > small {
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
}

body:has(.admin-studio-page) .admin-studio-episode-media-slot .admin-studio-episode-media-kind {
  color: #111827;
}

body:has(.admin-studio-page) .admin-studio-episode-media-slot .admin-studio-episode-selected-still span {
  color: inherit;
}

body:has(.admin-studio-page) .admin-studio-episode-advanced-drawer > summary {
  border-color: var(--studio-admin-border);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-studio-episode-advanced-drawer[open] > summary {
  background: var(--studio-admin-hero-bg);
  color: var(--studio-admin-hero-text);
}

body:has(.admin-studio-page) :is(
  .admin-studio-home-board span,
  .admin-studio-home-project-list span,
  .admin-storyboard-project-map-grid span
) {
  border-color: var(--studio-admin-chip-border);
  background: var(--studio-admin-chip-bg);
  color: var(--studio-admin-chip-text);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-project-map-head p,
  .admin-storyboard-project-map-grid p
) {
  color: var(--studio-admin-muted);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-ingredient-visual-list span,
  .admin-storyboard-command-selected,
  .admin-storyboard-command-context > div
) {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-card-soft);
  color: var(--studio-admin-text);
}

body:has(.admin-studio-page) .admin-storyboard-ingredient-visual-list i {
  border-color: var(--studio-admin-border-soft);
  background: var(--studio-admin-surface);
  color: var(--studio-admin-brand-deep);
}

body:has(.admin-studio-page) :is(
  .admin-storyboard-project-map-grid a:is(:hover, :focus-visible),
  .admin-studio-home-board a:is(:hover, :focus-visible),
  .admin-studio-home-project-list a:is(:hover, :focus-visible),
  .admin-studio-home-character-strip a:is(:hover, :focus-visible)
) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-hover-bg);
}

@media (max-width: 980px) {
  .admin-storyboard-hero,
  .admin-story-bible-hero,
  .admin-studio-home-hero,
  .admin-studio-home-board,
  .admin-studio-home-project-list,
  .admin-studio-flow-project-grid,
  .admin-studio-flow-launch-board,
  .admin-studio-flow-tools,
  .admin-studio-create-hero,
  .admin-studio-create-steps,
  .admin-studio-create-production-gates,
  .admin-studio-create-review-grid,
  .admin-studio-create-plan-grid,
  .admin-studio-create-decision-focus,
  .admin-studio-intake-decision-strip .admin-studio-intake-issue-grid,
  .admin-studio-episode-prep-grid,
  .admin-studio-episode-diff-grid,
  .admin-studio-episode-hero,
  .admin-studio-episode-status-grid,
  .admin-studio-episode-dryrun,
  .admin-story-bible-grid,
  .admin-story-bible-season-main,
  .admin-storyboard-copilot-home,
  .admin-storyboard-season-project-grid,
  .admin-storyboard-decision-head,
  .admin-storyboard-decision-grid,
  .admin-storyboard-layout {
    grid-template-columns: 1fr;
  }

  .admin-studio-home-section-head,
  .admin-studio-flow-character-rail > div:first-child,
  .admin-studio-episode-runway,
  .admin-studio-episode-advanced,
  .admin-storyboard-season-projects-head,
  .admin-storyboard-decision-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-storyboard-sidebar {
    position: static;
  }

  .admin-storyboard-hero-steps {
    justify-content: flex-start;
  }

  .admin-storyboard-level-map {
    grid-template-columns: 1fr;
  }

  .admin-storyboard-review-map {
    grid-template-columns: 1fr;
  }

  .admin-storyboard-binding-intro,
  .admin-storyboard-binding-list,
  .admin-storyboard-binding-source-grid,
  .admin-storyboard-review-grid,
  .admin-storyboard-review-lists,
  .admin-storyboard-structured-row,
  .admin-storyboard-reference-row,
  .admin-storyboard-sample-card-head,
  .admin-storyboard-sample-card-body,
  .admin-storyboard-sample-lanes,
  .admin-storyboard-sample-runner-lock,
  .admin-storyboard-sample-review-form,
  .admin-storyboard-production-bridge,
  .admin-storyboard-run-status,
  .admin-storyboard-scene-sheet-meta,
  .admin-storyboard-master-grid,
  .admin-storyboard-operator-steps,
  .admin-storyboard-previs-strip,
  .admin-storyboard-ingredient-strip,
  .admin-storyboard-flow-columns,
  .admin-storyboard-command-context,
  .admin-storyboard-command-composer,
  .admin-storyboard-command-briefing,
  .admin-storyboard-project-map-head,
  .admin-storyboard-project-map-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-home-character-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-studio-flow-create {
    min-height: 260px;
  }

  .admin-studio-flow-season-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .admin-studio-create-hero {
    align-items: start;
    min-height: 260px;
  }

  .admin-studio-create-packet,
  .admin-studio-create-approval {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-episode-hero > div {
    min-height: 180px;
  }
}

@media (max-width: 680px) {
  .admin-studio-home-character-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-storyboard-form-grid,
  .admin-storyboard-copilot-create > div,
  .admin-storyboard-season-project-grid > a,
  .admin-storyboard-meta-grid,
  .admin-storyboard-structured-row,
  .admin-storyboard-reference-row,
  .admin-storyboard-sample-card-head,
  .admin-storyboard-sample-card-body,
  .admin-storyboard-sample-review-form,
  .admin-storyboard-decision-meta,
  .admin-storyboard-binding-card dl,
  .admin-storyboard-production-bridge dl,
  .admin-storyboard-scene-card dl,
  .admin-storyboard-operator-steps,
  .admin-storyboard-hook-card dl {
    grid-template-columns: 1fr;
  }

  .admin-storyboard-artifact-revisions article {
    grid-template-columns: 1fr;
  }

  .admin-storyboard-season-project-grid > a > div {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .admin-storyboard-panel-head,
  .admin-storyboard-result-summary,
  .admin-storyboard-next-action {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-studio-flow-home {
    gap: 14px;
  }

  .admin-studio-flow-create {
    min-height: 220px;
    padding: 24px 16px;
  }

  .admin-studio-flow-season-grid,
  .admin-studio-flow-project-grid,
  .admin-studio-episode-sample-board,
  .admin-studio-flow-launch-board,
  .admin-studio-flow-tools {
    grid-template-columns: 1fr;
  }

  .admin-studio-flow-season-grid > :is(a, button) {
    min-height: 0;
  }

  .admin-studio-create-season-page {
    padding-bottom: 126px;
  }

  .admin-studio-create-composer textarea {
    min-height: 62px;
  }

  .admin-studio-create-composer form > div,
  .admin-studio-create-packet,
  .admin-studio-create-approval {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-studio-create-composer form > div {
    gap: 10px;
  }

  .admin-studio-create-settings-panel {
    right: -48px;
    grid-template-columns: 1fr;
    width: min(320px, calc(100vw - 32px));
  }

  .admin-studio-flow-command-dock {
    right: 12px;
    bottom: 22px;
    left: 12px;
    min-height: 89px;
    padding: 12px 13px 10px;
    border-radius: 25px;
  }

  .admin-studio-flow-source-tray article {
    min-height: 178px;
  }

  .admin-studio-flow-source-main {
    padding: 14px;
  }

  .admin-studio-flow-source-menu summary {
    min-height: 178px;
  }

  .admin-studio-flow-raw-editor {
    padding: 12px;
  }

  .admin-studio-flow-raw-editor form {
    max-height: calc(100vh - 24px);
    padding: 16px;
    border-radius: 22px;
  }

  .admin-studio-flow-raw-editor textarea {
    min-height: 260px;
  }

  .admin-studio-flow-command-form {
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    grid-template-rows: minmax(28px, 1fr) 38px;
    gap: 4px 8px;
  }

  .admin-studio-flow-dropzone {
    width: 38px;
    height: 38px;
  }

  .admin-studio-flow-dropzone svg {
    width: 19px;
    height: 19px;
  }

  .admin-studio-flow-command-form textarea {
    max-height: 36px;
    padding-inline: 14px;
    font-size: 0.98rem;
  }

  .admin-studio-flow-submit {
    flex-basis: 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .admin-studio-flow-submit svg {
    width: 18px;
    height: 18px;
  }
}

body:has(.admin-studio-page) :is(
  .admin-studio-intake-issue-card > .admin-studio-card-main,
  .admin-studio-season-bible-card > .admin-studio-card-main,
  .admin-studio-episode-prep-card > .admin-studio-card-main,
  .admin-studio-character-prep-grid article > .admin-studio-card-main
) {
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  transform: none;
}

body:has(.admin-studio-page) :is(
  .admin-studio-intake-issue-card > .admin-studio-card-main,
  .admin-studio-season-bible-card > .admin-studio-card-main,
  .admin-studio-episode-prep-card > .admin-studio-card-main
):is(:hover, :focus-visible) {
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body:has(.admin-studio-page) .admin-studio-card-more {
  border-color: color-mix(in srgb, var(--studio-admin-border) 72%, transparent);
  background: color-mix(in srgb, var(--studio-admin-surface-strong) 82%, transparent);
  color: var(--studio-admin-muted);
  box-shadow: none;
}

body:has(.admin-studio-page) .admin-studio-card-more:is(:hover, :focus-visible) {
  border-color: var(--studio-admin-blue-border);
  background: var(--studio-admin-surface-strong);
  color: var(--studio-admin-text);
  box-shadow: none;
}

body:has(.admin-studio-page) .admin-studio-intake-primary-grid .admin-studio-intake-issue-card.is-primary > .admin-studio-card-main,
body:has(.admin-studio-page) .admin-studio-intake-primary-grid .admin-studio-intake-issue-card.is-primary > .admin-studio-card-main:is(:hover, :focus-visible) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-create-preview,
  .admin-studio-preview-detail-panel,
  .admin-studio-create-review-sources,
  .admin-studio-intake-command-board,
  .admin-studio-intake-applied-details,
  .admin-studio-season-bible-board,
  .admin-studio-episode-prep-board,
  .admin-studio-character-prep-board
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary,
  .admin-studio-preview-detail-panel.is-main > summary,
  .admin-studio-preview-detail-panel.is-advanced > summary,
  .admin-studio-create-review-sources summary,
  .admin-studio-intake-applied-details > summary
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel[open] > summary,
  .admin-studio-create-review-sources[open] summary
) {
  border-bottom-color: transparent !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary::after,
  .admin-studio-create-review-sources summary::after,
  .admin-studio-intake-applied-details > summary::after
) {
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-create-review-sources .admin-studio-create-review-grid,
  .admin-studio-intake-applied-details .admin-studio-intake-decision-strip
) {
  padding-inline: 0 !important;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel,
  .admin-studio-create-review-sources,
  .admin-studio-intake-applied-details
) {
  margin-block: 6px;
  overflow: visible;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary,
  .admin-studio-create-review-sources summary,
  .admin-studio-intake-applied-details > summary
) {
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  opacity: 0.82;
  transition:
    opacity 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary:hover,
  .admin-studio-preview-detail-panel > summary:focus-visible,
  .admin-studio-preview-detail-panel[open] > summary,
  .admin-studio-create-review-sources summary:hover,
  .admin-studio-create-review-sources summary:focus-visible,
  .admin-studio-create-review-sources[open] summary,
  .admin-studio-intake-applied-details > summary:hover,
  .admin-studio-intake-applied-details > summary:focus-visible,
  .admin-studio-intake-applied-details[open] > summary
) {
  opacity: 1;
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 46%, transparent) !important;
  transform: translateY(-1px);
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary span,
  .admin-studio-create-review-sources summary span,
  .admin-studio-intake-applied-details > summary span
) {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary strong,
  .admin-studio-create-review-sources summary strong,
  .admin-studio-intake-applied-details > summary strong
) {
  color: var(--studio-admin-text, #111827);
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1;
}

body:has(.admin-studio-create-season-page) .admin-studio-preview-detail-panel > summary small {
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > summary::after,
  .admin-studio-create-review-sources summary::after,
  .admin-studio-intake-applied-details > summary::after
) {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border-color: color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 82%, transparent);
  color: var(--studio-admin-muted, #6b7280);
  font-size: 0.86rem;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel[open],
  .admin-studio-create-review-sources[open],
  .admin-studio-intake-applied-details[open]
) {
  margin-block: 10px 16px;
}

body:has(.admin-studio-create-season-page) :is(
  .admin-studio-preview-detail-panel > :not(summary),
  .admin-studio-create-review-sources > :not(summary),
  .admin-studio-intake-applied-details > :not(summary)
) {
  margin-top: 8px;
}

body:has(.admin-studio-create-season-page) .admin-studio-preview-detail-panel.is-advanced > summary,
body:has(.admin-studio-create-season-page) .admin-studio-create-review-sources-advanced summary {
  opacity: 0.68;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-review-sources-advanced .admin-studio-create-review-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-review-sources-advanced .admin-studio-create-review-grid article {
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--studio-admin-border, rgba(17, 24, 39, 0.1)) 74%, transparent);
  background: color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 82%, transparent);
}

body:has(.admin-studio-character-flow-page) .site-main {
  max-width: none;
  padding: 0;
}

.admin-studio-character-flow-page {
  max-width: none;
  min-height: 100dvh;
  padding: 0;
  overflow: visible;
  --character-flow-bg: var(--studio-character-canvas, #f6f4ed);
  --character-flow-text: var(--studio-character-text, #111827);
  --character-flow-muted: var(--studio-character-muted, #667085);
  --character-flow-line: var(--studio-character-border, rgba(17, 24, 39, 0.12));
  --character-flow-panel: color-mix(in srgb, var(--studio-character-surface, #fbfaf6) 82%, transparent);
  --character-flow-panel-strong: var(--studio-character-surface-strong, #ffffff);
  --character-flow-command: color-mix(in srgb, var(--studio-character-surface, #fbfaf6) 88%, transparent);
  --character-flow-command-border: var(--studio-character-border, rgba(17, 24, 39, 0.16));
  --character-flow-button: var(--studio-character-text, #111827);
  --character-flow-button-text: var(--studio-character-canvas, #ffffff);
}

html[data-theme="dark"] .admin-studio-character-flow-page {
  --character-flow-bg: var(--studio-character-canvas, #050506);
  --character-flow-text: var(--studio-character-text, #f8fafc);
  --character-flow-muted: var(--studio-character-muted, rgba(248, 250, 252, 0.52));
  --character-flow-line: var(--studio-character-border, rgba(255, 255, 255, 0.14));
  --character-flow-panel: color-mix(in srgb, var(--studio-character-surface, #15161b) 82%, transparent);
  --character-flow-panel-strong: var(--studio-character-surface-strong, #101011);
  --character-flow-command: color-mix(in srgb, var(--studio-character-surface, #15161b) 88%, transparent);
  --character-flow-command-border: var(--studio-character-border, rgba(255, 255, 255, 0.12));
  --character-flow-button: var(--studio-character-text, rgba(255, 255, 255, 0.88));
  --character-flow-button-text: var(--studio-character-canvas, #050506);
}

.admin-studio-character-client-lock-callout {
  position: relative;
  z-index: 9;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  width: min(calc(100% - 36px), 1440px);
  margin: 18px auto 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line, rgba(17, 24, 39, 0.12)) 76%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, #7aa7ff 16%, transparent), transparent 34%),
    color-mix(in srgb, var(--character-flow-panel-strong, #ffffff) 84%, transparent);
  color: var(--character-flow-text, #111827);
  box-shadow: 0 20px 52px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(22px) saturate(140%);
}

.admin-studio-character-client-lock-callout > div:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-studio-character-client-lock-callout span {
  color: color-mix(in srgb, #527dff 72%, var(--character-flow-muted, #667085));
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-character-client-lock-callout strong {
  overflow: hidden;
  color: var(--character-flow-text, #111827);
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-client-lock-callout p {
  max-width: 760px;
  margin: 0;
  color: var(--character-flow-muted, #667085);
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.admin-studio-character-client-lock-refs {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.admin-studio-character-client-lock-refs figure {
  position: relative;
  width: 48px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--character-flow-line, rgba(17, 24, 39, 0.12)) 76%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--character-flow-text, #111827) 7%, transparent);
}

.admin-studio-character-client-lock-refs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-client-lock-refs figcaption {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 920;
  line-height: 1;
}

html[data-theme="dark"] .admin-studio-character-client-lock-callout {
  background:
    radial-gradient(circle at 0% 0%, rgba(82, 125, 255, 0.16), transparent 34%),
    color-mix(in srgb, var(--character-flow-panel-strong, #101011) 88%, transparent);
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.32);
}

@media (max-width: 900px) {
  .admin-studio-character-client-lock-callout {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .admin-studio-character-client-lock-refs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .admin-studio-character-client-lock-callout .button {
    justify-self: start;
  }
}

.admin-studio-character-flow {
  position: relative;
  min-height: 100dvh;
  padding: 22px clamp(18px, 3vw, 42px) 240px;
  --character-flow-bg: var(--studio-character-canvas, #f6f4ed);
  --character-flow-text: var(--studio-character-text, #111827);
  --character-flow-muted: var(--studio-character-muted, #667085);
  --character-flow-line: var(--studio-character-border, rgba(17, 24, 39, 0.12));
  --character-flow-panel: color-mix(in srgb, var(--studio-character-surface, #fbfaf6) 82%, transparent);
  --character-flow-panel-strong: var(--studio-character-surface-strong, #ffffff);
  --character-flow-command: color-mix(in srgb, var(--studio-character-surface, #fbfaf6) 88%, transparent);
  --character-flow-command-border: var(--studio-character-border, rgba(17, 24, 39, 0.16));
  --character-flow-button: var(--studio-character-text, #111827);
  --character-flow-button-text: var(--studio-character-canvas, #ffffff);
  color: var(--character-flow-text);
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-flow {
  --character-flow-bg: var(--studio-character-canvas, #050506);
  --character-flow-text: var(--studio-character-text, #f8fafc);
  --character-flow-muted: var(--studio-character-muted, rgba(248, 250, 252, 0.52));
  --character-flow-line: var(--studio-character-border, rgba(255, 255, 255, 0.14));
  --character-flow-panel: color-mix(in srgb, var(--studio-character-surface, #15161b) 82%, transparent);
  --character-flow-panel-strong: var(--studio-character-surface-strong, #101011);
  --character-flow-command: color-mix(in srgb, var(--studio-character-surface, #15161b) 88%, transparent);
  --character-flow-command-border: var(--studio-character-border, rgba(255, 255, 255, 0.12));
  --character-flow-button: var(--studio-character-text, rgba(255, 255, 255, 0.88));
  --character-flow-button-text: var(--studio-character-canvas, #050506);
  background: transparent;
}

.admin-studio-character-flow.is-embedded {
  min-height: min(720px, calc(100dvh - 170px));
  padding: 0 0 230px;
}

.admin-studio-character-flow.is-embedded .admin-studio-character-flow-stage {
  min-height: min(560px, calc(100dvh - 280px));
  padding-top: 14px;
}

.admin-studio-character-flow-topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  width: min(100%, 1440px);
  margin: 0 auto 16px;
}

.admin-studio-character-flow-topbar.is-detail {
  margin-bottom: 2px;
}

.admin-studio-character-flow-topbar-title {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: var(--character-flow-text);
}

.admin-studio-character-flow-topbar-title span {
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-character-flow-name-button {
  display: inline-flex;
  width: fit-content;
  max-width: min(100%, 520px);
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 78%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--character-flow-text) 5%, transparent), transparent),
    color-mix(in srgb, var(--character-flow-panel) 82%, transparent);
  color: var(--character-flow-text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
}

.admin-studio-character-flow-name-button span,
.admin-studio-character-flow-name-form input {
  overflow: hidden;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--character-flow-text);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.admin-studio-character-flow-name-button svg {
  flex: 0 0 auto;
  color: var(--character-flow-muted);
}

.admin-studio-character-flow-name-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #527dff 42%, var(--character-flow-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, #527dff 9%, transparent), transparent),
    color-mix(in srgb, var(--character-flow-panel-strong) 82%, transparent);
  color: color-mix(in srgb, #527dff 72%, var(--character-flow-text));
  outline: none;
}

.admin-studio-character-flow-name-form {
  display: flex;
  align-items: center;
  width: min(100%, 560px);
  gap: 6px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, #527dff 34%, var(--character-flow-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--character-flow-panel) 78%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, #527dff 9%, transparent);
}

.admin-studio-character-flow-name-form input {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  outline: none;
  box-shadow: none;
}

.admin-studio-character-flow-name-form button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--character-flow-text) 8%, transparent);
  color: var(--character-flow-text);
  cursor: pointer;
}

.admin-studio-character-flow-name-form button[type="submit"] {
  background: color-mix(in srgb, #527dff 18%, transparent);
  color: color-mix(in srgb, #527dff 82%, var(--character-flow-text));
}

.admin-studio-character-flow-name-form button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-studio-character-flow-topbar-title small {
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 820;
}

.admin-studio-character-flow-library {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 168px));
  gap: 12px;
  align-items: start;
  justify-content: center;
  width: min(100%, 1440px);
  margin: 0 auto 28px;
  pointer-events: auto;
}

.admin-studio-character-flow-library-new,
.admin-studio-character-flow-library-card {
  color: var(--character-flow-text);
  text-decoration: none;
  backdrop-filter: blur(20px) saturate(130%);
}

.admin-studio-character-flow-library-new {
  appearance: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  width: 168px;
  height: 168px;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--character-flow-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, #7aa7ff 20%, transparent), transparent 48%),
    color-mix(in srgb, var(--character-flow-panel-strong) 66%, transparent);
  font-size: 0.84rem;
  font-weight: 860;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
  cursor: pointer;
}

.admin-studio-character-flow-library-new > svg {
  align-self: center;
  justify-self: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--character-flow-text) 9%, transparent);
}

.admin-studio-character-flow-library-new > span,
.admin-studio-character-flow-library-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-studio-character-flow-library-copy {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  align-content: end;
  min-height: 68px;
  padding: 30px 10px 10px;
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.88), rgba(2, 6, 23, 0.46) 56%, transparent);
}

.admin-studio-character-flow-library-new strong,
.admin-studio-character-flow-library-new small,
.admin-studio-character-flow-library-copy strong,
.admin-studio-character-flow-library-copy small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
}

.admin-studio-character-flow-library-new:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #7aa7ff 62%, var(--character-flow-line));
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-flow-library-list {
  display: contents;
}

.admin-studio-character-flow-library-card {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  width: 168px;
  height: 168px;
  min-width: 168px;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--character-flow-panel) 58%, transparent);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.admin-studio-character-flow-library-card:is(:hover, :focus-visible),
.admin-studio-character-flow-library-card.is-selected {
  border-color: color-mix(in srgb, #7aa7ff 62%, transparent);
  background: color-mix(in srgb, var(--character-flow-panel-strong) 82%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #7aa7ff 14%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-flow-library-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 42%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.admin-studio-character-flow-library-card::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 4;
  width: 18px;
  height: 18px;
  border-top: 1px solid color-mix(in srgb, var(--character-flow-muted) 56%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--character-flow-muted) 56%, transparent);
  border-radius: 0 5px 0 0;
  opacity: 0.48;
  pointer-events: none;
}

.admin-studio-character-flow-library-card[data-status="active"]::before {
  border-color: color-mix(in srgb, #22c55e 26%, var(--character-flow-line));
  box-shadow: inset 0 -48px 70px rgba(34, 197, 94, 0.08);
}

.admin-studio-character-flow-library-card[data-status="active"]::after {
  border-color: color-mix(in srgb, #22c55e 62%, transparent);
  opacity: 0.56;
}

.admin-studio-character-flow-library-card[data-status="draft"]::before {
  border-color: color-mix(in srgb, #f59e0b 24%, var(--character-flow-line));
  box-shadow: inset 0 -48px 70px rgba(245, 158, 11, 0.07);
}

.admin-studio-character-flow-library-card[data-status="draft"]::after {
  border-color: color-mix(in srgb, #f59e0b 58%, transparent);
  opacity: 0.5;
}

.admin-studio-character-flow-library-card[data-status="generating"]::before {
  border-color: color-mix(in srgb, #60a5fa 26%, var(--character-flow-line));
  box-shadow: inset 0 -48px 70px rgba(96, 165, 250, 0.08);
}

.admin-studio-character-flow-library-card[data-status="generating"]::after {
  border-color: color-mix(in srgb, #60a5fa 62%, transparent);
  opacity: 0.54;
}

.admin-studio-character-flow-library-card[data-status="paused"]::before,
.admin-studio-character-flow-library-card[data-status="archived"]::before,
.admin-studio-character-flow-library-card[data-status="blocked"]::before {
  border-color: color-mix(in srgb, #94a3b8 22%, var(--character-flow-line));
  box-shadow: inset 0 -48px 70px rgba(15, 23, 42, 0.12);
}

.admin-studio-character-flow-library-card[data-status="paused"]::after,
.admin-studio-character-flow-library-card[data-status="archived"]::after,
.admin-studio-character-flow-library-card[data-status="blocked"]::after {
  border-color: color-mix(in srgb, #94a3b8 52%, transparent);
  opacity: 0.42;
}

.admin-studio-character-flow-library-thumb {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--character-flow-text) 9%, transparent);
  color: var(--character-flow-text);
  font-size: 2.4rem;
  font-weight: 900;
  overflow: hidden;
}

.admin-studio-character-flow-library-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-flow-library-copy strong {
  display: -webkit-box;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.48);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-character-flow-library-copy small {
  display: none;
}

.admin-studio-character-flow-topbar > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  border: 0;
  color: var(--character-flow-text);
  text-decoration: none;
}

.admin-studio-character-flow-search {
  position: relative;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  width: min(100%, 880px);
  min-height: 48px;
  gap: 9px;
  padding: 7px 9px 7px 14px;
  border: 1px solid var(--character-flow-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--character-flow-panel) 82%, transparent);
  color: var(--character-flow-muted);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(20px);
}

html[data-theme="dark"] .admin-studio-character-flow-search {
  box-shadow: none;
}

.admin-studio-character-flow-search input,
.admin-studio-character-flow-filter-panel select {
  min-width: 0;
  border: 0;
  background: transparent !important;
  color: var(--character-flow-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 780;
  outline: none;
  box-shadow: none !important;
}

.admin-studio-character-flow-search input {
  flex: 1 1 240px;
  height: 34px;
  padding: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
}

.admin-studio-character-flow-search input::placeholder {
  color: var(--character-flow-muted);
}

.admin-studio-character-flow-search input:-webkit-autofill,
.admin-studio-character-flow-search input:-webkit-autofill:hover,
.admin-studio-character-flow-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--character-flow-text);
  transition: background-color 9999s ease-out;
  box-shadow: 0 0 0 1000px color-mix(in srgb, var(--character-flow-panel) 82%, transparent) inset !important;
}

.admin-studio-character-flow-filter-button {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 58%, transparent);
  color: var(--character-flow-text);
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.admin-studio-character-flow-filter-button:is(:hover, :focus-visible),
.admin-studio-character-flow-filter-button.is-active {
  border-color: color-mix(in srgb, #527dff 48%, var(--character-flow-line));
  background: color-mix(in srgb, #527dff 12%, var(--character-flow-panel-strong));
  color: color-mix(in srgb, #527dff 82%, var(--character-flow-text));
  outline: none;
}

.admin-studio-character-flow-filter-button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.admin-studio-character-flow-filter-button span {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  border: 2px solid color-mix(in srgb, var(--character-flow-panel-strong) 82%, transparent);
  border-radius: 999px;
  background: #527dff;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-character-flow-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  width: min(280px, calc(100vw - 32px));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--character-flow-line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 94%, transparent);
  color: var(--character-flow-text);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(24px) saturate(140%);
}

html[data-theme="dark"] .admin-studio-character-flow-filter-panel {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.admin-studio-character-flow-filter-panel label {
  display: grid;
  gap: 6px;
}

.admin-studio-character-flow-filter-panel label > span {
  color: var(--character-flow-muted);
  font-size: 0.7rem;
  font-weight: 840;
}

.admin-studio-character-flow-filter-panel select {
  width: 100%;
  height: 38px;
  padding: 0 32px 0 10px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 88%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--character-flow-panel) 74%, transparent) !important;
  cursor: pointer;
}

.admin-studio-character-flow-filter-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 72%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--character-flow-panel) 68%, transparent);
  color: var(--character-flow-text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 840;
  cursor: pointer;
}

.admin-studio-character-flow-filter-reset:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-studio-character-flow-legacy {
  display: inline-flex;
  justify-self: end;
  width: auto !important;
  min-width: 0 !important;
  height: 38px !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px !important;
  border: 1px solid var(--character-flow-line) !important;
  border-radius: 10px !important;
  background: var(--character-flow-panel) !important;
  color: var(--character-flow-muted) !important;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1;
  text-decoration: none;
}

.admin-studio-character-flow-legacy svg {
  flex: 0 0 auto;
}

.admin-studio-character-flow-legacy:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--character-flow-text) 8%, var(--character-flow-panel)) !important;
  color: var(--character-flow-text) !important;
  outline: none;
}

.admin-studio-character-flow-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: min(560px, calc(100dvh - 350px));
  padding: 22px 124px 92px;
}

.admin-studio-character-flow.is-detail-page .admin-studio-character-flow-stage {
  min-height: min(720px, calc(100dvh - 190px));
  align-items: start;
  padding-top: 18px;
}

.admin-studio-character-flow-stage.is-dragging::before {
  content: "";
  position: absolute;
  inset: 42px 108px 30px;
  border: 1.5px dashed color-mix(in srgb, #60a5fa 68%, transparent);
  border-radius: 32px;
  background: color-mix(in srgb, #60a5fa 9%, transparent);
  pointer-events: none;
}

.admin-studio-character-flow-empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: min(460px, 80vw);
  min-height: 280px;
  border: 1px solid transparent;
  border-radius: 34px;
  background: transparent;
  color: var(--character-flow-muted);
  font-size: clamp(1rem, 2vw, 1.34rem);
  font-weight: 760;
  cursor: pointer;
  transition: color 160ms ease, transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.admin-studio-character-flow-empty:hover,
.admin-studio-character-flow-empty:focus-visible {
  border-color: var(--character-flow-line);
  background: color-mix(in srgb, var(--character-flow-panel-strong) 44%, transparent);
  color: var(--character-flow-text);
  outline: none;
  transform: translateY(-2px);
}

.admin-studio-character-flow-main {
  position: relative;
  display: grid;
  place-items: center;
  width: min(72vw, 900px);
  margin: 0;
}

.admin-studio-character-flow-main img {
  display: block;
  max-width: min(72vw, 880px);
  max-height: calc(100dvh - 430px);
  border-radius: 28px;
  object-fit: contain;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.16);
}

html[data-theme="dark"] .admin-studio-character-flow-main img {
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.42);
}

.admin-studio-character-flow-image-fallback {
  display: grid;
  place-items: center;
  gap: 10px;
  width: min(72vw, 560px);
  min-height: min(48vh, 380px);
  padding: 28px;
  border: 1px solid var(--character-flow-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, #60a5fa 18%, transparent), transparent 38%),
    color-mix(in srgb, var(--character-flow-panel-strong) 76%, transparent);
  color: var(--character-flow-text);
  text-align: center;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(22px);
}

.admin-studio-character-flow-image-fallback strong {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 860;
}

.admin-studio-character-flow-image-fallback span {
  max-width: min(440px, 70vw);
  color: var(--character-flow-muted);
  font-size: 0.88rem;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.admin-studio-character-flow-main.is-turnaround_sheet img {
  max-width: min(78vw, 1120px);
}

.admin-studio-character-flow-main figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 8px 12px;
  border: 1px solid var(--character-flow-command-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--character-flow-command) 86%, transparent);
  color: var(--character-flow-text);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
}

.admin-studio-character-flow-main figcaption span {
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 860;
  text-transform: uppercase;
}

.admin-studio-character-flow-main figcaption strong {
  overflow: hidden;
  max-width: 260px;
  font-size: 0.86rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-flow-history {
  position: fixed;
  z-index: 6;
  top: 108px;
  right: clamp(16px, 3vw, 34px);
  display: grid;
  gap: 10px;
  width: 86px;
  max-height: calc(100dvh - 250px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--character-flow-line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--character-flow-panel) 82%, transparent);
  backdrop-filter: blur(22px);
}

.admin-studio-character-flow-history-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 19px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.admin-studio-character-flow-history-item:hover,
.admin-studio-character-flow-history-item:focus-visible,
.admin-studio-character-flow-history-item.is-selected {
  border-color: color-mix(in srgb, #7aa7ff 74%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, #7aa7ff 15%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-flow-history-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-flow-history-item span {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 860;
  line-height: 1;
}

.admin-studio-character-flow-history-item svg {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.92);
  color: #ffffff;
}

.admin-studio-character-flow-stage.has-image {
  display: block;
  min-height: 100svh;
  padding: 0;
}

body:has(.admin-studio-character-flow.is-asset-workspace) {
  background: var(--studio-character-canvas, #f6f4ed);
}

body:has(.admin-studio-character-flow.is-asset-workspace) .site-sidebar,
body:has(.admin-studio-character-flow.is-asset-workspace) .site-overlay,
body:has(.admin-studio-character-flow.is-asset-workspace) .mobile-nav-toggle {
  display: none !important;
}

body:has(.admin-studio-character-flow.is-asset-workspace) .site-main-shell {
  min-height: 100svh;
  background: var(--studio-character-canvas, #f6f4ed);
}

body:has(.admin-studio-character-flow.is-asset-workspace) .site-main-shell.is-studio-sidebar-pinned {
  margin-left: 0 !important;
}

body:has(.admin-studio-character-flow.is-asset-workspace) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
  background: var(--studio-character-canvas, #f6f4ed);
}

.admin-studio-character-flow.is-asset-workspace {
  min-height: 100svh;
  padding: 0 0 228px;
  background: var(--studio-character-canvas, #f6f4ed);
  color: #0f172a;
}

.admin-studio-character-flow.is-detail-page .admin-studio-character-flow-stage.has-image {
  min-height: 100svh;
  padding: 0;
}

.admin-studio-character-flow-stage.has-image.is-dragging::before {
  position: fixed;
  z-index: 78;
  inset: 84px 22px 204px;
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(96, 165, 250, 0.08);
}

.admin-studio-character-asset-flow {
  min-height: 100svh;
  background: var(--studio-character-canvas, #f6f4ed);
  color: #0f172a;
}

.admin-studio-character-asset-topbar {
  background: var(--studio-character-canvas, #f6f4ed);
  backdrop-filter: none;
}

.admin-studio-character-asset-topbar .studio-minis-flow-title strong {
  color: #0f172a;
}

.admin-studio-character-asset-topbar .studio-minis-flow-title small,
.admin-studio-character-asset-topbar .studio-minis-flow-title svg {
  color: #64748b;
}

.admin-studio-character-asset-topbar .studio-minis-flow-title {
  gap: 16px;
}

.admin-studio-character-asset-topbar .studio-minis-flow-icon-button {
  background: rgba(15, 23, 42, 0.055);
  color: #0f172a;
}

.admin-studio-character-asset-topbar .studio-minis-flow-pill-button {
  background: rgba(15, 23, 42, 0.075);
  color: #1f2937;
}

.admin-studio-character-asset-topbar .studio-minis-flow-icon-button:is(:hover, :focus-visible),
.admin-studio-character-asset-topbar .studio-minis-flow-pill-button:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.12);
}

.admin-studio-character-asset-topbar .studio-minis-flow-pill-button.is-done {
  background: #111827;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}

.admin-studio-character-asset-topbar .studio-minis-flow-pill-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.admin-studio-character-asset-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(184px, 260px);
  background: var(--studio-character-canvas, #f6f4ed);
}

.admin-studio-character-asset-workspace.is-turnaround_sheet {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 248px);
  gap: clamp(18px, 2vw, 28px);
  padding-right: clamp(18px, 2.2vw, 30px);
}

.admin-studio-character-asset-workspace.is-source_photo {
  grid-template-columns: minmax(0, 1fr) minmax(176px, 232px);
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  padding-bottom: 232px;
}

.admin-studio-character-asset-workspace.is-source_photo .admin-studio-character-asset-stage {
  display: grid;
  place-items: start center;
  padding-top: clamp(18px, 4vh, 44px);
}

.admin-studio-character-asset-workspace.is-history-hidden {
  grid-template-columns: minmax(0, 1fr) 0;
}

.admin-studio-character-asset-stage {
  min-height: 0;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame {
  position: relative;
  overflow: visible;
  width: min(56vw, 780px);
  height: calc(100svh - 230px);
  min-height: 0;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: var(--studio-character-canvas, #f6f4ed);
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-turnaround_sheet {
  width: min(100%, 1040px);
  height: auto;
  max-height: min(62svh, 620px);
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo {
  overflow: visible;
  width: min(50vw, 560px);
  height: max(260px, min(calc(100svh - 438px), 440px));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame .studio-minis-flow-stage-media {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
  border-radius: 0;
  background: var(--studio-character-canvas, #f6f4ed) !important;
  box-shadow: none;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo .studio-minis-flow-stage-media {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: max(260px, min(calc(100svh - 456px), 420px));
  padding: 0;
  object-fit: contain !important;
  background: transparent !important;
  filter: drop-shadow(0 24px 56px rgba(15, 23, 42, 0.16));
}

.admin-studio-character-source-photo-context {
  position: absolute;
  z-index: 4;
  top: 16px;
  left: 16px;
  display: inline-grid;
  gap: 3px;
  max-width: calc(100% - 32px);
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.62);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px) saturate(135%);
}

.admin-studio-character-source-photo-context span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-source-photo-context strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.96);
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-processing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 24px 82px rgba(37, 99, 235, 0.22);
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-processing::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -20%;
  bottom: -20%;
  left: -55%;
  width: 42%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.12) 34%, rgba(255, 255, 255, 0.5) 50%, rgba(96, 165, 250, 0.18) 68%, transparent 100%);
  transform: translateX(-35%) skewX(-10deg);
  animation: studio-card-sweep 1.55s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-processing::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at 82% 16%, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(37, 99, 235, 0.1));
  pointer-events: none;
}

.admin-studio-character-asset-frame-status {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  align-items: center;
  gap: 7px;
  width: min(310px, calc(100% - 48px));
  min-height: 122px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18, 24, 38, 0.84), rgba(10, 13, 22, 0.76)),
    rgba(12, 18, 32, 0.82);
  color: #ffffff;
  text-align: center;
  letter-spacing: 0;
  box-shadow:
    0 28px 78px rgba(15, 23, 42, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(24px) saturate(145%);
}

.admin-studio-character-asset-frame-status > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.06),
    0 0 34px rgba(96, 165, 250, 0.32);
}

.admin-studio-character-asset-frame-status strong {
  color: #ffffff;
  font-size: 1.03rem;
  font-weight: 920;
  line-height: 1.1;
}

.admin-studio-character-asset-frame-status small {
  max-width: 236px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
}

html[data-theme="dark"] body:has(.admin-studio-character-flow.is-asset-workspace),
html[data-theme="dark"] body:has(.admin-studio-character-flow.is-asset-workspace) .site-main-shell,
html[data-theme="dark"] body:has(.admin-studio-character-flow.is-asset-workspace) .site-main,
html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace,
html[data-theme="dark"] .admin-studio-character-asset-flow,
html[data-theme="dark"] .admin-studio-character-asset-topbar,
html[data-theme="dark"] .admin-studio-character-asset-workspace,
html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame {
  background: var(--studio-character-canvas, #050506);
}

html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace,
html[data-theme="dark"] .admin-studio-character-asset-flow {
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame .studio-minis-flow-stage-media {
  background: var(--studio-character-canvas, #050506) !important;
}

html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo .studio-minis-flow-stage-media {
  filter: drop-shadow(0 24px 56px rgba(0, 0, 0, 0.44));
}

html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-title strong,
html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-icon-button,
html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-pill-button {
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-title small,
html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-title svg {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-icon-button {
  background: transparent;
}

html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-pill-button {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .admin-studio-character-asset-topbar .studio-minis-flow-pill-button.is-done {
  background: #ffffff;
  color: #050505;
  box-shadow: none;
}

.admin-studio-character-asset-history {
  align-self: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-studio-character-asset-history .studio-minis-flow-history-list,
.admin-studio-character-asset-history .studio-minis-flow-history-item {
  border: 0 !important;
  padding: 0;
  background: transparent !important;
  color: #0f172a;
  box-shadow: none !important;
}

.admin-studio-character-asset-history .studio-minis-flow-history-thumb,
.admin-studio-character-asset-history .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb,
.admin-studio-character-asset-history .studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.admin-studio-character-asset-history .studio-minis-flow-history-item {
  grid-template-columns: 72px minmax(0, 1fr);
}

.admin-studio-character-asset-history .studio-minis-flow-history-item.is-selected {
  grid-template-columns: 96px minmax(0, 1fr);
}

.admin-studio-character-asset-history .studio-minis-flow-history-thumb,
.admin-studio-character-asset-history .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  width: 72px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}

.admin-studio-character-asset-history .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  width: 96px;
  border-radius: 20px;
}

.admin-studio-character-asset-history .studio-minis-flow-history-copy strong {
  color: #0f172a;
}

.admin-studio-character-asset-history .studio-minis-flow-history-copy small {
  color: #64748b;
}

.admin-studio-character-asset-history .studio-minis-flow-history-item:is(:hover, :focus-visible) {
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-item,
html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-copy small {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-list,
html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-item,
html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-thumb,
html[data-theme="dark"] .admin-studio-character-asset-history .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.admin-studio-character-asset-history-item.is-turnaround_sheet {
  grid-template-columns: 142px minmax(0, 1fr);
}

.admin-studio-character-asset-history-item.is-turnaround_sheet.is-selected {
  grid-template-columns: 166px minmax(0, 1fr);
}

.admin-studio-character-asset-history-item.is-turnaround_sheet .studio-minis-flow-history-thumb {
  width: 142px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.admin-studio-character-asset-history-item.is-turnaround_sheet.is-selected .studio-minis-flow-history-thumb {
  width: 166px;
}

.admin-studio-character-asset-history .studio-minis-flow-history-thumb b {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #050505;
  font-size: 0.74rem;
}

.admin-studio-character-asset-history .studio-minis-flow-history-copy small {
  max-width: 162px;
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock {
  left: 50%;
  right: auto;
  bottom: 28px;
  overflow: visible;
  width: min(576px, 56vw, calc(100vw - 42px));
  max-width: 576px;
  min-height: 118px;
  padding: 10px 12px 10px;
  transform: translateX(-50%);
}

.studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock.has-tray-items {
  min-height: 166px;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form {
  grid-template-columns: 38px minmax(0, 1fr) max-content;
  grid-template-rows: auto minmax(30px, auto) 34px auto;
  gap: 4px 7px;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form.has-context {
  grid-template-rows: auto auto minmax(30px, auto) 34px auto;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form textarea {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 30px;
  max-height: min(44vh, 440px);
  padding: 5px 12px 0;
  font-size: 0.88rem;
  line-height: 1.2;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form.has-context textarea {
  grid-row: 3;
  padding: 5px 12px 0;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-command-actions {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock.has-tray-items .admin-studio-flow-command-actions {
  grid-row: 4;
}

.admin-studio-character-flow-action-preview {
  overflow: hidden;
  display: inline-flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 246px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  font-weight: 840;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px) saturate(120%);
}

.admin-studio-character-flow-action-preview.is-muted {
  color: rgba(255, 255, 255, 0.68);
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: rgba(16, 16, 18, 0.96);
  cursor: pointer;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-loading {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #111827;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.16),
    0 0 34px rgba(96, 165, 250, 0.42),
    0 12px 32px rgba(0, 0, 0, 0.28);
  cursor: progress;
  opacity: 1;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-loading::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 90deg, transparent 0 42%, rgba(59, 130, 246, 0.72), transparent 62% 100%);
  animation: admin-studio-spin 920ms linear infinite;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-loading svg {
  position: relative;
  z-index: 1;
  animation: admin-studio-spin 820ms linear infinite;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-disabled {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.48);
  box-shadow: none;
  cursor: not-allowed;
}

.admin-studio-character-flow-add-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}

.admin-studio-character-flow-add-photo:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

.admin-studio-character-flow-add-menu-wrap {
  position: relative;
  display: inline-flex;
}

.admin-studio-character-flow-add-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 20;
  display: grid;
  width: min(272px, calc(100vw - 52px));
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(28, 28, 30, 0.92);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(140%);
}

.admin-studio-character-flow-add-menu p {
  margin: 0;
  padding: 5px 7px 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
}

.admin-studio-character-flow-add-menu button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
  gap: 9px;
  padding: 6px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 830;
  text-align: left;
  cursor: pointer;
}

.admin-studio-character-flow-add-menu button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.admin-studio-character-flow-add-menu-thumb {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.admin-studio-character-flow-add-menu-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-asset-picker {
  position: fixed;
  right: 50%;
  bottom: 176px;
  left: auto;
  z-index: 92;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) auto;
  gap: 12px;
  width: min(840px, calc(100vw - 36px));
  height: min(560px, calc(100svh - 220px));
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 26px;
  background: rgba(31, 31, 30, 0.97);
  box-shadow:
    0 38px 110px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateX(50%);
  backdrop-filter: blur(26px) saturate(120%);
}

.admin-studio-flow-command-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 91;
  border: 0;
  background: transparent;
  cursor: default;
}

.admin-studio-character-picker-backdrop.admin-studio-flow-command-picker-backdrop {
  z-index: 91;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px) saturate(105%);
}

.studio-minis-character-picker-backdrop.admin-studio-flow-command-picker-backdrop {
  z-index: 150;
  background: transparent;
  backdrop-filter: none;
}

.admin-studio-character-asset-picker.admin-studio-flow-command-picker {
  bottom: 154px;
  z-index: 92;
  width: min(760px, calc(100vw - 36px));
  height: min(520px, calc(100svh - 190px));
  grid-template-rows: 52px minmax(0, 1fr) auto;
}

.studio-minis-character-picker.admin-studio-flow-command-picker {
  bottom: 142px;
  z-index: 151;
}

.admin-studio-character-asset-picker.admin-studio-flow-command-picker .admin-studio-character-asset-picker-toolbar {
  grid-template-columns: minmax(180px, 1fr) minmax(128px, 0.22fr) 40px;
}

.studio-minis-character-picker.admin-studio-flow-command-picker .admin-studio-character-asset-picker-toolbar {
  grid-template-columns: minmax(170px, 0.72fr) minmax(220px, 1fr) 48px;
  align-items: center;
}

.admin-studio-character-asset-picker.admin-studio-flow-command-picker .admin-studio-character-asset-picker-body {
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
}

.admin-studio-flow-command-picker-list-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.admin-studio-flow-command-picker-list-shell .admin-studio-character-asset-picker-list {
  min-height: 0;
}

.admin-studio-flow-command-picker-upload-row {
  min-height: 72px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.052)),
    rgba(255, 255, 255, 0.055);
}

.admin-studio-flow-command-picker-upload-row:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.08);
}

.admin-studio-flow-command-picker-preview article {
  display: grid;
  gap: 12px;
  width: min(100%, 390px);
  padding: 20px;
  text-align: left;
}

.admin-studio-flow-command-picker-preview article span {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-flow-command-picker-preview article strong {
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 1.95rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
}

.admin-studio-flow-command-picker-preview article p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  font-weight: 720;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
}

.admin-studio-character-asset-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(116px, 0.18fr) 40px;
  gap: 10px;
  min-width: 0;
}

.admin-studio-character-asset-picker-close {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.admin-studio-character-asset-picker-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  outline: none;
}

.admin-studio-character-asset-picker-select,
.admin-studio-character-asset-picker-search,
.admin-studio-character-asset-picker-sort {
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  box-shadow: none !important;
}

.admin-studio-character-asset-picker-select {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  cursor: default;
}

.admin-studio-character-asset-picker-select span,
.admin-studio-character-asset-picker-sort {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-asset-picker-select strong {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  line-height: 1;
  transform: rotate(45deg);
}

.admin-studio-character-asset-picker-close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  place-items: center;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.admin-studio-character-asset-picker-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-asset-picker-search {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0 14px;
}

.admin-studio-character-asset-picker-search svg {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.48);
}

.admin-studio-character-asset-picker-search input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent !important;
  color: #ffffff !important;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 760;
  outline: none;
  box-shadow: none !important;
}

.admin-studio-character-asset-picker-search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.admin-studio-character-asset-picker-search input:-webkit-autofill,
.admin-studio-character-asset-picker-search input:-webkit-autofill:hover,
.admin-studio-character-asset-picker-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out;
}

.admin-studio-character-asset-picker-sort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px 0 14px;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  color-scheme: dark;
  cursor: pointer;
  -webkit-text-fill-color: #ffffff;
}

.admin-studio-character-asset-picker-sort option {
  background: #1f1f1e;
  color: #ffffff;
}

.admin-studio-character-asset-picker-body {
  display: grid;
  grid-template-columns: minmax(260px, 0.44fr) minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
}

.admin-studio-character-asset-picker-list {
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding-right: 6px;
  scrollbar-width: none;
}

.admin-studio-character-asset-picker-list::-webkit-scrollbar {
  display: none;
}

.admin-studio-character-asset-picker-item {
  appearance: none;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 8px 12px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.admin-studio-character-asset-picker-item:is(a) {
  text-decoration: none;
}

.admin-studio-character-asset-picker-item:is(:hover, :focus-visible),
.admin-studio-character-asset-picker-item.is-preview {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.admin-studio-character-asset-picker-item.is-picked {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.82);
}

.admin-studio-character-asset-picker-item.is-reference-blocked {
  opacity: 0.74;
}

.admin-studio-character-asset-picker-item.is-reference-blocked small {
  color: #fecaca;
}

.admin-studio-character-asset-picker-item.is-picked .admin-studio-character-asset-picker-thumb {
  box-shadow: 0 0 0 2px #ffffff;
}

.admin-studio-character-asset-picker-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}

.admin-studio-character-asset-picker-item > span:last-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-studio-character-asset-picker-item strong,
.admin-studio-character-asset-picker-item small {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-asset-picker-item strong {
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 820;
}

.admin-studio-character-asset-picker-item small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-studio-character-asset-picker-thumb,
.admin-studio-character-asset-picker-upload-icon {
  overflow: hidden;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.09);
}

.admin-studio-character-asset-picker-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-asset-picker-item.is-upload {
  margin-top: 10px;
}

.admin-studio-character-asset-picker-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-studio-character-asset-picker-quick-actions button {
  appearance: none;
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  min-height: 64px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.045);
  color: #ffffff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.admin-studio-character-asset-picker-quick-actions button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.09)),
    rgba(255, 255, 255, 0.075);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-asset-picker-quick-actions button > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-studio-character-asset-picker-quick-actions strong,
.admin-studio-character-asset-picker-quick-actions small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-asset-picker-quick-actions strong {
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 880;
}

.admin-studio-character-asset-picker-quick-actions small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 760;
}

.admin-studio-character-asset-picker-quick-actions .admin-studio-character-asset-picker-upload-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 15px;
}

.admin-studio-character-asset-picker-item.is-library {
  margin-bottom: 4px;
}

.admin-studio-character-asset-picker-upload-icon {
  background: #ffffff;
  color: #151515;
  font-size: 1.1rem;
  font-weight: 920;
}

.admin-studio-character-asset-picker-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 0;
  place-items: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.035);
}

.admin-studio-character-asset-picker-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: calc(min(520px, calc(100svh - 220px)) - 98px);
  object-fit: contain;
}

.studio-minis-character-picker-actions {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-studio-character-asset-picker-preview button,
.admin-studio-character-asset-picker-preview a {
  min-height: 42px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 880;
  text-decoration: none;
  cursor: pointer;
}

.admin-studio-character-asset-picker-preview button:is(:hover, :focus-visible),
.admin-studio-character-asset-picker-preview a:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-character-asset-picker-empty {
  display: grid;
  gap: 12px;
  place-items: center;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.9rem;
  font-weight: 780;
}

.studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit:disabled {
  opacity: 1;
}

.admin-studio-character-flow-meta {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 1px;
  scrollbar-width: none;
}

.admin-studio-character-flow-meta::-webkit-scrollbar {
  display: none;
}

.admin-studio-character-flow-meta input,
.admin-studio-character-flow-meta select {
  flex: 0 0 auto;
  min-width: 96px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.7rem;
  font-weight: 800;
  outline: none;
  padding: 0 9px;
}

.admin-studio-character-flow-meta input {
  min-width: 148px;
  background: rgba(255, 255, 255, 0.105);
}

.admin-studio-character-flow-meta input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.admin-studio-character-flow-season-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px 0 11px;
  border: 1px solid rgba(125, 166, 255, 0.34);
  border-radius: 999px;
  background: rgba(125, 166, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.7rem;
  font-weight: 860;
  cursor: pointer;
}

.admin-studio-character-flow-season-chip svg {
  opacity: 0.66;
}

.admin-studio-character-flow-season-chip:is(:hover, :focus-visible) {
  border-color: rgba(166, 194, 255, 0.7);
  background: rgba(125, 166, 255, 0.24);
  outline: none;
}

.admin-studio-character-flow-meta select {
  appearance: none;
  cursor: pointer;
}

.admin-studio-character-command-context-row {
  grid-row: 2;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form .admin-studio-character-flow-status {
  grid-column: 1 / -1;
  grid-row: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.68rem;
  font-weight: 820;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form .admin-studio-character-flow-status svg {
  flex: 0 0 auto;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form .admin-studio-character-flow-status:not(.is-error) svg {
  color: rgba(147, 197, 253, 0.9);
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form.has-context .admin-studio-character-flow-status {
  grid-row: 5;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form .admin-studio-character-flow-status.is-error {
  color: rgba(252, 165, 165, 0.92);
}

.admin-studio-character-flow-status button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.admin-studio-character-flow-job-steps {
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 100%;
}

.studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form.has-context .admin-studio-character-flow-job-steps {
  grid-row: 6;
}

.admin-studio-character-flow-job-steps span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.62rem;
  font-weight: 820;
  white-space: nowrap;
}

.admin-studio-character-flow-job-steps span.is-active {
  border-color: rgba(147, 197, 253, 0.74);
  background:
    linear-gradient(90deg, rgba(147, 197, 253, 0.08), rgba(255, 255, 255, 0.18), rgba(147, 197, 253, 0.08)),
    rgba(59, 130, 246, 0.18);
  background-size: 220% 100%;
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.22), 0 12px 34px rgba(37, 99, 235, 0.22);
  animation: studio-command-shimmer 1.45s ease-in-out infinite;
}

.admin-studio-character-flow-job-steps span.is-done {
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.14);
  color: rgba(187, 247, 208, 0.95);
}

.admin-studio-character-flow-job-steps span.is-failed {
  border-color: rgba(248, 113, 113, 0.44);
  background: rgba(248, 113, 113, 0.14);
  color: rgba(254, 202, 202, 0.96);
}

@keyframes studio-command-shimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

.is-spinning {
  animation: studio-spin 850ms linear infinite;
}

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

@media (max-width: 860px) {
  .admin-studio-character-asset-picker {
    bottom: 156px;
    grid-template-rows: auto minmax(0, 1fr);
    width: calc(100vw - 20px);
    height: min(520px, calc(100svh - 184px));
    padding: 10px;
    border-radius: 22px;
  }

  .admin-studio-character-asset-picker-toolbar,
  .admin-studio-character-asset-picker-body {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-asset-picker-quick-actions {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-asset-picker-select,
  .admin-studio-character-asset-picker-sort {
    display: none;
  }

  .studio-minis-character-picker.admin-studio-flow-command-picker .admin-studio-character-asset-picker-toolbar {
    grid-template-columns: minmax(0, 1fr) 48px;
  }

  .studio-minis-character-picker.admin-studio-flow-command-picker .admin-studio-character-asset-picker-body {
    grid-template-columns: 1fr;
  }

  .studio-minis-character-picker .admin-studio-character-asset-picker-select {
    display: flex;
  }

  .studio-minis-character-picker .admin-studio-character-asset-picker-search {
    grid-column: 1 / -1;
    order: 2;
  }

  .studio-minis-character-picker .admin-studio-character-asset-picker-close {
    order: 1;
  }

  .admin-studio-character-asset-picker-preview {
    min-height: 180px;
  }

  .admin-studio-character-asset-picker-list {
    max-height: 210px;
  }

  .admin-studio-character-asset-workspace.is-source_photo {
    grid-template-columns: 1fr;
    padding-right: 18px;
    padding-bottom: 236px;
  }

  .admin-studio-character-asset-workspace.is-source_photo .admin-studio-character-asset-stage {
    padding-top: 16px;
  }

  .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo {
    width: min(82vw, 420px);
    height: max(220px, min(34svh, 340px));
  }

  .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame.is-source_photo .studio-minis-flow-stage-media {
    max-height: max(220px, min(34svh, 340px));
  }

  .admin-studio-character-flow {
    padding: 16px 14px 230px;
  }

  .admin-studio-character-flow-library {
    grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
    justify-content: center;
    width: 100%;
    min-width: 0;
    margin: 8px auto 18px;
  }

  .admin-studio-character-flow-library-list {
    display: contents;
  }

  .admin-studio-character-flow-library-new {
    width: 148px;
    height: 148px;
  }

  .admin-studio-character-flow-library-card {
    width: 148px;
    min-width: 148px;
    height: 148px;
    grid-template-rows: 1fr;
  }

  .admin-studio-character-flow-library-thumb {
    height: 100%;
  }

  .admin-studio-character-flow-topbar {
    grid-template-columns: 44px 1fr;
  }

  .admin-studio-character-flow-search {
    justify-self: stretch;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    min-height: 48px;
    border-radius: 18px;
  }

  .admin-studio-character-flow-search input {
    flex-basis: 0;
  }

  .admin-studio-character-flow-filter-panel select {
    max-width: none;
  }

  .admin-studio-character-flow-legacy {
    display: inline-grid !important;
  }

  .admin-studio-character-flow-stage {
    min-height: calc(100dvh - 360px);
    padding: 24px 0 126px;
  }

  .admin-studio-character-flow-main,
  .admin-studio-character-flow-main img {
    max-width: calc(100vw - 34px);
  }

  .admin-studio-character-flow-main img {
    max-height: calc(100dvh - 470px);
    border-radius: 22px;
  }

  .admin-studio-character-flow-history {
    top: auto;
    right: 16px;
    bottom: 182px;
    grid-auto-flow: column;
    grid-auto-columns: 64px;
    width: auto;
    max-width: calc(100vw - 32px);
    max-height: 82px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .admin-studio-character-flow-history-item {
    width: 64px;
    height: 64px;
  }

  .admin-studio-character-flow-dock {
    bottom: 14px;
    width: calc(100vw - 24px);
    border-radius: 24px;
  }

  .admin-studio-character-flow-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-studio-character-flow-meta input,
  .admin-studio-character-flow-meta select {
    min-width: 0;
    width: 100%;
  }
}

.admin-studio-character-flow-library-empty {
  display: grid;
  align-content: center;
  width: 168px;
  height: 206px;
  gap: 5px;
  padding: 14px;
  border: 1px dashed var(--character-flow-line);
  border-radius: 24px;
  color: var(--character-flow-muted);
}

.admin-studio-character-flow-library-empty strong {
  color: var(--character-flow-text);
  font-size: 0.84rem;
  font-weight: 900;
}

.admin-studio-character-flow-library-empty span {
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
}

.admin-studio-character-flow-detail {
  display: grid;
  width: min(100%, 1120px);
  gap: 18px;
  padding: clamp(14px, 2vw, 22px);
  color: var(--character-flow-text);
}

.admin-studio-character-flow-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--character-flow-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, #7aa7ff 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--character-flow-panel-strong) 72%, transparent);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(22px) saturate(130%);
}

html[data-theme="dark"] .admin-studio-character-flow-detail-hero {
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

.admin-studio-character-flow-detail-kicker {
  margin: 0 0 8px;
  color: color-mix(in srgb, #527dff 74%, var(--character-flow-muted));
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-flow-detail-hero h1 {
  margin: 0;
  color: var(--character-flow-text);
  font-size: clamp(2rem, 5vw, 4.6rem);
  font-weight: 920;
  line-height: 0.92;
}

.admin-studio-character-flow-detail-hero p {
  margin: 14px 0 0;
  color: var(--character-flow-muted);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 800;
}

.admin-studio-character-flow-detail-hero span {
  display: inline-flex;
  width: fit-content;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1px solid var(--character-flow-line);
  border-radius: 999px;
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-studio-character-flow-detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-studio-character-flow-detail-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--character-flow-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--character-flow-panel) 68%, transparent);
  color: var(--character-flow-text);
  font-size: 0.76rem;
  font-weight: 860;
  text-decoration: none;
}

.admin-studio-character-flow-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-studio-character-flow-reference-card {
  appearance: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  height: 266px;
  min-height: 266px;
  max-height: 266px;
  padding: 0;
  border: 1px solid var(--character-flow-line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 72%, transparent);
  color: var(--character-flow-text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(20px) saturate(125%);
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.admin-studio-character-flow-reference-card:disabled {
  cursor: default;
  opacity: 0.64;
}

.admin-studio-character-flow-reference-card:not(:disabled):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #7aa7ff 70%, var(--character-flow-line));
  outline: none;
  transform: translateY(-2px);
}

.admin-studio-character-flow-reference-card.is-processing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(96, 165, 250, 0.64);
  background:
    radial-gradient(circle at 86% 12%, rgba(96, 165, 250, 0.18), transparent 34%),
    color-mix(in srgb, var(--character-flow-panel-strong) 80%, transparent);
  box-shadow:
    0 0 0 1px rgba(96, 165, 250, 0.22),
    0 22px 70px rgba(37, 99, 235, 0.22);
  animation: studio-card-processing-pulse 1.8s ease-in-out infinite;
}

.admin-studio-character-flow-reference-card.is-stale:not(.is-processing) {
  border-color: color-mix(in srgb, #f59e0b 52%, var(--character-flow-line));
  background:
    radial-gradient(circle at 86% 12%, rgba(245, 158, 11, 0.16), transparent 36%),
    color-mix(in srgb, var(--character-flow-panel-strong) 82%, transparent);
}

.admin-studio-character-flow-reference-card.is-processing::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -18%;
  bottom: -18%;
  left: -52%;
  width: 48%;
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.16) 32%, rgba(255, 255, 255, 0.54) 50%, rgba(96, 165, 250, 0.2) 68%, transparent 100%);
  filter: blur(0.5px);
  transform: translateX(-35%) skewX(-10deg);
  animation: studio-card-sweep 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.admin-studio-character-flow-reference-card.is-processing::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(37, 99, 235, 0.12)),
    radial-gradient(circle at 50% 100%, rgba(96, 165, 250, 0.2), transparent 50%);
  pointer-events: none;
}

.admin-studio-character-flow-reference-card.is-processing img {
  filter: saturate(0.92) brightness(0.82);
  transform: scale(1.006);
}

.admin-studio-character-flow-reference-card.is-turnaround-card.is-processing .admin-studio-character-flow-reference-status {
  right: 50%;
  bottom: 50%;
  min-height: 46px;
  padding: 0 18px;
  font-size: 0.82rem;
  transform: translate(50%, 50%);
}

.admin-studio-character-flow-reference-status {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 32, 0.82);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 860;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(14px) saturate(130%);
}

.admin-studio-character-flow-reference-status.is-warning {
  background: rgba(120, 53, 15, 0.84);
  color: #fffbeb;
}

.admin-studio-character-flow-reference-status.is-source {
  right: 12px;
  bottom: 12px;
  background: rgba(17, 24, 39, 0.72);
  color: #ffffff;
}

.admin-studio-character-flow-reference-status.admin-studio-job-card-state {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  backdrop-filter: none;
}

.admin-studio-character-flow-reference-status.admin-studio-job-card-state .admin-studio-job-status {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(12, 18, 32, 0.84);
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
}

.admin-studio-character-flow-reference-status.admin-studio-job-card-state.is-warning .admin-studio-job-status,
.admin-studio-character-flow-reference-status.admin-studio-job-card-state.is-stale .admin-studio-job-status {
  --studio-job-accent: #f59e0b;
  --studio-job-bg: rgba(120, 53, 15, 0.86);
  --studio-job-color: #fffbeb;
}

@keyframes studio-card-sweep {
  0% {
    transform: translateX(-45%) skewX(-10deg);
    opacity: 0;
  }
  16% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(350%) skewX(-10deg);
    opacity: 0;
  }
}

@keyframes studio-card-processing-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(96, 165, 250, 0.2),
      0 22px 70px rgba(37, 99, 235, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, 0.44),
      0 26px 80px rgba(37, 99, 235, 0.3);
  }
}

.admin-studio-character-flow-reference-card img,
.admin-studio-character-flow-reference-card > strong {
  display: grid;
  width: 100%;
  height: 100%;
  max-height: 264px;
  min-height: 264px;
  place-items: center;
  border-radius: 25px;
  background: color-mix(in srgb, var(--character-flow-text) 8%, transparent);
  object-fit: cover;
  overflow: hidden;
}

.admin-studio-character-flow-reference-card img {
  display: block;
  min-height: 0;
}

.admin-studio-character-flow-reference-card.has-image > strong {
  min-height: 0;
}

.admin-studio-character-flow-reference-card.is-turnaround-card img {
  object-fit: contain;
  background: color-mix(in srgb, var(--character-flow-text) 7%, transparent);
}

.admin-studio-character-flow-reference-card.is-source-card img {
  object-fit: cover;
  object-position: center 24%;
  background: color-mix(in srgb, var(--character-flow-text) 7%, transparent);
}

.admin-studio-character-flow-reference-card > strong {
  padding: 24px;
  color: var(--character-flow-muted);
  font-size: 0.95rem;
  font-weight: 880;
  text-align: center;
}

.admin-studio-character-flow-reference-card small {
  display: -webkit-box;
  align-self: end;
  min-height: 0;
  padding: 0 18px 18px;
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.admin-studio-character-flow-season-outfits {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 2vw, 18px);
  border: 1px solid var(--character-flow-line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #7aa7ff 15%, transparent), transparent 38%),
    color-mix(in srgb, var(--character-flow-panel) 70%, transparent);
  color: var(--character-flow-text);
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(22px) saturate(130%);
}

html[data-theme="dark"] .admin-studio-character-flow-season-outfits {
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
}

.admin-studio-character-flow-season-outfits-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.admin-studio-character-flow-season-outfits-head span {
  color: color-mix(in srgb, #527dff 72%, var(--character-flow-muted));
  font-size: 0.72rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-flow-season-outfits-head strong {
  color: var(--character-flow-text);
  font-size: clamp(1rem, 1.7vw, 1.32rem);
  font-weight: 920;
  line-height: 1.05;
  text-align: right;
}

.admin-studio-character-flow-season-outfit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}

.admin-studio-character-flow-season-outfit-card {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 112px;
  padding: 10px 12px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 84%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 76%, transparent);
  overflow: hidden;
}

.admin-studio-character-flow-season-outfit-card.is-saving {
  border-color: color-mix(in srgb, #7aa7ff 72%, var(--character-flow-line));
  background:
    linear-gradient(105deg, transparent 0%, color-mix(in srgb, #7aa7ff 10%, transparent) 48%, transparent 100%),
    color-mix(in srgb, var(--character-flow-panel-strong) 84%, transparent);
}

.admin-studio-character-flow-season-outfit-thumb {
  display: grid;
  width: 84px;
  height: 92px;
  place-items: center;
  border-radius: 16px;
  background: color-mix(in srgb, var(--character-flow-text) 9%, transparent);
  color: var(--character-flow-muted);
  font-size: 0.9rem;
  font-weight: 920;
  overflow: hidden;
}

.admin-studio-character-flow-season-outfit-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-character-flow-season-outfit-thumb.has-image img {
  object-fit: cover;
}

.admin-studio-character-flow-season-outfit-card > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.admin-studio-character-flow-season-outfit-card small {
  color: var(--character-flow-muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-character-flow-season-outfit-card strong {
  overflow: hidden;
  color: var(--character-flow-text);
  font-size: 0.94rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-flow-season-outfit-card select {
  width: 100%;
  min-height: 38px;
  padding: 0 34px 0 12px;
  border: 1px solid color-mix(in srgb, var(--character-flow-line) 78%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--character-flow-panel) 72%, transparent);
  color: var(--character-flow-text);
  font-size: 0.78rem;
  font-weight: 840;
  outline: none;
}

.admin-studio-character-flow-season-outfit-card select:focus-visible {
  border-color: color-mix(in srgb, #7aa7ff 70%, var(--character-flow-line));
  box-shadow: 0 0 0 4px color-mix(in srgb, #7aa7ff 14%, transparent);
}

.admin-studio-character-flow-season-outfit-card em {
  display: -webkit-box;
  color: var(--character-flow-muted);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.22;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-character-flow-season-outfit-card > svg {
  color: color-mix(in srgb, #527dff 80%, var(--character-flow-text));
}

.admin-studio-character-flow-advanced {
  display: grid;
  gap: 12px;
}

.admin-studio-character-flow-advanced summary {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid var(--character-flow-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--character-flow-panel) 62%, transparent);
  color: var(--character-flow-muted);
  font-size: 0.76rem;
  font-weight: 880;
  cursor: pointer;
  list-style: none;
}

.admin-studio-character-flow-advanced summary::-webkit-details-marker {
  display: none;
}

.admin-studio-character-flow-advanced[open] summary {
  color: var(--character-flow-text);
}

.admin-studio-character-flow-detail-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-flow-detail-strip div,
.admin-studio-character-flow-season-links div,
.admin-studio-character-flow-record-panel > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--character-flow-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--character-flow-panel) 68%, transparent);
  backdrop-filter: blur(18px);
}

.admin-studio-character-flow-detail-strip strong,
.admin-studio-character-flow-season-links strong {
  color: var(--character-flow-text);
  font-size: 0.95rem;
  font-weight: 900;
}

.admin-studio-character-flow-detail-strip span,
.admin-studio-character-flow-season-links span,
.admin-studio-character-flow-season-links small,
.admin-studio-character-flow-record-panel p,
.admin-studio-character-flow-record-panel span {
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 760;
}

.admin-studio-character-flow-record-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-flow-record-panel p,
.admin-studio-character-flow-record-panel h2 {
  margin: 0;
}

.admin-studio-character-flow-record-panel p {
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-flow-record-panel h2 {
  margin-top: 2px;
  color: var(--character-flow-text);
  font-size: 1rem;
  font-weight: 920;
}

.admin-studio-character-flow-contract {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--character-flow-line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 64%, transparent);
  backdrop-filter: blur(20px);
}

.admin-studio-character-flow-contract p,
.admin-studio-character-flow-contract h2 {
  margin: 0;
}

.admin-studio-character-flow-contract p {
  color: var(--character-flow-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-flow-contract h2 {
  color: var(--character-flow-text);
  font-size: 1.04rem;
  font-weight: 920;
}

.admin-studio-character-flow-contract > strong {
  color: var(--character-flow-text);
  font-size: 0.9rem;
  font-weight: 860;
}

.admin-studio-character-flow-contract-status,
.admin-studio-character-flow-season-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-character-flow-contract-status span {
  padding: 5px 9px;
  border: 1px solid var(--character-flow-line);
  border-radius: 999px;
  color: var(--character-flow-muted);
  font-size: 0.68rem;
  font-weight: 840;
  text-transform: capitalize;
}

.admin-studio-character-flow-contract-list {
  display: grid;
  gap: 5px;
}

.admin-studio-character-flow-contract-list span {
  color: color-mix(in srgb, #527dff 72%, var(--character-flow-muted));
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-character-flow-contract-list.is-warning span {
  color: color-mix(in srgb, #f59e0b 70%, var(--character-flow-muted));
}

.admin-studio-character-flow-contract-list p {
  color: var(--character-flow-text);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.4;
  text-transform: none;
}

.admin-studio-character-flow-production-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--character-flow-line);
  border-radius: 26px;
  background: color-mix(in srgb, var(--character-flow-panel-strong) 58%, transparent);
  backdrop-filter: blur(20px);
}

.admin-studio-character-flow-production-panel header {
  display: grid;
  gap: 4px;
}

.admin-studio-character-flow-production-panel p,
.admin-studio-character-flow-production-panel h2 {
  margin: 0;
}

.admin-studio-character-flow-production-panel p {
  color: var(--character-flow-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-studio-character-flow-production-panel h2 {
  color: var(--character-flow-text);
  font-size: 1.08rem;
  font-weight: 920;
}

.admin-studio-character-flow-production-panel header span {
  color: var(--character-flow-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.admin-studio-character-flow-production-panel > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-flow-production-panel button {
  display: grid;
  gap: 4px;
  min-height: 108px;
  padding: 14px;
  border: 1px solid var(--character-flow-line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--character-flow-panel) 68%, transparent);
  color: var(--character-flow-text);
  text-align: left;
  cursor: pointer;
}

.admin-studio-character-flow-production-panel button:disabled {
  cursor: default;
  opacity: 0.62;
}

.admin-studio-character-flow-production-panel button:not(:disabled):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, #7aa7ff 68%, var(--character-flow-line));
  outline: none;
}

.admin-studio-character-flow-production-panel button strong {
  font-size: 0.88rem;
  font-weight: 920;
}

.admin-studio-character-flow-production-panel button span,
.admin-studio-character-flow-production-panel button small {
  color: var(--character-flow-muted);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.28;
}

@media (max-width: 860px) {
  .admin-studio-character-flow-detail {
    padding: 0;
  }

  .admin-studio-character-flow-detail-hero,
  .admin-studio-character-flow-detail-grid,
  .admin-studio-character-flow-season-outfit-list,
  .admin-studio-character-flow-detail-strip,
  .admin-studio-character-flow-record-panel,
  .admin-studio-character-flow-production-panel > div {
    grid-template-columns: 1fr;
  }

  .admin-studio-character-flow-detail-actions {
    justify-content: flex-start;
  }

  .admin-studio-character-flow-reference-card {
    min-height: 238px;
  }
}

/* Studio dark mode is a production workspace: black room, graphite surfaces. */
html[data-theme="dark"] body:has(.admin-studio-page) {
  --foreground: #f5f7fb;
  --muted-foreground: #a8b0bd;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --surface: #15161b;
  --surface-soft: #101115;
  --surface-muted: #1d2027;
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --studio-room-bg: #000000;
  --studio-room-glow-blue: transparent;
  --studio-room-glow-gold: transparent;
  --studio-admin-text: #f5f7fb;
  --studio-admin-muted: #a8b0bd;
  --studio-admin-faint: #808897;
  --studio-admin-surface: #15161b;
  --studio-admin-surface-strong: #1b1d23;
  --studio-admin-surface-soft: #101115;
  --studio-admin-card: #17191f;
  --studio-admin-card-soft: #111318;
  --studio-admin-control: #1d2027;
  --studio-admin-border: rgba(255, 255, 255, 0.12);
  --studio-admin-border-soft: rgba(255, 255, 255, 0.08);
  --studio-admin-hover-bg: #20242c;
  --studio-admin-active-bg: #252a33;
  --studio-admin-active-text: #ffffff;
  --studio-admin-chip-bg: #20242c;
  --studio-admin-chip-text: #e7ebf2;
  --studio-admin-chip-border: rgba(255, 255, 255, 0.1);
  --studio-admin-sidebar-bg: #111217;
  --studio-admin-sidebar-text: #f5f7fb;
  --studio-admin-sidebar-muted: #a8b0bd;
  --studio-admin-sidebar-subtle: #1b1d23;
  --studio-admin-sidebar-border: rgba(255, 255, 255, 0.08);
  --studio-admin-sidebar-active-bg: #2a2e38;
  --studio-admin-sidebar-active-text: #ffffff;
  --studio-admin-sidebar-active-hover-bg: #303642;
  --studio-admin-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --studio-admin-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
  background: #000000 !important;
}

html[data-theme="dark"] body:has(.admin-studio-page) :is(.site-main-shell, .site-main, .admin-studio-page) {
  background: #000000 !important;
  color: var(--studio-admin-text);
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console,
html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #15161b 0%, #111217 52%, #0c0d10 100%) !important;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
  color: rgba(226, 232, 240, 0.82);
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.065);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  background: #2b303a;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) :is(
  .admin-studio-hero,
  .admin-studio-page-header,
  .admin-studio-builder-header,
  .admin-studio-generation-card,
  .admin-studio-guest-console,
  .admin-studio-mode-nav,
  .admin-studio-production-rail,
  .admin-studio-source-builder,
  .admin-studio-character-upload,
  .admin-studio-character-url-form,
  .admin-studio-character-create-form,
  .admin-studio-character-create-preview,
  .admin-studio-character-initial-sheet,
  .admin-studio-character-season-panel,
  .admin-studio-character-reference-panel,
  .studio-minis-command-center,
  .studio-minis-builder,
  .studio-minis-daily-queue,
  .studio-minis-output,
  .studio-minis-panel,
  .studio-minis-control-room,
  .studio-minis-queue-panel,
  .studio-minis-roster-panel,
  .admin-storyboard-hero,
  .admin-storyboard-panel,
  .admin-story-bible-hero,
  .admin-story-bible-panel,
  .admin-studio-flow-project-card,
  .admin-studio-flow-launch-card,
  .admin-studio-flow-season-card,
  .admin-studio-flow-character-card,
  .admin-studio-flow-tool-card,
  .admin-studio-flow-info-card,
  .admin-studio-create-preview-resume,
  .admin-studio-create-settings-panel,
  .admin-studio-create-review-panel,
  .admin-studio-intake-issue-card,
  .admin-studio-season-bible-card,
  .admin-studio-episode-prep-card,
  .admin-studio-character-prep-grid article
) {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #15161b !important;
  color: #f5f7fb;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.admin-studio-page) :is(
  .admin-studio-stats div,
  .admin-studio-filter-chip,
  .admin-studio-pipeline-step-chip,
  .admin-studio-production-totals span,
  .admin-studio-production-season-list a,
  .admin-studio-production-episode-list a,
  .admin-studio-production-source div,
  .admin-studio-production-rulebook,
  .admin-studio-lyrics-panel,
  .admin-studio-lyrics-copy-pack,
  .admin-studio-production-board-toolbar,
  .admin-studio-production-shot,
  .admin-studio-production-scene,
  .admin-studio-character-list a,
  .admin-studio-character-filters a,
  .admin-studio-character-preview,
  .admin-studio-character-asset-card,
  .admin-studio-character-archive-details,
  .admin-studio-character-advanced,
  .admin-studio-character-settings,
  .admin-studio-character-check,
  .studio-minis-board-card,
  .studio-minis-flow-card,
  .studio-minis-tool-card,
  .studio-minis-production-list article.studio-minis-production-card
) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #111318 !important;
  color: #f5f7fb;
}

html[data-theme="dark"] body:has(.studio-standalone-shell) {
  background: #000000 !important;
}

html[data-theme="dark"] .studio-standalone-shell {
  --surface: #15161b;
  --surface-soft: #101115;
  --surface-muted: #1d2027;
  --foreground: #f5f7fb;
  --muted-foreground: #a8b0bd;
  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.08);
  background: #000000 !important;
  color: #f5f7fb;
}

html[data-theme="dark"] .studio-standalone-main {
  background: #000000 !important;
}

html[data-theme="dark"] .studio-global-brand,
html[data-theme="dark"] .studio-global-nav,
html[data-theme="dark"] .studio-global-actions {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(20, 21, 26, 0.78);
  color: #f5f7fb;
  box-shadow: none;
}

html[data-theme="dark"] .studio-global-brand-mark,
html[data-theme="dark"] .studio-global-link,
html[data-theme="dark"] .studio-global-theme {
  color: rgba(245, 247, 251, 0.86);
}

html[data-theme="dark"] .studio-global-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] .studio-global-link.is-active {
  background: #f5f7fb;
  color: #050505;
  box-shadow: none;
}

html[data-theme="dark"] .studio-global-rescue-link.button {
  border-color: rgba(255, 255, 255, 0.12);
  background: #22252d;
  color: #f5f7fb;
}

html[data-theme="dark"] :is(
  .studio-hero-copy,
  .studio-create-console,
  .studio-create-inspiration,
  .studio-create-hero,
  .studio-create-start,
  .studio-hall-hero,
  .studio-fame-hero-copy,
  .studio-fame-stats,
  .studio-fame-feature-copy,
  .studio-fame-entry-card,
  .studio-fame-workflow-card,
  .studio-section,
  .studio-safety-note,
  .studio-pass-form,
  .studio-detail-copy,
  .studio-lounge-copy,
  .studio-lounge-side
) {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: #15161b !important;
  color: #f5f7fb;
  box-shadow: none;
}

/* Mini edit workspace follows the active theme: light canvas in light mode, black review room in dark mode. */
body:has(.studio-minis-page.is-mini-flow-workspace) {
  color-scheme: light;
  --studio-minis-canvas: #f6f4ed;
  --studio-minis-surface: #fbfaf6;
  --studio-minis-stage: #f1eee5;
  background: var(--studio-minis-canvas) !important;
}

body:has(.studio-minis-page.is-mini-flow-workspace) :is(.site-main-shell, .site-main) {
  background: var(--studio-minis-canvas) !important;
}

.studio-minis-page.is-mini-flow-workspace {
  background: var(--studio-minis-canvas) !important;
  color: var(--foreground);
}

.studio-minis-flow-topbar {
  border-bottom: 0;
  background: var(--studio-minis-canvas);
  color: #111827;
  backdrop-filter: blur(18px) saturate(140%);
}

.studio-minis-flow-title strong,
.studio-minis-flow-icon-button,
.studio-minis-flow-pill-button,
.studio-minis-flow-history-item,
.studio-minis-flow-history-copy strong {
  color: #111827;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-title-form input {
  border-color: rgba(17, 24, 39, 0.12);
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-title-form input:focus {
  border-color: rgba(17, 24, 39, 0.26);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-title-menu:is(:hover, :focus-visible),
.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-title-save:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-title-text:is(:hover, :focus-visible) {
  color: #111827;
}

.studio-minis-flow-icon-button:is(:hover, :focus-visible),
.studio-minis-flow-pill-button:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.08);
}

.studio-minis-flow-pill-button {
  background: rgba(17, 24, 39, 0.07);
}

.studio-minis-flow-pill-button.is-done {
  background: #111827;
  color: #ffffff;
}

.studio-minis-flow-workspace {
  background: transparent;
  color: #111827;
}

.studio-minis-flow-stage-frame {
  background: var(--studio-minis-stage);
  box-shadow: none;
}

.studio-minis-flow-stage-frame.is-video,
video.studio-minis-flow-stage-media {
  background: var(--studio-minis-stage);
}

.studio-minis-flow-stage-media {
  background: var(--studio-minis-stage);
  box-shadow: 0 30px 70px rgba(17, 24, 39, 0.18);
}

.studio-minis-flow-empty-stage {
  border-color: rgba(17, 24, 39, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: #6b7280;
}

.studio-minis-flow-history-thumb {
  border-color: rgba(17, 24, 39, 0.08);
  background: rgba(17, 24, 39, 0.05);
}

.studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  border-color: #111827;
}

.studio-minis-flow-history-thumb b,
.studio-minis-flow-history-copy small,
.studio-minis-flow-history-item.is-selected .studio-minis-flow-history-copy small {
  color: #6b7280;
}

.studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  border-color: rgba(17, 24, 39, 0.42);
}

html[data-theme="dark"] body:has(.studio-minis-page.is-mini-flow-workspace) {
  color-scheme: dark;
  background: #000000 !important;
}

html[data-theme="dark"] body:has(.studio-minis-page.is-mini-flow-workspace) :is(.site-main-shell, .site-main),
html[data-theme="dark"] .studio-minis-page.is-mini-flow-workspace {
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-flow-topbar {
  border-bottom-color: transparent;
  background: #000000;
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-flow-title strong,
html[data-theme="dark"] .studio-minis-flow-icon-button,
html[data-theme="dark"] .studio-minis-flow-pill-button,
html[data-theme="dark"] .studio-minis-flow-history-item,
html[data-theme="dark"] .studio-minis-flow-history-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-flow-icon-button:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-flow-pill-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .studio-minis-flow-pill-button {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .studio-minis-flow-pill-button.is-done {
  background: #ffffff;
  color: #050505;
}

.studio-minis-flow-icon-button.is-active {
  background: rgba(17, 24, 39, 0.1);
}

.studio-minis-post-kit-popover {
  position: fixed;
  top: 60px;
  right: 18px;
  z-index: 74;
  display: grid;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100svh - 84px);
  overflow: auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(20px) saturate(140%);
}

.studio-minis-post-kit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.studio-minis-post-kit-head div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.studio-minis-post-kit-head span {
  color: #1f5fae;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  text-transform: uppercase;
}

.studio-minis-post-kit-head strong {
  overflow: hidden;
  color: #111827;
  font-size: 0.92rem;
  font-weight: 930;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-post-kit-head button {
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: #4b5563;
  cursor: pointer;
}

.studio-minis-post-kit-head button:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.1);
  color: #111827;
  outline: none;
}

.studio-minis-post-kit-items {
  display: grid;
  gap: 9px;
}

.studio-minis-post-kit-items article {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.78);
}

.studio-minis-post-kit-items article > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-post-kit-items article > div > span {
  display: inline-flex;
  min-width: 0;
  gap: 7px;
  align-items: center;
  overflow: hidden;
  color: #374151;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-post-kit-items article > div > span svg {
  flex: 0 0 auto;
  color: #1f5fae;
}

.studio-minis-post-kit-items p {
  display: -webkit-box;
  max-height: 6.4em;
  overflow: hidden;
  margin: 0;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.42;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.studio-minis-post-kit-copy {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 9px;
  border: 1px solid rgba(31, 95, 174, 0.16);
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.84);
  color: #1f5fae;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
}

.studio-minis-post-kit-copy:is(:hover, :focus-visible) {
  border-color: rgba(31, 95, 174, 0.26);
  background: rgba(219, 234, 254, 0.94);
  outline: none;
}

.studio-minis-post-kit-copy:disabled {
  cursor: default;
  opacity: 0.48;
}

.studio-minis-post-kit-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.studio-minis-prompt-pack-popover {
  position: fixed;
  top: 60px;
  right: 18px;
  z-index: 74;
  display: grid;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100svh - 84px);
  overflow: auto;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(217, 119, 6, 0.16);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 248, 230, 0.96), rgba(255, 255, 255, 0.94)),
    #fffaf0;
  color: #111827;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.2);
  backdrop-filter: blur(20px) saturate(140%);
}

.studio-minis-prompt-pack-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.studio-minis-prompt-pack-status span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(217, 119, 6, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #92400e;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.studio-minis-prompt-pack-reference-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(14, 165, 233, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.72), rgba(255, 255, 255, 0.76)),
    rgba(240, 249, 255, 0.72);
}

.studio-minis-prompt-pack-reference-row a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 11px;
  border: 1px solid rgba(14, 165, 233, 0.24);
  border-radius: 999px;
  background: rgba(224, 242, 254, 0.86);
  color: #0369a1;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.studio-minis-prompt-pack-reference-row a:is(:hover, :focus-visible) {
  border-color: rgba(14, 165, 233, 0.36);
  background: rgba(186, 230, 253, 0.92);
  outline: none;
}

.studio-minis-prompt-pack-reference-row span {
  overflow: hidden;
  color: #075985;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-prompt-pack-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(217, 119, 6, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 246, 218, 0.84), rgba(255, 255, 255, 0.72)),
    rgba(254, 243, 199, 0.62);
}

.studio-minis-prompt-pack-upload-row div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.studio-minis-prompt-pack-upload-row strong {
  overflow: hidden;
  color: #111827;
  font-size: 0.86rem;
  font-weight: 930;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-prompt-pack-upload-row span {
  overflow: hidden;
  color: #92400e;
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-prompt-pack-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.studio-minis-prompt-pack-items article {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
}

.studio-minis-prompt-pack-items article:first-child {
  grid-column: 1 / -1;
}

.studio-minis-prompt-pack-items article > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.studio-minis-prompt-pack-items article > div > span {
  overflow: hidden;
  color: #92400e;
  font-size: 0.7rem;
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.studio-minis-prompt-pack-items strong {
  overflow: hidden;
  color: #111827;
  font-size: 0.84rem;
  font-weight: 930;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-minis-prompt-pack-items textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.86);
  color: #374151;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.42;
  outline: none;
}

.studio-minis-prompt-pack-items textarea:focus {
  border-color: rgba(217, 119, 6, 0.3);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1);
}

.studio-minis-prompt-pack-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 2px;
}

.studio-minis-prompt-pack-upload {
  appearance: none;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(217, 119, 6, 0.24);
  border-radius: 999px;
  background: rgba(254, 243, 199, 0.86);
  color: #92400e;
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 880;
  line-height: 1;
  white-space: nowrap;
}

.studio-minis-prompt-pack-upload:is(:hover, :focus-visible) {
  border-color: rgba(217, 119, 6, 0.36);
  background: rgba(253, 230, 138, 0.92);
  outline: none;
}

html[data-theme="dark"] .studio-minis-flow-workspace {
  background: #000000;
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-flow-stage-frame {
  background: #050505;
  box-shadow: none;
}

html[data-theme="dark"] .studio-minis-flow-stage-frame.is-video,
html[data-theme="dark"] video.studio-minis-flow-stage-media {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 32%),
    #050505;
}

html[data-theme="dark"] .studio-minis-flow-stage-media {
  background: #050505;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38);
}

html[data-theme="dark"] .studio-minis-flow-empty-stage {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .studio-minis-flow-history-thumb {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  border-color: #ffffff;
}

html[data-theme="dark"] .studio-minis-flow-history-thumb b {
  color: rgba(255, 255, 255, 0.8);
}

html[data-theme="dark"] .studio-minis-flow-history-copy small {
  color: rgba(255, 255, 255, 0.5);
}

html[data-theme="dark"] .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-copy small {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  border-color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .studio-minis-flow-icon-button.is-active {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .studio-minis-post-kit-popover {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 20, 0.94);
  color: #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .studio-minis-prompt-pack-popover {
  border-color: rgba(251, 191, 36, 0.16);
  background:
    linear-gradient(135deg, rgba(32, 26, 16, 0.95), rgba(18, 18, 20, 0.94)),
    #141414;
  color: #ffffff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .studio-minis-post-kit-head strong {
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-post-kit-head span,
html[data-theme="dark"] .studio-minis-post-kit-items article > div > span svg {
  color: #93c5fd;
}

html[data-theme="dark"] .studio-minis-post-kit-head button {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .studio-minis-post-kit-head button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-post-kit-items article {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .studio-minis-post-kit-items article > div > span {
  color: rgba(255, 255, 255, 0.84);
}

html[data-theme="dark"] .studio-minis-post-kit-items p {
  color: rgba(255, 255, 255, 0.66);
}

html[data-theme="dark"] .studio-minis-post-kit-copy {
  border-color: rgba(147, 197, 253, 0.22);
  background: rgba(147, 197, 253, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .studio-minis-post-kit-copy:is(:hover, :focus-visible) {
  border-color: rgba(147, 197, 253, 0.34);
  background: rgba(147, 197, 253, 0.18);
}

html[data-theme="dark"] .studio-minis-prompt-pack-status span {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.1);
  color: #fcd34d;
}

html[data-theme="dark"] .studio-minis-prompt-pack-reference-row {
  border-color: rgba(125, 211, 252, 0.16);
  background:
    linear-gradient(135deg, rgba(12, 74, 110, 0.34), rgba(255, 255, 255, 0.035)),
    rgba(14, 165, 233, 0.08);
}

html[data-theme="dark"] .studio-minis-prompt-pack-reference-row a {
  border-color: rgba(125, 211, 252, 0.24);
  background: rgba(14, 165, 233, 0.12);
  color: #bae6fd;
}

html[data-theme="dark"] .studio-minis-prompt-pack-reference-row a:is(:hover, :focus-visible) {
  border-color: rgba(125, 211, 252, 0.38);
  background: rgba(14, 165, 233, 0.18);
}

html[data-theme="dark"] .studio-minis-prompt-pack-reference-row span {
  color: #7dd3fc;
}

html[data-theme="dark"] .studio-minis-prompt-pack-upload-row {
  border-color: rgba(251, 191, 36, 0.18);
  background:
    linear-gradient(135deg, rgba(64, 47, 18, 0.58), rgba(255, 255, 255, 0.035)),
    rgba(251, 191, 36, 0.08);
}

html[data-theme="dark"] .studio-minis-prompt-pack-upload-row strong {
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-prompt-pack-upload-row span {
  color: #fcd34d;
}

html[data-theme="dark"] .studio-minis-prompt-pack-items article {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .studio-minis-prompt-pack-items article > div > span {
  color: #fcd34d;
}

html[data-theme="dark"] .studio-minis-prompt-pack-items strong {
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-prompt-pack-items textarea {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .studio-minis-prompt-pack-upload {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.12);
  color: #fcd34d;
}

html[data-theme="dark"] .studio-minis-prompt-pack-upload:is(:hover, :focus-visible) {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.18);
}

html[data-theme="dark"] .studio-minis-room-back-button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] .studio-minis-room-back-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: #f5f7fb;
  color: #050505;
}

.studio-minis-room-media .studio-minis-media-card,
.studio-minis-room-media .studio-minis-media-card.is-image-loading,
.studio-minis-room-media .studio-minis-media-card.is-video-loading,
.studio-minis-room-media .studio-minis-media-card.is-image-stuck,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck,
.studio-minis-room-media .studio-minis-new-mini-card {
  border: 0;
}

.studio-minis-room-media .studio-minis-media-card {
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.11);
}

.studio-minis-room-media .studio-minis-media-card.is-image-loading,
.studio-minis-room-media .studio-minis-media-card.is-video-loading,
.studio-minis-room-media .studio-minis-media-card.is-image-stuck,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.82), transparent 38%),
    linear-gradient(145deg, rgba(255, 248, 230, 0.92), rgba(238, 247, 255, 0.88)),
    #f8fafc;
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.studio-minis-room-media .studio-minis-media-loading-visual {
  background:
    radial-gradient(circle at 50% 30%, rgba(31, 95, 174, 0.12), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.5), rgba(255, 246, 218, 0.54), rgba(238, 247, 255, 0.48));
}

.studio-minis-room-media .studio-minis-media-loading-visual img {
  opacity: 0.34;
  filter: saturate(0.92) blur(1.5px);
}

.studio-minis-room-media .studio-minis-media-loading-visual::before {
  background: linear-gradient(100deg, transparent 10%, rgba(255, 255, 255, 0.44) 42%, transparent 74%);
}

.studio-minis-room-media .studio-minis-media-card.is-image-stuck .studio-minis-media-loading-visual::before,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck .studio-minis-media-loading-visual::before {
  opacity: 0.5;
}

.studio-minis-room-media .studio-minis-media-card.is-image-stuck .studio-minis-media-loading-visual i,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck .studio-minis-media-loading-visual i {
  background: rgba(255, 255, 255, 0.94);
  color: #92400e;
  box-shadow: 0 12px 28px rgba(146, 64, 14, 0.12);
}

.studio-minis-room-media .studio-minis-media-card.is-image-loading::after,
.studio-minis-room-media .studio-minis-media-card.is-video-loading::after,
.studio-minis-room-media .studio-minis-media-card.is-image-stuck::after,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck::after {
  background: linear-gradient(180deg, transparent 18%, rgba(255, 255, 255, 0.78));
}

.studio-minis-room-media .studio-minis-media-card.is-image-loading .studio-minis-media-title b,
.studio-minis-room-media .studio-minis-media-card.is-video-loading .studio-minis-media-title b,
.studio-minis-room-media .studio-minis-media-card.is-image-stuck .studio-minis-media-title b,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck .studio-minis-media-title b {
  color: #111827;
}

.studio-minis-room-media .studio-minis-media-card.is-image-loading .studio-minis-media-title small,
.studio-minis-room-media .studio-minis-media-card.is-video-loading .studio-minis-media-title small,
.studio-minis-room-media .studio-minis-media-card.is-image-stuck .studio-minis-media-title small,
.studio-minis-room-media .studio-minis-media-card.is-video-stuck .studio-minis-media-title small {
  border-color: rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.68);
  color: #6b7280;
}

.studio-minis-room-card.has-media.is-working,
.studio-minis-room-card.has-media.is-failed {
  border-color: transparent;
  background: transparent;
  color: #111827;
  box-shadow: none;
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-image,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-image {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.86), transparent 38%),
    linear-gradient(145deg, rgba(255, 248, 230, 0.94), rgba(238, 247, 255, 0.9)),
    #f8fafc;
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-image::after,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-image::after {
  background: linear-gradient(180deg, transparent 18%, rgba(255, 255, 255, 0.82));
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-image img,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-image img {
  opacity: 0.42;
  filter: saturate(0.9) blur(1.2px);
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-overlay strong,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-overlay strong {
  color: #111827;
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-overlay small,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-overlay small {
  color: #6b7280;
}

.studio-minis-room-card.has-media.is-working .studio-minis-room-metric,
.studio-minis-room-card.has-media.is-failed .studio-minis-room-metric {
  border-color: rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.72);
  color: #374151;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-list {
  gap: 14px;
  justify-items: center;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item,
.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item.is-selected {
  grid-template-columns: 1fr;
  width: auto;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-thumb,
.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb,
.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb,
html[data-theme="dark"] .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-thumb,
html[data-theme="dark"] .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb,
html[data-theme="dark"] .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-thumb {
  width: 82px;
  border-radius: 12px;
  opacity: 0.62;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item.is-selected .studio-minis-flow-history-thumb {
  width: 104px;
  border-radius: 16px;
  opacity: 1;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-item:is(:hover, :focus-visible) .studio-minis-flow-history-thumb {
  opacity: 0.92;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-history-copy {
  display: none;
}

body:has(.studio-minis-page.is-mini-flow-workspace) {
  overflow: hidden;
}

.studio-minis-page.is-mini-flow-workspace {
  height: 100svh;
  padding: 0;
  overflow: hidden;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-console {
  height: 100svh;
  min-height: 0;
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-workspace,
.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-workspace.is-history-hidden {
  height: 100svh;
  min-height: 0;
  padding-top: 60px;
  padding-bottom: clamp(214px, 24svh, 246px);
}

.studio-minis-page.is-mini-flow-workspace .studio-minis-flow-stage-frame:is(
  .is-video,
  .is-video-loading,
  .is-video-stuck
) {
  width: auto;
  max-width: min(34vw, 360px, calc(100vw - 430px));
  height: clamp(300px, min(48svh, calc(100svh - 404px)), 500px);
  aspect-ratio: 9 / 16;
}

@media (max-width: 700px) {
  .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-workspace,
  .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-workspace.is-history-hidden {
    padding: 58px 10px 196px;
  }

  .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-stage-frame:is(
    .is-video,
    .is-video-loading,
    .is-video-stuck
  ) {
    max-width: 68vw;
    height: clamp(230px, min(42svh, calc(100svh - 330px)), 380px);
  }

  .studio-minis-post-kit-popover,
  .studio-minis-prompt-pack-popover {
    top: 64px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100svh - 88px);
    border-radius: 18px;
  }

  .studio-minis-post-kit-items article,
  .studio-minis-prompt-pack-items article {
    padding: 10px;
  }

  .studio-minis-post-kit-items article > div,
  .studio-minis-prompt-pack-items article > div {
    align-items: flex-start;
  }

  .studio-minis-prompt-pack-items {
    grid-template-columns: 1fr;
  }

  .studio-minis-post-kit-copy {
    min-height: 27px;
    padding: 6px 8px;
  }
}

@media (max-width: 520px) {
  .studio-minis-flow-topbar-actions {
    gap: 4px;
  }

  .studio-minis-flow-topbar-actions > .studio-minis-flow-pill-button:not(.is-done) {
    display: none;
  }

  .studio-minis-flow-title strong {
    max-width: 30vw;
  }
}

html[data-theme="dark"] body:has(.studio-minis-page:not(.is-mini-flow-workspace)) {
  --studio-minis-canvas: #050506;
  background: var(--studio-minis-canvas) !important;
}

html[data-theme="dark"] body:has(.studio-minis-page:not(.is-mini-flow-workspace)) :is(
  .site-main-shell,
  .site-main,
  .studio-minis-page
) {
  background: var(--studio-minis-canvas) !important;
}

html[data-theme="dark"] body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console {
  border-right-color: transparent !important;
  background: var(--studio-minis-canvas) !important;
  box-shadow: none !important;
}

/* Studio universe home uses the same workspace canvas as Minis. */
body:has(.admin-studio-universe-home) {
  --studio-workspace-canvas: #f6f4ed;
  --studio-workspace-surface: #fbfaf6;
  --studio-workspace-border: rgba(17, 24, 39, 0.08);
  --studio-workspace-text: rgba(17, 24, 39, 0.86);
  --studio-workspace-muted: rgba(17, 24, 39, 0.52);
  --studio-workspace-gutter: clamp(14px, 2.3vw, 28px);
  background: var(--studio-workspace-canvas) !important;
}

body:has(.admin-studio-universe-home) :is(.site-main-shell, .site-main, .admin-studio-universe-home) {
  background: var(--studio-workspace-canvas) !important;
}

body:has(.admin-studio-universe-home) .site-main {
  padding-top: 0;
}

body:has(.admin-studio-universe-home) .admin-studio-page.admin-studio-universe-home {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 64px var(--studio-workspace-gutter) 320px;
}

.admin-studio-topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  align-items: center;
}

.admin-studio-topbar:is(.admin-studio-workspace-topbar, .admin-studio-character-flow-topbar, .studio-minis-room-toolbar) {
  z-index: 200;
  grid-template-columns: minmax(94px, 220px) minmax(320px, 580px) minmax(180px, 1fr);
  gap: 12px;
  min-height: 64px;
  padding: 10px max(var(--admin-studio-topbar-gutter, 22px), 22px);
  padding-right: max(var(--admin-studio-topbar-gutter, 22px), 92px);
  border: 0;
  background: var(--admin-studio-topbar-canvas, #f6f4ed);
  color: var(--admin-studio-topbar-text, #111827);
  backdrop-filter: blur(18px) saturate(140%);
}

.admin-studio-workspace-topbar {
  --admin-studio-topbar-canvas: var(--studio-workspace-canvas);
  --admin-studio-topbar-gutter: var(--studio-workspace-gutter);
  --admin-studio-topbar-muted: var(--studio-workspace-muted);
  --admin-studio-topbar-text: var(--studio-workspace-text);
}

.admin-studio-workspace-heading {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.admin-studio-workspace-heading strong {
  overflow: hidden;
  max-width: 110px;
  color: var(--studio-workspace-text);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.admin-studio-workspace-back,
.admin-studio-workspace-action {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--studio-workspace-text);
  text-decoration: none;
  box-shadow: none;
}

body:has(.admin-studio-page) .admin-studio-workspace-back {
  margin-right: -6px;
  transform: translateX(-6px);
}

body:has(.studio-minis-page) .studio-minis-flow-topbar > .studio-minis-flow-icon-button.is-back,
body:has(.admin-studio-page) .studio-minis-flow-topbar > .studio-minis-flow-icon-button.is-back,
body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .studio-minis-room-back-button,
body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-back {
  margin-right: -6px;
  transform: translateX(-6px);
}

.admin-studio-workspace-back:is(:hover, :focus-visible),
.admin-studio-workspace-action:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  outline: none;
}

.admin-studio-workspace-search {
  display: flex;
  width: min(100%, 580px);
  min-height: 40px;
  justify-self: center;
  align-items: center;
  gap: 6px;
  padding: 4px 5px 4px 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.075), rgba(17, 24, 39, 0.045)),
    rgba(245, 241, 232, 0.34);
  color: #6b7280;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(15, 23, 42, 0.045);
  backdrop-filter: blur(18px);
}

.admin-studio-workspace-search input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--studio-workspace-text) !important;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  outline: none;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--studio-workspace-text);
}

.admin-studio-workspace-search input::placeholder {
  color: var(--studio-workspace-muted);
  opacity: 1;
}

.admin-studio-workspace-search.is-static {
  justify-content: center;
  color: var(--studio-workspace-muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0;
}

.admin-studio-direction-library-page {
  padding-bottom: 120px;
}

.admin-studio-direction-library-hero {
  display: grid;
  gap: 10px;
  max-width: 760px;
  padding: 18px 0 4px;
}

.admin-studio-direction-library-hero span {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-direction-library-hero h1 {
  margin: 0;
  color: var(--studio-workspace-text);
  font-size: clamp(2.1rem, 4vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.admin-studio-direction-library-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--studio-workspace-muted);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.45;
}

.admin-studio-backgrounds-page {
  padding-bottom: 120px;
}

.admin-studio-background-create {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.admin-studio-background-create header {
  display: grid;
  gap: 4px;
}

.admin-studio-background-create header span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-background-create header strong {
  color: inherit;
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  line-height: 1.05;
}

.admin-studio-background-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-background-create label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-background-create label small {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-background-create :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.84);
  color: #111827;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 820;
  outline: none;
  box-shadow: none;
}

.admin-studio-background-season-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-background-season-picker label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.055);
  color: #374151;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-studio-background-season-picker input {
  width: 14px;
  min-height: auto;
  accent-color: #2563eb;
}

.admin-studio-background-upload-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 240px) auto;
  gap: 10px;
  align-items: end;
}

.admin-studio-background-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.admin-studio-background-file span,
.admin-studio-background-upload-row button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 950;
}

.admin-studio-background-file span {
  border: 1px dashed rgba(17, 24, 39, 0.2);
  background: rgba(17, 24, 39, 0.045);
  color: #374151;
}

.admin-studio-background-upload-row button {
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #111827;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

.admin-studio-background-pack-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-background-pack-strip a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: #374151;
  font-size: 0.78rem;
  font-weight: 950;
  text-decoration: none;
}

.admin-studio-background-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-background-overview article {
  display: grid;
  gap: 3px;
  min-height: 88px;
  align-content: center;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.6);
  color: #111827;
  box-shadow: 0 14px 42px rgba(15, 23, 42, 0.06);
}

.admin-studio-background-overview article.is-working {
  border-color: rgba(37, 99, 235, 0.2);
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.7));
}

.admin-studio-background-overview article.is-warning {
  border-color: rgba(245, 158, 11, 0.24);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.7));
}

.admin-studio-background-overview article.is-muted {
  border-color: rgba(148, 163, 184, 0.2);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.7));
}

.admin-studio-background-overview strong {
  color: inherit;
  font-size: 1.85rem;
  font-weight: 950;
  line-height: 0.95;
}

.admin-studio-background-overview span {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 900;
}

.admin-studio-background-season-locks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-studio-background-season-locks article {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(239, 246, 255, 0.48));
  color: #111827;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
}

.admin-studio-background-season-locks article.is-ready {
  border-color: rgba(5, 150, 105, 0.18);
  background: linear-gradient(135deg, rgba(236, 253, 245, 0.82), rgba(255, 255, 255, 0.58));
}

.admin-studio-background-season-locks header {
  display: grid;
  gap: 4px;
}

.admin-studio-background-season-locks header span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-background-season-locks header strong {
  color: inherit;
  font-size: 1.6rem;
  font-weight: 950;
  line-height: 0.95;
}

.admin-studio-background-season-locks header small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1.2;
}

.admin-studio-background-season-lock-metrics,
.admin-studio-background-season-lock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-background-season-lock-metrics i {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.64);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 920;
  line-height: 1;
}

.admin-studio-background-season-lock-metrics i.is-working {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.admin-studio-background-season-lock-metrics i.is-muted {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
}

.admin-studio-background-season-lock-metrics i.is-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
}

.admin-studio-background-season-lock-actions {
  align-items: center;
}

.admin-studio-background-season-lock-actions a,
.admin-studio-background-season-lock-actions button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 24, 39, 0.72);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 930;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.admin-studio-background-season-lock-actions button {
  background: #111827;
  color: #ffffff;
}

.admin-studio-background-season-lock-actions button span {
  min-width: 22px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 0.65rem;
}

.admin-studio-background-season-lock-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.admin-studio-background-batch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.62);
  color: #111827;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
}

.admin-studio-background-batch > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-background-batch span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-background-batch strong {
  color: inherit;
  font-size: 1.02rem;
  line-height: 1.08;
}

.admin-studio-background-batch small,
.admin-studio-background-batch p {
  margin: 0;
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1.32;
}

.admin-studio-background-batch p {
  grid-column: 1 / -1;
}

.admin-studio-background-batch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-background-batch-actions button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.admin-studio-background-batch-actions button.is-secondary {
  background: rgba(17, 24, 39, 0.06);
  color: #111827;
}

.admin-studio-background-batch-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-studio-background-batch.is-working svg {
  animation: admin-studio-spin 0.9s linear infinite;
}

.admin-studio-background-batch.is-done {
  border-color: rgba(5, 150, 105, 0.18);
  background: rgba(236, 253, 245, 0.72);
}

.admin-studio-background-batch.is-error {
  border-color: rgba(239, 68, 68, 0.18);
  background: rgba(254, 242, 242, 0.72);
}

.admin-studio-background-qa-queue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(240, 253, 250, 0.52));
  color: #111827;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
}

.admin-studio-background-qa-queue > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-studio-background-qa-queue > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-studio-background-qa-queue span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.admin-studio-background-qa-queue strong {
  color: inherit;
  font-size: 1.02rem;
  line-height: 1.08;
}

.admin-studio-background-qa-queue small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 860;
}

.admin-studio-background-qa-queue button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.9);
  color: #ffffff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.admin-studio-background-qa-queue button span {
  min-width: 24px;
  min-height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  font-size: 0.68rem;
}

.admin-studio-background-qa-queue button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.admin-studio-background-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.admin-studio-background-card {
  overflow: hidden;
  display: grid;
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.74);
  color: #111827;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
}

.admin-studio-background-card.is-qa-working {
  border-color: rgba(37, 99, 235, 0.22);
  box-shadow: 0 18px 54px rgba(37, 99, 235, 0.12);
}

.admin-studio-background-card.is-qa-deferred {
  border-color: rgba(148, 163, 184, 0.26);
}

.admin-studio-background-card.is-qa-ready {
  border-color: rgba(5, 150, 105, 0.22);
}

.admin-studio-background-card.is-qa-failed,
.admin-studio-background-card.is-qa-rerun {
  border-color: rgba(245, 158, 11, 0.24);
}

.admin-studio-background-card-media {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-height: 168px;
  background: rgba(17, 24, 39, 0.12);
}

.admin-studio-background-qa-badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.68);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.admin-studio-background-card.is-qa-ready .admin-studio-background-qa-badge {
  border-color: rgba(134, 239, 172, 0.3);
  background: rgba(6, 78, 59, 0.74);
}

.admin-studio-background-card.is-qa-working .admin-studio-background-qa-badge {
  border-color: rgba(147, 197, 253, 0.38);
  background: rgba(30, 64, 175, 0.76);
}

.admin-studio-background-card.is-qa-working .admin-studio-background-qa-badge svg {
  animation: admin-studio-spin 0.95s linear infinite;
}

.admin-studio-background-card.is-qa-deferred .admin-studio-background-qa-badge {
  border-color: rgba(203, 213, 225, 0.28);
  background: rgba(51, 65, 85, 0.74);
}

.admin-studio-background-card.is-qa-source .admin-studio-background-qa-badge,
.admin-studio-background-card.is-qa-plate .admin-studio-background-qa-badge {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 24, 39, 0.72);
}

.admin-studio-background-card.is-qa-review .admin-studio-background-qa-badge,
.admin-studio-background-card.is-qa-rerun .admin-studio-background-qa-badge {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(120, 53, 15, 0.72);
}

.admin-studio-background-card.is-qa-failed .admin-studio-background-qa-badge {
  border-color: rgba(252, 165, 165, 0.36);
  background: rgba(127, 29, 29, 0.76);
}

.admin-studio-background-dropzone {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 168px;
  margin: 0;
}

.admin-studio-background-dropzone > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  appearance: none;
}

.admin-studio-background-dropzone.is-dragging figure::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 3;
  border: 2px dashed rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  background: rgba(37, 99, 235, 0.18);
  pointer-events: none;
}

.admin-studio-background-drop-pick {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.admin-studio-background-drop-status {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.66);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
}

.admin-studio-background-drop-status.is-pending svg {
  animation: admin-studio-spin 0.9s linear infinite;
}

.admin-studio-background-card-media figure {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 168px;
  margin: 0;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 200, 0, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.08), rgba(37, 99, 235, 0.12));
  color: rgba(17, 24, 39, 0.56);
}

.admin-studio-background-card-media figure.has-image {
  background: #111827;
}

.admin-studio-background-card-media figure.is-empty {
  background:
    radial-gradient(circle at 50% 24%, rgba(37, 99, 235, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.06), rgba(17, 24, 39, 0.12));
}

.admin-studio-background-card-media figure.is-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.admin-studio-background-card-media img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  object-fit: cover;
}

.admin-studio-background-card-media figcaption {
  position: absolute;
  left: 10px;
  top: 46px;
  z-index: 1;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.62);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.admin-studio-background-card section {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.admin-studio-background-card span,
.admin-studio-background-card small {
  color: #6b7280;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1.25;
}

.admin-studio-background-card strong {
  color: inherit;
  font-size: 1.03rem;
  line-height: 1.08;
}

.admin-studio-background-asset-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-background-asset-counts i {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.62);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.admin-studio-background-qa-panel {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 15px;
  background: rgba(17, 24, 39, 0.04);
}

.admin-studio-background-qa-panel strong {
  color: #111827;
  font-size: 0.78rem;
  line-height: 1.1;
}

.admin-studio-background-qa-panel span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
}

.admin-studio-background-qa-risks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 3px;
}

.admin-studio-background-qa-risks i {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid rgba(180, 83, 9, 0.18);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  color: #92400e;
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  padding: 0 8px;
}

.admin-studio-background-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.admin-studio-background-downloads a {
  display: inline-flex;
  min-height: 30px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: rgba(17, 24, 39, 0.72);
  font-size: 0.7rem;
  font-weight: 920;
  line-height: 1;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.admin-studio-background-downloads a:hover,
.admin-studio-background-downloads a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.22);
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  outline: none;
}

.admin-studio-background-asset-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
}

.admin-studio-background-asset-strip::-webkit-scrollbar {
  display: none;
}

.admin-studio-background-asset-strip a {
  width: 46px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(17, 24, 39, 0.08);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.admin-studio-background-asset-strip a:hover,
.admin-studio-background-asset-strip a:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.14);
  outline: none;
}

.admin-studio-background-asset-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-background-asset-strip a.is-plate {
  border-color: rgba(37, 99, 235, 0.34);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.admin-studio-background-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.admin-studio-background-card em {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 900;
}

.admin-studio-background-prompt-copy {
  display: inline-flex;
  min-height: 34px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.admin-studio-background-prompt-copy:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.14);
}

.admin-studio-background-prompt-copy:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.admin-studio-background-plate-job {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.admin-studio-background-plate-job button {
  display: inline-flex;
  min-height: 36px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.92);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, opacity 160ms ease, background 160ms ease;
}

.admin-studio-background-plate-job button:hover:not(:disabled) {
  transform: translateY(-1px);
  background: #111827;
}

.admin-studio-background-plate-job button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.admin-studio-background-plate-job.is-working svg {
  animation: admin-studio-spin 0.9s linear infinite;
}

.admin-studio-background-plate-job > span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
}

.admin-studio-background-plate-job-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.admin-studio-background-plate-job-state .admin-studio-job-status {
  box-shadow: none;
}

.admin-studio-background-plate-job.is-done > span {
  color: #047857;
}

.admin-studio-background-plate-job.is-error > span {
  color: #b91c1c;
}

.admin-studio-background-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-studio-background-review-actions form {
  margin: 0;
}

.admin-studio-background-review-actions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 24, 39, 0.68);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 920;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.admin-studio-background-review-actions button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  outline: none;
}

.admin-studio-background-review-actions button.is-active {
  border-color: rgba(5, 150, 105, 0.28);
  background: rgba(209, 250, 229, 0.72);
  color: #047857;
}

.admin-studio-background-review-actions button.is-rerun {
  border-color: rgba(245, 158, 11, 0.24);
  background: rgba(254, 243, 199, 0.74);
  color: #92400e;
}

.admin-studio-background-review-actions button.is-active.is-rerun {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(251, 191, 36, 0.22);
}

.admin-studio-background-season-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.admin-studio-background-season-actions form {
  margin: 0;
}

.admin-studio-background-season-actions button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #6b7280;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.admin-studio-background-season-actions button.is-linked {
  border-color: rgba(37, 99, 235, 0.28);
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.admin-studio-background-season-actions button:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  outline: none;
}

.admin-studio-background-delete {
  width: fit-content;
  margin-top: 2px;
}

.admin-studio-background-delete summary {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 999px;
  background: rgba(254, 242, 242, 0.72);
  color: #b91c1c;
  font-size: 0.7rem;
  font-weight: 920;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.admin-studio-background-delete summary::-webkit-details-marker {
  display: none;
}

.admin-studio-background-delete summary:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, 0.26);
  background: rgba(254, 226, 226, 0.86);
  outline: none;
}

.admin-studio-background-delete form {
  display: grid;
  gap: 8px;
  min-width: min(280px, 72vw);
  margin-top: 8px;
  padding: 10px;
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
}

.admin-studio-background-delete form span {
  color: #6b7280;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
}

.admin-studio-background-delete form button {
  display: inline-flex;
  min-height: 34px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.admin-studio-background-empty,
.admin-studio-background-footnote {
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  color: #6b7280;
}

.admin-studio-background-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
}

.admin-studio-background-empty strong {
  color: #111827;
}

.admin-studio-background-footnote {
  width: fit-content;
  font-size: 0.8rem;
  font-weight: 850;
}

.admin-studio-direction-library-editor {
  display: grid;
  gap: 16px;
}

.admin-studio-direction-library-folder-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.7);
  color: #111827;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.admin-studio-direction-library-folder-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-studio-direction-library-folder-panel strong {
  color: inherit;
  font-size: 0.98rem;
  font-weight: 950;
  line-height: 1.1;
}

.admin-studio-direction-library-folder-panel span,
.admin-studio-direction-library-row-head label small {
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.2;
}

.admin-studio-direction-library-folder-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-studio-direction-library-folder-create input {
  width: 100%;
  min-height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.84);
  color: #111827;
  font: inherit;
  font-weight: 820;
  outline: none;
}

.admin-studio-direction-library-folder-create button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 950;
  cursor: pointer;
}

.admin-studio-direction-library-folder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-direction-library-folder-chips button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.055);
  color: #374151;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-studio-direction-library-folder-chips button.is-active {
  border-color: rgba(37, 99, 235, 0.34);
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

.admin-studio-direction-library-toolbar {
  position: sticky;
  top: 82px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: none;
}

.admin-studio-direction-library-active-folder {
  display: inline-flex;
  min-height: 38px;
  max-width: min(42vw, 520px);
  align-items: center;
  overflow: hidden;
  padding: 0 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.admin-studio-direction-library-add,
.admin-studio-direction-library-save {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: #111827;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 950;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.admin-studio-direction-library-add:is(:hover, :focus-visible),
.admin-studio-direction-library-save:is(:hover, :focus-visible) {
  border-color: rgba(37, 99, 235, 0.32);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.16);
  outline: none;
  transform: translateY(-1px);
}

.admin-studio-direction-library-save {
  background: #111827;
  color: #ffffff;
}

.admin-studio-direction-library-save:disabled {
  cursor: progress;
  opacity: 0.72;
}

.admin-studio-direction-library-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 12px;
}

.admin-studio-direction-library-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
  color: #111827;
  box-shadow: 0 18px 54px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
}

.admin-studio-direction-library-row-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(132px, 0.22fr) auto;
  gap: 10px;
  align-items: center;
}

.admin-studio-direction-library-row-head label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.admin-studio-direction-library-row-head span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.08);
  color: #4b5563;
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-studio-direction-library-row-head input,
.admin-studio-direction-library-row-head select,
.admin-studio-direction-library-row textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.84);
  color: #111827;
  font: inherit;
  font-weight: 760;
  outline: none;
  box-shadow: none;
}

.admin-studio-direction-library-row-head input,
.admin-studio-direction-library-row-head select {
  min-height: 40px;
  padding: 0 12px;
}

.admin-studio-direction-library-row-head select {
  appearance: none;
  cursor: pointer;
}

.admin-studio-direction-library-row-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: 12px;
  align-items: stretch;
}

.admin-studio-direction-library-row-body > label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-studio-direction-library-row-body > label small {
  color: #6b7280;
  font-size: 0.74rem;
  font-weight: 850;
}

.admin-studio-direction-library-row textarea {
  min-height: 96px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.45;
}

.admin-studio-direction-library-row-head input:focus,
.admin-studio-direction-library-row-head select:focus,
.admin-studio-direction-library-row textarea:focus {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.admin-studio-direction-library-row-head button {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #6b7280;
  cursor: pointer;
}

.admin-studio-direction-library-row-empty-action {
  display: block;
  width: 38px;
  height: 38px;
}

.admin-studio-direction-library-extracted {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 17px;
  background: rgba(239, 246, 255, 0.62);
  color: #111827;
}

.admin-studio-direction-library-extracted.is-empty {
  border-color: rgba(17, 24, 39, 0.1);
  background: rgba(248, 250, 252, 0.76);
  color: #4b5563;
}

.admin-studio-direction-library-extracted-head,
.admin-studio-direction-library-extracted-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.admin-studio-direction-library-extracted-head {
  justify-content: space-between;
}

.admin-studio-direction-library-extracted-head span,
.admin-studio-direction-library-extracted-head small,
.admin-studio-direction-library-extracted-chips span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(37, 99, 235, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-direction-library-extracted-head span,
.admin-studio-direction-library-extracted-head small {
  padding: 0 8px;
}

.admin-studio-direction-library-extracted-chips span {
  padding: 0 7px;
}

.admin-studio-direction-library-extracted > strong {
  color: inherit;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.15;
}

.admin-studio-direction-library-extracted p,
.admin-studio-direction-library-extracted li {
  margin: 0;
  color: #4b5563;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.42;
}

.admin-studio-direction-library-adapter-cues {
  display: grid;
  gap: 8px;
}

.admin-studio-direction-library-adapter-cues div,
.admin-studio-direction-library-extracted-list {
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-studio-direction-library-adapter-cues small,
.admin-studio-direction-library-extracted-list strong {
  color: #1f2937;
  font-size: 0.7rem;
  font-weight: 950;
  line-height: 1.1;
}

.admin-studio-direction-library-extracted-list ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
}

.admin-studio-direction-atom-picker {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  color: #111827;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.admin-studio-direction-atom-picker-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.admin-studio-direction-atom-picker-head h2,
.admin-studio-direction-atom-picker-head p {
  margin: 0;
}

.admin-studio-direction-atom-picker-head h2 {
  color: inherit;
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.admin-studio-direction-atom-picker-head > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(39, 101, 184, 0.16);
  border-radius: 999px;
  background: rgba(39, 101, 184, 0.07);
  color: #1f5d99;
  font-size: 0.68rem;
  font-weight: 920;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-studio-direction-atom-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-direction-atom-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.74);
}

.admin-studio-direction-atom-card-head,
.admin-studio-direction-atom-tags {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-studio-direction-atom-card-head {
  justify-content: space-between;
}

.admin-studio-direction-atom-card-head span,
.admin-studio-direction-atom-card-head small,
.admin-studio-direction-atom-tags span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: #64748b;
  font-size: 0.64rem;
  font-weight: 870;
  line-height: 1;
}

.admin-studio-direction-atom-card strong {
  color: inherit;
  font-size: 0.92rem;
  font-weight: 950;
  line-height: 1.12;
}

.admin-studio-direction-atom-card p,
.admin-studio-direction-atom-cues small {
  margin: 0;
  color: #4b5563;
  font-size: 0.74rem;
  font-weight: 720;
  line-height: 1.38;
}

.admin-studio-direction-atom-cues {
  display: grid;
  gap: 5px;
}

.admin-studio-direction-atom-card button {
  min-height: 34px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 950;
}

.admin-studio-direction-atom-card button:is(:hover, :focus-visible) {
  background: #1f2937;
  outline: none;
}

@media (max-width: 820px) {
  .admin-studio-direction-library-row-head,
  .admin-studio-direction-library-row-body,
  .admin-studio-direction-atom-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-direction-library-row-head > span,
  .admin-studio-direction-library-row-empty-action,
  .admin-studio-direction-library-row-head button {
    justify-self: start;
  }
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-hero span {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-create,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-queue,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-locks article,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-overview article,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-empty,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-footnote {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(22, 22, 22, 0.82);
  color: #f5f5f5;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-create header span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-create label small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch p,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-queue span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-queue small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-locks header span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-locks header small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-overview span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-footnote {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-create :is(input, select) {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-create :is(input, select)::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-overview article.is-working {
  border-color: rgba(96, 165, 250, 0.2);
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.24), rgba(22, 22, 22, 0.82));
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-overview article.is-warning {
  border-color: rgba(251, 191, 36, 0.22);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.28), rgba(22, 22, 22, 0.82));
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-overview article.is-muted {
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(135deg, rgba(51, 65, 85, 0.22), rgba(22, 22, 22, 0.82));
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-locks article.is-ready {
  border-color: rgba(134, 239, 172, 0.18);
  background: linear-gradient(135deg, rgba(20, 83, 45, 0.2), rgba(22, 22, 22, 0.82));
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-metrics i {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-metrics i.is-working {
  background: rgba(59, 130, 246, 0.14);
  color: #93c5fd;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-metrics i.is-muted {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-metrics i.is-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-actions a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.84);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-actions button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-lock-actions button span {
  background: rgba(17, 24, 39, 0.12);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-picker label,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-pack-strip a,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-file span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-upload-row button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch-actions button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-queue button {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-queue button span {
  background: rgba(17, 24, 39, 0.12);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch-actions button.is-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.86);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch.is-done {
  border-color: rgba(134, 239, 172, 0.2);
  background: rgba(20, 83, 45, 0.24);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-batch.is-error {
  border-color: rgba(252, 165, 165, 0.22);
  background: rgba(127, 29, 29, 0.24);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-plate-job button {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-plate-job button:hover:not(:disabled) {
  background: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-prompt-copy {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-prompt-copy:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-downloads a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-downloads a:hover,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-downloads a:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-asset-strip a {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-asset-strip a:hover,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-asset-strip a:focus-visible {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-plate-job > span {
  color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-plate-job.is-done > span {
  color: #86efac;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-plate-job.is-error > span {
  color: #fca5a5;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-actions button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-actions button.is-linked {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-season-actions button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-delete summary {
  border-color: rgba(248, 113, 113, 0.18);
  background: rgba(127, 29, 29, 0.24);
  color: #fca5a5;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-delete summary:is(:hover, :focus-visible) {
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(127, 29, 29, 0.34);
  color: #fecaca;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-delete form {
  border-color: rgba(248, 113, 113, 0.18);
  background: rgba(20, 20, 20, 0.96);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-delete form span {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-delete form button {
  border-color: rgba(248, 113, 113, 0.34);
  background: #ef4444;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card-media {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card-media figure {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 200, 0, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(37, 99, 235, 0.14));
  color: rgba(255, 255, 255, 0.58);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-card-media figure.has-image {
  background: #050505;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-asset-counts i {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-panel strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-panel span {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-qa-risks i {
  border-color: rgba(250, 204, 21, 0.2);
  background: rgba(250, 204, 21, 0.12);
  color: rgba(253, 230, 138, 0.92);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-review-actions button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-review-actions button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-review-actions button.is-active {
  border-color: rgba(134, 239, 172, 0.24);
  background: rgba(20, 83, 45, 0.28);
  color: #86efac;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-review-actions button.is-rerun {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(120, 53, 15, 0.24);
  color: #facc15;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-asset-strip img {
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-background-empty strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-add,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(28, 28, 28, 0.82);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-panel {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(22, 22, 22, 0.82);
  color: #f5f5f5;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-panel span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head label small {
  color: rgba(255, 255, 255, 0.52);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-create input {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-create input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-create button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-chips button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 255, 255, 0.82);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-folder-chips button.is-active {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-active-folder {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(28, 28, 28, 0.82);
  color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-save {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(22, 22, 22, 0.82);
  color: #f5f5f5;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head span {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head input,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head select,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row textarea {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-head input::placeholder,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-row-body > label small {
  color: rgba(255, 255, 255, 0.52);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted {
  border-color: rgba(96, 165, 250, 0.18);
  background: rgba(30, 41, 59, 0.52);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted.is-empty {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted-head span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted-head small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted-chips span {
  border-color: rgba(147, 197, 253, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(191, 219, 254, 0.96);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted p,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted li {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-adapter-cues div,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted-list {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-adapter-cues small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-library-extracted-list strong {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-picker {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(22, 22, 22, 0.82);
  color: #f5f5f5;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-picker-head > span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-card-head span,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-card-head small,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-tags span {
  border-color: rgba(147, 197, 253, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(191, 219, 254, 0.92);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-card {
  border-color: rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-card p,
html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-cues small {
  color: rgba(255, 255, 255, 0.66);
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-direction-atom-card button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(245, 245, 245, 0.92);
  color: #111111;
}

.admin-studio-workspace-search input:-webkit-autofill,
.admin-studio-workspace-search input:-webkit-autofill:hover,
.admin-studio-workspace-search input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--studio-workspace-text);
  box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 9999s ease-out;
}

.admin-studio-workspace-actions {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
}

.admin-studio-workspace-action {
  width: 40px;
  height: 40px;
  background: var(--studio-workspace-surface);
  color: var(--studio-workspace-text);
}

.admin-studio-workspace-action-text {
  width: auto;
  min-width: 52px;
  padding: 0 13px;
  font-size: 0.76rem;
  font-weight: 880;
}

.admin-studio-season-home .admin-studio-workspace-heading strong {
  max-width: min(30vw, 260px);
}

.admin-studio-season-home .admin-studio-workspace-search {
  justify-self: center;
}

.admin-studio-season-home .admin-studio-season-breadcrumb {
  display: none;
}

.admin-studio-episode-home .admin-studio-workspace-heading strong {
  max-width: min(34vw, 440px);
}

.admin-studio-episode-home .admin-studio-workspace-search {
  justify-self: center;
}

.admin-studio-episode-workspace-topbar.is-detail .admin-studio-episode-workspace-actions {
  grid-column: 3;
  justify-self: end;
}

.admin-studio-episode-workspace-search.is-static {
  pointer-events: none;
}

.admin-studio-episode-workspace-search.is-static span {
  overflow: hidden;
  min-width: 0;
  color: var(--studio-workspace-muted);
  font-size: 0.86rem;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-episode-home .admin-studio-flow-breadcrumb {
  display: none;
}

@media (min-width: 1360px) {
  .admin-studio-workspace-topbar {
    grid-template-columns: clamp(360px, 31vw, 640px) minmax(320px, 580px) minmax(180px, 1fr);
  }
}

.admin-studio-episode-home .admin-studio-episode-workspace-actions :is(.admin-studio-episode-history-toggle, .admin-studio-workspace-action-text) {
  min-height: 38px;
  border-color: var(--studio-workspace-border) !important;
  background: var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-episode-home) :is(
  .admin-studio-episode-hero > div,
  .admin-studio-episode-next,
  .admin-studio-episode-status-grid > div,
  .admin-studio-episode-runway,
  .admin-studio-episode-advanced,
  .admin-studio-episode-ingredients,
  .admin-studio-episode-scene-board article,
  .admin-studio-episode-generated-still-board article,
  .admin-studio-episode-production-scenes article,
  .admin-studio-episode-finish-card,
  .admin-studio-episode-sample-launch,
  .admin-studio-episode-dryrun,
  .admin-studio-flow-empty
) {
  border-color: var(--studio-workspace-border) !important;
  background: var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-episode-home) :is(
  .admin-studio-episode-hero strong,
  .admin-studio-episode-next strong,
  .admin-studio-episode-status-grid strong,
  .admin-studio-episode-runway strong,
  .admin-studio-episode-advanced-drawer strong,
  .admin-studio-episode-ingredients strong,
  .admin-studio-episode-scene-board article strong,
  .admin-studio-episode-generated-still-board article strong,
  .admin-studio-episode-production-scenes article strong,
  .admin-studio-episode-finish-card strong,
  .admin-studio-episode-sample-launch strong,
  .admin-studio-episode-dryrun strong,
  .admin-studio-flow-empty strong
) {
  color: var(--studio-workspace-text) !important;
}

body:has(.admin-studio-episode-home) :is(
  .admin-studio-episode-hero span,
  .admin-studio-episode-next span,
  .admin-studio-episode-status-grid span,
  .admin-studio-episode-runway p,
  .admin-studio-episode-advanced,
  .admin-studio-episode-advanced-drawer span,
  .admin-studio-episode-advanced-drawer p,
  .admin-studio-episode-ingredients span,
  .admin-studio-episode-scene-board article span,
  .admin-studio-episode-scene-board article p,
  .admin-studio-episode-generated-still-board article span,
  .admin-studio-episode-production-scenes article small,
  .admin-studio-episode-production-scenes article p,
  .admin-studio-episode-finish-card span,
  .admin-studio-episode-finish-card small,
  .admin-studio-episode-sample-launch small,
  .admin-studio-episode-dryrun span,
  .admin-studio-episode-dryrun p
) {
  color: var(--studio-workspace-muted) !important;
}

body:has(.admin-studio-episode-home) .admin-studio-episode-advanced-drawer {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.admin-studio-episode-home) .admin-studio-episode-advanced-drawer > summary {
  border-color: var(--studio-workspace-border) !important;
  background: var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-episode-home) .admin-studio-episode-advanced-drawer[open] > summary {
  background: var(--studio-workspace-text) !important;
  color: var(--studio-workspace-canvas) !important;
}

body:has(.admin-studio-episode-scene-home) {
  overflow: auto !important;
  background: var(--studio-workspace-canvas) !important;
}

.admin-studio-episode-board.admin-studio-episode-scene-home.is-scene-detail {
  height: auto !important;
  min-height: 100svh !important;
  overflow: visible !important;
  padding: 64px var(--studio-workspace-gutter) 320px !important;
}

.admin-studio-episode-scene-home .admin-studio-episode-media-detail {
  height: auto !important;
  min-height: calc(100svh - 64px);
  align-content: start !important;
  padding: 12px 0 220px !important;
}

.admin-studio-episode-scene-home .admin-studio-episode-media-workspace {
  width: min(100%, 1120px);
  height: auto !important;
  min-height: calc(100svh - 230px);
  margin-inline: auto;
  padding: 0 !important;
}

.admin-studio-episode-scene-home .admin-studio-episode-media-history {
  margin-top: 0 !important;
}

@media (min-width: 1024px) {
  body:has(.admin-studio-episode-scene-home) .site-sidebar.is-studio-console {
    display: flex !important;
  }

  body:has(.admin-studio-episode-scene-home) .site-main-shell {
    margin-left: var(--sidebar-rail-width) !important;
  }

  body:has(.admin-studio-episode-scene-home) .site-main-shell.is-studio-sidebar-pinned {
    margin-left: var(--sidebar-width) !important;
  }
}

@media (min-width: 1024px) {
  body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console {
    padding-top: 64px !important;
    border-right-color: transparent !important;
    background: var(--studio-workspace-canvas) !important;
    box-shadow: none !important;
  }

  body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console .sidebar-studio-nav {
    margin-top: 0 !important;
  }
}

@media (max-width: 760px) {
  .admin-studio-workspace-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-right: var(--studio-workspace-gutter);
  }

  .admin-studio-workspace-search {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  body:has(.admin-studio-universe-home) .admin-studio-page.admin-studio-universe-home {
    padding-top: 112px;
  }
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) {
  color-scheme: dark;
  --studio-workspace-canvas: #050506;
  --studio-workspace-surface: #15161b;
  --studio-workspace-border: rgba(255, 255, 255, 0.08);
  --studio-workspace-text: rgba(248, 250, 252, 0.9);
  --studio-workspace-muted: rgba(248, 250, 252, 0.5);
  background: var(--studio-workspace-canvas) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) :is(.site-main-shell, .site-main, .admin-studio-universe-home) {
  background: var(--studio-workspace-canvas) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console {
  border-right-color: transparent !important;
  background: var(--studio-workspace-canvas) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-studio-workspace-topbar {
  background: var(--studio-workspace-canvas);
}

html[data-theme="dark"] .admin-studio-workspace-back:is(:hover, :focus-visible),
html[data-theme="dark"] .admin-studio-workspace-action:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.admin-studio-universe-loading {
  gap: 18px;
}

.admin-studio-universe-loading .admin-studio-workspace-topbar {
  pointer-events: none;
}

.admin-studio-workspace-loading-line,
.admin-studio-universe-loading-card :is(span, strong, small),
.admin-studio-universe-loading-launch-card :is(span, strong, small),
.admin-studio-universe-loading-rail :is(span, strong, small, i) {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.1);
}

.admin-studio-workspace-loading-line::after,
.admin-studio-universe-loading-card::after,
.admin-studio-universe-loading-launch-card::after,
.admin-studio-universe-loading-rail :is(span, strong, small, i)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.5) 46%, transparent 72%);
  animation: studio-mini-loading-sweep 1.35s ease-in-out infinite;
  transform: translateX(-100%);
}

.admin-studio-workspace-loading-line {
  width: min(190px, 46vw);
  height: 12px;
}

.admin-studio-universe-loading-card,
.admin-studio-universe-loading-launch-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-width: 0;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 8px;
  background: var(--studio-workspace-card, var(--studio-workspace-surface));
  box-shadow: none;
}

.admin-studio-universe-loading-card {
  grid-template-rows: auto 1fr;
  min-height: 232px;
}

.admin-studio-universe-loading-card > div {
  min-height: 116px;
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.16), rgba(37, 99, 235, 0.1)),
    var(--studio-workspace-media, rgba(17, 24, 39, 0.08));
}

.admin-studio-universe-loading-card.is-mini > div {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(116, 224, 200, 0.12)),
    var(--studio-workspace-media, rgba(17, 24, 39, 0.1));
}

.admin-studio-universe-loading-card > span,
.admin-studio-universe-loading-card > strong,
.admin-studio-universe-loading-card > small {
  margin-inline: 14px;
}

.admin-studio-universe-loading-card > span {
  width: 74px;
  height: 10px;
  margin-top: 14px;
}

.admin-studio-universe-loading-card > strong {
  width: 58%;
  height: 18px;
  margin-top: 10px;
}

.admin-studio-universe-loading-card > small {
  width: 76%;
  height: 12px;
  margin-top: 9px;
}

.admin-studio-universe-loading-launch-card {
  align-content: end;
  gap: 9px;
  min-height: 132px;
  padding: 16px;
}

.admin-studio-universe-loading-launch-card > span {
  width: 64px;
  height: 10px;
}

.admin-studio-universe-loading-launch-card > strong {
  width: 72%;
  height: 18px;
}

.admin-studio-universe-loading-launch-card > small {
  width: 88%;
  height: 12px;
}

.admin-studio-season-loading,
.admin-studio-episode-loading {
  gap: 18px;
}

.admin-studio-season-loading-strip,
.admin-studio-episode-loading-strip {
  display: grid;
  gap: clamp(12px, 1.7vw, 18px);
  width: 100%;
}

.admin-studio-season-loading-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.admin-studio-episode-loading-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.admin-studio-season-loading-grid,
.admin-studio-episode-loading-grid {
  display: grid;
  width: 100%;
  gap: clamp(14px, 1.7vw, 20px);
}

.admin-studio-season-loading-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
}

.admin-studio-episode-loading-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(184px, 100%), 1fr));
}

.admin-studio-season-loading-grid .admin-studio-universe-loading-card {
  min-height: 246px;
}

.admin-studio-episode-loading-grid .admin-studio-universe-loading-card {
  min-height: 276px;
}

.admin-studio-season-loading-grid .admin-studio-universe-loading-card > div {
  min-height: 132px;
}

.admin-studio-episode-loading-grid .admin-studio-universe-loading-card > div {
  min-height: 166px;
  border-radius: 0 0 8px 8px;
}

.admin-studio-episode-loading .admin-studio-workspace-actions > span {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: var(--studio-workspace-card, var(--studio-workspace-surface));
}

.admin-studio-universe-loading-rail {
  gap: 12px;
  border-color: var(--studio-workspace-border);
  background: var(--studio-workspace-card, var(--studio-workspace-surface));
  box-shadow: none;
}

.admin-studio-universe-loading-rail > div:first-child span {
  width: 132px;
  height: 12px;
}

.admin-studio-universe-loading-rail > div:first-child i {
  width: 62px;
  height: 12px;
}

.admin-studio-universe-loading-rail > div:last-child span {
  display: inline-grid;
  grid-template-columns: 42px minmax(54px, 92px);
  gap: 9px;
  align-items: center;
  min-height: 52px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.055);
}

.admin-studio-universe-loading-rail > div:last-child i {
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

.admin-studio-universe-loading-rail > div:last-child strong {
  width: 76px;
  height: 11px;
}

html[data-theme="dark"] .admin-studio-workspace-loading-line,
html[data-theme="dark"] .admin-studio-universe-loading-card :is(span, strong, small),
html[data-theme="dark"] .admin-studio-universe-loading-launch-card :is(span, strong, small),
html[data-theme="dark"] .admin-studio-universe-loading-rail :is(span, strong, small, i) {
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .admin-studio-universe-loading-card,
html[data-theme="dark"] .admin-studio-universe-loading-launch-card,
html[data-theme="dark"] .admin-studio-universe-loading-rail {
  border-color: rgba(255, 255, 255, 0.08);
  background: var(--studio-workspace-card, #101011);
}

html[data-theme="dark"] .admin-studio-universe-loading-card > div,
html[data-theme="dark"] .admin-studio-universe-loading-card.is-mini > div {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(255, 255, 255, 0.025)),
    var(--studio-workspace-media, rgba(255, 255, 255, 0.055));
}

html[data-theme="dark"] .admin-studio-universe-loading-rail > div:last-child span {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] body:has(.admin-studio-page) .button-secondary,
html[data-theme="dark"] .studio-minis-page .button-secondary {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.085);
  color: #f8fafc;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.admin-studio-page) .button-secondary:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-page .button-secondary:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) :is(
  .studio-minis-room-search,
  .studio-minis-room-tabs,
  .studio-minis-room-action-trigger,
  .studio-minis-room-action-menu-panel,
  .studio-minis-room-filter-trigger,
  .studio-minis-room-filter-menu,
  .studio-minis-room-empty,
  .studio-minis-feed-empty
) {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    #111214 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search input {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search > svg,
html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) :is(
  .studio-minis-room-action-trigger,
  .studio-minis-room-action-menu-panel :is(a, button),
  .studio-minis-room-filter-trigger,
  .studio-minis-room-filter-menu button,
  .studio-minis-room-tabs button
) {
  color: rgba(248, 250, 252, 0.82) !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search input::placeholder {
  color: rgba(248, 250, 252, 0.42) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, 0.42);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) :is(
  .studio-minis-room-tabs button:is(:hover, :focus-visible),
  .studio-minis-room-tabs button.is-selected,
  .studio-minis-room-filter-trigger:is(:hover, :focus-visible),
  .studio-minis-room-filter.is-open .studio-minis-room-filter-trigger,
  .studio-minis-room-filter-menu button:is(:hover, :focus-visible),
  .studio-minis-room-action-trigger:is(:hover, :focus-visible),
  .studio-minis-room-action-menu.is-open .studio-minis-room-action-trigger,
  .studio-minis-room-action-menu-panel :is(a, button):is(:hover, :focus-visible)
) {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-filter-menu button.is-selected {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) :is(
  .studio-minis-room-filter-trigger em,
  .studio-minis-room-filter-menu button em,
  .studio-minis-room-tabs button span
) {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.09) !important;
  color: rgba(248, 250, 252, 0.72) !important;
}

html[data-theme="dark"] .studio-minis-manual-post-modal,
html[data-theme="dark"] .studio-minis-external-upload-modal {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.98)),
    #0b0b0c !important;
  color: #f8fafc !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .studio-minis-manual-post-modal {
  background: #101114 !important;
}

html[data-theme="dark"] .studio-minis-manual-post-saving {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(10, 10, 12, 0.9);
  color: #f8fafc;
}

html[data-theme="dark"] .studio-minis-manual-post-saving strong {
  color: #f8fafc;
}

html[data-theme="dark"] .studio-minis-manual-post-saving span {
  color: rgba(248, 250, 252, 0.62);
}

html[data-theme="dark"] .studio-minis-manual-post-modal-head strong,
html[data-theme="dark"] .studio-minis-manual-post-picker-toggle strong {
  color: #f8fafc;
}

html[data-theme="dark"] .studio-minis-manual-post-modal-head span,
html[data-theme="dark"] .studio-minis-manual-post-modal-head small,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form label span,
html[data-theme="dark"] .studio-minis-manual-post-picker > span,
html[data-theme="dark"] .studio-minis-manual-post-picker-toggle span,
html[data-theme="dark"] .studio-minis-external-upload-forms form > div > small {
  color: rgba(248, 250, 252, 0.58) !important;
}

html[data-theme="dark"] .studio-minis-manual-post-modal-head > button,
html[data-theme="dark"] .studio-minis-manual-post-modal-actions > button,
html[data-theme="dark"] .studio-minis-manual-post-picker-toggle,
html[data-theme="dark"] .studio-minis-manual-post-picker > div button,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form input,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form select,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form textarea,
html[data-theme="dark"] .studio-minis-external-upload-forms input,
html[data-theme="dark"] .studio-minis-external-upload-forms select {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .studio-minis-manual-post-picker-toggle,
html[data-theme="dark"] .studio-minis-manual-post-picker > div button,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form input,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form select,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form textarea {
  background: #1b1c20 !important;
}

html[data-theme="dark"] .studio-minis-manual-post-picker-toggle:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-manual-post-picker > div button:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-manual-post-dialog-form input:focus,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form select:focus,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form textarea:focus,
html[data-theme="dark"] .studio-minis-external-upload-forms input:focus,
html[data-theme="dark"] .studio-minis-external-upload-forms select:focus {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .studio-minis-manual-post-picker-toggle:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-manual-post-picker > div button:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-manual-post-dialog-form input:focus,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form select:focus,
html[data-theme="dark"] .studio-minis-manual-post-dialog-form textarea:focus {
  background: #22242a !important;
}

html[data-theme="dark"] .studio-minis-manual-post-picker > div button.is-selected {
  border-color: rgba(250, 204, 21, 0.38) !important;
  background: #2a2516 !important;
  box-shadow: none;
}

html[data-theme="dark"] .studio-minis-manual-post-submit,
html[data-theme="dark"] .studio-minis-external-upload-submit {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-manual-post-submit:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-external-upload-submit:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="dark"] .studio-minis-page.is-mini-flow-workspace .studio-minis-flow-pill-button.is-done {
  background: rgba(255, 255, 255, 0.11);
  color: #ffffff;
}

@media (min-width: 761px) and (max-width: 1023px) {
  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .admin-studio-page {
    width: min(calc(100% - 56px), 1760px);
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .admin-studio-page {
    width: min(calc(100% - clamp(72px, 7vw, 88px)), 1760px);
  }
}

body:has(.admin-studio-page) .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar {
  position: fixed;
  z-index: 200;
  overflow: visible;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-filter,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-action-menu {
  position: relative;
  overflow: visible;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-filter.is-open,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-action-menu.is-open {
  z-index: 90;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-filter-menu,
.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-action-menu-panel {
  z-index: 100;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search .studio-minis-room-filter-trigger {
  border-color: transparent !important;
  background: transparent !important;
  color: rgba(248, 250, 252, 0.78) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search .studio-minis-room-filter {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search .studio-minis-room-filter-trigger:is(:hover, :focus-visible),
html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-filter.is-open .studio-minis-room-filter-trigger {
  border-color: transparent !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search .studio-minis-room-filter-trigger em {
  background: rgba(255, 255, 255, 0.06) !important;
}

body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-main {
  padding-top: 0;
}

body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .admin-studio-page.studio-minis-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 0 var(--studio-minis-page-gutter) 320px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-console {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  gap: 18px;
  padding-top: 64px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar {
  --admin-studio-topbar-canvas: var(--studio-minis-canvas);
  --admin-studio-topbar-gutter: var(--studio-minis-page-gutter);
  --admin-studio-topbar-text: rgba(17, 24, 39, 0.82);
  justify-content: stretch;
  margin-inline: 0;
  border-bottom: 0;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar.studio-minis-root-toolbar {
  grid-template-columns: minmax(94px, 220px) minmax(320px, 580px) minmax(180px, 1fr);
}

@media (min-width: 1360px) {
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar,
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar.studio-minis-root-toolbar {
    grid-template-columns: clamp(360px, 31vw, 640px) minmax(320px, 580px) minmax(180px, 1fr);
  }
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-heading {
  min-width: 0;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-heading strong {
  max-width: 110px;
  color: rgba(17, 24, 39, 0.82);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-back-button {
  width: 36px;
  height: 36px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search {
  width: min(100%, 580px);
  justify-self: center;
  min-height: 40px;
  border-radius: 17px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-actions {
  justify-self: end;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-action-trigger {
  width: 40px;
  height: 40px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media {
  padding-top: 4px;
}

.studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(184px, 100%), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

@media (min-width: 1280px) {
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

@media (min-width: 761px) {
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-board {
    width: 100%;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media,
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-feed {
    width: 100%;
    max-width: none;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, 184px);
    justify-content: flex-start;
    align-items: start;
    gap: clamp(14px, 1.6vw, 22px);
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, 184px);
    justify-content: flex-start;
    align-items: start;
    gap: clamp(14px, 1.6vw, 22px);
  }
}

@media (min-width: 1440px) {
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-grid {
    grid-template-columns: repeat(auto-fill, 190px);
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-media .studio-minis-media-grid {
    grid-template-columns: repeat(auto-fill, 190px);
  }
}

@media (min-width: 1024px) {
  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console {
    border-right-color: transparent !important;
    background: var(--studio-minis-canvas) !important;
    box-shadow: none !important;
  }

  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console {
    padding-top: 64px;
  }

  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console .sidebar-studio-nav {
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-heading,
  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-actions {
    width: auto;
    justify-self: auto;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-heading {
    grid-column: 1;
    grid-row: 1;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-self: stretch;
  }
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-toolbar {
  border-bottom-color: transparent;
  background: var(--studio-minis-canvas);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-heading strong {
  color: rgba(248, 250, 252, 0.9);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-back-button {
  color: rgba(248, 250, 252, 0.9);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-back-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  color: rgba(248, 250, 252, 0.92);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty-mark {
  background: rgba(255, 255, 255, 0.075);
  color: rgba(248, 250, 252, 0.72);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty strong {
  color: rgba(248, 250, 252, 0.94);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty span {
  color: rgba(248, 250, 252, 0.58);
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .studio-minis-page:not(.is-mini-flow-workspace) .studio-minis-room-search-empty button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

body:has(.studio-minis-route-loading) {
  background: #050506 !important;
}

body:has(.studio-minis-route-loading) :is(.site-sidebar, .site-overlay, .mobile-nav-toggle) {
  display: none !important;
}

body:has(.studio-minis-route-loading) :is(.site-main-shell, .site-main-shell.is-studio-sidebar-pinned) {
  min-height: 100svh;
  margin-left: 0 !important;
}

body:has(.studio-minis-route-loading) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
}

.studio-minis-route-loading {
  min-height: 100svh;
  background: #050506 !important;
  color: #f8fafc;
}

.studio-minis-route-loading .studio-minis-console {
  min-height: 100svh;
}

.studio-minis-route-loading .studio-minis-room-toolbar {
  pointer-events: none;
}

.studio-minis-route-loading .studio-minis-room-back-button,
.studio-minis-route-loading .studio-minis-room-action-trigger {
  opacity: 0.82;
}

.studio-minis-loading-search-line {
  position: relative;
  overflow: hidden;
  display: block;
  width: min(190px, 46vw);
  height: 12px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.1);
}

.studio-minis-loading-card {
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(17, 24, 39, 0.06)),
    rgba(17, 24, 39, 0.08);
  box-shadow: none;
}

.studio-minis-loading-card::after {
  display: none;
}

.studio-minis-loading-card span,
.studio-minis-loading-search-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.48) 46%, transparent 72%);
  animation: studio-mini-loading-sweep 1.35s ease-in-out infinite;
  transform: translateX(-100%);
}

@keyframes studio-mini-loading-sweep {
  to {
    transform: translateX(100%);
  }
}

html[data-theme="dark"] .studio-minis-loading-search-line {
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .studio-minis-loading-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.06);
}

body:has(.admin-studio-page) .site-sidebar.is-studio-console {
  z-index: 180;
}

body:has(.admin-studio-page) .sidebar-studio-account-menu[open],
body:has(.admin-studio-page) .sidebar-studio-account-popover,
body:has(.admin-studio-page) .sidebar-studio-universe-rail-popover {
  z-index: 220;
}

body:has(.admin-studio-page) .admin-studio-topbar-account {
  position: fixed;
  top: 11px;
  right: 18px;
  z-index: 360;
  display: grid;
  pointer-events: none;
}

body:has(.admin-studio-page) .admin-studio-topbar-account > * {
  pointer-events: auto;
}

body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-account-menu {
  position: relative;
}

body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-account-menu summary {
  border-radius: 18px;
}

body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-rail-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.28), transparent 32%),
    #0b6fc6;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-account-popover {
  position: fixed;
  top: 58px;
  right: 18px;
  bottom: auto;
  left: auto;
  z-index: 380;
}

html[data-theme="dark"] body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-rail-avatar {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

@media (max-width: 720px) {
  body:has(.admin-studio-page) .admin-studio-topbar-account {
    top: 10px;
    right: 14px;
  }

  body:has(.admin-studio-page) .admin-studio-topbar-account .sidebar-studio-account-popover {
    top: 54px;
    right: 10px;
    width: min(328px, calc(100vw - 20px));
  }
}

@media (min-width: 1024px) {
  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-footer {
    position: fixed;
    top: 22px;
    right: 22px;
    z-index: 260;
    display: grid;
    padding: 0;
    border: 0;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-account-menu {
    position: relative;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-account-popover {
    position: fixed;
    top: 70px;
    right: 22px;
    bottom: auto;
    left: auto;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-account-menu summary {
    border-radius: 18px;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-rail-avatar {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
      radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.28), transparent 32%),
      #0b6fc6;
    color: #ffffff;
    box-shadow: none;
  }

  html[data-theme="light"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-rail-avatar {
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console {
    padding-top: 64px !important;
  }

  body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console {
    border-right-color: transparent !important;
    background: var(--studio-minis-canvas) !important;
    box-shadow: none !important;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-studio-nav {
    margin-top: 0 !important;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
    width: 48px !important;
    min-height: 46px !important;
    border-radius: 12px !important;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
    background: transparent !important;
    box-shadow: none !important;
  }

  body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
    width: 27px !important;
    height: 27px !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

  html[data-theme="light"] body:has(.admin-studio-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
    background: rgba(15, 23, 42, 0.08) !important;
    color: #0f172a !important;
  }

  html[data-theme="dark"] body:has(.studio-minis-page:not(.is-mini-flow-workspace)) .site-sidebar.is-studio-console {
    border-right-color: transparent !important;
    background: var(--studio-minis-canvas) !important;
    box-shadow: none !important;
  }
}

body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console,
body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console.is-desktop-expanded,
body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console.is-desktop-pinned,
body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: transparent !important;
  background: var(--studio-workspace-canvas) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: transparent !important;
  background: var(--studio-workspace-canvas) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-universe-home) {
  --studio-workspace-card: #fbfaf6;
  --studio-workspace-card-hover: #ffffff;
  --studio-workspace-media: #efebe2;
  --studio-workspace-chip-bg: rgba(17, 24, 39, 0.06);
  --studio-workspace-chip-text: rgba(17, 24, 39, 0.58);
}

body:has(.admin-studio-universe-home) .admin-studio-workspace-search,
body:has(.admin-studio-universe-home) .admin-studio-workspace-action {
  border-color: var(--studio-workspace-border) !important;
  background: var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-universe-home) .admin-studio-workspace-search {
  border-color: rgba(17, 24, 39, 0.1) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.075), rgba(17, 24, 39, 0.045)),
    rgba(245, 241, 232, 0.34) !important;
  color: var(--studio-workspace-muted) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(15, 23, 42, 0.045) !important;
  backdrop-filter: blur(18px);
}

body:has(.admin-studio-universe-home) :is(
  .admin-studio-flow-project-card,
  .admin-studio-flow-launch-card,
  .admin-studio-flow-character-rail
) {
  border-color: var(--studio-workspace-border) !important;
  background: var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-universe-home) :is(
  .admin-studio-flow-project-card:is(:hover, :focus-visible),
  .admin-studio-flow-launch-card:is(:hover, :focus-visible),
  .admin-studio-flow-character-rail > div:last-child > a:is(:hover, :focus-visible)
) {
  border-color: rgba(17, 24, 39, 0.16) !important;
  background: var(--studio-workspace-card-hover) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card > div,
body:has(.admin-studio-universe-home) .admin-studio-flow-project-card > div.has-image {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(17, 24, 39, 0.045)),
    var(--studio-workspace-media) !important;
  color: var(--studio-workspace-text) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-mini > div {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(20, 184, 166, 0.09)),
    var(--studio-workspace-media) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-special > div {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.15), rgba(59, 130, 246, 0.1)),
    var(--studio-workspace-media) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-mini > div span {
  border-color: rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.52);
  color: rgba(17, 24, 39, 0.78);
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card section > span,
body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card span,
body:has(.admin-studio-universe-home) .admin-studio-flow-character-rail > div:first-child span {
  color: var(--studio-workspace-chip-text) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card strong,
body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card strong,
body:has(.admin-studio-universe-home) .admin-studio-flow-character-rail strong {
  color: var(--studio-workspace-text) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-project-card small,
body:has(.admin-studio-universe-home) .admin-studio-flow-project-card em,
body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card small,
body:has(.admin-studio-universe-home) .admin-studio-flow-character-rail small {
  color: var(--studio-workspace-muted) !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card {
  min-height: 104px;
  align-content: center;
  gap: 8px;
  padding: 16px;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card span {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
}

body:has(.admin-studio-universe-home) .admin-studio-source-badge {
  border-color: rgba(100, 116, 139, 0.22) !important;
  background: rgba(248, 250, 252, 0.9) !important;
  color: #475569 !important;
}

body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-hybrid {
  border-color: rgba(13, 148, 136, 0.28) !important;
  background: rgba(204, 251, 241, 0.88) !important;
  color: #0f766e !important;
}

body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-storyboard {
  border-color: rgba(79, 70, 229, 0.24) !important;
  background: rgba(224, 231, 255, 0.88) !important;
  color: #4338ca !important;
}

body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-docs_fallback {
  border-color: rgba(217, 119, 6, 0.32) !important;
  background: rgba(254, 243, 199, 0.92) !important;
  color: #92400e !important;
}

body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-static {
  border-color: rgba(71, 85, 105, 0.2) !important;
  background: rgba(226, 232, 240, 0.88) !important;
  color: #475569 !important;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-launch-card strong {
  font-size: 1rem;
}

body:has(.admin-studio-universe-home) .admin-studio-flow-character-rail > div:last-child a {
  background: var(--studio-workspace-chip-bg);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) {
  --studio-workspace-surface: #0f1012;
  --studio-workspace-card: #101011;
  --studio-workspace-card-hover: #141416;
  --studio-workspace-media: #171719;
  --studio-workspace-border: rgba(255, 255, 255, 0.085);
  --studio-workspace-text: rgba(248, 250, 252, 0.9);
  --studio-workspace-muted: rgba(248, 250, 252, 0.52);
  --studio-workspace-chip-bg: rgba(255, 255, 255, 0.055);
  --studio-workspace-chip-text: rgba(248, 250, 252, 0.52);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-workspace-search,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-workspace-action {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
    var(--studio-workspace-card) !important;
  color: var(--studio-workspace-text) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-workspace-search {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    #111214 !important;
  color: rgba(248, 250, 252, 0.82) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-workspace-search input {
  color: var(--studio-workspace-text) !important;
  -webkit-text-fill-color: var(--studio-workspace-text);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-flow-project-card > div,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-flow-project-card > div.has-image {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.075), rgba(255, 255, 255, 0.025)),
    var(--studio-workspace-media) !important;
  color: var(--studio-workspace-text) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-mini > div {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(255, 255, 255, 0.025)),
    var(--studio-workspace-media) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-special > div {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.11), rgba(96, 165, 250, 0.07)),
    var(--studio-workspace-media) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-flow-project-card.is-mini > div span {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.82);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice {
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(69, 47, 13, 0.45);
  color: rgba(253, 230, 138, 0.86);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice strong,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice span {
  color: rgba(253, 230, 138, 0.9);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice.is-db-unavailable {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(69, 10, 10, 0.42);
  color: rgba(254, 202, 202, 0.9);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice.is-db-unavailable strong,
html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-notice.is-db-unavailable span {
  color: rgba(254, 202, 202, 0.92);
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-badge {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(248, 250, 252, 0.72) !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-hybrid {
  border-color: rgba(45, 212, 191, 0.36) !important;
  background: rgba(20, 184, 166, 0.18) !important;
  color: #99f6e4 !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-storyboard {
  border-color: rgba(129, 140, 248, 0.36) !important;
  background: rgba(99, 102, 241, 0.18) !important;
  color: #c7d2fe !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-docs_fallback {
  border-color: rgba(245, 158, 11, 0.42) !important;
  background: rgba(146, 64, 14, 0.3) !important;
  color: #fde68a !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) .admin-studio-source-badge.is-static {
  border-color: rgba(148, 163, 184, 0.28) !important;
  background: rgba(100, 116, 139, 0.2) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home) :is(
  .admin-studio-flow-project-card:is(:hover, :focus-visible),
  .admin-studio-flow-launch-card:is(:hover, :focus-visible),
  .admin-studio-flow-character-rail > div:last-child > a:is(:hover, :focus-visible)
) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: var(--studio-workspace-card-hover) !important;
}

body:has(.admin-studio-special-page) {
  --studio-special-bg: #f3f5fa;
  --studio-special-card: rgba(255, 255, 255, 0.84);
  --studio-special-card-strong: rgba(255, 255, 255, 0.96);
  --studio-special-border: rgba(17, 24, 39, 0.1);
  --studio-special-text: rgba(15, 23, 42, 0.92);
  --studio-special-muted: rgba(71, 85, 105, 0.72);
  --studio-special-soft: rgba(99, 102, 241, 0.08);
  background:
    radial-gradient(circle at 16% 0%, rgba(244, 114, 182, 0.14), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(96, 165, 250, 0.16), transparent 34%),
    var(--studio-special-bg) !important;
  color: var(--studio-special-text);
}

html[data-theme="dark"] body:has(.admin-studio-special-page) {
  --studio-special-bg: #08090b;
  --studio-special-card: rgba(255, 255, 255, 0.055);
  --studio-special-card-strong: rgba(255, 255, 255, 0.08);
  --studio-special-border: rgba(255, 255, 255, 0.09);
  --studio-special-text: rgba(248, 250, 252, 0.92);
  --studio-special-muted: rgba(203, 213, 225, 0.62);
  --studio-special-soft: rgba(255, 255, 255, 0.045);
  background:
    radial-gradient(circle at 18% 0%, rgba(244, 114, 182, 0.1), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(96, 165, 250, 0.09), transparent 34%),
    var(--studio-special-bg) !important;
}

body:has(.admin-studio-special-page) :is(.site-main-shell, .site-main, .admin-studio-special-page) {
  background: transparent !important;
}

.admin-studio-special-page {
  padding-bottom: 128px;
}

.admin-studio-special-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: stretch;
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--studio-special-border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.36), transparent 30%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.11), rgba(59, 130, 246, 0.09)),
    var(--studio-special-card);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .admin-studio-special-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(59, 130, 246, 0.06)),
    var(--studio-special-card);
  box-shadow: none;
}

.admin-studio-special-hero > div:first-child {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.admin-studio-special-hero span,
.admin-studio-special-status span,
.admin-studio-special-chapters article > div span {
  color: rgba(37, 99, 235, 0.86);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-theme="dark"] :is(.admin-studio-special-hero span, .admin-studio-special-status span, .admin-studio-special-chapters article > div span) {
  color: rgba(147, 197, 253, 0.84);
}

.admin-studio-special-hero h1 {
  margin: 0;
  color: var(--studio-special-text);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.96;
}

.admin-studio-special-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--studio-special-muted);
  font-size: 1.04rem;
  font-weight: 760;
  line-height: 1.45;
}

.admin-studio-special-hero dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-studio-special-hero dl div,
.admin-studio-special-status article,
.admin-studio-special-chapters article {
  border: 1px solid var(--studio-special-border);
  border-radius: 10px;
  background: var(--studio-special-card-strong);
}

.admin-studio-special-hero dl div {
  display: grid;
  align-content: end;
  min-height: 118px;
  padding: 16px;
}

.admin-studio-special-hero dt {
  color: var(--studio-special-muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-studio-special-hero dd {
  margin: 4px 0 0;
  color: var(--studio-special-text);
  font-size: 2rem;
  font-weight: 950;
  line-height: 1;
}

.admin-studio-special-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-studio-special-status article {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 156px;
  padding: 17px;
}

.admin-studio-special-status strong,
.admin-studio-special-chapters h2 {
  color: var(--studio-special-text);
  font-weight: 920;
  line-height: 1.15;
}

.admin-studio-special-status small,
.admin-studio-special-chapters p,
.admin-studio-special-chapters footer,
.admin-studio-special-chapters article > div small {
  color: var(--studio-special-muted);
  font-weight: 720;
  line-height: 1.45;
}

.admin-studio-special-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.admin-studio-special-chapters article {
  display: grid;
  gap: 13px;
  min-height: 286px;
  padding: 18px;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.admin-studio-special-chapters article:hover {
  border-color: rgba(37, 99, 235, 0.28);
  background:
    linear-gradient(135deg, var(--studio-special-soft), transparent),
    var(--studio-special-card-strong);
  transform: translateY(-1px);
}

.admin-studio-special-chapters article > div,
.admin-studio-special-chapters footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-studio-special-chapters h2 {
  margin: 0;
  font-size: 1.35rem;
}

.admin-studio-special-chapters p {
  margin: 0;
}

.admin-studio-special-chapters footer {
  align-self: end;
  padding-top: 14px;
  border-top: 1px solid var(--studio-special-border);
}

@media (max-width: 860px) {
  .admin-studio-special-hero,
  .admin-studio-special-status {
    grid-template-columns: 1fr;
  }
}

body:has(main.admin-studio-special-page) {
  --studio-special-bg: var(--studio-workspace-canvas, #f3f5fa);
  --studio-special-card: var(--studio-workspace-card, #ffffff);
  --studio-special-border: color-mix(in srgb, var(--studio-workspace-text, #111827) 9%, transparent);
  --studio-special-text: var(--studio-workspace-text, rgba(17, 24, 39, 0.92));
  --studio-special-muted: var(--studio-workspace-muted, rgba(71, 85, 105, 0.68));
  background: var(--studio-special-bg) !important;
}

html[data-theme="dark"] body:has(main.admin-studio-special-page) {
  --studio-special-bg: var(--studio-workspace-canvas, #050506);
  --studio-special-card: var(--studio-workspace-card, #101010);
  --studio-special-border: rgba(255, 255, 255, 0.1);
  --studio-special-text: rgba(248, 250, 252, 0.92);
  --studio-special-muted: rgba(203, 213, 225, 0.62);
  background: var(--studio-special-bg) !important;
}

body:has(main.admin-studio-special-page) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.admin-studio-special-page,
  .admin-studio-workspace-topbar,
  .site-sidebar.is-studio-console
) {
  background-color: var(--studio-special-bg) !important;
  background-image: none !important;
}

.admin-studio-special-episode-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.7vw, 22px);
  margin-top: clamp(18px, 2.4vw, 30px);
}

.admin-studio-flow-season-grid > .admin-studio-special-episode-card {
  border-color: transparent !important;
  background: var(--studio-special-card) !important;
  box-shadow: none !important;
}

.admin-studio-flow-season-grid > .admin-studio-special-episode-card:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--studio-special-text) 16%, transparent) !important;
  box-shadow: none !important;
}

.admin-studio-flow-season-grid > .admin-studio-special-episode-card::after {
  background: linear-gradient(180deg, transparent 0%, var(--studio-special-card) 76%, var(--studio-special-card) 100%) !important;
}

.admin-studio-flow-season-grid > .admin-studio-special-episode-card > .admin-studio-special-episode-poster {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.62), transparent 28%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.13), rgba(96, 165, 250, 0.12)),
    var(--studio-workspace-media, #eef2f7) !important;
  color: var(--studio-special-text) !important;
}

html[data-theme="dark"] .admin-studio-flow-season-grid > .admin-studio-special-episode-card > .admin-studio-special-episode-poster {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(96, 165, 250, 0.055)),
    var(--studio-workspace-media, #171717) !important;
}

.admin-studio-flow-season-grid > .admin-studio-special-episode-card > .admin-studio-special-episode-poster > span:not(.admin-studio-flow-episode-loading-visual) {
  color: color-mix(in srgb, var(--studio-special-text) 70%, transparent) !important;
}

.admin-studio-special-episode-poster i {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--studio-special-text) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-special-card) 82%, transparent);
  color: color-mix(in srgb, var(--studio-special-text) 72%, transparent);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  backdrop-filter: blur(14px) saturate(130%);
}

.admin-studio-flow-season-grid .admin-studio-special-episode-caption span {
  color: color-mix(in srgb, var(--studio-special-text) 52%, transparent) !important;
}

.admin-studio-flow-season-grid .admin-studio-special-episode-caption strong {
  color: var(--studio-special-text) !important;
}

.admin-studio-flow-season-grid .admin-studio-special-episode-caption small {
  color: var(--studio-special-muted) !important;
}

html[data-theme="dark"] .admin-studio-flow-season-grid .admin-studio-special-episode-caption strong {
  color: rgba(248, 250, 252, 0.95) !important;
}

@media (max-width: 980px) {
  .admin-studio-special-episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-studio-special-episode-grid {
    grid-template-columns: 1fr;
  }
}

.admin-studio-special-episode-summary {
  display: grid;
  grid-template-columns: 1.1fr minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.admin-studio-special-episode-summary article {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--studio-special-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--studio-special-card) 92%, transparent);
}

.admin-studio-special-episode-summary span,
.admin-studio-special-scene-card section > span {
  color: color-mix(in srgb, var(--studio-special-text) 58%, transparent);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-studio-special-episode-summary strong {
  color: var(--studio-special-text);
  font-size: 1.2rem;
  font-weight: 940;
  line-height: 1.15;
}

.admin-studio-special-episode-summary small {
  color: var(--studio-special-muted);
  font-weight: 720;
  line-height: 1.42;
}

.admin-studio-special-lyrics-strip {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-studio-special-lyrics-strip::-webkit-scrollbar {
  display: none;
}

.admin-studio-special-lyrics-strip span {
  flex: 0 0 auto;
  max-width: min(420px, 74vw);
  padding: 10px 13px;
  border: 1px solid var(--studio-special-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-special-card) 86%, transparent);
  color: color-mix(in srgb, var(--studio-special-text) 76%, transparent);
  font-size: 0.84rem;
  font-weight: 820;
  white-space: nowrap;
}

.admin-studio-special-scene-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: 18px;
  padding-bottom: 70px;
}

.admin-studio-special-scene-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--studio-special-text) 7%, transparent);
  border-radius: 18px;
  background: var(--studio-special-card);
  color: var(--studio-special-text);
  box-shadow: none;
}

.admin-studio-special-scene-poster {
  position: relative;
  display: grid;
  min-height: 186px;
  place-items: center;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.55), transparent 28%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.14), rgba(96, 165, 250, 0.14)),
    var(--studio-workspace-media, #eef2f7);
}

html[data-theme="dark"] .admin-studio-special-scene-poster {
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(135deg, rgba(244, 114, 182, 0.08), rgba(96, 165, 250, 0.06)),
    var(--studio-workspace-media, #171717);
}

.admin-studio-special-scene-poster span {
  color: color-mix(in srgb, var(--studio-special-text) 72%, transparent);
  font-size: clamp(2rem, 5vw, 4.8rem);
  font-weight: 950;
  letter-spacing: 0;
}

.admin-studio-special-scene-card section {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.admin-studio-special-scene-card strong {
  min-height: 2.42em;
  color: var(--studio-special-text);
  font-size: 1.08rem;
  font-weight: 920;
  line-height: 1.18;
}

.admin-studio-special-scene-card p {
  min-height: 2.7em;
  margin: 0;
  color: var(--studio-special-muted);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.35;
}

.admin-studio-special-scene-card div[aria-label="Scene characters"] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
}

.admin-studio-special-scene-card small {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--studio-special-text) 9%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-special-text) 5%, transparent);
  color: color-mix(in srgb, var(--studio-special-text) 68%, transparent);
  font-size: 0.74rem;
  font-weight: 850;
}

@media (max-width: 1180px) {
  .admin-studio-special-scene-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .admin-studio-special-episode-summary,
  .admin-studio-special-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .admin-studio-special-episode-summary,
  .admin-studio-special-scene-grid {
    grid-template-columns: 1fr;
  }
}

body:has(.admin-studio-universe-home),
body:has(.admin-studio-universe-home) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-universe-home,
  .admin-studio-workspace-topbar,
  .site-sidebar.is-studio-console
) {
  background-color: var(--studio-workspace-canvas) !important;
  background-image: none !important;
}

html[data-theme="dark"] body:has(.admin-studio-universe-home),
html[data-theme="dark"] body:has(.admin-studio-universe-home) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-universe-home,
  .admin-studio-workspace-topbar,
  .site-sidebar.is-studio-console
) {
  background-color: var(--studio-workspace-canvas) !important;
  background-image: none !important;
}

body:has(.admin-studio-character-flow-page),
body:has(.admin-studio-character-flow-page),
body:has(.admin-studio-character-page) {
  --studio-character-canvas: #f6f4ed;
  --studio-character-surface: #fbfaf6;
  --studio-character-surface-strong: #ffffff;
  --studio-character-border: rgba(17, 24, 39, 0.08);
  --studio-character-text: rgba(17, 24, 39, 0.88);
  --studio-character-muted: rgba(17, 24, 39, 0.52);
  --studio-character-gutter: clamp(14px, 2.3vw, 28px);
  background: var(--studio-character-canvas) !important;
}

body:has(.admin-studio-character-flow-page) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-character-flow-page,
  .admin-studio-character-flow,
  .admin-studio-character-flow-topbar
),
body:has(.admin-studio-character-page) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-character-page
) {
  background-color: var(--studio-character-canvas) !important;
  background-image: none !important;
}

body:has(.admin-studio-character-flow-page) .site-main,
body:has(.admin-studio-character-page) .site-main {
  max-width: none;
  padding-top: 0;
}

body:has(.admin-studio-character-flow-page) .admin-studio-page.admin-studio-character-flow-page,
body:has(.admin-studio-character-page) .admin-studio-page.admin-studio-character-page {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

body:has(.admin-studio-character-flow-page) .admin-studio-page.admin-studio-character-flow-page {
  padding: 0;
}

body:has(.admin-studio-character-page) .admin-studio-page.admin-studio-character-page {
  padding-inline: var(--studio-character-gutter);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-page,
body:has(.admin-studio-character-flow-page) .admin-studio-character-flow {
  --character-flow-bg: var(--studio-character-canvas);
  --character-flow-text: var(--studio-character-text);
  --character-flow-muted: var(--studio-character-muted);
  --character-flow-line: var(--studio-character-border);
  --character-flow-panel: var(--studio-character-surface);
  --character-flow-panel-strong: var(--studio-character-surface-strong);
  color: var(--studio-character-text);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow:not(.is-embedded):not(.is-asset-workspace) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  padding: 76px var(--studio-character-gutter) 260px;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar {
  --admin-studio-topbar-canvas: var(--studio-character-canvas);
  --admin-studio-topbar-gutter: var(--studio-character-gutter);
  --admin-studio-topbar-muted: var(--studio-character-muted);
  --admin-studio-topbar-text: var(--studio-character-text);
  width: 100%;
  margin: 0;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar.is-detail {
  grid-template-columns: minmax(44px, 72px) minmax(0, clamp(220px, 38vw, 520px)) auto;
  justify-content: flex-start;
  padding-right: var(--studio-character-gutter);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar.is-detail .admin-studio-character-flow-actions {
  justify-self: start;
  justify-content: flex-start;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-heading {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-heading strong {
  overflow: hidden;
  max-width: 110px;
  color: var(--studio-character-text);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-back {
  display: inline-flex;
  width: 36px;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--studio-character-text);
  text-decoration: none;
  box-shadow: none;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-back:is(:hover, :focus-visible) {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  outline: none;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search {
  width: min(100%, 580px);
  min-height: 40px;
  justify-self: center;
  gap: 6px;
  padding: 4px 5px 4px 12px;
  border-color: rgba(17, 24, 39, 0.1);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.075), rgba(17, 24, 39, 0.045)),
    rgba(245, 241, 232, 0.34);
  color: #6b7280;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 24px rgba(15, 23, 42, 0.045);
  backdrop-filter: blur(18px);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search input {
  height: 34px;
  color: var(--studio-character-text);
  font-size: 0.82rem;
  font-weight: 820;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search input::placeholder {
  color: var(--studio-character-muted);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-button {
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-button:is(:hover, :focus-visible),
body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-button.is-active {
  background: rgba(17, 24, 39, 0.08);
  color: var(--studio-character-text);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-panel {
  z-index: 260;
  border-color: var(--studio-character-border);
  background: var(--studio-character-surface-strong);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.14);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-legacy {
  height: 40px !important;
  padding: 0 13px !important;
  border-color: var(--studio-character-border) !important;
  border-radius: 8px !important;
  background: var(--studio-character-surface) !important;
  color: var(--studio-character-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(auto-fill, minmax(168px, 168px));
  justify-content: flex-start;
  margin: 0 0 28px;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-card,
body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new {
  border-color: var(--studio-character-border);
  box-shadow: none;
}

body:has(.admin-studio-character-page) .admin-studio-character-layout {
  width: 100%;
  max-width: none;
}

body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console,
body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-expanded,
body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-pinned,
body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded),
body:has(.admin-studio-character-page) .site-sidebar.is-studio-console,
body:has(.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-expanded,
body:has(.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-pinned,
body:has(.admin-studio-character-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: transparent !important;
  background: var(--studio-character-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console,
  body:has(.admin-studio-character-page) .site-sidebar.is-studio-console {
    padding-top: 64px !important;
  }

  body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console .sidebar-studio-nav,
  body:has(.admin-studio-character-page) .site-sidebar.is-studio-console .sidebar-studio-nav {
    margin-top: 0 !important;
  }
}

@media (min-width: 1360px) {
  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar:not(.is-detail) {
    grid-template-columns: clamp(360px, 31vw, 640px) minmax(320px, 580px) minmax(180px, 1fr);
  }
}

@media (min-width: 1440px) {
  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library {
    grid-template-columns: repeat(auto-fill, minmax(184px, 184px));
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-card,
  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new {
    width: 184px;
    min-width: 184px;
    height: 184px;
  }
}

@media (max-width: 760px) {
  .admin-studio-background-create-grid,
  .admin-studio-background-upload-row,
  .admin-studio-background-overview,
  .admin-studio-background-qa-queue,
  .admin-studio-background-grid {
    grid-template-columns: 1fr;
  }

  .admin-studio-background-qa-queue > div:last-child {
    justify-content: flex-start;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow:not(.is-embedded):not(.is-asset-workspace) {
    padding-top: 112px;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow.is-detail-page:not(.is-embedded):not(.is-asset-workspace) {
    padding-top: 72px;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding-right: var(--studio-character-gutter);
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar.is-detail {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-legacy span {
    display: none;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-legacy {
    width: 40px !important;
    padding: 0 !important;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-topbar:not(.is-detail) .admin-studio-character-flow-search {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
  }

  body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library {
    grid-template-columns: repeat(auto-fill, minmax(148px, 148px));
    justify-content: center;
  }
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page),
html[data-theme="dark"] body:has(.admin-studio-character-page) {
  color-scheme: dark;
  --studio-character-canvas: #050506;
  --studio-character-surface: #15161b;
  --studio-character-surface-strong: #101011;
  --studio-character-border: rgba(255, 255, 255, 0.08);
  --studio-character-text: rgba(248, 250, 252, 0.9);
  --studio-character-muted: rgba(248, 250, 252, 0.5);
  background: var(--studio-character-canvas) !important;
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-back:is(:hover, :focus-visible),
html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-button:is(:hover, :focus-visible),
html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-button.is-active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-filter-panel {
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.36);
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search,
html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-legacy {
  border-color: var(--studio-character-border) !important;
  background: var(--studio-character-surface) !important;
  color: var(--studio-character-text) !important;
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    #111214 !important;
  color: rgba(248, 250, 252, 0.82) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-search input {
  color: var(--studio-character-text) !important;
  -webkit-text-fill-color: var(--studio-character-text);
}

body:has(.admin-studio-character-flow-page) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-character-flow-page,
  .admin-studio-character-flow,
  .admin-studio-character-flow-topbar,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
),
body:has(.admin-studio-character-page) :is(
  .site-main-shell,
  .site-main,
  .admin-studio-character-page,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
) {
  border-right-color: transparent !important;
  background-color: var(--studio-character-canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.admin-studio-character-flow-page) .site-sidebar.is-studio-console :is(
  .sidebar-nav,
  .sidebar-nav-secondary,
  .sidebar-studio-nav,
  .sidebar-footer
),
body:has(.admin-studio-character-page) .site-sidebar.is-studio-console :is(
  .sidebar-nav,
  .sidebar-nav-secondary,
  .sidebar-studio-nav,
  .sidebar-footer
) {
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new {
  border-color: var(--studio-character-border) !important;
  background: var(--studio-character-surface) !important;
  color: var(--studio-character-text) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new > svg {
  background: color-mix(in srgb, var(--studio-character-text) 8%, transparent) !important;
  color: var(--studio-character-text);
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new strong {
  color: var(--studio-character-text) !important;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new small {
  color: var(--studio-character-muted) !important;
}

body:has(.admin-studio-character-flow-page) .admin-studio-character-flow-library-new:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--studio-character-text) 16%, var(--studio-character-border)) !important;
  background: var(--studio-character-surface-strong) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console,
html[data-theme="light"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="light"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="light"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded),
html[data-theme="light"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console,
html[data-theme="light"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="light"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="light"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: transparent !important;
  background: #f6f4ed !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console,
html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded),
html[data-theme="dark"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console,
html[data-theme="dark"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-expanded,
html[data-theme="dark"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console.is-desktop-pinned,
html[data-theme="dark"] body:has(main.admin-studio-character-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: transparent !important;
  background: #050506 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(main.admin-studio-character-flow-page),
html[data-theme="dark"] body:has(main.admin-studio-character-page) {
  --studio-character-canvas: #050506;
  background: #050506 !important;
}

html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) :is(
  .site-main-shell,
  .site-main,
  main.admin-studio-character-flow-page,
  .admin-studio-character-flow,
  .admin-studio-character-flow-topbar,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
),
html[data-theme="dark"] body:has(main.admin-studio-character-page) :is(
  .site-main-shell,
  .site-main,
  main.admin-studio-character-page,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
) {
  border-right-color: transparent !important;
  background: #050506 !important;
  background-color: #050506 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] body:has(main.admin-studio-character-flow-page),
html[data-theme="light"] body:has(main.admin-studio-character-flow-page) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.admin-studio-character-flow-page,
  .admin-studio-character-flow.is-asset-workspace,
  .admin-studio-character-asset-flow,
  .admin-studio-character-asset-topbar,
  .admin-studio-character-asset-workspace
) {
  background: #f6f4ed !important;
  background-color: #f6f4ed !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(main.admin-studio-character-flow-page),
html[data-theme="dark"] body:has(main.admin-studio-character-flow-page) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.admin-studio-character-flow-page,
  .admin-studio-character-flow.is-asset-workspace,
  .admin-studio-character-asset-flow,
  .admin-studio-character-asset-topbar,
  .admin-studio-character-asset-workspace
) {
  background: #050506 !important;
  background-color: #050506 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="light"] body:has(main.admin-studio-universe-home),
html[data-theme="light"] body:has(main.admin-studio-universe-home) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.admin-studio-universe-home,
  .admin-studio-workspace-topbar,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
) {
  background: #f6f4ed !important;
  background-color: #f6f4ed !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(main.admin-studio-universe-home),
html[data-theme="dark"] body:has(main.admin-studio-universe-home) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.admin-studio-universe-home,
  .admin-studio-workspace-topbar,
  .site-sidebar.is-studio-console,
  .site-sidebar.is-studio-console.is-desktop-expanded,
  .site-sidebar.is-studio-console.is-desktop-pinned,
  .site-sidebar.is-studio-console:not(.is-desktop-expanded)
) {
  background: #050506 !important;
  background-color: #050506 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > :is(a, button),
body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell {
  border-color: transparent !important;
  background: var(--studio-workspace-card) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > :is(a, button).has-placeholder > .admin-studio-flow-episode-poster,
body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-placeholder > a > .admin-studio-flow-episode-poster {
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(20, 184, 166, 0.055)),
    var(--studio-workspace-media) !important;
  color: var(--studio-workspace-text) !important;
}

body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > :is(a, button).has-placeholder::after,
body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-placeholder::after {
  background: linear-gradient(180deg, transparent 0%, var(--studio-workspace-card) 78%, var(--studio-workspace-card) 100%) !important;
}

body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > :is(a, button).has-placeholder > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual),
body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-placeholder > a > .admin-studio-flow-episode-poster > span:not(.admin-studio-flow-episode-loading-visual) {
  color: color-mix(in srgb, var(--studio-workspace-text) 64%, transparent) !important;
}

html[data-theme="dark"] body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > :is(a, button).has-placeholder > .admin-studio-flow-episode-poster,
html[data-theme="dark"] body:has(main.admin-studio-season-home) .admin-studio-flow-season-grid > .admin-studio-flow-episode-card-shell.has-placeholder > a > .admin-studio-flow-episode-poster {
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.055), rgba(255, 255, 255, 0.022)),
    var(--studio-workspace-media) !important;
}

.admin-studio-mini-story-create-float {
  position: fixed;
  left: 50%;
  bottom: clamp(22px, 4.5vh, 42px);
  z-index: 80;
  transform: translateX(-50%);
}

.admin-studio-mini-story-create-float::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  background: color-mix(in srgb, var(--studio-workspace-canvas) 40%, transparent);
  backdrop-filter: blur(2px);
}

.admin-studio-mini-story-create-float[open]::before {
  display: block;
}

.admin-studio-mini-story-create-float > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 194px;
  min-height: 72px;
  padding: 18px 28px;
  border: 1px solid color-mix(in srgb, var(--studio-workspace-text) 13%, transparent);
  border-radius: 26px;
  background: color-mix(in srgb, var(--studio-workspace-card) 86%, transparent);
  color: var(--studio-workspace-text);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--studio-workspace-text) 13%, transparent);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
  list-style: none;
  backdrop-filter: blur(20px) saturate(145%);
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-studio-mini-story-create-float > summary::-webkit-details-marker {
  display: none;
}

.admin-studio-mini-story-create-float > summary:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--studio-workspace-card) 94%, var(--studio-workspace-text) 6%);
  box-shadow: 0 22px 64px color-mix(in srgb, var(--studio-workspace-text) 17%, transparent);
  transform: translateY(-2px);
}

.admin-studio-mini-story-create-float[open] > summary {
  border-color: transparent;
  background: var(--studio-workspace-text);
  color: var(--studio-workspace-canvas);
}

.admin-studio-mini-story-create-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  border: 0;
  background: color-mix(in srgb, var(--studio-workspace-canvas) 42%, transparent);
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.admin-studio-mini-story-create-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 194px;
  min-height: 72px;
  padding: 18px 28px;
  border: 1px solid color-mix(in srgb, var(--studio-workspace-text) 13%, transparent);
  border-radius: 26px;
  background: color-mix(in srgb, var(--studio-workspace-card) 86%, transparent);
  color: var(--studio-workspace-text);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--studio-workspace-text) 13%, transparent);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
  backdrop-filter: blur(20px) saturate(145%);
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.admin-studio-mini-story-create-toggle:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--studio-workspace-card) 94%, var(--studio-workspace-text) 6%);
  box-shadow: 0 22px 64px color-mix(in srgb, var(--studio-workspace-text) 17%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.admin-studio-mini-story-create-float.is-open .admin-studio-mini-story-create-toggle {
  border-color: transparent;
  background: var(--studio-workspace-text);
  color: var(--studio-workspace-canvas);
}

.admin-studio-mini-story-create-panel {
  position: fixed;
  left: 50%;
  bottom: 112px;
  z-index: 2;
  width: min(880px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--studio-workspace-border);
  border-radius: 26px;
  background: color-mix(in srgb, var(--studio-workspace-card) 96%, transparent);
  color: var(--studio-workspace-text);
  box-shadow: 0 28px 90px color-mix(in srgb, var(--studio-workspace-text) 18%, transparent);
  overflow: auto;
  transform: translateX(-50%);
  backdrop-filter: blur(24px) saturate(145%);
}

.admin-studio-mini-story-create-head {
  position: relative;
  display: grid;
  gap: 8px;
  padding-right: 42px;
}

.admin-studio-mini-story-create-head span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--studio-workspace-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-mini-story-create-head strong {
  color: var(--studio-workspace-text);
  font-size: clamp(1.18rem, 2.4vw, 1.7rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.02;
}

.admin-studio-mini-story-create-head p {
  max-width: 66ch;
  margin: 0;
  color: var(--studio-workspace-muted);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.45;
}

.admin-studio-mini-story-create-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 5%, transparent);
  color: var(--studio-workspace-text);
  cursor: pointer;
}

.admin-studio-mini-story-create-close:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--studio-workspace-text) 9%, transparent);
  outline: none;
}

.admin-studio-mini-story-create-form {
  display: grid;
  gap: 16px;
}

.admin-studio-mini-story-command-cast {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.admin-studio-mini-story-command-add {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 6%, transparent);
  color: var(--studio-workspace-text);
  cursor: pointer;
}

.admin-studio-mini-story-command-add:is(:hover, :focus-visible),
.admin-studio-mini-story-command-add[aria-expanded="true"] {
  background: var(--studio-workspace-text);
  color: var(--studio-workspace-canvas);
  outline: none;
}

.admin-studio-mini-story-command-selected {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-studio-mini-story-command-selected small {
  color: var(--studio-workspace-muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.admin-studio-mini-story-command-selected button {
  display: inline-flex;
  max-width: 220px;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 5%, transparent);
  color: var(--studio-workspace-text);
  cursor: pointer;
  font: inherit;
}

.admin-studio-mini-story-command-selected button > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 10%, transparent);
  font-size: 0.72rem;
  font-weight: 900;
}

.admin-studio-mini-story-command-selected img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-mini-story-command-selected strong {
  overflow: hidden;
  font-size: 0.78rem;
  font-weight: 860;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-mini-story-picker {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--studio-workspace-text) 4%, transparent);
}

.admin-studio-mini-story-picker-search {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 5%, transparent);
  color: var(--studio-workspace-muted);
}

.admin-studio-mini-story-picker-search input {
  min-width: 0;
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  color: var(--studio-workspace-text) !important;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 760;
  outline: none;
  box-shadow: none !important;
  -webkit-text-fill-color: var(--studio-workspace-text);
}

.admin-studio-mini-story-create-field {
  display: grid;
  gap: 8px;
}

.admin-studio-mini-story-create-field span {
  color: var(--studio-workspace-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-studio-mini-story-create-field textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-workspace-text) 5%, transparent);
  color: var(--studio-workspace-text);
  padding: 13px 14px;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  outline: none;
}

.admin-studio-mini-story-create-field textarea::placeholder {
  color: var(--studio-workspace-muted);
}

.admin-studio-mini-story-duration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-studio-mini-story-duration-row label {
  position: relative;
}

.admin-studio-mini-story-duration-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-studio-mini-story-duration-row span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 76px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-workspace-text) 5%, transparent);
  color: var(--studio-workspace-text);
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
}

.admin-studio-mini-story-duration-row input:checked + span {
  border-color: transparent;
  background: var(--studio-workspace-text);
  color: var(--studio-workspace-canvas);
}

.admin-studio-mini-story-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 10px;
}

.admin-studio-mini-story-cast-card {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 74px;
  padding: 10px;
  border: 1px solid var(--studio-workspace-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--studio-workspace-text) 4%, transparent);
  color: var(--studio-workspace-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.admin-studio-mini-story-cast-card input {
  position: absolute;
  inset: 8px 8px auto auto;
  width: 16px;
  height: 16px;
  accent-color: var(--studio-workspace-text);
}

.admin-studio-mini-story-cast-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--studio-workspace-text) 28%, transparent);
  background: color-mix(in srgb, var(--studio-workspace-text) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-workspace-text) 10%, transparent);
}

.admin-studio-mini-story-cast-card.is-selected {
  border-color: color-mix(in srgb, var(--studio-workspace-text) 28%, transparent);
  background: color-mix(in srgb, var(--studio-workspace-text) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-workspace-text) 10%, transparent);
}

.admin-studio-mini-story-cast-image {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-workspace-text) 8%, transparent);
  color: var(--studio-workspace-text);
  font-weight: 900;
}

.admin-studio-mini-story-cast-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-studio-mini-story-cast-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-right: 18px;
}

.admin-studio-mini-story-cast-copy strong {
  overflow: hidden;
  color: var(--studio-workspace-text);
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-mini-story-cast-copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--studio-workspace-muted);
  font-size: 0.7rem;
  font-weight: 720;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-studio-mini-story-create-submit {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--studio-workspace-text);
  color: var(--studio-workspace-canvas);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-studio-mini-story-create-submit:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

html[data-theme="dark"] .admin-studio-mini-story-create-float::before {
  background: rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .admin-studio-mini-story-create-backdrop {
  background: rgba(0, 0, 0, 0.46);
}

@media (max-width: 720px) {
  .admin-studio-mini-story-create-float {
    bottom: 16px;
    width: calc(100vw - 28px);
  }

  .admin-studio-mini-story-create-float > summary,
  .admin-studio-mini-story-create-toggle {
    width: 100%;
    min-height: 58px;
    border-radius: 20px;
  }

  .admin-studio-mini-story-create-panel {
    bottom: 88px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 112px);
    border-radius: 22px;
  }

  .admin-studio-mini-story-cast-grid {
    grid-template-columns: 1fr;
  }
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow.is-detail-page:not(.is-embedded):not(.is-asset-workspace) {
  background: var(--studio-character-canvas) !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-detail,
  .admin-studio-character-flow-detail-grid,
  .admin-studio-character-flow-stage
) {
  background: transparent !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-reference-card,
  .admin-studio-character-flow-season-outfits,
  .admin-studio-character-flow-season-outfit-card,
  .admin-studio-character-flow-advanced,
  .admin-studio-character-flow-record-panel > div,
  .admin-studio-character-flow-contract,
  .admin-studio-character-flow-contract-list,
  .admin-studio-character-flow-season-links > div
) {
  border-color: var(--studio-character-border) !important;
  background: var(--studio-character-surface) !important;
  color: var(--studio-character-text) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-reference-card > strong,
  .admin-studio-character-flow-season-outfits-head strong,
  .admin-studio-character-flow-season-outfit-card strong,
  .admin-studio-character-flow-record-panel h2,
  .admin-studio-character-flow-contract h2,
  .admin-studio-character-flow-contract strong,
  .admin-studio-character-flow-season-links strong
) {
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-reference-card small,
  .admin-studio-character-flow-season-outfits-head span,
  .admin-studio-character-flow-season-outfit-card small,
  .admin-studio-character-flow-season-outfit-card em,
  .admin-studio-character-flow-record-panel p,
  .admin-studio-character-flow-record-panel span,
  .admin-studio-character-flow-contract p,
  .admin-studio-character-flow-contract-list span,
  .admin-studio-character-flow-season-links span,
  .admin-studio-character-flow-season-links small
) {
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-reference-card.is-processing {
  border-color: color-mix(in srgb, #60a5fa 54%, var(--studio-character-border)) !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(96, 165, 250, 0.14), transparent 34%),
    var(--studio-character-surface) !important;
}

.admin-studio-character-flow-life-stages {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--studio-character-border);
  border-radius: 22px;
  background: var(--studio-character-surface);
  color: var(--studio-character-text);
}

.admin-studio-character-flow-life-stages-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.admin-studio-character-flow-life-stages-head span {
  color: var(--studio-character-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-studio-character-flow-life-stages-head strong {
  color: var(--studio-character-text);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.admin-studio-character-flow-life-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.admin-studio-character-flow-life-stage-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--studio-character-border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--studio-character-text) 4%, transparent);
}

.admin-studio-character-flow-life-stage-card.is-ready {
  border-color: color-mix(in srgb, #22c55e 28%, var(--studio-character-border));
}

.admin-studio-character-flow-life-stage-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.admin-studio-character-flow-life-stage-copy span {
  color: var(--studio-character-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-studio-character-flow-life-stage-copy strong {
  overflow: hidden;
  color: var(--studio-character-text);
  font-size: 0.86rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-studio-character-flow-life-stage-assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-studio-character-flow-life-stage-asset {
  position: relative;
  min-height: 94px;
  overflow: hidden;
  border: 1px solid var(--studio-character-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--studio-character-text) 7%, transparent);
  color: var(--studio-character-text);
  cursor: pointer;
}

.admin-studio-character-flow-life-stage-asset:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--studio-character-text) 26%, var(--studio-character-border));
  outline: none;
}

.admin-studio-character-flow-life-stage-asset.is-selected {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px color-mix(in srgb, #60a5fa 28%, transparent);
}

.admin-studio-character-flow-life-stage-asset img {
  width: 100%;
  height: 100%;
  min-height: 94px;
  display: block;
  object-fit: cover;
}

.admin-studio-character-flow-life-stage-asset span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-character-canvas) 72%, transparent);
  color: var(--studio-character-text);
  font-size: 0.68rem;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.admin-studio-character-flow-life-stage-asset.is-empty {
  display: grid;
  place-items: center;
  cursor: default;
  color: var(--studio-character-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

@media (max-width: 860px) {
  .admin-studio-character-flow-life-stage-grid {
    grid-template-columns: 1fr;
  }
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock {
  border: 1px solid var(--studio-character-border) !important;
  background: color-mix(in srgb, var(--studio-character-surface) 88%, transparent) !important;
  color: var(--studio-character-text) !important;
  box-shadow: 0 18px 54px color-mix(in srgb, var(--studio-character-text) 10%, transparent) !important;
  backdrop-filter: blur(22px) saturate(135%);
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form textarea {
  color: var(--studio-character-text) !important;
  -webkit-text-fill-color: var(--studio-character-text);
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form textarea::placeholder {
  color: var(--studio-character-muted) !important;
  -webkit-text-fill-color: var(--studio-character-muted);
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-action-preview,
  .admin-studio-character-flow-add-photo,
  .admin-studio-character-flow-meta input,
  .admin-studio-character-flow-meta select,
  .admin-studio-character-flow-season-chip
) {
  border-color: var(--studio-character-border) !important;
  background: color-mix(in srgb, var(--studio-character-text) 7%, transparent) !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta input::placeholder {
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-action-preview.is-muted {
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit {
  background: var(--studio-character-text) !important;
  color: var(--studio-character-canvas) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-disabled,
body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit:disabled {
  background: color-mix(in srgb, var(--studio-character-text) 12%, transparent) !important;
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form .admin-studio-character-flow-status {
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-job-steps span {
  border-color: var(--studio-character-border) !important;
  background: color-mix(in srgb, var(--studio-character-text) 5%, transparent) !important;
  color: var(--studio-character-muted) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-job-steps span.is-active {
  border-color: color-mix(in srgb, #60a5fa 54%, var(--studio-character-border)) !important;
  background:
    linear-gradient(90deg, rgba(96, 165, 250, 0.08), color-mix(in srgb, var(--studio-character-surface-strong) 72%, transparent), rgba(96, 165, 250, 0.08)),
    color-mix(in srgb, #60a5fa 12%, var(--studio-character-surface)) !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-job-steps span.is-done {
  border-color: color-mix(in srgb, #22c55e 44%, var(--studio-character-border)) !important;
  background: color-mix(in srgb, #22c55e 12%, var(--studio-character-surface)) !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-route-loading .admin-studio-character-flow {
  min-height: 100svh;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow.is-asset-workspace,
  .admin-studio-character-asset-flow,
  .admin-studio-character-asset-topbar,
  .admin-studio-character-asset-workspace,
  .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame,
  .admin-studio-character-flow.is-asset-workspace .admin-studio-character-asset-frame .studio-minis-flow-stage-media
) {
  background: var(--studio-character-canvas) !important;
  background-color: var(--studio-character-canvas) !important;
  background-image: none !important;
  color: var(--studio-character-text) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar .studio-minis-flow-icon-button.is-back {
  width: 36px;
  height: 36px;
  margin-right: -6px;
  background: transparent !important;
  color: var(--studio-character-text) !important;
  transform: translateX(-6px);
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar .studio-minis-flow-icon-button.is-back:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--studio-character-text) 8%, transparent) !important;
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar :is(
  .studio-minis-flow-title strong,
  .studio-minis-flow-icon-button,
  .studio-minis-flow-pill-button
) {
  color: var(--studio-character-text) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar .studio-minis-flow-title small {
  color: var(--studio-character-muted) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar .studio-minis-flow-pill-button {
  border: 1px solid var(--studio-character-border) !important;
  background: color-mix(in srgb, var(--studio-character-text) 7%, transparent) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-asset-topbar .studio-minis-flow-pill-button.is-done {
  border-color: transparent !important;
  background: var(--studio-character-text) !important;
  color: var(--studio-character-canvas) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-route-loading .admin-studio-character-flow-stage {
  min-height: calc(100svh - 76px);
  align-items: start;
  padding-top: 24px;
}

.admin-studio-character-loading-card,
.admin-studio-character-loading-search-line,
.admin-studio-character-loading-command-line,
.admin-studio-character-loading-command-body {
  position: relative;
  overflow: hidden;
}

.admin-studio-character-loading-card::after,
.admin-studio-character-loading-search-line::after,
.admin-studio-character-loading-command-line::after,
.admin-studio-character-loading-command-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--studio-character-text) 10%, transparent), transparent);
  transform: translateX(-100%);
  animation: studio-card-sweep 1.6s ease-in-out infinite;
}

.admin-studio-character-loading-search-line {
  display: block;
  width: min(220px, 42vw);
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-character-text) 8%, transparent);
}

.admin-studio-character-route-loading .admin-studio-character-flow-legacy {
  width: 40px;
}

.admin-studio-character-loading-command-line,
.admin-studio-character-loading-command-body {
  grid-column: 1 / -1;
  display: block;
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-character-text) 8%, transparent);
}

.admin-studio-character-loading-command-line {
  width: 44%;
  height: 12px;
}

.admin-studio-character-loading-command-body {
  height: 48px;
  border-radius: 16px;
}

body:has(.site-main-shell-admin-studio .loading-page) {
  background: #f6f4ed !important;
}

body:has(.site-main-shell-admin-studio .loading-page) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  .loading-page
) {
  background: #f6f4ed !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-main-shell-admin-studio .loading-page) .loading-page {
  min-height: 100svh;
  padding: 64px clamp(14px, 2.3vw, 28px) 220px;
}

body:has(.site-main-shell-admin-studio .loading-page) .loading-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

body:has(.site-main-shell-admin-studio .loading-page) :is(.loading-hero, .loading-status-card, .loading-card) {
  border-color: rgba(17, 24, 39, 0.08) !important;
  background: #fbfaf6 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-main-shell-admin-studio .loading-page) :is(.loading-pill, .loading-line, .loading-dot, .loading-chip, .loading-thumb) {
  background: rgba(17, 24, 39, 0.08) !important;
}

html[data-theme="dark"] body:has(.site-main-shell-admin-studio .loading-page) {
  background: #050506 !important;
}

html[data-theme="dark"] body:has(.site-main-shell-admin-studio .loading-page) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  .loading-page
) {
  background: #050506 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-main-shell-admin-studio .loading-page) :is(.loading-hero, .loading-status-card, .loading-card) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: #15161b !important;
  background-image: none !important;
  color: rgba(248, 250, 252, 0.9) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-main-shell-admin-studio .loading-page) :is(.loading-pill, .loading-line, .loading-dot, .loading-chip, .loading-thumb) {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Studio command bars share one Flow-style shell; page-specific actions stay unchanged. */
:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) {
  right: auto !important;
  left: 50% !important;
  bottom: 28px !important;
  overflow: visible !important;
  width: min(576px, 56vw) !important;
  max-width: none !important;
  min-height: 88px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.91), rgba(24, 25, 24, 0.93)),
    rgba(24, 25, 24, 0.9) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(28px) saturate(135%) !important;
  transition:
    min-height 190ms ease,
    padding 190ms ease,
    background 190ms ease !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock).has-tray-items {
  min-height: 148px !important;
  padding-top: 12px !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) {
  grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  grid-template-rows: auto 34px auto !important;
  gap: 1px 7px !important;
  align-items: end !important;
  padding: 0 !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context {
  grid-template-rows: auto auto 34px auto !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-height: 30px !important;
  max-height: min(44vh, 440px) !important;
  padding: 5px 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.84) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.84) !important;
  caret-color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.88rem !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
  scrollbar-width: thin !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context > textarea {
  grid-row: 2 !important;
  padding-top: 5px !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea::-webkit-scrollbar {
  width: 3px;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea::-webkit-scrollbar-track {
  background: transparent;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-context-row {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  gap: 8px !important;
  max-width: calc(100% - 4px) !important;
  padding: 0 2px 2px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-context-row::-webkit-scrollbar {
  display: none;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-add-menu-wrap,
:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .studio-minis-character-picker-wrap {
  position: relative !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  display: inline-grid !important;
  width: 34px !important;
  height: 34px !important;
  align-self: end !important;
  place-items: center !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context > .admin-studio-flow-add-menu-wrap,
:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context > .studio-minis-character-picker-wrap {
  grid-row: 3 !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
  .admin-studio-flow-dropzone,
  .admin-studio-character-flow-add-photo,
  .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo
) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
  .admin-studio-flow-dropzone,
  .admin-studio-character-flow-add-photo,
  .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo
):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  outline: none !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
  .admin-studio-flow-dropzone,
  .admin-studio-character-flow-add-photo,
  .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo
) svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 1.55 !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-command-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  display: flex !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: end !important;
  justify-self: end !important;
}

:is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context > .admin-studio-flow-command-actions {
  grid-row: 3 !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit {
  display: inline-flex !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  flex-basis: 34px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #171717 !important;
  box-shadow: none !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.15 !important;
  animation: none !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit:not(:disabled):is(:hover, :focus-visible) {
  background: #ffffff !important;
  color: #050505 !important;
  transform: translateY(-1px) !important;
}

:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit:disabled,
:is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit.is-disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

body:has(.admin-studio-page) .studio-minis-quick-dock.admin-studio-flow-command-dock .admin-studio-flow-command-action-chip {
  min-width: max-content !important;
  min-height: 34px !important;
  height: 34px !important;
  max-width: min(210px, 32vw) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 13px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body:has(.admin-studio-page) .studio-minis-quick-dock.admin-studio-flow-command-dock .admin-studio-flow-command-action-chip.is-waiting {
  min-width: 0 !important;
  max-width: min(160px, 28vw) !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

body:has(.admin-studio-page) .studio-minis-quick-dock.admin-studio-flow-command-dock .admin-studio-flow-command-action-chip:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-dock.admin-studio-flow-command-dock {
  width: min(628px, 62vw, calc(100vw - 42px)) !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-form > .admin-studio-flow-command-actions {
  gap: 8px !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-form .studio-minis-command-context-row {
  max-height: 126px !important;
  overflow: auto !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-form .studio-minis-command-context-row::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-form .studio-minis-command-context-row::-webkit-scrollbar-track {
  background: transparent;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-form .studio-minis-command-context-row::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 1 min(210px, 30vw) !important;
  width: min(210px, 30vw) !important;
  min-width: 132px !important;
  height: 34px !important;
  min-height: 34px !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 24px 0 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 10px 24px rgba(0, 0, 0, 0.12) !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid rgba(255, 255, 255, 0.62);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.62);
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select svg {
  flex: 0 0 auto !important;
  width: 15px !important;
  height: 15px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  stroke-width: 2 !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select select {
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
  font: inherit !important;
  font-size: 0.71rem !important;
  font-weight: 880 !important;
  line-height: 1 !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select select::-ms-expand {
  display: none;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select:is(:hover, :focus-within) {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select:is(:hover, :focus-within) svg,
body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select:is(:hover, :focus-within) select {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select option {
  background: #171817 !important;
  color: #f8fafc !important;
}

body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-title {
  max-width: 148px !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

@media (max-width: 700px) {
  body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-direction-select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: min(220px, calc(100vw - 146px)) !important;
  }

  body:has(main.admin-studio-mini-stories-home) .admin-studio-mini-story-command-title {
    display: none !important;
  }
}

.admin-studio-character-flow-command-form {
  grid-template-rows: auto minmax(30px, auto) 34px auto !important;
}

.admin-studio-character-flow-command-form.has-context {
  grid-template-rows: auto auto minmax(30px, auto) 34px auto !important;
}

.admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

.admin-studio-character-flow-command-form > .admin-studio-flow-context-row {
  grid-row: 2 !important;
}

.admin-studio-character-flow-command-form > textarea {
  grid-row: 2 !important;
}

.admin-studio-character-flow-command-form.has-context > textarea {
  grid-row: 3 !important;
}

.admin-studio-character-flow-command-form > .admin-studio-character-flow-bottom-row {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: flex !important;
  width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  align-self: center !important;
  justify-self: stretch !important;
}

.admin-studio-character-flow-command-form.has-context > .admin-studio-character-flow-bottom-row {
  grid-row: 4 !important;
}

.admin-studio-character-flow-bottom-row > .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  align-self: center !important;
  justify-self: start !important;
}

.admin-studio-character-flow-bottom-row > .admin-studio-character-flow-command-actions {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
}

.admin-studio-character-flow-bottom-row > .admin-studio-character-flow-command-actions {
  grid-column: auto !important;
  grid-row: auto !important;
}

.admin-studio-character-flow-dock.admin-studio-flow-command-dock {
  min-height: 118px !important;
}

.admin-studio-character-flow-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 166px !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock {
  border-color: rgba(255, 255, 255, 0.095) !important;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.91), rgba(24, 25, 24, 0.93)),
    rgba(24, 25, 24, 0.9) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form textarea {
  color: rgba(255, 255, 255, 0.84) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.84) !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}

body:has(main.admin-studio-character-flow-page) :is(
  .admin-studio-character-flow-action-preview,
  .admin-studio-character-flow-add-photo,
  .admin-studio-character-flow-meta input,
  .admin-studio-character-flow-meta select,
  .admin-studio-character-flow-season-chip
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta input::placeholder {
  color: rgba(255, 255, 255, 0.36) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-action-preview.is-muted {
  color: rgba(255, 255, 255, 0.66) !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #171717 !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit.is-disabled,
body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-character-flow-dock .admin-studio-flow-submit:disabled {
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-dock.admin-studio-flow-command-dock {
  width: min(576px, 56vw, calc(100vw - 42px)) !important;
  min-height: 118px !important;
  padding: 10px 12px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 166px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  grid-template-rows: 28px minmax(30px, auto) 34px auto !important;
  gap: 4px 7px !important;
  padding: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
  grid-template-rows: 28px auto minmax(30px, auto) 34px auto !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex !important;
  min-width: 0 !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  padding: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-flow-context-row {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: 30px !important;
  max-height: min(44vh, 440px) !important;
  padding: 5px 12px 0 !important;
  align-self: center !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.has-context > textarea {
  grid-row: 3 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  position: relative !important;
  z-index: 4 !important;
  display: inline-grid !important;
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.has-context > .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  grid-row: 4 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-command-actions {
  grid-column: 2 / 4 !important;
  grid-row: 3 !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.has-context > .admin-studio-character-flow-command-actions {
  grid-row: 4 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-status,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-job-steps {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.has-context > .admin-studio-character-flow-status,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.has-context > .admin-studio-character-flow-job-steps {
  grid-row: 5 !important;
}

@media (max-width: 700px) {
  :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) {
    bottom: 12px !important;
    width: min(calc(100vw - 20px), 496px) !important;
    min-height: 96px !important;
    border-radius: 22px !important;
  }

  :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock).has-tray-items {
    min-height: 166px !important;
  }

  :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) {
    grid-template-columns: 40px minmax(0, 1fr) max-content !important;
    grid-template-rows: auto 40px auto !important;
    gap: 6px 8px !important;
  }

  :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form).has-context {
    grid-template-rows: auto auto 40px auto !important;
  }

  :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
    .admin-studio-flow-dropzone,
    .admin-studio-character-flow-add-photo,
    .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo,
    .admin-studio-flow-submit
  ) {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-add-menu-wrap,
  :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .studio-minis-character-picker-wrap {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Final lock for the Character Library composer: name/species, prompt, then + and arrow on one row. */
body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock {
  width: min(576px, 56vw, calc(100vw - 42px)) !important;
  min-height: 118px !important;
  padding: 10px 12px !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-dock.admin-studio-flow-command-dock.admin-studio-character-flow-dock.has-tray-items {
  min-height: 166px !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form {
  display: grid !important;
  grid-template-areas:
    "meta meta meta"
    "text text text"
    "bottom bottom bottom"
    "status status status" !important;
  grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  grid-template-rows: 28px minmax(30px, auto) 34px auto !important;
  gap: 2px 7px !important;
  align-items: center !important;
  padding: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .studio-minis-quick-form.admin-studio-flow-command-form.admin-studio-character-flow-command-form.has-context {
  grid-template-areas:
    "meta meta meta"
    "context context context"
    "text text text"
    "bottom bottom bottom"
    "status status status" !important;
  grid-template-rows: 28px auto minmax(30px, auto) 34px auto !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  grid-area: meta !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-flow-context-row {
  grid-area: context !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea {
  grid-area: text !important;
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 30px !important;
  padding: 5px 12px 0 !important;
  align-self: center !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-bottom-row {
  grid-area: bottom !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  width: 100% !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row > .studio-minis-character-picker-wrap.admin-studio-character-flow-add-menu-wrap {
  position: relative !important;
  z-index: 4 !important;
  display: inline-grid !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  align-self: center !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row > .admin-studio-character-flow-command-actions {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: center !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-status,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-job-steps {
  grid-area: status !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

/* Character Library command bar final layout.
   Keep the Mini visual language, but do not inherit Mini grid placement. */
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-dock.admin-studio-flow-command-dock {
  right: auto !important;
  left: 50% !important;
  bottom: 28px !important;
  z-index: 72 !important;
  width: min(576px, 56vw, calc(100vw - 42px)) !important;
  max-width: none !important;
  min-height: 118px !important;
  padding: 10px 12px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.91), rgba(24, 25, 24, 0.93)),
    rgba(24, 25, 24, 0.9) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 22px 68px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.07) inset !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 166px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-areas:
    "meta"
    "text"
    "bottom"
    "status" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 28px minmax(30px, auto) 34px auto !important;
  gap: 2px !important;
  align-items: center !important;
  padding: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
  grid-template-areas:
    "meta"
    "context"
    "text"
    "bottom"
    "status" !important;
  grid-template-rows: 28px auto minmax(30px, auto) 34px auto !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  grid-area: meta !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px !important;
  scrollbar-width: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-meta::-webkit-scrollbar {
  display: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta input,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta select,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-season-chip {
  height: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.7rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta input {
  flex: 1 1 150px !important;
  min-width: 118px !important;
  padding: 0 11px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta input::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.38) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-meta select {
  flex: 0 0 auto !important;
  padding: 0 24px 0 10px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-flow-context-row {
  grid-area: context !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 2px 2px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea {
  grid-area: text !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  max-height: min(44vh, 440px) !important;
  padding: 5px 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.84) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.88rem !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  resize: none !important;
  outline: none !important;
  overflow-y: auto !important;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent !important;
  scrollbar-width: thin !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.32) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea::-webkit-scrollbar {
  width: 3px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea::-webkit-scrollbar-track {
  background: transparent !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-bottom-row {
  grid-area: bottom !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row > .admin-studio-character-flow-add-menu-wrap {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  display: inline-grid !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo {
  position: static !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo svg {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 1.55 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  outline: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row > .admin-studio-character-flow-command-actions {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-action-preview {
  overflow: hidden !important;
  display: inline-flex !important;
  max-width: min(220px, 35vw) !important;
  height: 34px !important;
  align-items: center !important;
  padding: 0 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.76rem !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-action-preview.is-muted {
  color: rgba(255, 255, 255, 0.54) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit {
  position: static !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: #171717 !important;
  box-shadow: none !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.2 !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit.is-disabled,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit:disabled {
  background: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.48) !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-status,
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-job-steps {
  grid-area: status !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin-top: 2px !important;
}

@media (max-width: 700px) {
  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-dock.admin-studio-flow-command-dock {
    bottom: 12px !important;
    width: min(calc(100vw - 20px), 496px) !important;
    min-height: 114px !important;
    border-radius: 22px !important;
  }

  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form {
    grid-template-rows: 28px minmax(30px, auto) 36px auto !important;
  }

  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
    grid-template-rows: 28px auto minmax(30px, auto) 36px auto !important;
  }

  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row > .admin-studio-character-flow-add-menu-wrap,
  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo,
  body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Studio composer polish: keep every command bar visually aligned to the Mini composer. */
body:has(.admin-studio-page) :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) {
  gap: 0 7px !important;
  align-items: start !important;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > textarea {
  min-height: 30px !important;
  padding-top: 5px !important;
  padding-bottom: 0 !important;
  cursor: text !important;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-add-menu-wrap,
body:has(.admin-studio-page) :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .studio-minis-character-picker-wrap {
  align-self: start !important;
  margin-top: 0 !important;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-command-form, .studio-minis-quick-form.admin-studio-flow-command-form) > .admin-studio-flow-command-actions {
  align-self: start !important;
  margin-top: 0 !important;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
  .admin-studio-flow-dropzone,
  .admin-studio-character-flow-add-photo,
  .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo,
  .admin-studio-flow-submit
) {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

body:has(.admin-studio-page) :is(.admin-studio-flow-dock, .admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) .admin-studio-flow-submit svg {
  width: 18px !important;
  height: 18px !important;
}

/* Create Season uses the same shared Studio command bar shell as Minis/Stories. */
body:has(.admin-studio-create-season-page) .admin-studio-create-command-dock.admin-studio-flow-command-dock {
  width: min(576px, 56vw, calc(100vw - 42px)) !important;
  min-height: 118px !important;
  padding-bottom: 9px !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form.admin-studio-flow-command-form {
  grid-template-rows: minmax(38px, auto) 34px auto !important;
  row-gap: 4px !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form.admin-studio-flow-command-form > textarea {
  min-height: 38px !important;
  max-height: min(38vh, 260px) !important;
  overflow: auto !important;
  resize: vertical !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-source-icon.admin-studio-flow-dropzone {
  cursor: default !important;
  pointer-events: none !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form > .admin-studio-create-command-hint,
body:has(.admin-studio-create-season-page) .admin-studio-create-command-form > .admin-studio-create-loading-row {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-hint {
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: center;
  margin: 0;
  padding: 3px 9px 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-hint strong {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-hint span {
  overflow: hidden;
  min-width: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.72rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form > .admin-studio-create-loading-row {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 4px 9px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form > .admin-studio-create-loading-row strong {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-form > .admin-studio-create-loading-row small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings summary {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings summary:is(:hover, :focus-visible),
body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings[open] summary {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  outline: none !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel {
  right: 0 !important;
  bottom: calc(100% + 12px) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(36, 37, 36, 0.98), rgba(18, 19, 18, 0.98)),
    #171817 !important;
  color: #ffffff !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel label span {
  color: rgba(255, 255, 255, 0.7) !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel :is(input, select) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel :is(input, select):focus {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
}

body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel select option {
  background: #171817 !important;
  color: #ffffff !important;
}

@media (max-width: 700px) {
  body:has(.admin-studio-create-season-page) .admin-studio-create-command-dock.admin-studio-flow-command-dock {
    bottom: 12px !important;
    width: min(calc(100vw - 20px), 496px) !important;
    min-height: 126px !important;
  }

  body:has(.admin-studio-create-season-page) .admin-studio-create-command-hint {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  body:has(.admin-studio-create-season-page) .admin-studio-create-command-hint span {
    white-space: normal;
  }

  body:has(.admin-studio-create-season-page) .admin-studio-create-command-actions .admin-studio-create-settings-panel {
    right: -44px !important;
    grid-template-columns: 1fr !important;
    width: min(320px, calc(100vw - 32px)) !important;
  }
}

/* Character composer has one extra meta row; keep it readable without drifting from Mini sizing. */
body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form {
  grid-template-rows: 28px minmax(30px, auto) 34px auto !important;
  row-gap: 4px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
  grid-template-rows: 28px auto minmax(30px, auto) 34px auto !important;
  row-gap: 4px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  margin-bottom: 1px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-command-form > textarea {
  cursor: text !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo svg {
  width: 22px !important;
  height: 22px !important;
}

body:has(main.admin-studio-character-flow-page) .admin-studio-character-flow-bottom-row .admin-studio-flow-submit svg {
  width: 18px !important;
  height: 18px !important;
}

/* Final icon-size lock: every Studio command-bar plus must match the Mini composer. */
body:has(.admin-studio-page) :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
  .admin-studio-flow-dropzone,
  .admin-studio-character-flow-add-photo,
  .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo
) svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.8 !important;
}

@media (max-width: 700px) {
  body:has(.admin-studio-page) :is(.admin-studio-flow-command-dock, .studio-minis-quick-dock.admin-studio-flow-command-dock) :is(
    .admin-studio-flow-dropzone,
    .admin-studio-character-flow-add-photo,
    .studio-minis-character-picker-toggle.admin-studio-character-flow-add-photo,
    .admin-studio-flow-submit
  ) {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}

/* Character command bar hard lock.
   This intentionally avoids body:has() so the Character Library layout cannot fall back to the Mini composer grid. */
.admin-studio-character-flow-dock.admin-studio-flow-command-dock {
  right: auto !important;
  left: 50% !important;
  bottom: 28px !important;
  z-index: 72 !important;
  width: min(576px, 56vw, calc(100vw - 42px)) !important;
  max-width: none !important;
  min-height: 118px !important;
  padding: 10px 12px !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.admin-studio-character-flow-dock.admin-studio-flow-command-dock.has-tray-items {
  min-height: 166px !important;
}

.admin-studio-character-flow-command-form.admin-studio-flow-command-form {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  grid-template-areas:
    "meta"
    "text"
    "bottom"
    "status" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 28px minmax(30px, auto) 34px auto !important;
  row-gap: 4px !important;
  column-gap: 0 !important;
  align-items: center !important;
  padding: 0 !important;
}

.admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
  grid-template-areas:
    "meta"
    "context"
    "text"
    "bottom"
    "status" !important;
  grid-template-rows: 28px auto minmax(30px, auto) 34px auto !important;
}

.admin-studio-character-flow-command-form > .admin-studio-character-flow-meta {
  grid-area: meta !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 28px !important;
  align-items: center !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 2px !important;
  margin: 0 0 1px !important;
}

.admin-studio-character-flow-command-form > .admin-studio-flow-context-row {
  grid-area: context !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 2px 2px !important;
}

.admin-studio-character-flow-command-form > textarea {
  grid-area: text !important;
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 30px !important;
  padding: 5px 12px 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none !important;
  align-self: center !important;
}

.admin-studio-character-flow-command-form > .admin-studio-character-flow-bottom-row {
  grid-area: bottom !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-studio-character-flow-bottom-row > .admin-studio-character-flow-add-menu-wrap {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  display: inline-grid !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
}

.admin-studio-character-flow-bottom-row .admin-studio-character-flow-add-photo {
  position: static !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  place-items: center !important;
  margin: 0 !important;
}

.admin-studio-character-flow-bottom-row > .admin-studio-character-flow-command-actions {
  position: static !important;
  grid-column: auto !important;
  grid-row: auto !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
}

.admin-studio-character-flow-command-form > .admin-studio-character-flow-status,
.admin-studio-character-flow-command-form > .admin-studio-character-flow-job-steps {
  grid-area: status !important;
  grid-column: auto !important;
  grid-row: auto !important;
  margin-top: 2px !important;
}

@media (max-width: 700px) {
  .admin-studio-character-flow-dock.admin-studio-flow-command-dock {
    bottom: 12px !important;
    width: min(calc(100vw - 20px), 496px) !important;
    min-height: 114px !important;
  }

  .admin-studio-character-flow-command-form.admin-studio-flow-command-form {
    grid-template-rows: 28px minmax(30px, auto) 36px auto !important;
  }

  .admin-studio-character-flow-command-form.admin-studio-flow-command-form.has-context {
    grid-template-rows: 28px auto minmax(30px, auto) 36px auto !important;
  }
}

.studio-camera-remix-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.studio-camera-remix-trigger {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--studio-foreground, #e5e7eb) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--studio-panel, #15171b) 82%, transparent);
  color: var(--studio-foreground, #f8fafc);
  padding: 0 14px;
  font: inherit;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.studio-camera-remix-trigger:hover:not(:disabled),
.studio-camera-remix-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--studio-accent, #6d8cff) 58%, transparent);
  background: color-mix(in srgb, var(--studio-panel, #15171b) 92%, var(--studio-accent, #6d8cff) 8%);
  outline: none;
}

.studio-camera-remix-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.studio-camera-remix-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: min(520px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--studio-foreground, #f8fafc) 12%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--studio-panel, #15171b) 94%, transparent);
  color: var(--studio-foreground, #f8fafc);
  padding: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(22px);
}

.studio-camera-remix-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.studio-camera-remix-panel-head strong {
  font-size: 0.98rem;
}

.studio-camera-remix-panel-head span {
  color: color-mix(in srgb, var(--studio-muted, #94a3b8) 82%, transparent);
  font-size: 0.78rem;
  font-weight: 800;
}

.studio-camera-remix-group + .studio-camera-remix-group {
  margin-top: 16px;
}

.studio-camera-remix-group p {
  margin: 0 0 8px;
  color: color-mix(in srgb, var(--studio-muted, #94a3b8) 88%, transparent);
  font-size: 0.75rem;
  font-weight: 900;
}

.studio-camera-remix-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.studio-camera-remix-group button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  border: 1px solid color-mix(in srgb, var(--studio-foreground, #f8fafc) 16%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--studio-panel-2, #20242b) 84%, transparent);
  color: var(--studio-foreground, #f8fafc);
  padding: 0 14px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 850;
  cursor: pointer;
}

.studio-camera-remix-group button:hover,
.studio-camera-remix-group button:focus-visible {
  border-color: color-mix(in srgb, var(--studio-accent, #6d8cff) 64%, transparent);
  background: color-mix(in srgb, var(--studio-accent, #6d8cff) 20%, var(--studio-panel-2, #20242b));
  outline: none;
}

.studio-camera-remix-picker.is-mini-flow .studio-camera-remix-trigger {
  min-height: 40px;
  padding-inline: 13px;
}

@media (prefers-color-scheme: light) {
  .studio-camera-remix-trigger {
    background: color-mix(in srgb, #ffffff 86%, transparent);
    color: #111827;
    border-color: rgba(15, 23, 42, 0.12);
  }

  .studio-camera-remix-panel {
    background: color-mix(in srgb, #ffffff 94%, transparent);
    color: #111827;
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18);
  }

  .studio-camera-remix-group button {
    background: #f5f7fb;
    color: #111827;
    border-color: rgba(15, 23, 42, 0.12);
  }
}

/* Memory Hall prototype */
body:has(.memorial-page) {
  --sidebar-rail-width: 74px;
}

body:has(.memorial-page) .site-main-memory-hall {
  --site-main-top: 0px;
  padding-top: 0;
}

body:has(.memorial-source-variants-page) .mobile-nav-toggle,
body:has(.memorial-source-variants-page) .site-overlay,
body:has(.memorial-source-variants-page) .site-sidebar {
  display: none;
}

body:has(.memorial-source-variants-page) .site-main-shell-memory-hall {
  margin-left: 0 !important;
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console {
  border-right-color: rgba(231, 220, 193, 0.13);
  background:
    radial-gradient(circle at 20% 0%, rgba(217, 170, 87, 0.14), transparent 30%),
    radial-gradient(circle at 90% 8%, rgba(137, 163, 118, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(19, 28, 22, 0.98), rgba(13, 18, 15, 0.98));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .memorial-studio-nav {
  gap: 7px;
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link {
  border-color: transparent;
  background: transparent;
  color: rgba(245, 239, 226, 0.78);
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link:is(:hover, :focus-visible) {
  border-color: rgba(231, 220, 193, 0.12);
  background: rgba(245, 239, 226, 0.07);
  color: #fff8e8;
  outline: none;
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link .sidebar-link-icon {
  border-color: rgba(231, 220, 193, 0.09);
  background: rgba(245, 239, 226, 0.055);
  color: var(--studio-link-accent);
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link.is-active {
  border-color: rgba(217, 170, 87, 0.28);
  background: rgba(217, 170, 87, 0.13);
  color: #fff8e8;
  box-shadow: none;
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link.is-active .sidebar-link-icon {
  border-color: rgba(217, 170, 87, 0.34);
  background: rgba(217, 170, 87, 0.18);
  color: #d9aa57;
}

body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link .sidebar-link-label small {
  color: rgba(200, 193, 180, 0.74);
}

@media (min-width: 1024px) {
  body:has(.memorial-page) .site-sidebar.is-memory-hall-console {
    width: var(--sidebar-rail-width);
    padding: 20px 12px 18px;
    transform: translateX(0);
    overflow: visible;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console:hover,
  body:has(.memorial-page) .site-sidebar.is-memory-hall-console.is-desktop-expanded {
    width: var(--sidebar-rail-width);
    padding-inline: 12px;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34);
  }

  body:has(.memorial-page) .site-main-shell-memory-hall {
    margin-left: var(--sidebar-rail-width);
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-nav {
    justify-items: center;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link {
    position: relative;
    width: 100%;
    justify-content: center;
    min-height: 50px;
    padding-inline: 0;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link .sidebar-link-label {
    display: none;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    z-index: 160;
    display: grid;
    width: max-content;
    max-width: 220px;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid rgba(231, 220, 193, 0.18);
    border-radius: 12px;
    background: rgba(17, 23, 19, 0.96);
    color: #f5efe2;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
    pointer-events: none;
    transform: translateY(-50%);
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-label :is(span, small) {
    color: inherit;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-label small {
    color: rgba(200, 193, 180, 0.76);
  }
}

@media (max-width: 1023px) {
  body:has(.memorial-page) .site-sidebar.is-memory-hall-console {
    width: var(--sidebar-rail-width);
    padding: 14px 10px;
    transform: translateX(0);
    overflow: visible;
  }

  body:has(.memorial-page) .site-main-shell-memory-hall {
    margin-left: var(--sidebar-rail-width);
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-nav {
    justify-items: center;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    padding-inline: 0;
  }

  body:has(.memorial-page) .site-sidebar.is-memory-hall-console .sidebar-studio-link .sidebar-link-label {
    display: none;
  }
}

.site-main:has(.memorial-page) {
  background: #111713;
}

.site-main-shell:has(.memorial-page) .site-footer {
  margin-top: 0;
  background: #111713;
  border-top-color: rgba(231, 220, 193, 0.12);
}

.memorial-page,
.memorial-page h1,
.memorial-page h2,
.memorial-page h3 {
  letter-spacing: 0;
}

.memorial-page {
  --memorial-ink: #f5efe2;
  --memorial-muted: #c8c1b4;
  --memorial-faint: #8f9887;
  --memorial-deep: #111713;
  --memorial-panel: #1b231d;
  --memorial-panel-soft: #253026;
  --memorial-stone: #d7c7a2;
  --memorial-gold: #d9aa57;
  --memorial-green: #89a376;
  --memorial-blue: #87a8b8;
  --memorial-line: rgba(231, 220, 193, 0.16);
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 92px 92px,
    linear-gradient(180deg, #151c18 0%, #101713 54%, #0d120f 100%);
  color: var(--memorial-ink);
}

.memorial-page p {
  color: var(--memorial-muted);
}

.memorial-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-index-page {
  min-height: 100svh;
  overflow: hidden;
}

.memorial-research-page {
  min-height: 100svh;
  overflow: visible;
}

.memorial-research-floating-link {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  z-index: 40;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  background: rgba(17, 23, 19, 0.76);
  color: var(--memorial-ink);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.memorial-research-floating-link:is(:hover, :focus-visible) {
  border-color: rgba(217, 170, 87, 0.62);
  background: rgba(217, 170, 87, 0.18);
}

.memorial-research-board {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: clamp(22px, 4vw, 54px);
  background:
    linear-gradient(180deg, rgba(15, 22, 18, 0.96), rgba(17, 23, 19, 0.9)),
    linear-gradient(90deg, rgba(135, 168, 184, 0.08), rgba(217, 170, 87, 0.08));
  border-bottom: 1px solid var(--memorial-line);
}

.memorial-research-board-inner {
  display: grid;
  gap: 18px;
  width: min(1480px, 100%);
  margin: 0 auto;
}

.memorial-research-board-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: flex-end;
}

.memorial-research-eyebrow {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  color: var(--memorial-blue);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.memorial-research-board h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--memorial-ink);
  font-size: clamp(2.2rem, 5vw, 5.2rem);
  line-height: 0.98;
}

.memorial-research-board p {
  max-width: 58rem;
  margin: 12px 0 0;
  color: rgba(245, 239, 226, 0.72);
  font-size: clamp(0.96rem, 1.4vw, 1.14rem);
  line-height: 1.7;
}

.memorial-research-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 8px;
  min-width: min(520px, 100%);
}

.memorial-research-stats span {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(231, 220, 193, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(245, 239, 226, 0.58);
  font-size: 0.76rem;
}

.memorial-research-stats strong {
  color: var(--memorial-ink);
  font-size: 1.35rem;
  line-height: 1;
}

.memorial-research-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.memorial-research-filter-group {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.memorial-research-filter-group > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: rgba(245, 239, 226, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.memorial-research-filter-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-research-filter-group a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  color: rgba(245, 239, 226, 0.76);
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.memorial-research-filter-group a:is(:hover, :focus-visible),
.memorial-research-filter-group a.is-active {
  border-color: rgba(217, 170, 87, 0.62);
  background: rgba(217, 170, 87, 0.14);
  color: var(--memorial-ink);
}

.memorial-story-back-link {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  margin-top: 14px;
  color: var(--memorial-blue);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
}

.memorial-story-back-link:is(:hover, :focus-visible) {
  color: var(--memorial-ink);
}

.memorial-story-controls {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.memorial-research-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}

.memorial-research-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  min-height: 270px;
  padding: 16px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.026)),
    rgba(15, 21, 17, 0.92);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.memorial-research-card header,
.memorial-research-card footer {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.memorial-research-card-meta,
.memorial-research-card footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.memorial-research-card-meta span,
.memorial-research-card footer span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 7px;
  border: 1px solid rgba(231, 220, 193, 0.12);
  border-radius: 7px;
  color: rgba(245, 239, 226, 0.7);
  font-size: 0.72rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.memorial-research-card-kind {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(135, 168, 184, 0.32);
  border-radius: 8px;
  color: var(--memorial-blue);
  background: rgba(135, 168, 184, 0.1);
}

.memorial-research-card p {
  max-width: none;
  max-height: 280px;
  margin: 0;
  padding-right: 6px;
  color: rgba(245, 239, 226, 0.9);
  font-size: 0.94rem;
  line-height: 1.72;
  overflow: auto;
  overscroll-behavior: contain;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.memorial-story-card {
  grid-template-rows: auto 1fr auto auto auto;
  min-height: 360px;
}

.memorial-story-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.memorial-story-comment-label {
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid rgba(135, 168, 184, 0.24);
  border-radius: 7px;
  color: rgba(245, 239, 226, 0.58);
  background: rgba(135, 168, 184, 0.08);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.memorial-story-copy h3 {
  margin: 0;
  color: var(--memorial-ink);
  font-size: 1.06rem;
  line-height: 1.28;
}

.memorial-story-copy p {
  max-height: 360px;
}

.memorial-research-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.memorial-research-card-tags strong,
.memorial-research-card-tags span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(217, 170, 87, 0.2);
  border-radius: 7px;
  color: rgba(245, 239, 226, 0.74);
  background: rgba(217, 170, 87, 0.09);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.memorial-research-card-tags strong {
  border-color: rgba(217, 170, 87, 0.42);
  color: var(--memorial-ink);
}

.memorial-research-card footer a {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: center;
  color: var(--memorial-blue);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.memorial-research-card footer a:is(:hover, :focus-visible) {
  color: var(--memorial-ink);
}

.memorial-research-card small {
  color: rgba(245, 239, 226, 0.48);
  font-size: 0.74rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.memorial-research-empty {
  min-height: 160px;
  padding: 28px;
  border: 1px dashed rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  color: rgba(245, 239, 226, 0.68);
  background: rgba(255, 255, 255, 0.035);
}

@media (max-width: 980px) {
  .memorial-research-board-header {
    grid-template-columns: 1fr;
  }

  .memorial-research-stats,
  .memorial-research-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1220px) and (min-width: 981px) {
  .memorial-story-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .memorial-research-floating-link {
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    min-height: 38px;
    padding: 9px 10px;
    font-size: 0.76rem;
  }

  .memorial-research-board {
    padding: 18px 14px 24px;
  }

  .memorial-research-board h2 {
    max-width: 10.8ch;
  }

  .memorial-research-stats,
  .memorial-research-controls {
    grid-template-columns: 1fr;
  }

  .memorial-research-stats {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .memorial-research-stats span {
    min-width: 116px;
  }
}

.memory-hall-experience {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #0b100d;
  isolation: isolate;
}

.memory-hall-vista {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
}

.memory-hall-vista-image {
  position: absolute;
  inset: -4%;
  background: url("/memorial/memory-hall-entrance-v1.webp") center center / cover no-repeat;
  filter: saturate(0.94) contrast(1.06);
  transform: scale(1.02) translate3d(0, 0, 0);
  transition: transform 1100ms cubic-bezier(0.18, 0.82, 0.24, 1), filter 1100ms ease;
  will-change: transform;
}

.memory-hall-experience.is-inside .memory-hall-vista-image {
  filter: saturate(1.04) contrast(1.1);
  transform: scale(1.19) translate3d(-3.5%, 1.2%, 0);
}

.memory-hall-vista-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 51% 49%, rgba(217, 170, 87, 0.13), transparent 18%),
    radial-gradient(circle at 72% 44%, transparent 0 28%, rgba(6, 9, 7, 0.2) 54%, rgba(6, 9, 7, 0.58) 100%),
    linear-gradient(90deg, rgba(5, 8, 6, 0.78), rgba(5, 8, 6, 0.18) 35%, rgba(5, 8, 6, 0.08) 64%, rgba(5, 8, 6, 0.34));
  transition: opacity 900ms ease;
}

.memory-hall-experience.is-inside .memory-hall-vista-shade {
  opacity: 0.74;
}

.memory-hall-entry-veil,
.memory-hall-entry-arch {
  position: absolute;
  pointer-events: none;
  transition: transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1), opacity 760ms ease, filter 760ms ease;
}

.memory-hall-entry-veil {
  top: -5%;
  bottom: -8%;
  width: 32%;
  background:
    linear-gradient(90deg, rgba(245, 239, 226, 0.05), transparent 24%),
    linear-gradient(180deg, rgba(10, 15, 12, 0.22), rgba(5, 8, 6, 0.82));
  opacity: 0.92;
  filter: saturate(0.92);
}

.memory-hall-entry-veil.is-left {
  left: -3%;
  border-right: 1px solid rgba(217, 170, 87, 0.22);
  box-shadow: inset -30px 0 80px rgba(0, 0, 0, 0.42);
}

.memory-hall-entry-veil.is-right {
  right: -3%;
  border-left: 1px solid rgba(217, 170, 87, 0.2);
  box-shadow: inset 30px 0 80px rgba(0, 0, 0, 0.42);
}

.memory-hall-entry-arch {
  top: clamp(24px, 5vh, 62px);
  right: clamp(48px, 9vw, 170px);
  left: clamp(48px, 9vw, 170px);
  height: 42%;
  border-top: 1px solid rgba(217, 170, 87, 0.3);
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 226, 0.08),
    0 -18px 80px rgba(217, 170, 87, 0.08);
  opacity: 0.72;
}

.memory-hall-experience.is-inside .memory-hall-entry-veil.is-left {
  opacity: 0.2;
  transform: translateX(-62%);
}

.memory-hall-experience.is-inside .memory-hall-entry-veil.is-right {
  opacity: 0.2;
  transform: translateX(62%);
}

.memory-hall-experience.is-inside .memory-hall-entry-arch {
  opacity: 0.22;
  filter: blur(1px);
  transform: translateY(-22px) scaleX(1.08);
}

.memory-hall-depth-mist {
  position: absolute;
  inset: auto 12% -14% 18%;
  height: 42%;
  background:
    radial-gradient(ellipse at center, rgba(245, 239, 226, 0.16), rgba(217, 170, 87, 0.05) 42%, transparent 68%);
  filter: blur(22px);
  opacity: 0.62;
  transform: rotateX(68deg);
  transform-origin: bottom;
}

.memory-hall-floor-line {
  position: absolute;
  bottom: -10%;
  width: 1px;
  height: 74%;
  background: linear-gradient(180deg, transparent, rgba(217, 170, 87, 0.48) 38%, rgba(231, 220, 193, 0.02));
  opacity: 0.52;
  transform-origin: bottom;
}

.memory-hall-floor-line.is-left {
  left: 43%;
  transform: rotate(18deg);
}

.memory-hall-floor-line.is-center {
  left: 54%;
  opacity: 0.28;
  transform: rotate(3deg);
}

.memory-hall-floor-line.is-right {
  left: 66%;
  transform: rotate(-14deg);
}

.memory-hall-spatial-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.memory-hall-enter {
  position: absolute;
  left: 50%;
  bottom: clamp(84px, 15vh, 154px);
  z-index: 8;
  display: inline-flex;
  min-width: 172px;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  isolation: isolate;
  padding: 8px 16px 8px 10px;
  border: 1px solid rgba(217, 170, 87, 0.7);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(227, 180, 88, 0.92), rgba(190, 136, 48, 0.92));
  color: #15110a;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 0 0 1px rgba(245, 239, 226, 0.11),
    0 20px 60px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px) saturate(1.1);
  cursor: pointer;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: transform 180ms ease, opacity 420ms ease, border-color 180ms ease, background 180ms ease;
}

.memory-hall-enter::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(120deg, transparent 10%, rgba(255, 255, 255, 0.58) 38%, transparent 58%);
  opacity: 0.36;
  transform: translateX(-42%);
  transition: opacity 180ms ease, transform 460ms ease;
}

.memory-hall-enter:hover,
.memory-hall-enter:focus-visible {
  border-color: rgba(255, 222, 150, 0.9);
  background:
    linear-gradient(180deg, rgba(237, 195, 111, 0.98), rgba(204, 151, 59, 0.98));
  outline: none;
  transform: translateX(-50%) translateY(-2px) scale(1.02);
}

.memory-hall-enter:hover::after,
.memory-hall-enter:focus-visible::after {
  opacity: 0.58;
  transform: translateX(42%);
}

.memory-hall-enter-orbit {
  position: absolute;
  inset: -10px;
  z-index: -2;
  border-radius: inherit;
  background: conic-gradient(from 180deg, rgba(255, 255, 255, 0), rgba(255, 246, 196, 0.72), rgba(132, 214, 255, 0.5), rgba(255, 145, 196, 0.48), rgba(255, 255, 255, 0));
  filter: blur(13px);
  opacity: 0.54;
  animation: none;
}

.memory-hall-enter-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 10px 24px rgba(117, 76, 21, 0.22);
}

.memory-hall-enter-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.memory-hall-enter-copy span,
.memory-hall-enter-copy small {
  display: block;
  white-space: nowrap;
}

.memory-hall-enter-copy small {
  color: rgba(29, 22, 12, 0.68);
  font-size: 0.68rem;
  font-weight: 860;
  line-height: 1;
}

.memory-hall-enter > svg {
  flex: 0 0 auto;
  opacity: 0.82;
}

@keyframes memoryHallEnterPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.96) rotate(0deg);
  }
  50% {
    opacity: 0.76;
    transform: scale(1.04) rotate(8deg);
  }
}

.memory-hall-experience.is-inside .memory-hall-enter {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-18px) scale(0.96);
}

.memory-hall-niche-field {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  pointer-events: none;
  transition: opacity 740ms ease, filter 740ms ease, transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1);
  filter: saturate(0.84) brightness(0.74) blur(1.6px);
  transform: translateY(58px) scale(0.82);
}

.memory-hall-experience.is-inside .memory-hall-niche-field {
  opacity: 1;
  pointer-events: auto;
  filter: saturate(1.04) brightness(1);
  transform: none;
}

.memory-hall-niche-wall {
  position: absolute;
  top: clamp(74px, 10vh, 118px);
  right: clamp(42px, 6vw, 118px);
  left: clamp(58px, 7vw, 132px);
  display: grid;
  gap: clamp(10px, 1.15vw, 16px);
  padding: clamp(16px, 2vw, 30px);
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(245, 239, 226, 0.035) 1px, transparent 1px) 0 0 / 88px 100%,
    radial-gradient(circle at 50% 14%, rgba(217, 170, 87, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(52, 58, 47, 0.88), rgba(17, 24, 20, 0.94) 58%, rgba(10, 15, 13, 0.97)),
    #111713;
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 226, 0.16),
    inset 0 -34px 80px rgba(0, 0, 0, 0.34),
    0 42px 140px rgba(0, 0, 0, 0.5);
  transform: perspective(1400px) rotateX(1.2deg) rotateY(-4.5deg);
  transform-origin: 54% 45%;
  transition: transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1), box-shadow 740ms ease, border-color 740ms ease;
}

.memory-hall-experience.is-threshold .memory-hall-niche-wall {
  border-color: rgba(231, 220, 193, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(245, 239, 226, 0.08),
    inset 0 -34px 80px rgba(0, 0, 0, 0.2),
    0 26px 80px rgba(0, 0, 0, 0.34);
  transform: perspective(1400px) rotateX(4deg) rotateY(-8deg) translateY(48px) scale(0.92);
}

.memory-hall-niche-wall::before,
.memory-hall-niche-wall::after {
  position: absolute;
  right: 2.2%;
  left: 2.2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 170, 87, 0.44), transparent);
  content: "";
  pointer-events: none;
}

.memory-hall-niche-wall::before {
  top: 36.5%;
}

.memory-hall-niche-wall::after {
  top: 68.5%;
}

.memory-hall-niche-row {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(9px, 1vw, 14px);
  min-height: clamp(104px, 14vh, 154px);
}

.memory-hall-niche-row.is-upper,
.memory-hall-niche-row.is-lower {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.memory-hall-niche-row.is-center {
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 0.86fr) minmax(260px, 1.58fr) minmax(0, 0.86fr) minmax(0, 0.86fr);
  min-height: clamp(130px, 17vh, 196px);
}

.memory-hall-pet-niche {
  position: relative;
  overflow: hidden;
  display: grid;
  min-width: 0;
  min-height: 96px;
  align-content: center;
  justify-items: center;
  gap: 9px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 16%, rgba(245, 239, 226, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.075), rgba(11, 17, 14, 0.78));
  color: rgba(245, 239, 226, 0.82);
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -22px 40px rgba(0, 0, 0, 0.2),
    0 12px 34px rgba(0, 0, 0, 0.22);
}

.memory-hall-pet-niche::before {
  position: absolute;
  inset: 8px 10px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 239, 226, 0.2), transparent);
  content: "";
}

.memory-hall-pet-niche::after {
  position: absolute;
  right: 10px;
  bottom: 8px;
  left: 10px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(217, 170, 87, 0.2), transparent);
  content: "";
}

.memory-hall-pet-niche.is-champagne {
  background:
    radial-gradient(circle at 50% 14%, rgba(217, 170, 87, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.095), rgba(14, 19, 16, 0.82));
}

.memory-hall-pet-niche.is-sage {
  background:
    radial-gradient(circle at 50% 14%, rgba(137, 163, 118, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.075), rgba(13, 21, 16, 0.84));
}

.memory-hall-pet-niche.is-bronze {
  background:
    radial-gradient(circle at 50% 14%, rgba(185, 118, 64, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.07), rgba(21, 17, 14, 0.84));
}

.memory-hall-pet-niche.is-mist {
  background:
    radial-gradient(circle at 50% 14%, rgba(135, 168, 184, 0.16), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.07), rgba(12, 18, 18, 0.84));
}

.memory-hall-pet-niche.is-marble {
  background:
    radial-gradient(circle at 50% 14%, rgba(245, 239, 226, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(245, 239, 226, 0.1), rgba(13, 18, 15, 0.84));
}

.memory-hall-niche-portrait {
  display: grid;
  width: clamp(40px, 4.6vw, 58px);
  height: clamp(40px, 4.6vw, 58px);
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.2), transparent 26%),
    rgba(245, 239, 226, 0.08);
  color: var(--memorial-gold);
}

.memory-hall-niche-name {
  overflow: hidden;
  width: min(100%, 112px);
  color: rgba(245, 239, 226, 0.82);
  font-size: clamp(0.74rem, 0.92vw, 0.88rem);
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-feature-niche {
  grid-template-columns: clamp(58px, 6vw, 78px) minmax(100px, 1fr) auto;
  align-items: center;
  justify-items: stretch;
  gap: 14px;
  padding: clamp(12px, 1.25vw, 18px);
  border-color: rgba(217, 170, 87, 0.42);
  background:
    radial-gradient(circle at 22% 18%, rgba(217, 170, 87, 0.26), transparent 38%),
    linear-gradient(135deg, rgba(21, 29, 24, 0.96), rgba(48, 47, 34, 0.9));
  text-align: left;
  box-shadow:
    inset 0 0 0 1px rgba(245, 239, 226, 0.055),
    0 0 0 1px rgba(217, 170, 87, 0.08),
    0 28px 84px rgba(0, 0, 0, 0.46);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.memory-hall-feature-niche:hover,
.memory-hall-feature-niche:focus-visible {
  border-color: rgba(255, 218, 143, 0.78);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(245, 239, 226, 0.08),
    0 0 0 1px rgba(217, 170, 87, 0.22),
    0 34px 96px rgba(0, 0, 0, 0.56);
  transform: translateY(-3px);
}

.memory-hall-feature-photo {
  overflow: hidden;
  width: clamp(58px, 6vw, 78px);
  aspect-ratio: 1;
  border: 1px solid rgba(231, 220, 193, 0.2);
  border-radius: 8px;
  background: #101713;
}

.memory-hall-feature-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memory-hall-feature-copy span {
  overflow: hidden;
  color: #fff8e8;
  font-size: clamp(1.1rem, 1.9vw, 1.62rem);
  font-weight: 950;
  line-height: 0.96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-feature-copy small {
  color: rgba(217, 170, 87, 0.84);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memory-hall-feature-niche svg {
  color: var(--memorial-gold);
}

.memory-hall-empty-niche {
  position: absolute;
  display: block;
  border: 1px solid rgba(231, 220, 193, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(245, 239, 226, 0.08), rgba(13, 18, 15, 0.16));
  box-shadow:
    inset 0 0 24px rgba(217, 170, 87, 0.09),
    0 18px 60px rgba(0, 0, 0, 0.18);
}

.memory-hall-empty-niche.is-near {
  top: 31%;
  right: 14.4%;
  width: clamp(64px, 8vw, 114px);
  height: clamp(92px, 13vw, 164px);
  opacity: 0.36;
  transform: skewY(-1deg);
}

.memory-hall-empty-niche.is-far {
  top: 38%;
  right: 28.5%;
  width: clamp(42px, 5vw, 72px);
  height: clamp(62px, 8vw, 104px);
  opacity: 0.24;
}

.memory-hall-watson-niche {
  position: absolute;
  top: clamp(210px, 32vh, 330px);
  right: clamp(58px, 8.5vw, 142px);
  display: grid;
  width: clamp(220px, 23vw, 320px);
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 13px 11px 11px;
  border: 1px solid rgba(217, 170, 87, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 20, 17, 0.86), rgba(34, 43, 35, 0.62));
  color: var(--memorial-ink);
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(245, 239, 226, 0.04),
    0 28px 84px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(16px);
  transform: perspective(800px) rotateY(-10deg) translateY(18px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.memory-hall-watson-niche::before {
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: 12px;
  background: radial-gradient(circle at 42% 50%, rgba(217, 170, 87, 0.22), transparent 64%);
  content: "";
  opacity: 0.9;
  filter: blur(14px);
}

.memory-hall-watson-niche:hover,
.memory-hall-watson-niche:focus-visible {
  border-color: rgba(217, 170, 87, 0.72);
  background:
    linear-gradient(135deg, rgba(28, 36, 30, 0.94), rgba(53, 46, 31, 0.7));
  box-shadow:
    0 0 0 1px rgba(217, 170, 87, 0.16),
    0 34px 90px rgba(0, 0, 0, 0.5);
  outline: none;
  transform: perspective(800px) rotateY(-7deg) translateY(12px) translateX(-4px);
}

.memory-hall-watson-photo {
  overflow: hidden;
  width: 76px;
  aspect-ratio: 1;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  background: #101713;
}

.memory-hall-watson-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-hall-watson-name {
  min-width: 0;
  overflow: hidden;
  color: #fff8e8;
  font-size: clamp(1.16rem, 2vw, 1.5rem);
  font-weight: 950;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-watson-niche svg {
  color: var(--memorial-gold);
}

body:has(.memorial-page) .memorial-ai-command-dock {
  z-index: 70 !important;
  width: min(640px, calc(100vw - 112px)) !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.91), rgba(24, 25, 24, 0.93)),
    rgba(24, 25, 24, 0.9) !important;
}

body:has(.memorial-page) .memorial-ai-command-dock.has-tray-items {
  min-height: 154px !important;
}

body:has(.memorial-page) .memorial-ai-command-dock:has(.memorial-command-companion-row) {
  min-height: 136px !important;
}

body:has(.memorial-page) .memorial-ai-command-dock.has-tray-items:has(.memorial-command-companion-row) {
  min-height: 196px !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion {
  grid-template-rows: auto 34px auto !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context {
  grid-template-rows: auto auto 34px auto !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion > .memorial-command-companion-row {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion > textarea {
  grid-row: 2 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context > .admin-studio-flow-context-row {
  grid-row: 2 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context > textarea {
  grid-row: 3 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion > .admin-studio-flow-add-menu-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-companion > .studio-minis-character-picker-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-companion > .admin-studio-flow-command-actions {
  grid-row: 3 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context > .admin-studio-flow-add-menu-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context > .studio-minis-character-picker-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context > .admin-studio-flow-command-actions {
  grid-row: 4 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion .memorial-command-status {
  grid-row: 4 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-companion.has-context .memorial-command-status {
  grid-row: 5 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context {
  grid-template-rows: auto auto auto 34px auto !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style > .memorial-command-style-row {
  grid-row: 1 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style > .admin-studio-flow-context-row {
  grid-row: 2 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context > textarea {
  grid-row: 3 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context > .admin-studio-flow-add-menu-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context > .studio-minis-character-picker-wrap,
body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context > .admin-studio-flow-command-actions {
  grid-row: 4 !important;
}

body:has(.memorial-page) .memorial-ai-command-form.has-film-style.has-context .memorial-command-status {
  grid-row: 5 !important;
}

body:has(.memorial-page) .memorial-ai-command-dock.is-drop-active {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background:
    linear-gradient(180deg, rgba(68, 68, 65, 0.76), rgba(28, 28, 27, 0.82)),
    rgba(34, 34, 32, 0.78) !important;
}

body:has(.memorial-page) .memorial-ai-command-form > textarea {
  color: rgba(245, 239, 226, 0.88) !important;
  -webkit-text-fill-color: rgba(245, 239, 226, 0.88) !important;
  caret-color: rgba(255, 255, 255, 0.84) !important;
}

body:has(.memorial-page) .memorial-ai-command-form > textarea::placeholder {
  color: rgba(200, 193, 180, 0.42) !important;
  -webkit-text-fill-color: rgba(200, 193, 180, 0.42) !important;
}

body:has(.memorial-page) .memorial-command-companion-row {
  display: flex;
  min-width: 0;
  gap: 6px;
  align-items: center;
  padding: 0 2px 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

body:has(.memorial-page) .memorial-command-companion-row::-webkit-scrollbar {
  display: none;
}

body:has(.memorial-page) .memorial-command-companion-row > span,
body:has(.memorial-page) .memorial-command-companion-row button {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.055);
  color: rgba(245, 239, 226, 0.78);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

body:has(.memorial-page) .memorial-command-companion-row > span {
  border-color: rgba(255, 236, 182, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(245, 239, 226, 0.045);
  color: rgba(255, 236, 182, 0.82);
  font-weight: 900;
}

body:has(.memorial-page) .memorial-command-companion-row button {
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body:has(.memorial-page) .memorial-command-companion-row button:is(:hover, :focus-visible) {
  border-color: rgba(255, 248, 232, 0.26);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
  transform: translateY(-1px);
}

body:has(.memorial-page) .memorial-command-companion-row button svg {
  color: rgba(255, 236, 182, 0.76);
}

body:has(.memorial-page) .memorial-command-companion-row button strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: inherit;
  font-weight: 880;
}

body:has(.memorial-page) .memorial-command-companion-row button small {
  color: rgba(200, 193, 180, 0.58);
  font-size: 0.62rem;
  font-weight: 740;
}

body:has(.memorial-page) .memorial-command-style-row {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  gap: 7px;
  padding: 0 2px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

body:has(.memorial-page) .memorial-command-style-row::-webkit-scrollbar {
  display: none;
}

body:has(.memorial-page) .memorial-command-style-row button {
  display: grid;
  min-width: 128px;
  max-width: 172px;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(245, 239, 226, 0.055);
  color: rgba(245, 239, 226, 0.82);
  padding: 7px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body:has(.memorial-page) .memorial-command-style-row button:is(:hover, :focus-visible),
body:has(.memorial-page) .memorial-command-style-row button.is-selected {
  border-color: rgba(255, 255, 255, 0.26);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.1), transparent 40%),
    rgba(255, 255, 255, 0.075);
  outline: none;
}

body:has(.memorial-page) .memorial-command-style-row strong,
body:has(.memorial-page) .memorial-command-style-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.memorial-page) .memorial-command-style-row strong {
  color: #fff8e8;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.05;
}

body:has(.memorial-page) .memorial-command-style-row small {
  color: rgba(200, 193, 180, 0.58);
  font-size: 0.62rem;
  font-weight: 720;
  line-height: 1.05;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  grid-template-rows: repeat(3, auto);
  column-gap: 9px;
  align-items: center;
  min-width: 164px;
  max-width: 238px !important;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px;
  background: rgba(245, 239, 226, 0.065) !important;
  color: rgba(245, 239, 226, 0.78);
  padding: 5px 9px 5px 5px;
  text-align: left;
  text-decoration: none;
}

body:has(.memorial-page) .memorial-command-context-row button.has-preview {
  max-width: 238px !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(245, 239, 226, 0.065) !important;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview:is(:hover, :focus-visible),
body:has(.memorial-page) .memorial-command-context-row button.has-preview:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  outline: none;
}

body:has(.memorial-page) .memorial-command-context-row button.has-preview.is-intent {
  max-width: 276px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.055) !important;
}

body:has(.memorial-page) .memorial-command-thumb {
  overflow: hidden;
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: rgba(245, 239, 226, 0.08);
  color: rgba(245, 239, 226, 0.78);
}

body:has(.memorial-page) .memorial-command-thumb.is-intent {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
}

body:has(.memorial-page) .memorial-command-thumb.is-request {
  border: 1px solid rgba(121, 197, 157, 0.24);
  background: rgba(121, 197, 157, 0.12);
  color: #9fd9b8;
}

body:has(.memorial-page) .memorial-command-context-row button.has-preview.is-reflection {
  max-width: 292px !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.055) !important;
}

body:has(.memorial-page) .memorial-command-thumb.is-reflection {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
}

body:has(.memorial-page) .memorial-command-thumb img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview span:not(.memorial-command-thumb),
body:has(.memorial-page) .memorial-command-context-row button.has-preview span:not(.memorial-command-thumb),
body:has(.memorial-page) .memorial-command-context-row a.has-preview strong {
  grid-column: 2;
  min-width: 0;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview span:not(.memorial-command-thumb),
body:has(.memorial-page) .memorial-command-context-row button.has-preview span:not(.memorial-command-thumb) {
  color: rgba(200, 193, 180, 0.62);
  font-size: 0.58rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview strong,
body:has(.memorial-page) .memorial-command-context-row button.has-preview strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.memorial-page) .memorial-command-context-row a.has-preview small,
body:has(.memorial-page) .memorial-command-context-row button.has-preview small {
  grid-column: 2;
  color: rgba(200, 193, 180, 0.55);
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1;
}

body:has(.memorial-page) .memorial-command-status {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  padding: 4px 12px 0;
  color: rgba(200, 193, 180, 0.76);
  font-size: 0.73rem;
  font-weight: 760;
  line-height: 1.25;
}

body:has(.memorial-page) .memorial-ai-command-form.has-context .memorial-command-status {
  grid-row: 4;
}

body:has(.memorial-page) .memorial-command-add-wrap {
  position: relative;
}

body:has(.memorial-page) .memorial-command-add-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 95;
  display: grid;
  width: min(310px, calc(100vw - var(--sidebar-rail-width) - 34px));
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(29, 30, 29, 0.96), rgba(18, 18, 18, 0.98)),
    rgba(24, 25, 24, 0.94);
  padding: 7px;
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

body:has(.memorial-page) .memorial-command-add-menu button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(245, 239, 226, 0.86);
  padding: 8px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body:has(.memorial-page) .memorial-command-add-menu button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.075);
  outline: none;
}

body:has(.memorial-page) .memorial-command-add-menu-thumb {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  background: rgba(245, 239, 226, 0.065);
  color: rgba(255, 255, 255, 0.82);
}

body:has(.memorial-page) .memorial-command-add-menu span:not(.memorial-command-add-menu-thumb) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

body:has(.memorial-page) .memorial-command-add-menu strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.memorial-page) .memorial-command-add-menu small {
  overflow: hidden;
  color: rgba(200, 193, 180, 0.66);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  body:has(.memorial-page) .memorial-ai-command-dock {
    left: calc(var(--sidebar-rail-width) + ((100vw - var(--sidebar-rail-width)) / 2)) !important;
  }
}

@media (max-width: 1023px) {
  body:has(.memorial-page) .memorial-ai-command-dock {
    right: 10px !important;
    left: calc(var(--sidebar-rail-width) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .memory-hall-vista-image {
    inset: -2% -48%;
    background-position: 58% center;
  }

  .memory-hall-experience.is-inside .memory-hall-vista-image {
    transform: scale(1.16) translate3d(-5%, 0, 0);
  }

  .memory-hall-vista-shade {
    background:
      radial-gradient(circle at 58% 46%, rgba(217, 170, 87, 0.14), transparent 20%),
      linear-gradient(90deg, rgba(5, 8, 6, 0.58), rgba(5, 8, 6, 0.12) 52%, rgba(5, 8, 6, 0.38)),
      linear-gradient(180deg, rgba(5, 8, 6, 0.14), rgba(5, 8, 6, 0.62));
  }

  .memory-hall-niche-wall {
    top: 72px;
    right: calc(var(--sidebar-rail-width) + 14px);
    left: 14px;
    gap: 8px;
    max-height: calc(100svh - 238px);
    padding: 12px;
    transform: perspective(1000px) rotateX(0deg) rotateY(-1.8deg);
  }

  .memory-hall-niche-row {
    gap: 7px;
    min-height: 82px;
  }

  .memory-hall-niche-row.is-upper,
  .memory-hall-niche-row.is-lower {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .memory-hall-niche-row.is-upper .memory-hall-pet-niche:nth-child(n + 4),
  .memory-hall-niche-row.is-lower {
    display: none;
  }

  .memory-hall-niche-row.is-center {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }

  .memory-hall-feature-niche {
    order: -1;
    grid-column: 1 / -1;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    padding: 11px;
  }

  .memory-hall-feature-photo {
    width: 62px;
  }

  .memory-hall-pet-niche {
    min-height: 80px;
    gap: 6px;
  }

  .memory-hall-enter {
    bottom: clamp(174px, 25vh, 230px);
    min-width: 112px;
  }

  .memory-hall-empty-niche.is-near {
    top: 29%;
    right: 8%;
  }

  .memory-hall-empty-niche.is-far {
    top: 37%;
    right: 32%;
  }

  .memory-hall-watson-niche {
    top: auto;
    right: 16px;
    bottom: clamp(174px, 24vh, 226px);
    left: 16px;
    width: auto;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    transform: perspective(800px) rotateY(0deg) translateY(18px);
  }

  .memory-hall-watson-niche:hover,
  .memory-hall-watson-niche:focus-visible {
    transform: perspective(800px) rotateY(0deg) translateY(12px);
  }

  .memory-hall-watson-photo {
    width: 68px;
  }

  body:has(.memorial-page) .memorial-ai-command-dock {
    width: auto !important;
  }
}

@media (max-width: 700px) {
  body:has(.memorial-page) .memorial-ai-command-dock {
    min-height: 118px !important;
  }

  body:has(.memorial-page) .memorial-ai-command-dock:has(.memorial-command-companion-row) {
    min-height: 146px !important;
  }

  body:has(.memorial-page) .memorial-ai-command-dock.has-tray-items {
    min-height: 172px !important;
  }

  body:has(.memorial-page) .memorial-ai-command-dock.has-tray-items:has(.memorial-command-companion-row) {
    min-height: 208px !important;
  }

  body:has(.memorial-page) .memorial-command-companion-row {
    gap: 5px;
    padding-bottom: 2px;
  }

  body:has(.memorial-page) .memorial-command-companion-row > span,
  body:has(.memorial-page) .memorial-command-companion-row button {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.64rem;
  }

  body:has(.memorial-page) .memorial-command-companion-row button small {
    display: none;
  }

  body:has(.memorial-page) .memorial-command-status {
    padding-inline: 10px;
    font-size: 0.68rem;
  }
}

.memorial-eyebrow {
  margin: 0;
  color: var(--memorial-gold);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.memorial-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.memorial-button:hover,
.memorial-button:focus-visible {
  transform: translateY(-1px);
}

.memorial-button-primary {
  border: 1px solid rgba(217, 170, 87, 0.74);
  background: #d9aa57;
  color: #15110a;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.memorial-button-secondary {
  border: 1px solid rgba(231, 220, 193, 0.2);
  background: rgba(245, 239, 226, 0.08);
  color: var(--memorial-ink);
}

.memorial-button-secondary:hover,
.memorial-button-secondary:focus-visible {
  border-color: rgba(231, 220, 193, 0.36);
  background: rgba(245, 239, 226, 0.12);
}

.memorial-hall-hero {
  position: relative;
  min-height: min(900px, 94vh);
  overflow: hidden;
  border-bottom: 1px solid var(--memorial-line);
}

.memorial-hall-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 8, 6, 0.98) 0%, rgba(8, 11, 9, 0.9) 26%, rgba(9, 12, 10, 0.34) 58%, rgba(8, 11, 9, 0.18) 100%),
    url("/memorial/memory-hall-entrance-v1.webp") center center / cover no-repeat;
}

.memorial-hall-hero-bg::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 66% 52%, rgba(217, 170, 87, 0.12), transparent 27%),
    linear-gradient(180deg, rgba(9, 12, 10, 0.08) 0%, rgba(17, 23, 19, 0.14) 64%, #111713 100%);
}

.memorial-hall-depth-line {
  position: absolute;
  top: 18%;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(217, 170, 87, 0.42), transparent);
  transform-origin: bottom;
  opacity: 0.42;
}

.memorial-hall-depth-line-1 {
  left: 53%;
  transform: rotate(17deg);
}

.memorial-hall-depth-line-2 {
  left: 65%;
  transform: rotate(7deg);
}

.memorial-hall-depth-line-3 {
  left: 76%;
  transform: rotate(-4deg);
}

.memorial-hall-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1180px, calc(100% - 40px));
  min-height: min(900px, 94vh);
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.58fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: center;
  margin: 0 auto;
  padding: 86px 0 56px;
}

.memorial-hall-copy {
  display: grid;
  max-width: 690px;
  gap: 22px;
}

.memorial-hall-copy h1,
.memorial-detail-hero-copy h1 {
  color: var(--memorial-ink);
  font-size: clamp(3.2rem, 7vw, 6.9rem);
  font-weight: 900;
  line-height: 0.96;
}

.memorial-detail-hero-copy h1 {
  font-size: clamp(3.1rem, 5.35vw, 5.55rem);
}

.memorial-hall-copy p:not(.memorial-eyebrow),
.memorial-detail-hero-copy > p {
  max-width: 640px;
  font-size: clamp(1.02rem, 1.45vw, 1.22rem);
}

.memorial-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.memorial-hall-stage {
  position: relative;
  min-height: 520px;
  perspective: 1100px;
}

.memorial-hall-stage::before {
  position: absolute;
  right: -8%;
  bottom: 0;
  left: -4%;
  height: 44%;
  content: "";
  background:
    linear-gradient(90deg, rgba(217, 170, 87, 0.22), transparent 22% 78%, rgba(137, 163, 118, 0.16)),
    linear-gradient(180deg, rgba(231, 220, 193, 0.14), rgba(231, 220, 193, 0.03));
  clip-path: polygon(14% 0, 88% 0, 100% 100%, 0 100%);
  transform: rotateX(66deg);
  transform-origin: bottom;
}

.memorial-hall-portal-stage {
  display: grid;
  min-height: 520px;
  align-content: end;
  gap: 14px;
}

.memorial-hall-portal-stage::before {
  right: -18%;
  bottom: 46px;
  left: -18%;
  height: 38%;
  background:
    linear-gradient(90deg, rgba(217, 170, 87, 0.34), transparent 27% 76%, rgba(245, 239, 226, 0.16)),
    linear-gradient(180deg, rgba(231, 220, 193, 0.16), rgba(231, 220, 193, 0.02));
}

.memorial-hall-portal-card,
.memorial-hall-enter-card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(231, 220, 193, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(15, 20, 17, 0.78), rgba(29, 37, 31, 0.52));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px);
}

.memorial-hall-portal-card {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
  margin-left: auto;
  padding: 20px;
  transform: rotateY(-11deg) translateZ(20px);
}

.memorial-hall-portal-card svg {
  color: var(--memorial-gold);
}

.memorial-hall-portal-card span {
  color: var(--memorial-muted);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memorial-hall-portal-card strong {
  max-width: 280px;
  color: var(--memorial-ink);
  font-size: 1.62rem;
  line-height: 1.04;
}

.memorial-hall-enter-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: min(430px, 100%);
  margin-left: auto;
  padding: 12px 14px 12px 12px;
  color: var(--memorial-ink);
  transform: rotateY(-7deg) translateZ(48px);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.memorial-hall-enter-card:hover,
.memorial-hall-enter-card:focus-visible {
  border-color: rgba(217, 170, 87, 0.62);
  background: linear-gradient(135deg, rgba(26, 34, 29, 0.9), rgba(49, 43, 29, 0.62));
  transform: rotateY(-5deg) translateZ(56px) translateY(-2px);
}

.memorial-hall-enter-image {
  overflow: hidden;
  border-radius: 8px;
}

.memorial-hall-enter-image img {
  aspect-ratio: 1;
}

.memorial-hall-enter-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-hall-enter-copy small {
  color: var(--memorial-gold);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memorial-hall-enter-copy strong {
  font-size: 1.34rem;
  line-height: 1;
}

.memorial-hall-enter-copy em {
  color: var(--memorial-muted);
  font-size: 0.86rem;
  font-style: normal;
  font-weight: 780;
}

.memorial-hall-enter-card > svg {
  color: var(--memorial-gold);
}

.memorial-hall-plaque {
  position: absolute;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(231, 220, 193, 0.24);
  border-radius: 8px;
  background: #121713;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
}

.memorial-hall-plaque img {
  aspect-ratio: 4 / 3;
}

.memorial-hall-plaque span {
  display: flex;
  min-height: 70px;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 13px 16px;
  border-top: 1px solid rgba(231, 220, 193, 0.13);
  color: var(--memorial-ink);
}

.memorial-hall-plaque strong {
  font-size: 1.1rem;
}

.memorial-hall-plaque small {
  color: var(--memorial-muted);
  font-weight: 750;
}

.memorial-hall-plaque.is-watson {
  top: 26px;
  right: 9%;
  width: min(340px, 72vw);
  transform: rotateY(-10deg) rotateZ(1deg);
}

.memorial-hall-plaque.is-watson:hover,
.memorial-hall-plaque.is-watson:focus-visible {
  border-color: rgba(217, 170, 87, 0.68);
}

.memorial-hall-plaque.is-momo {
  right: 44%;
  bottom: 76px;
  width: min(248px, 48vw);
  opacity: 0.86;
  transform: rotateY(18deg) rotateZ(-2deg);
}

.memorial-hall-quiet-label {
  position: absolute;
  right: 0;
  bottom: 18px;
  display: grid;
  width: min(310px, 58vw);
  gap: 8px;
  padding-left: 18px;
  border-left: 2px solid rgba(217, 170, 87, 0.58);
}

.memorial-hall-quiet-label span {
  color: var(--memorial-ink);
  font-size: 1.08rem;
  font-weight: 900;
}

.memorial-hall-quiet-label p {
  font-size: 0.93rem;
}

.memorial-principles,
.memorial-entry-band,
.memorial-letter-section,
.memorial-timeline-section,
.memorial-gallery-section,
.memorial-tribute-section {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.memorial-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 28px 0 72px;
}

.memorial-principles article {
  display: grid;
  gap: 10px;
  min-height: 188px;
  align-content: start;
  border: 1px solid var(--memorial-line);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.055);
  padding: 22px;
}

.memorial-principles svg,
.memorial-tribute-flow svg {
  color: var(--memorial-gold);
}

.memorial-principles h2 {
  color: var(--memorial-ink);
  font-size: 1.22rem;
}

.memorial-entry-band {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(340px, 0.54fr);
  gap: 34px;
  align-items: end;
  padding: 0 0 86px;
}

.memorial-section-head {
  display: grid;
  max-width: 760px;
  gap: 12px;
}

.memorial-section-head h2,
.memorial-tribute-copy h2 {
  color: var(--memorial-ink);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.02;
}

.memorial-entry-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(231, 220, 193, 0.2);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.06);
  color: var(--memorial-ink);
}

.memorial-entry-card img {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.memorial-entry-card span {
  display: grid;
  gap: 3px;
  padding: 0 0 18px 18px;
}

.memorial-entry-card strong {
  font-size: 1.2rem;
}

.memorial-entry-card small {
  color: var(--memorial-muted);
  font-weight: 800;
}

.memorial-entry-card > svg {
  margin: 0 18px 18px 0;
  color: var(--memorial-gold);
}

.memorial-detail-page {
  padding-bottom: 180px;
}

.memorial-detail-hero {
  display: grid;
  width: min(1180px, calc(100% - 40px));
  min-height: min(780px, 88vh);
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.78fr);
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
  margin: 0 auto;
  padding: 80px 0 64px;
}

.memorial-detail-hero-copy {
  display: grid;
  min-width: 0;
  gap: 20px;
}

.memorial-detail-hero-copy h1,
.memorial-detail-hero-copy > p {
  width: min(100%, calc(100vw - 48px));
  max-width: 100%;
}

.memorial-detail-hero-copy h1 {
  overflow-wrap: anywhere;
  white-space: normal;
}

.memorial-back-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: var(--memorial-muted);
  font-size: 0.9rem;
  font-weight: 850;
}

.memorial-back-link svg {
  transform: rotate(180deg);
}

.memorial-back-link:hover,
.memorial-back-link:focus-visible {
  color: var(--memorial-ink);
}

.memorial-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.memorial-hero-meta span {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(231, 220, 193, 0.16);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.055);
  color: var(--memorial-muted);
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 760;
}

.memorial-hero-meta strong {
  color: var(--memorial-ink);
}

.memorial-hero-meta svg {
  color: var(--memorial-gold);
}

.memorial-detail-portrait {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  background: #151b17;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
}

.memorial-detail-portrait::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, transparent 52%, rgba(9, 13, 11, 0.82) 100%);
  pointer-events: none;
}

.memorial-detail-portrait img {
  aspect-ratio: 4 / 5;
}

.memorial-detail-portrait div {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  color: var(--memorial-ink);
}

.memorial-detail-portrait strong {
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  font-weight: 950;
  line-height: 0.92;
}

.memorial-detail-portrait span {
  max-width: 180px;
  color: var(--memorial-muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: right;
  text-transform: uppercase;
}

.memorial-letter-section,
.memorial-timeline-section,
.memorial-gallery-section,
.memorial-tribute-section {
  padding: 68px 0 0;
}

.memorial-letter-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(28px, 5vw, 70px);
  border-top: 1px solid var(--memorial-line);
}

.memorial-letter {
  display: grid;
  gap: 18px;
  border-left: 2px solid rgba(217, 170, 87, 0.46);
  padding-left: clamp(20px, 4vw, 42px);
}

.memorial-letter p {
  color: #e4dccd;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.9;
}

.memorial-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.memorial-timeline article {
  display: grid;
  gap: 10px;
  min-height: 206px;
  align-content: start;
  border: 1px solid var(--memorial-line);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.045);
  padding: 22px;
}

.memorial-timeline span {
  width: fit-content;
  border: 1px solid rgba(217, 170, 87, 0.36);
  border-radius: 999px;
  color: var(--memorial-gold);
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 900;
}

.memorial-timeline h3 {
  color: var(--memorial-ink);
  font-size: 1.22rem;
  line-height: 1.18;
}

.memorial-photos-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 72% 0%, rgba(217, 170, 87, 0.08), transparent 28%),
    linear-gradient(180deg, #111713 0%, #0d120f 100%);
}

.memorial-room-strip,
.memorial-memory-ops-grid {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
}

.memorial-room-strip {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid rgba(231, 220, 193, 0.12);
  background: rgba(13, 18, 15, 0.86);
  padding: 18px 0;
  backdrop-filter: blur(20px);
}

.memorial-photos-page .memorial-room-strip {
  width: min(1400px, calc(100% - 32px));
  padding: 12px 0;
}

.memorial-room-back {
  white-space: nowrap;
}

.memorial-room-profile {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.memorial-page .memorial-room-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(231, 220, 193, 0.22);
  border-radius: 999px;
  object-fit: cover;
}

.memorial-room-title {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.memorial-room-title p {
  color: rgba(200, 193, 180, 0.74);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memorial-room-title h1 {
  overflow: hidden;
  color: var(--memorial-ink);
  font-size: clamp(1.48rem, 2.8vw, 2.35rem);
  font-weight: 950;
  line-height: 0.96;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-room-chips,
.memorial-room-actions,
.memorial-photo-topbar-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memorial-room-chips span,
.memorial-photo-topbar-stats span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(231, 220, 193, 0.13);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.055);
  color: rgba(245, 239, 226, 0.76);
  padding: 0 9px;
  font-size: 0.72rem;
  font-weight: 860;
  white-space: nowrap;
}

.memorial-room-chips svg,
.memorial-photo-topbar-stats svg,
.memorial-room-action svg,
.memorial-memory-op-card svg {
  color: var(--memorial-gold);
}

.memorial-room-actions {
  justify-content: flex-end;
}

.memorial-room-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.075);
  color: var(--memorial-ink);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 880;
  white-space: nowrap;
}

.memorial-room-action:hover,
.memorial-room-action:focus-visible {
  border-color: rgba(217, 170, 87, 0.42);
  background: rgba(217, 170, 87, 0.15);
  outline: none;
}

.memorial-gallery-section-primary {
  width: min(1400px, calc(100% - 32px));
  padding-top: 22px;
}

.memorial-photo-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.memorial-photo-topbar > div:first-child {
  display: grid;
  gap: 5px;
}

.memorial-photo-topbar h2 {
  color: var(--memorial-ink);
  font-size: clamp(1.26rem, 2vw, 1.82rem);
  font-weight: 950;
  line-height: 1.02;
}

.memorial-photo-topbar-stats {
  justify-content: flex-end;
}

.memorial-memory-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 48px;
}

.memorial-memory-op-card {
  display: grid;
  min-height: 148px;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(231, 220, 193, 0.13);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.05);
  padding: 18px;
}

.memorial-memory-op-card h2 {
  color: var(--memorial-ink);
  font-size: 1rem;
  font-weight: 920;
  line-height: 1.16;
}

.memorial-memory-op-card p {
  color: rgba(200, 193, 180, 0.78);
  font-size: 0.86rem;
  line-height: 1.45;
}

.memorial-memory-op-card span {
  width: fit-content;
  margin-top: auto;
  border: 1px solid rgba(217, 170, 87, 0.28);
  border-radius: 999px;
  color: var(--memorial-gold);
  padding: 5px 8px;
  font-size: 0.66rem;
  font-weight: 900;
}

.memorial-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 10px;
  margin-top: 26px;
}

.memorial-photo-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(231, 220, 193, 0.12);
  border-radius: 8px;
  background: #101713;
  color: var(--memorial-ink);
  padding: 0;
}

.memorial-photo-tile-1 {
  grid-column: span 2;
  grid-row: span 2;
}

.memorial-photo-tile-4 {
  grid-column: span 2;
}

.memorial-photo-tile img {
  transition: transform 220ms ease;
}

.memorial-photo-tile:hover img,
.memorial-photo-tile:focus-visible img {
  transform: scale(1.025);
}

.memorial-photo-tile-overlay {
  position: absolute;
  inset: auto 10px 10px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  background: rgba(9, 13, 11, 0.72);
  padding: 12px;
  backdrop-filter: blur(12px);
}

.memorial-photo-tile-overlay span {
  display: grid;
  gap: 2px;
  text-align: left;
}

.memorial-photo-tile-overlay strong {
  font-size: 0.94rem;
}

.memorial-photo-tile-overlay small {
  color: var(--memorial-muted);
  font-size: 0.76rem;
  font-weight: 820;
}

.memorial-photo-tile-overlay svg {
  flex: 0 0 auto;
  color: var(--memorial-gold);
}

.memorial-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
}

.memorial-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 7, 0.86);
  backdrop-filter: blur(12px);
}

.memorial-lightbox-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1120px, 100%);
  max-height: calc(100vh - 48px);
  place-items: center;
}

.memorial-lightbox-panel figure {
  display: grid;
  width: 100%;
  max-height: calc(100vh - 48px);
  gap: 12px;
  margin: 0;
}

.memorial-lightbox-panel figure > img {
  width: 100%;
  max-height: calc(100vh - 132px);
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 8px;
  object-fit: contain;
  background: #0a0e0b;
}

.memorial-lightbox-panel figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  color: var(--memorial-ink);
}

.memorial-lightbox-panel figcaption strong {
  font-size: 1rem;
}

.memorial-lightbox-panel figcaption span {
  color: var(--memorial-muted);
  font-size: 0.92rem;
  text-align: right;
}

.memorial-lightbox-close,
.memorial-lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.1);
  color: var(--memorial-ink);
}

.memorial-lightbox-close {
  top: -10px;
  right: -10px;
}

.memorial-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.memorial-lightbox-nav.is-prev {
  left: -62px;
}

.memorial-lightbox-nav.is-next {
  right: -62px;
}

.memorial-lightbox-close:hover,
.memorial-lightbox-close:focus-visible,
.memorial-lightbox-nav:hover,
.memorial-lightbox-nav:focus-visible {
  background: rgba(217, 170, 87, 0.22);
  border-color: rgba(217, 170, 87, 0.5);
}

.memorial-memory-browser {
  display: grid;
  gap: 34px;
  margin-top: 26px;
}

.memorial-memory-toolbar {
  position: sticky;
  top: 10px;
  z-index: 5;
  display: flex;
  width: fit-content;
  max-width: 100%;
  gap: 6px;
  overflow-x: auto;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 999px;
  background: rgba(17, 23, 19, 0.82);
  padding: 5px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.memorial-memory-toolbar::-webkit-scrollbar {
  display: none;
}

.memorial-memory-toolbar button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(245, 239, 226, 0.72);
  padding: 0 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 870;
  white-space: nowrap;
  cursor: pointer;
}

.memorial-memory-toolbar button small {
  color: rgba(200, 193, 180, 0.58);
  font-size: 0.68rem;
  font-weight: 900;
}

.memorial-memory-toolbar button.is-active {
  background: rgba(245, 239, 226, 0.12);
  color: #fff8e8;
}

.memorial-memory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 16px;
  align-items: start;
}

.memorial-memory-years {
  display: grid;
  gap: 54px;
}

.memorial-memory-year-rail {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 8px;
  justify-items: stretch;
}

.memorial-memory-year-rail a {
  display: grid;
  min-height: 30px;
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.12);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.055);
  color: rgba(245, 239, 226, 0.72);
  font-size: 0.66rem;
  font-weight: 900;
}

.memorial-memory-year-rail a:hover,
.memorial-memory-year-rail a:focus-visible {
  border-color: rgba(217, 170, 87, 0.42);
  color: #fff8e8;
  outline: none;
}

.memorial-memory-year {
  display: grid;
  gap: 18px;
}

.memorial-memory-year-head {
  display: grid;
  grid-template-columns: minmax(88px, 0.16fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: start;
}

.memorial-memory-year-head > span {
  position: sticky;
  top: 70px;
  color: #fff8e8;
  font-size: clamp(1.62rem, 3.5vw, 3.1rem);
  font-weight: 950;
  line-height: 0.95;
}

.memorial-memory-year-head div {
  display: grid;
  gap: 6px;
  max-width: 720px;
}

.memorial-memory-year-head h3 {
  color: var(--memorial-ink);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.08;
}

.memorial-memory-year-head p {
  max-width: 720px;
  color: rgba(200, 193, 180, 0.78);
  font-size: 0.96rem;
  line-height: 1.5;
}

.memorial-memory-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 132px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.memorial-memory-card {
  position: relative;
  overflow: hidden;
  display: block;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(231, 220, 193, 0.1);
  border-radius: 8px;
  background: #101713;
  color: var(--memorial-ink);
  padding: 0;
  cursor: pointer;
  isolation: isolate;
}

.memorial-memory-card.is-featured {
  grid-column: span 2;
  grid-row: span 2;
}

.memorial-memory-card.is-film {
  grid-column: span 2;
}

.memorial-memory-card.has-no-media {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 12%, rgba(217, 170, 87, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(33, 42, 34, 0.96), rgba(15, 21, 17, 0.98));
}

.memorial-memory-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease, filter 220ms ease;
}

.memorial-memory-card:hover img,
.memorial-memory-card:focus-visible img {
  filter: saturate(1.04) contrast(1.04);
  transform: scale(1.035);
}

.memorial-memory-card:focus-visible {
  border-color: rgba(217, 170, 87, 0.62);
  outline: none;
}

.memorial-memory-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 10, 8, 0.24), transparent 36%),
    linear-gradient(0deg, rgba(7, 10, 8, 0.82), rgba(7, 10, 8, 0.03) 58%);
  opacity: 0.92;
  pointer-events: none;
}

.memorial-memory-card-symbol {
  position: relative;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.16);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.08);
  color: var(--memorial-gold);
}

.memorial-memory-card-meta {
  position: absolute;
  top: 8px;
  right: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(245, 239, 226, 0.78);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.44);
}

.memorial-memory-card-kind {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  max-width: 72%;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 999px;
  background: rgba(7, 10, 8, 0.42);
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.memorial-memory-card-copy {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: grid;
  min-width: 0;
  gap: 3px;
  text-align: left;
}

.memorial-memory-card-copy strong {
  overflow: hidden;
  color: #fff8e8;
  font-size: 0.9rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-memory-card-copy small {
  overflow: hidden;
  color: rgba(200, 193, 180, 0.74);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photos-page .memorial-memory-browser {
  gap: 16px;
  margin-top: 14px;
}

.memorial-photos-page .memorial-memory-toolbar {
  top: 92px;
}

.memorial-photos-page .memorial-memory-year-rail {
  top: 148px;
}

.memorial-photos-page .memorial-memory-year-head {
  grid-template-columns: minmax(74px, 0.08fr) minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 32px);
}

.memorial-photos-page .memorial-memory-year-head > span {
  top: 150px;
  font-size: clamp(1.18rem, 2.5vw, 2.1rem);
}

.memorial-photos-page .memorial-memory-year-head h3 {
  color: rgba(245, 239, 226, 0.78);
  font-size: 0.92rem;
  font-weight: 860;
}

.memorial-photos-page .memorial-memory-year-head p {
  display: none;
}

.memorial-photos-page .memorial-memory-grid {
  grid-auto-rows: 118px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

.memorial-photos-page .memorial-memory-card {
  border-color: rgba(231, 220, 193, 0.08);
  border-radius: 6px;
}

.memorial-photos-page .memorial-memory-card-scrim {
  background:
    linear-gradient(180deg, rgba(7, 10, 8, 0.17), transparent 42%),
    linear-gradient(0deg, rgba(7, 10, 8, 0.52), rgba(7, 10, 8, 0.03) 56%);
  opacity: 0.64;
}

.memorial-photos-page .memorial-memory-card-copy {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.memorial-photos-page .memorial-memory-card-meta {
  opacity: 0;
  transition: opacity 160ms ease;
}

.memorial-photos-page .memorial-memory-card:hover .memorial-memory-card-copy,
.memorial-photos-page .memorial-memory-card:focus-visible .memorial-memory-card-copy,
.memorial-photos-page .memorial-memory-card.has-no-media .memorial-memory-card-copy {
  opacity: 1;
  transform: none;
}

.memorial-photos-page .memorial-memory-card:hover .memorial-memory-card-meta,
.memorial-photos-page .memorial-memory-card:focus-visible .memorial-memory-card-meta,
.memorial-photos-page .memorial-memory-card.has-no-media .memorial-memory-card-meta,
.memorial-photos-page .memorial-memory-card.is-film .memorial-memory-card-meta,
.memorial-photos-page .memorial-memory-card.is-letter .memorial-memory-card-meta,
.memorial-photos-page .memorial-memory-card.is-music .memorial-memory-card-meta {
  opacity: 1;
}

.memorial-photos-page .memorial-memory-card.is-letter,
.memorial-photos-page .memorial-memory-card.is-music {
  grid-column: span 2;
}

.memorial-memory-viewer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 24px;
}

.memorial-memory-viewer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(4, 7, 5, 0.9);
  backdrop-filter: blur(14px);
}

.memorial-memory-viewer-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1240px, 100%);
  max-height: calc(100vh - 48px);
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.28fr);
  gap: 18px;
  align-items: stretch;
}

.memorial-memory-viewer-media {
  overflow: hidden;
  display: grid;
  min-height: 320px;
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 12%, rgba(217, 170, 87, 0.14), transparent 36%),
    #080d0a;
}

.memorial-memory-viewer-media img {
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 48px);
  object-fit: contain;
}

.memorial-memory-viewer-media > span {
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(217, 170, 87, 0.26);
  border-radius: 999px;
  background: rgba(217, 170, 87, 0.11);
  color: var(--memorial-gold);
}

.memorial-memory-viewer-info {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 8px;
  background: rgba(17, 23, 19, 0.88);
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(16px);
}

.memorial-memory-viewer-info > span {
  color: var(--memorial-gold);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.memorial-memory-viewer-info h3 {
  color: #fff8e8;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.04;
}

.memorial-memory-viewer-info p {
  color: rgba(228, 220, 205, 0.84);
  line-height: 1.65;
}

.memorial-memory-viewer-info div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memorial-memory-viewer-info small {
  border: 1px solid rgba(231, 220, 193, 0.14);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.07);
  color: rgba(245, 239, 226, 0.76);
  padding: 7px 9px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
}

.memorial-memory-viewer-close,
.memorial-memory-viewer-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid rgba(231, 220, 193, 0.18);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.1);
  color: var(--memorial-ink);
  cursor: pointer;
}

.memorial-memory-viewer-close {
  top: -12px;
  right: -12px;
}

.memorial-memory-viewer-nav {
  top: 50%;
  transform: translateY(-50%);
}

.memorial-memory-viewer-nav.is-prev {
  left: -58px;
}

.memorial-memory-viewer-nav.is-next {
  right: -58px;
}

.memorial-memory-viewer-close:hover,
.memorial-memory-viewer-close:focus-visible,
.memorial-memory-viewer-nav:hover,
.memorial-memory-viewer-nav:focus-visible {
  border-color: rgba(217, 170, 87, 0.48);
  background: rgba(217, 170, 87, 0.2);
  outline: none;
}

.memorial-tribute-section {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(320px, 0.3fr);
  gap: 28px;
  align-items: center;
}

.memorial-tribute-copy {
  display: grid;
  gap: 12px;
}

.memorial-tribute-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.memorial-tribute-flow span {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--memorial-line);
  border-radius: 8px;
  background: rgba(245, 239, 226, 0.055);
  color: var(--memorial-ink);
  font-weight: 900;
}

.memorial-tribute-section.is-compact {
  width: min(1280px, calc(100% - 40px));
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  border-top: 1px solid rgba(231, 220, 193, 0.12);
  padding-top: 44px;
}

.memorial-tribute-section.is-compact .memorial-tribute-copy h2 {
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  line-height: 1.08;
}

.memorial-tribute-section.is-compact .memorial-tribute-copy p:not(.memorial-eyebrow) {
  max-width: 560px;
  color: rgba(200, 193, 180, 0.78);
  font-size: 0.92rem;
  line-height: 1.58;
}

.memorial-tribute-section.is-compact .memorial-tribute-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.memorial-tribute-section.is-compact .memorial-tribute-flow span {
  min-height: 62px;
  font-size: 0.86rem;
}

@media (max-width: 980px) {
  .memorial-hall-hero-inner,
  .memorial-detail-hero,
  .memorial-entry-band,
  .memorial-letter-section,
  .memorial-tribute-section {
    grid-template-columns: 1fr;
  }

  .memorial-hall-hero-inner {
    align-items: start;
    padding-top: 74px;
  }

  .memorial-room-strip {
    position: static;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .memorial-room-actions {
    justify-content: flex-start;
  }

  .memorial-photo-topbar {
    align-items: start;
  }

  .memorial-memory-layout {
    grid-template-columns: 1fr;
  }

  .memorial-memory-year-rail {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    grid-row: 1;
    gap: 6px;
    overflow-x: auto;
    border: 1px solid rgba(231, 220, 193, 0.12);
    border-radius: 999px;
    background: rgba(17, 23, 19, 0.82);
    padding: 5px;
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .memorial-memory-year-rail::-webkit-scrollbar {
    display: none;
  }

  .memorial-memory-year-rail a {
    min-width: 66px;
    min-height: 32px;
  }

  .memorial-memory-years {
    grid-row: 2;
  }

  .memorial-memory-ops-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-tribute-section.is-compact .memorial-tribute-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-hall-stage {
    min-height: 460px;
  }

  .memorial-principles,
  .memorial-timeline {
    grid-template-columns: 1fr;
  }

  .memorial-letter {
    border-left: 0;
    border-top: 2px solid rgba(217, 170, 87, 0.46);
    padding-top: 24px;
    padding-left: 0;
  }

  .memorial-photo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-memory-grid {
    grid-auto-rows: 126px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .memorial-photos-page .memorial-memory-toolbar {
    top: 10px;
  }

  .memorial-photos-page .memorial-memory-grid {
    grid-auto-rows: 126px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .memorial-photos-page .memorial-memory-year-head > span {
    top: 70px;
  }

  .memorial-memory-viewer-panel {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .memorial-memory-viewer-media img {
    max-height: 62vh;
  }

  .memorial-memory-viewer-nav.is-prev {
    left: 12px;
  }

  .memorial-memory-viewer-nav.is-next {
    right: 12px;
  }
}

@media (max-width: 680px) {
  .memorial-page {
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
      linear-gradient(180deg, #151c18 0%, #101713 58%, #0d120f 100%);
  }

  .memorial-hall-hero {
    min-height: auto;
  }

  .memorial-hall-hero-inner,
  .memorial-detail-hero,
  .memorial-room-strip,
  .memorial-principles,
  .memorial-entry-band,
  .memorial-letter-section,
  .memorial-timeline-section,
  .memorial-memory-ops-grid,
  .memorial-gallery-section,
  .memorial-tribute-section {
    width: min(100% - 24px, 1180px);
  }

  .memorial-room-strip {
    gap: 14px;
    padding-top: 14px;
  }

  .memorial-page .memorial-room-avatar {
    width: 50px;
    height: 50px;
  }

  .memorial-room-title h1 {
    font-size: 1.62rem;
  }

  .memorial-room-actions {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .memorial-room-actions::-webkit-scrollbar {
    display: none;
  }

  .memorial-room-action {
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.74rem;
  }

  .memorial-gallery-section-primary {
    padding-top: 20px;
  }

  .memorial-photo-topbar {
    display: grid;
    gap: 12px;
  }

  .memorial-photo-topbar-stats {
    justify-content: flex-start;
  }

  .memorial-memory-ops-grid {
    grid-template-columns: 1fr;
    padding-top: 34px;
  }

  .memorial-hall-copy h1,
  .memorial-detail-hero-copy h1 {
    display: block;
    width: min(100%, 330px);
    max-width: 330px;
    font-size: clamp(2.05rem, 8.7vw, 2.22rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .memorial-hall-copy h1 {
    width: min(100%, 330px);
    max-width: 330px;
    font-size: clamp(2.3rem, 10vw, 2.92rem);
  }

  .memorial-hall-copy > p:not(.memorial-eyebrow),
  .memorial-hall-copy .memorial-hero-actions {
    width: min(100%, 330px);
    max-width: 330px;
  }

  .memorial-detail-hero-copy > p,
  .memorial-detail-hero-copy .memorial-hero-meta,
  .memorial-detail-hero-copy .memorial-hero-actions {
    width: min(100%, 330px);
    max-width: 330px;
  }

  .memorial-hero-actions,
  .memorial-button {
    width: 100%;
  }

  .memorial-hall-stage {
    width: min(100%, 330px);
    max-width: 330px;
    min-height: 360px;
  }

  .memorial-hall-portal-stage {
    align-content: start;
    gap: 10px;
    perspective: none;
  }

  .memorial-hall-portal-card,
  .memorial-hall-enter-card {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .memorial-hall-portal-card {
    padding: 16px;
  }

  .memorial-hall-portal-card strong {
    font-size: 1.28rem;
  }

  .memorial-hall-enter-card {
    grid-template-columns: 76px minmax(0, 1fr) auto;
  }

  .memorial-detail-portrait img {
    aspect-ratio: 4 / 4.7;
  }

  .memorial-detail-portrait div {
    display: grid;
  }

  .memorial-detail-portrait span {
    text-align: left;
  }

  .memorial-photo-grid {
    grid-auto-rows: 168px;
    gap: 8px;
  }

  .memorial-memory-browser {
    gap: 26px;
  }

  .memorial-memory-toolbar {
    width: 100%;
    border-radius: 18px;
  }

  .memorial-memory-toolbar button {
    min-height: 36px;
    padding-inline: 10px;
  }

  .memorial-memory-years {
    gap: 42px;
  }

  .memorial-memory-year-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .memorial-photos-page .memorial-memory-year-head {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .memorial-memory-year-head > span {
    position: static;
    font-size: 2rem;
  }

  .memorial-photos-page .memorial-memory-year-head > span {
    position: static;
    font-size: 2rem;
  }

  .memorial-memory-year-head h3 {
    font-size: 1.24rem;
  }

  .memorial-memory-year-head p {
    font-size: 0.9rem;
  }

  .memorial-memory-grid {
    grid-auto-rows: 112px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .memorial-photos-page .memorial-memory-grid {
    grid-auto-rows: 112px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .memorial-memory-card.is-featured,
  .memorial-memory-card.is-film {
    grid-column: span 2;
  }

  .memorial-memory-card-copy {
    right: 7px;
    bottom: 7px;
    left: 7px;
  }

  .memorial-photos-page .memorial-memory-card-copy {
    opacity: 1;
    transform: none;
  }

  .memorial-memory-card-copy strong {
    font-size: 0.78rem;
  }

  .memorial-memory-card-copy small {
    display: none;
  }

  .memorial-memory-card-meta {
    top: 6px;
    right: 6px;
    left: 6px;
    font-size: 0.6rem;
  }

  .memorial-memory-card-kind {
    max-width: 78%;
    padding: 4px 6px;
  }

  .memorial-memory-viewer {
    padding: 10px;
  }

  .memorial-memory-viewer-panel {
    max-height: calc(100vh - 20px);
    gap: 10px;
  }

  .memorial-memory-viewer-media {
    min-height: 240px;
  }

  .memorial-memory-viewer-media img {
    max-height: 58vh;
  }

  .memorial-memory-viewer-info {
    padding: 16px;
  }

  .memorial-memory-viewer-close {
    top: 8px;
    right: 8px;
  }

  .memorial-memory-viewer-nav {
    top: auto;
    bottom: 14px;
    width: 40px;
    height: 40px;
    transform: none;
  }

  .memorial-memory-viewer-nav.is-prev {
    left: 14px;
  }

  .memorial-memory-viewer-nav.is-next {
    right: 14px;
  }

  .memorial-photo-tile-1,
  .memorial-photo-tile-4 {
    grid-column: span 2;
  }

  .memorial-photo-tile-overlay {
    inset: auto 8px 8px 8px;
    padding: 10px;
  }

  .memorial-lightbox {
    padding: 12px;
  }

  .memorial-lightbox-panel figure {
    max-height: calc(100vh - 24px);
  }

  .memorial-lightbox-panel figure > img {
    max-height: calc(100vh - 132px);
  }

  .memorial-lightbox-panel figcaption {
    display: grid;
  }

  .memorial-lightbox-panel figcaption span {
    text-align: left;
  }

  .memorial-lightbox-close {
    top: 8px;
    right: 8px;
  }

  .memorial-lightbox-nav {
    top: auto;
    bottom: 72px;
    transform: none;
  }

  .memorial-lightbox-nav.is-prev {
    left: 16px;
  }

  .memorial-lightbox-nav.is-next {
    right: 16px;
  }
}

/* Memory Hall photo console */
body:has(.memorial-photo-console-page) {
  background: #111111;
}

body:has(.memorial-photo-console-page) .site-main-shell-memory-hall,
body:has(.memorial-photo-console-page) .site-main-memory-hall,
body:has(.memorial-photo-console-page) .site-main-shell-admin-studio,
body:has(.memorial-photo-console-page) .site-main-admin-studio {
  background: #111111 !important;
}

body:has(.memorial-photo-console-page) .site-main-memory-hall {
  padding-top: 0;
}

.memorial-photo-console-page {
  --memorial-ink: #f1f3f4;
  --memorial-muted: #bdc1c6;
  --memorial-deep: #111111;
  --memorial-panel: #1f1f1f;
  --memorial-line: rgba(255, 255, 255, 0.1);
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  background: #111111 !important;
  color: #f1f3f4;
}

.memorial-photo-console-topbar.admin-studio-topbar {
  left: 0;
}

.memorial-photo-console-topbar.admin-studio-workspace-topbar {
  --admin-studio-topbar-canvas: rgba(31, 31, 31, 0.96);
  --admin-studio-topbar-muted: #bdc1c6;
  --admin-studio-topbar-text: #f1f3f4;
  grid-template-columns: 26px minmax(220px, 628px) minmax(190px, 1fr);
  min-height: 56px;
  gap: 10px;
  padding: 8px 14px;
  padding-right: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(31, 31, 31, 0.98);
  color: #f1f3f4;
}

.memorial-photo-topbar-spacer {
  display: block;
  width: 1px;
  height: 1px;
}

.memorial-photo-console-topbar .admin-studio-workspace-heading {
  min-width: 0;
}

.memorial-photo-console-topbar .admin-studio-workspace-search {
  width: min(100%, 628px);
  min-height: 42px;
  justify-self: start;
  border: 0;
  border-radius: 999px;
  background: #2a2b2d;
  color: #bdc1c6;
  box-shadow: none;
}

.memorial-photo-console-topbar .admin-studio-workspace-search:focus-within {
  background: #303134;
}

.memorial-photo-console-topbar .admin-studio-workspace-search input {
  color: #f1f3f4 !important;
  -webkit-text-fill-color: #f1f3f4 !important;
  font-size: 0.88rem;
  font-weight: 760;
}

.memorial-photo-console-topbar .admin-studio-workspace-search input::placeholder {
  color: #e8eaed;
}

.memorial-photo-console-topbar .admin-studio-workspace-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.memorial-photo-topbar-icon,
.memorial-photo-select-button {
  display: inline-flex;
  min-width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #e8eaed;
  font: inherit;
  cursor: pointer;
}

.memorial-photo-topbar-icon:is(:hover, :focus-visible),
.memorial-photo-select-button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.memorial-photo-select-button {
  gap: 7px;
  min-width: auto;
  padding: 0 11px;
  color: #f1f3f4;
  font-size: 0.82rem;
  font-weight: 820;
}

.memorial-photo-console {
  width: 100%;
  max-width: none;
  padding: 66px 18px 44px 14px;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console,
body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console.is-desktop-expanded,
body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console.is-desktop-pinned,
body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console:not(.is-desktop-expanded) {
  border-right-color: rgba(255, 255, 255, 0.08);
  background: #1f1f1f;
  box-shadow: none;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary) {
  color: #bdc1c6;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console .sidebar-link-icon {
  border-color: transparent;
  background: transparent;
  color: #bdc1c6;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console :is(.sidebar-link, .sidebar-link-secondary):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  color: #f1f3f4;
  outline: none;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console .sidebar-link.is-active {
  background: #0b57d0;
  color: #ffffff;
  box-shadow: none;
}

body:has(.memorial-photo-console-page) .site-sidebar.is-studio-console .sidebar-link.is-active .sidebar-link-icon {
  background: transparent;
  color: #ffffff;
}

.memorial-photo-console-page .memorial-memory-browser {
  gap: 0;
  margin: 0;
}

.memorial-photo-console-page .memorial-memory-toolbar {
  display: none;
}

.memorial-photo-console-page .memorial-memory-layout {
  display: block;
}

.memorial-photo-console-page .memorial-memory-years {
  display: grid;
  gap: 22px;
  padding-right: 58px;
}

.memorial-photo-console-page .memorial-memory-year {
  display: grid;
  gap: 10px;
}

.memorial-photo-console-page .memorial-memory-year-head {
  display: flex;
  margin: 0;
  padding: 0;
}

.memorial-photo-console-page .memorial-memory-year-head > span {
  display: none;
}

.memorial-photo-console-page .memorial-memory-year-head h3 {
  color: #e8eaed;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.1;
}

.memorial-photo-console-page .memorial-memory-year-head p {
  display: none;
}

.memorial-photo-console-page .memorial-memory-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 118px;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 3px;
}

.memorial-photo-console-page .memorial-memory-card {
  overflow: hidden;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #1a1a1a;
  box-shadow: none;
}

.memorial-photo-console-page .memorial-memory-card.is-featured {
  grid-column: span 1;
  grid-row: span 1;
}

.memorial-photo-console-page .memorial-memory-card.is-film {
  grid-column: span 1;
}

.memorial-photo-console-page .memorial-memory-card img {
  filter: none;
  transform: none;
}

.memorial-photo-console-page .memorial-memory-card:hover img,
.memorial-photo-console-page .memorial-memory-card:focus-visible img {
  filter: brightness(0.86);
  transform: scale(1.012);
}

.memorial-photo-console-page .memorial-memory-card-scrim {
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58));
}

.memorial-photo-console-page .memorial-memory-card-meta,
.memorial-photo-console-page .memorial-memory-card-copy {
  opacity: 0;
  transition: opacity 150ms ease;
}

.memorial-photo-console-page .memorial-memory-card:hover .memorial-memory-card-scrim,
.memorial-photo-console-page .memorial-memory-card:focus-visible .memorial-memory-card-scrim,
.memorial-photo-console-page .memorial-memory-card:hover .memorial-memory-card-meta,
.memorial-photo-console-page .memorial-memory-card:focus-visible .memorial-memory-card-meta,
.memorial-photo-console-page .memorial-memory-card:hover .memorial-memory-card-copy,
.memorial-photo-console-page .memorial-memory-card:focus-visible .memorial-memory-card-copy,
.memorial-photo-console-page .memorial-memory-card.has-no-media .memorial-memory-card-meta,
.memorial-photo-console-page .memorial-memory-card.has-no-media .memorial-memory-card-copy {
  opacity: 1;
}

.memorial-photo-console-page.memorial-photos-page .memorial-memory-card .memorial-memory-card-meta,
.memorial-photo-console-page.memorial-photos-page .memorial-memory-card .memorial-memory-card-copy {
  opacity: 0;
}

.memorial-photo-console-page.memorial-photos-page .memorial-memory-card:hover .memorial-memory-card-meta,
.memorial-photo-console-page.memorial-photos-page .memorial-memory-card:focus-visible .memorial-memory-card-meta,
.memorial-photo-console-page.memorial-photos-page .memorial-memory-card:hover .memorial-memory-card-copy,
.memorial-photo-console-page.memorial-photos-page .memorial-memory-card:focus-visible .memorial-memory-card-copy {
  opacity: 1;
}

.memorial-photo-console-page .memorial-memory-card-kind {
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  color: #f1f3f4;
  backdrop-filter: blur(8px);
}

.memorial-photo-console-page .memorial-memory-card-copy strong {
  color: #ffffff;
  font-size: 0.78rem;
}

.memorial-photo-console-page .memorial-memory-card-copy small {
  color: rgba(255, 255, 255, 0.74);
}

.memorial-photo-console-page .memorial-memory-card-symbol {
  border-color: rgba(255, 255, 255, 0.1);
  background: #242424;
  color: #fbbc04;
}

.memorial-photo-console-page .memorial-memory-year-rail {
  position: fixed;
  top: 72px;
  right: 0;
  bottom: 12px;
  z-index: 75;
  display: grid;
  width: 62px;
  align-content: flex-start;
  gap: 9px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 8px 0 0;
  backdrop-filter: none;
}

.memorial-photo-console-page .memorial-memory-year-rail a {
  justify-content: flex-end;
  min-width: 0;
  min-height: 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #bdc1c6;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-align: right;
}

.memorial-photo-console-page .memorial-memory-year-rail a:is(:hover, :focus-visible) {
  color: #ffffff;
  background: transparent;
  outline: none;
}

.memorial-photo-console-page .memorial-memory-viewer {
  background: rgba(0, 0, 0, 0.92);
}

.memorial-photo-console-page .memorial-memory-viewer-info {
  border-color: rgba(255, 255, 255, 0.1);
  background: #1f1f1f;
}

@media (min-width: 1480px) {
  .memorial-photo-console-page .memorial-memory-grid {
    grid-auto-rows: 134px;
    grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  }
}

@media (max-width: 1023px) {
  .memorial-photo-console-topbar.admin-studio-topbar {
    left: 0;
  }

  .memorial-photo-console-topbar.admin-studio-workspace-topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    min-height: 56px;
  }

  .memorial-photo-console-topbar .admin-studio-workspace-heading {
    display: none;
  }

  .memorial-photo-console-topbar .admin-studio-workspace-search {
    width: 100%;
  }

  .memorial-photo-console-page .memorial-memory-grid {
    grid-auto-rows: 106px;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
}

@media (max-width: 680px) {
  body:has(.memorial-photo-console-page) .site-main-shell-memory-hall {
    margin-left: 0;
  }

  .memorial-photo-console {
    padding: 112px 8px 32px;
  }

  .memorial-photo-console-topbar.admin-studio-workspace-topbar {
    gap: 6px;
    padding: 7px 8px;
  }

  .memorial-photo-topbar-icon:nth-of-type(2),
  .memorial-photo-topbar-icon:nth-of-type(3),
  .memorial-photo-topbar-icon:nth-of-type(4),
  .memorial-photo-select-button span {
    display: none;
  }

  .memorial-photo-console-page .memorial-memory-years {
    padding-right: 0;
  }

  .memorial-photo-console-page .memorial-memory-grid {
    grid-auto-rows: 96px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .memorial-photo-console-page .memorial-memory-year-rail {
    display: none;
  }
}

/* Memory Hall fullscreen photo viewer */
body:has(.memorial-photo-viewer-page) {
  --sidebar-rail-width: 0px;
  overflow: hidden;
  background: #000000;
}

body:has(.memorial-photo-viewer-page) .site-main-shell-memory-hall,
body:has(.memorial-photo-viewer-page) .site-main-shell-admin-studio {
  margin-left: 0 !important;
  background: #000000 !important;
}

body:has(.memorial-photo-viewer-page) .site-main-memory-hall,
body:has(.memorial-photo-viewer-page) .site-main-admin-studio {
  padding: 0 !important;
  background: #000000 !important;
}

body:has(.memorial-photo-viewer-page) .site-sidebar.is-studio-console,
body:has(.memorial-photo-viewer-page) .mobile-nav-toggle.is-studio-console-toggle,
body:has(.memorial-photo-viewer-page) .site-footer,
body:has(.memorial-photo-viewer-page) .admin-studio-topbar {
  display: none !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room) nextjs-portal {
  display: none !important;
}

body:has(.memorial-comfort-page) {
  --sidebar-rail-width: 0px;
  background: #050505;
}

body:has(.memorial-comfort-page) .site-main-shell-memory-hall,
body:has(.memorial-comfort-page) .site-main-shell-admin-studio {
  margin-left: 0 !important;
  background: #050505 !important;
}

body:has(.memorial-comfort-page) .site-main-memory-hall,
body:has(.memorial-comfort-page) .site-main-admin-studio {
  padding: 0 !important;
  background: #050505 !important;
}

body:has(.memorial-comfort-page) .site-sidebar.is-studio-console,
body:has(.memorial-comfort-page) .mobile-nav-toggle.is-studio-console-toggle,
body:has(.memorial-comfort-page) .site-footer,
body:has(.memorial-comfort-page) .admin-studio-topbar,
body:has(.memorial-comfort-page) nextjs-portal {
  display: none !important;
}

.memorial-route-state {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: clamp(28px, 6vw, 72px);
  background: #050505;
  color: #fffaf3;
  isolation: isolate;
}

body:has(.memorial-route-state) {
  --sidebar-rail-width: 0px;
  overflow: hidden;
  background: #050505;
}

body:has(.memorial-route-state) .site-main-shell-memory-hall,
body:has(.memorial-route-state) .site-main-shell-admin-studio {
  min-height: 100svh;
  margin-left: 0 !important;
  background: #050505 !important;
}

body:has(.memorial-route-state) .site-main-memory-hall,
body:has(.memorial-route-state) .site-main-admin-studio {
  padding: 0 !important;
  background: #050505 !important;
}

body:has(.memorial-route-state) .site-sidebar.is-studio-console,
body:has(.memorial-route-state) .mobile-nav-toggle.is-studio-console-toggle,
body:has(.memorial-route-state) .site-footer,
body:has(.memorial-route-state) .admin-studio-topbar,
body:has(.memorial-route-state) nextjs-portal {
  display: none !important;
}

.memorial-route-state-image {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(5, 5, 5, 0.32), rgba(5, 5, 5, 0.06) 42%, rgba(5, 5, 5, 0.55)),
    url("/memorial/watson/memory-objects/warm-floor-light.jpg") center center / cover no-repeat;
  opacity: 0.72;
  transform: scale(1.03);
}

.memorial-route-state-scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 24% 42%, rgba(255, 250, 243, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(5, 5, 5, 0.04), rgba(5, 5, 5, 0.76));
}

.memorial-route-state-panel {
  display: grid;
  width: min(100%, 620px);
  gap: 16px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid rgba(255, 250, 243, 0.24);
  border-radius: 8px;
  background: rgba(12, 11, 10, 0.52);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.memorial-route-state-kicker {
  margin: 0;
  color: rgba(245, 220, 178, 0.88);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.memorial-route-state-panel h1 {
  max-width: 12ch;
  margin: 0;
  color: #fffaf3;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.memorial-route-state-panel p {
  max-width: 54ch;
  margin: 0;
  color: rgba(255, 250, 243, 0.8);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.7;
}

.memorial-route-state-progress {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 8px;
}

.memorial-route-state-progress span {
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: rgba(245, 220, 178, 0.28);
  animation: memorial-route-state-breathe 1.9s ease-in-out infinite;
}

.memorial-route-state-progress span:nth-child(2) {
  animation-delay: 0.22s;
}

.memorial-route-state-progress span:nth-child(3) {
  animation-delay: 0.44s;
}

.memorial-route-state-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
}

.memorial-route-state-actions :is(button, a) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 18px;
  border: 1px solid rgba(255, 250, 243, 0.26);
  background: rgba(255, 250, 243, 0.94);
  color: #14110d;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.memorial-route-state-actions a {
  background: rgba(255, 250, 243, 0.1);
  color: #fffaf3;
}

.memorial-route-state-actions :is(button, a):is(:hover, :focus-visible) {
  transform: translateY(-1px);
  border-color: rgba(245, 220, 178, 0.62);
}

@keyframes memorial-route-state-breathe {
  0%,
  100% {
    opacity: 0.32;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-route-state-progress span {
    animation: none;
  }
}

@media (max-width: 640px) {
  .memorial-route-state {
    align-items: end;
    padding: 18px;
  }

  .memorial-route-state-panel {
    padding: 22px;
  }

  .memorial-route-state-panel h1 {
    max-width: 11ch;
  }
}

.memorial-photo-viewer-page {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  background: #000000;
  color: #ffffff;
  isolation: isolate;
}

.memorial-photo-viewer-page.is-library {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

.memorial-photo-room-hall-bridge {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 248, 232, 0.2), rgba(255, 236, 182, 0.06) 26%, transparent 58%),
    rgba(0, 0, 0, 0.38);
  opacity: 0;
  pointer-events: none;
  animation: memorialPhotoHallBridgeVeil 2350ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memorial-photo-room-hall-bridge span {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(118px, 15vw, 218px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.48);
  border-radius: 18px;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 42px 132px rgba(0, 0, 0, 0.72),
    0 0 132px rgba(255, 236, 182, 0.38);
  animation: memorialPhotoHallBridgeCard 2050ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memorial-photo-room-hall-bridge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-photo-room-hall-bridge em {
  --memorial-photo-hall-bridge-echo-x: 50%;
  --memorial-photo-hall-bridge-echo-y: 50%;
  --memorial-photo-hall-bridge-echo-scale: 1;
  --memorial-photo-hall-bridge-echo-rotate: 0deg;
  --memorial-photo-hall-bridge-echo-delay: 0ms;
  position: absolute;
  top: var(--memorial-photo-hall-bridge-echo-y);
  left: var(--memorial-photo-hall-bridge-echo-x);
  z-index: 1;
  display: block;
  width: clamp(22px, 3.2vw, 48px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.22);
  border-radius: 7px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 248, 232, 0.22), rgba(255, 236, 182, 0.08) 42%, transparent 74%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.12), rgba(255, 248, 232, 0.02));
  box-shadow:
    0 0 22px rgba(255, 236, 182, 0.2),
    inset 0 0 18px rgba(255, 248, 232, 0.04);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--memorial-photo-hall-bridge-echo-rotate))
    scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.42));
  animation: memorialPhotoHallBridgeEcho 2100ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memorial-photo-hall-bridge-echo-delay);
}

.memorial-photo-room-hall-bridge em::before,
.memorial-photo-room-hall-bridge em::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memorial-photo-room-hall-bridge em::before {
  inset: 18% 20%;
  border-radius: inherit;
  background: rgba(255, 248, 232, 0.22);
  filter: blur(6px);
  opacity: 0.7;
}

.memorial-photo-room-hall-bridge em::after {
  inset: -22%;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.16), transparent 68%);
  filter: blur(6px);
}

.memorial-photo-room-hall-bridge em.is-echo-1 {
  --memorial-photo-hall-bridge-echo-x: 32%;
  --memorial-photo-hall-bridge-echo-y: 30%;
  --memorial-photo-hall-bridge-echo-scale: 0.82;
  --memorial-photo-hall-bridge-echo-rotate: -10deg;
  --memorial-photo-hall-bridge-echo-delay: 80ms;
}

.memorial-photo-room-hall-bridge em.is-echo-2 {
  --memorial-photo-hall-bridge-echo-x: 67%;
  --memorial-photo-hall-bridge-echo-y: 28%;
  --memorial-photo-hall-bridge-echo-scale: 0.76;
  --memorial-photo-hall-bridge-echo-rotate: 8deg;
  --memorial-photo-hall-bridge-echo-delay: 190ms;
}

.memorial-photo-room-hall-bridge em.is-echo-3 {
  --memorial-photo-hall-bridge-echo-x: 24%;
  --memorial-photo-hall-bridge-echo-y: 57%;
  --memorial-photo-hall-bridge-echo-scale: 0.64;
  --memorial-photo-hall-bridge-echo-rotate: 13deg;
  --memorial-photo-hall-bridge-echo-delay: 280ms;
}

.memorial-photo-room-hall-bridge em.is-echo-4 {
  --memorial-photo-hall-bridge-echo-x: 76%;
  --memorial-photo-hall-bridge-echo-y: 58%;
  --memorial-photo-hall-bridge-echo-scale: 0.7;
  --memorial-photo-hall-bridge-echo-rotate: -12deg;
  --memorial-photo-hall-bridge-echo-delay: 40ms;
}

.memorial-photo-room-hall-bridge em.is-echo-5 {
  --memorial-photo-hall-bridge-echo-x: 41%;
  --memorial-photo-hall-bridge-echo-y: 71%;
  --memorial-photo-hall-bridge-echo-scale: 0.56;
  --memorial-photo-hall-bridge-echo-rotate: 5deg;
  --memorial-photo-hall-bridge-echo-delay: 360ms;
}

.memorial-photo-room-hall-bridge em.is-echo-6 {
  --memorial-photo-hall-bridge-echo-x: 59%;
  --memorial-photo-hall-bridge-echo-y: 72%;
  --memorial-photo-hall-bridge-echo-scale: 0.58;
  --memorial-photo-hall-bridge-echo-rotate: -6deg;
  --memorial-photo-hall-bridge-echo-delay: 470ms;
}

.memorial-photo-room-hall-bridge em.is-echo-7 {
  --memorial-photo-hall-bridge-echo-x: 50%;
  --memorial-photo-hall-bridge-echo-y: 18%;
  --memorial-photo-hall-bridge-echo-scale: 0.48;
  --memorial-photo-hall-bridge-echo-rotate: 2deg;
  --memorial-photo-hall-bridge-echo-delay: 540ms;
}

.memorial-photo-room-hall-bridge i,
.memorial-photo-room-hall-bridge b {
  position: absolute;
  inset: auto auto 15% 50%;
  display: block;
  width: min(54vw, 680px);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.74), rgba(255, 236, 182, 0.28), transparent);
  box-shadow:
    0 0 22px rgba(255, 248, 232, 0.34),
    0 0 88px rgba(255, 236, 182, 0.14);
  opacity: 0;
  --memorial-photo-hall-bridge-path-rotate: -8deg;
  transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.28);
  transform-origin: center;
  animation: memorialPhotoHallBridgePath 2100ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memorial-photo-room-hall-bridge b {
  bottom: 29%;
  width: min(34vw, 440px);
  --memorial-photo-hall-bridge-path-rotate: 8deg;
  transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.18);
  animation-delay: 120ms;
}

.memorial-photo-viewer-page.is-hall-arrival-bridge .memorial-photo-room-arrival-image img {
  animation: memorialPhotoHallBridgeCoverReceive 2200ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memorial-photo-room-arrival-companions {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.memorial-photo-room-arrival-companions em {
  --memorial-photo-arrival-companion-x: 50%;
  --memorial-photo-arrival-companion-y: 50%;
  --memorial-photo-arrival-companion-scale: 1;
  --memorial-photo-arrival-companion-rotate: 0deg;
  --memorial-photo-arrival-companion-delay: 0ms;
  position: absolute;
  top: var(--memorial-photo-arrival-companion-y);
  left: var(--memorial-photo-arrival-companion-x);
  display: block;
  width: clamp(30px, 4vw, 66px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 9px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 248, 232, 0.2), rgba(255, 236, 182, 0.07) 42%, transparent 74%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(255, 248, 232, 0.015));
  box-shadow:
    0 0 24px rgba(255, 236, 182, 0.18),
    inset 0 0 20px rgba(255, 248, 232, 0.035);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memorial-photo-arrival-companion-rotate))
    scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.36));
  animation: memorialPhotoRoomArrivalCompanionSettle 3200ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memorial-photo-arrival-companion-delay);
}

.memorial-photo-room-arrival-companions em::before {
  position: absolute;
  inset: 16% 20%;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.2);
  content: "";
  filter: blur(7px);
  opacity: 0.76;
}

.memorial-photo-room-arrival-companions em.is-companion-1 {
  --memorial-photo-arrival-companion-x: 74%;
  --memorial-photo-arrival-companion-y: 25%;
  --memorial-photo-arrival-companion-scale: 0.86;
  --memorial-photo-arrival-companion-rotate: 7deg;
  --memorial-photo-arrival-companion-delay: 340ms;
}

.memorial-photo-room-arrival-companions em.is-companion-2 {
  --memorial-photo-arrival-companion-x: 84%;
  --memorial-photo-arrival-companion-y: 48%;
  --memorial-photo-arrival-companion-scale: 0.68;
  --memorial-photo-arrival-companion-rotate: -9deg;
  --memorial-photo-arrival-companion-delay: 520ms;
}

.memorial-photo-room-arrival-companions em.is-companion-3 {
  --memorial-photo-arrival-companion-x: 65%;
  --memorial-photo-arrival-companion-y: 70%;
  --memorial-photo-arrival-companion-scale: 0.58;
  --memorial-photo-arrival-companion-rotate: 12deg;
  --memorial-photo-arrival-companion-delay: 700ms;
}

.memorial-photo-room-arrival-companions em.is-companion-4 {
  --memorial-photo-arrival-companion-x: 18%;
  --memorial-photo-arrival-companion-y: 29%;
  --memorial-photo-arrival-companion-scale: 0.72;
  --memorial-photo-arrival-companion-rotate: -12deg;
  --memorial-photo-arrival-companion-delay: 420ms;
}

.memorial-photo-room-arrival-companions em.is-companion-5 {
  --memorial-photo-arrival-companion-x: 10%;
  --memorial-photo-arrival-companion-y: 54%;
  --memorial-photo-arrival-companion-scale: 0.54;
  --memorial-photo-arrival-companion-rotate: 8deg;
  --memorial-photo-arrival-companion-delay: 620ms;
}

.memorial-photo-room-arrival-companions em.is-companion-6 {
  --memorial-photo-arrival-companion-x: 38%;
  --memorial-photo-arrival-companion-y: 18%;
  --memorial-photo-arrival-companion-scale: 0.48;
  --memorial-photo-arrival-companion-rotate: -4deg;
  --memorial-photo-arrival-companion-delay: 820ms;
}

.memorial-photo-library {
  min-height: 100svh;
  background: #000000;
  color: #f1f3f4;
}

.memorial-photo-library-top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 44px minmax(220px, 640px) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 4px 10px;
  background: rgba(32, 33, 36, 0.94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}

.memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-top {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  background: rgba(5, 5, 5, 0.72);
}

.memorial-photo-library-search {
  display: flex;
  min-width: 0;
  height: 40px;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #bdc1c6;
  padding: 0 16px;
  font-size: 0.95rem;
  font-weight: 760;
}

.memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-search {
  width: fit-content;
  max-width: min(420px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 245, 224, 0.84);
}

.memorial-photo-library-search span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-room-arrival {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(320px, 52vh, 560px);
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #050505;
  padding: clamp(64px, 8vw, 108px) clamp(16px, 6vw, 96px) clamp(28px, 5vw, 68px);
}

.memorial-photo-room-arrival::before,
.memorial-photo-room-arrival::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.memorial-photo-room-arrival::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.62)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.08) 42%, rgba(0, 0, 0, 0.82));
}

.memorial-photo-room-arrival::after {
  background:
    radial-gradient(circle at 24% 30%, rgba(255, 229, 165, 0.16), transparent 28%),
    linear-gradient(180deg, transparent 68%, rgba(5, 5, 5, 0.96));
}

.memorial-photo-room-arrival-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #080808;
}

.memorial-photo-room-arrival-image img {
  display: block;
  width: 100%;
  height: 100%;
  filter: saturate(0.96) contrast(1.03) brightness(0.74);
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.03);
}

.memorial-photo-room-arrival-copy {
  position: relative;
  z-index: 2;
  display: grid;
  max-width: min(720px, 100%);
  gap: 10px;
  animation: memorialRoomArrivalCopy 980ms ease both;
}

.memorial-photo-room-arrival-copy span {
  width: fit-content;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 999px;
  background: rgba(6, 7, 7, 0.38);
  color: rgba(255, 236, 182, 0.78);
  padding: 7px 10px;
  font-size: 0.68rem;
  font-weight: 860;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.memorial-photo-room-arrival-copy strong {
  color: #fff8e8;
  font-size: clamp(2.1rem, 5.2vw, 5.4rem);
  font-weight: 930;
  line-height: 0.98;
  text-shadow: 0 18px 58px rgba(0, 0, 0, 0.48);
}

.memorial-photo-room-arrival-copy p {
  max-width: 610px;
  margin: 0;
  color: rgba(255, 248, 232, 0.78);
  font-size: clamp(0.94rem, 1.35vw, 1.12rem);
  font-weight: 610;
  line-height: 1.62;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.54);
}

.memorial-photo-room-arrival-name-ritual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(640px, 100%);
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.082), rgba(255, 255, 255, 0.022)),
    rgba(7, 8, 8, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 46px rgba(0, 0, 0, 0.2);
  padding: 11px;
  text-shadow: none;
  backdrop-filter: blur(18px);
  animation: memorialRoomArrivalCopy 980ms ease 60ms both;
}

.memorial-photo-room-arrival-name-ritual.is-kept {
  border-color: rgba(255, 236, 182, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.12), rgba(255, 255, 255, 0.028)),
    rgba(9, 10, 9, 0.5);
}

.memorial-photo-room-arrival-name-ritual > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-photo-room-arrival-name-ritual > div > span {
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 236, 182, 0.76);
  padding: 0;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  backdrop-filter: none;
}

.memorial-photo-room-arrival-name-ritual > div > strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(0.98rem, 1.4vw, 1.2rem);
  font-weight: 900;
  line-height: 1.16;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
}

.memorial-photo-room-arrival-name-ritual small {
  color: rgba(255, 248, 232, 0.68);
  font-size: 0.76rem;
  font-weight: 690;
  line-height: 1.36;
}

.memorial-photo-room-arrival-name-ritual button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.09);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 12px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-room-arrival-name-ritual button[aria-pressed="true"] {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 236, 182, 0.14);
}

.memorial-photo-room-arrival-name-ritual button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.36);
  background: rgba(255, 248, 232, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-room-arrival-name-ritual button span {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-transform: none;
  backdrop-filter: none;
}

.memorial-photo-room-arrival-name-ritual svg {
  flex: 0 0 auto;
  color: rgba(255, 236, 182, 0.78);
}

.memorial-photo-room-arrival-breath {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: min(560px, 100%);
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 8px;
  background: rgba(7, 8, 8, 0.36);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.18);
  padding: 9px 10px;
  text-shadow: none;
  backdrop-filter: blur(16px);
  animation: memorialRoomArrivalCopy 980ms ease 90ms both;
}

.memorial-photo-room-arrival-breath > svg {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.08);
  color: rgba(255, 236, 182, 0.78);
  padding: 7px;
}

.memorial-photo-room-arrival-breath > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.memorial-photo-room-arrival-breath em {
  color: rgba(255, 236, 182, 0.76);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-room-arrival-breath small {
  color: rgba(255, 248, 232, 0.74);
  font-size: 0.78rem;
  font-weight: 690;
  line-height: 1.35;
}

.memorial-photo-room-arrival-breath b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.memorial-photo-room-arrival-breath i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.62);
  animation: memorialRoomArrivalBreath 1.8s ease-in-out infinite;
}

.memorial-photo-room-arrival-breath i:nth-child(2) {
  animation-delay: 0.18s;
}

.memorial-photo-room-arrival-breath i:nth-child(3) {
  animation-delay: 0.36s;
}

.memorial-photo-room-arrival-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.memorial-photo-room-arrival-actions :is(button, a) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.42);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 13px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1;
  text-decoration: none;
  text-shadow: none;
  backdrop-filter: blur(16px);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-room-arrival-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.34);
  background: rgba(255, 248, 232, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-room-arrival-actions svg {
  color: rgba(255, 236, 182, 0.78);
}

.memorial-photo-room-arrival-return {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: min(720px, 100%);
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 8px;
  background: rgba(7, 8, 8, 0.46);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
  padding: 12px;
  animation: memorialRoomArrivalCopy 980ms ease 140ms both;
  backdrop-filter: blur(18px);
}

.memorial-photo-room-arrival-return > svg {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.08);
  color: rgba(255, 236, 182, 0.84);
  padding: 8px;
}

.memorial-photo-room-arrival-return-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-photo-room-arrival-return-copy em {
  color: rgba(255, 236, 182, 0.78);
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.memorial-photo-room-arrival-return-copy strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.94rem;
  font-weight: 860;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.memorial-photo-room-arrival-return-copy small {
  color: rgba(255, 248, 232, 0.62);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.25;
}

.memorial-photo-room-arrival-return-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.memorial-photo-room-arrival-return-actions :is(button, a) {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.08);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-room-arrival-return-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.34);
  background: rgba(255, 248, 232, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-room-arrival-return-actions svg {
  color: rgba(255, 236, 182, 0.78);
}

@keyframes memorialRoomArrivalCopy {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes memorialRoomArrivalBreath {
  0%,
  100% {
    opacity: 0.32;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes memorialPhotoHallBridgeVeil {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  72% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
  }
}

@keyframes memorialPhotoHallBridgeCard {
  0% {
    opacity: 0;
    filter: blur(12px) saturate(1.22) brightness(1.24);
    transform:
      translateY(34px)
      scale(0.68)
      rotate(-4deg);
  }

  30% {
    opacity: 1;
    filter: blur(0) saturate(1.18) brightness(1.22);
    transform:
      translateY(-12px)
      scale(1.08)
      rotate(0deg);
  }

  66% {
    opacity: 1;
    filter: blur(0) saturate(1.06) brightness(1.08);
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: blur(10px) saturate(0.98) brightness(0.92);
    transform:
      translateY(-26px)
      scale(1.3)
      rotate(0deg);
  }
}

@keyframes memorialPhotoHallBridgePath {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.18);
  }

  30% {
    opacity: 0.74;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.88);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(1.16);
  }
}

@keyframes memorialPhotoHallBridgeEcho {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(0.92) brightness(0.72);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-hall-bridge-echo-rotate))
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.32));
  }

  30% {
    opacity: 0.78;
    filter: blur(0.5px) saturate(1.16) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-hall-bridge-echo-rotate))
      scale(var(--memorial-photo-hall-bridge-echo-scale));
  }

  70% {
    opacity: 0.38;
    filter: blur(0.2px) saturate(1.04) brightness(1);
    transform:
      translate(-50%, -54%)
      rotate(calc(var(--memorial-photo-hall-bridge-echo-rotate) * 0.5))
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.88));
  }

  100% {
    opacity: 0;
    filter: blur(7px) saturate(0.86) brightness(0.82);
    transform:
      translate(-50%, -68%)
      rotate(0deg)
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.56));
  }
}

@keyframes memorialPhotoRoomArrivalCompanionSettle {
  0% {
    opacity: 0;
    filter: blur(9px) saturate(0.86) brightness(0.68);
    transform:
      translate(-50%, -32%)
      rotate(calc(var(--memorial-photo-arrival-companion-rotate) * 1.5))
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.24));
  }

  28% {
    opacity: 0.62;
    filter: blur(0.6px) saturate(1.12) brightness(1.04);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-arrival-companion-rotate))
      scale(var(--memorial-photo-arrival-companion-scale));
  }

  66% {
    opacity: 0.34;
    filter: blur(0.3px) saturate(1.02) brightness(0.96);
    transform:
      translate(-50%, -52%)
      rotate(calc(var(--memorial-photo-arrival-companion-rotate) * 0.6))
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.92));
  }

  100% {
    opacity: 0;
    filter: blur(6px) saturate(0.88) brightness(0.78);
    transform:
      translate(-50%, -62%)
      rotate(0deg)
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.56));
  }
}

@keyframes memorialPhotoHallBridgeCoverReceive {
  0% {
    filter: saturate(1.08) contrast(1.04) brightness(0.48);
    transform: scale(1.13);
  }

  52% {
    filter: saturate(1.02) contrast(1.05) brightness(0.68);
    transform: scale(1.07);
  }

  100% {
    filter: saturate(0.96) contrast(1.03) brightness(0.74);
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-photo-room-hall-bridge,
  .memorial-photo-room-hall-bridge span,
  .memorial-photo-room-hall-bridge em,
  .memorial-photo-room-hall-bridge i,
  .memorial-photo-room-hall-bridge b,
  .memorial-photo-room-arrival-companions em,
  .memorial-photo-viewer-page.is-hall-arrival-bridge .memorial-photo-room-arrival-image img,
  .memorial-photo-room-arrival-breath,
  .memorial-photo-room-arrival-breath i {
    animation: none;
  }
}

.memorial-photo-visual-path {
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, #050505 0%, #080908 100%),
    #050505;
  padding: clamp(14px, 2.4vw, 26px) clamp(16px, 6vw, 96px);
}

.memorial-photo-visual-path-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.memorial-photo-visual-path-card {
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
  min-height: clamp(156px, 18vw, 250px);
  aspect-ratio: 3 / 4;
  align-content: end;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.07), rgba(255, 248, 232, 0.018)),
    rgba(12, 13, 12, 0.94);
  color: rgba(255, 248, 232, 0.94);
  padding: clamp(11px, 1.4vw, 16px);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 18px 54px rgba(0, 0, 0, 0.24);
  cursor: pointer;
}

.memorial-photo-visual-path-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0.82)),
    linear-gradient(135deg, rgba(255, 236, 182, 0.08), transparent 42%);
  content: "";
  pointer-events: none;
}

.memorial-photo-visual-path-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.02) brightness(0.88);
  transform: scale(1.01);
  transition:
    filter 420ms ease,
    transform 420ms ease;
}

.memorial-photo-visual-path-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.34);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-visual-path-card:is(:hover, :focus-visible) img {
  filter: saturate(1) contrast(1.05) brightness(0.96);
  transform: scale(1.045);
}

.memorial-photo-visual-path-card > svg {
  align-self: center;
  justify-self: center;
  color: rgba(255, 236, 182, 0.82);
}

.memorial-photo-visual-path-card span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 248, 232, 0.82);
  padding: 6px 8px;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.memorial-photo-visual-path-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.96);
  font-size: clamp(0.94rem, 1.35vw, 1.18rem);
  font-weight: 920;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.memorial-photo-room-intro {
  display: grid;
  grid-template-columns: minmax(210px, 0.66fr) minmax(320px, 1fr) minmax(260px, 0.72fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 220, 158, 0.14), transparent 34%),
    linear-gradient(135deg, #0d0f0e 0%, #050505 54%, #111719 100%);
  padding: clamp(18px, 3vw, 34px) clamp(16px, 5vw, 72px) clamp(16px, 2.4vw, 28px);
}

.memorial-photo-room-intro-media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background: #111111;
}

.memorial-photo-room-intro-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 18%, rgba(255, 232, 181, 0.2), transparent 42%);
  pointer-events: none;
}

.memorial-photo-room-intro-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.memorial-photo-room-intro-media.has-symbol-image::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.24) 44%, rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 48% 18%, rgba(255, 232, 181, 0.18), transparent 42%);
}

.memorial-photo-room-symbol-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 1;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 7px;
  background: rgba(8, 8, 7, 0.54);
  padding: 12px;
  backdrop-filter: blur(18px);
}

.memorial-photo-room-symbol-card span {
  width: fit-content;
  color: rgba(255, 236, 182, 0.68);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-room-symbol-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.96);
  font-size: 0.98rem;
  font-weight: 910;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.memorial-photo-room-symbol-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgba(244, 241, 233, 0.7);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.memorial-photo-room-intro-copy,
.memorial-photo-room-intro-letter {
  min-width: 0;
}

.memorial-photo-room-intro-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: clamp(2px, 1vw, 12px) 0;
}

.memorial-photo-room-intro h1,
.memorial-photo-room-intro h2,
.memorial-photo-room-intro p {
  margin: 0;
}

.memorial-photo-room-intro h1 {
  color: #ffffff;
  font-size: clamp(3.1rem, 7vw, 7.4rem);
  font-weight: 940;
  letter-spacing: 0;
  line-height: 0.92;
}

.memorial-photo-room-intro-copy > p:first-of-type {
  color: rgba(255, 236, 196, 0.78);
  font-size: 0.86rem;
  font-weight: 840;
}

.memorial-photo-room-intro h2 {
  max-width: 720px;
  color: #f1f3f4;
  font-size: clamp(1.35rem, 2.8vw, 2.55rem);
  font-weight: 900;
  line-height: 1.05;
}

.memorial-photo-room-intro-copy > p:last-of-type,
.memorial-photo-room-intro-letter small {
  max-width: 680px;
  color: rgba(241, 243, 244, 0.72);
  font-size: 0.9rem;
  font-weight: 640;
  line-height: 1.55;
}

.memorial-photo-room-intro-letter {
  display: grid;
  align-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  padding: clamp(14px, 2vw, 20px);
  backdrop-filter: blur(18px);
}

.memorial-photo-room-intro-letter :is(a, button) {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 223, 145, 0.42);
  border-radius: 7px;
  background: rgba(255, 223, 145, 0.12);
  color: #ffe7ad;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 880;
  text-decoration: none;
  cursor: pointer;
}

.memorial-photo-room-intro-letter :is(a, button):is(:hover, :focus-visible) {
  outline: none;
  background: rgba(255, 223, 145, 0.18);
  color: #fff4d6;
}

.memorial-photo-special-day {
  display: grid;
  grid-template-columns: minmax(240px, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(14px, 2.6vw, 34px);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 236, 182, 0.16), transparent 34%),
    radial-gradient(circle at 92% 14%, rgba(171, 196, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #060606 0%, #090908 100%);
  padding: clamp(22px, 4vw, 54px) clamp(16px, 6vw, 96px);
}

.memorial-photo-special-day-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.memorial-photo-special-day-copy > span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.07);
  color: rgba(255, 236, 182, 0.82);
  padding: 6px 9px;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-special-day-copy h2 {
  max-width: 680px;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(1.5rem, 3.2vw, 3.15rem);
  font-weight: 920;
  line-height: 1.04;
}

.memorial-photo-special-day-copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(244, 241, 233, 0.72);
  font-size: 0.96rem;
  font-weight: 620;
  line-height: 1.62;
}

.memorial-photo-special-day-copy small {
  width: fit-content;
  border-left: 2px solid rgba(255, 236, 182, 0.34);
  color: rgba(255, 236, 182, 0.66);
  padding-left: 10px;
  font-size: 0.8rem;
  font-weight: 820;
  line-height: 1.25;
}

.memorial-photo-special-day-rituals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
}

.memorial-photo-special-day-action {
  position: relative;
  display: grid;
  min-height: clamp(180px, 20vw, 260px);
  align-content: end;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
    rgba(14, 14, 13, 0.92);
  color: rgba(255, 248, 232, 0.92);
  padding: clamp(14px, 1.8vw, 20px);
  text-align: left;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    0 24px 72px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-photo-special-day-action::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 16%, rgba(255, 236, 182, 0.16), transparent 36%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.12), transparent 28% 76%, rgba(255, 255, 255, 0.045));
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.memorial-photo-special-day-action:nth-child(2)::before {
  background:
    radial-gradient(circle at 74% 12%, rgba(155, 196, 169, 0.16), transparent 38%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.11), transparent 28% 76%, rgba(255, 255, 255, 0.04));
}

.memorial-photo-special-day-action:nth-child(3)::before {
  background:
    radial-gradient(circle at 36% 10%, rgba(248, 190, 189, 0.15), transparent 38%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.11), transparent 28% 76%, rgba(255, 255, 255, 0.04));
}

.memorial-photo-special-day-action svg,
.memorial-photo-special-day-action span,
.memorial-photo-special-day-action small {
  position: relative;
  z-index: 1;
}

.memorial-photo-special-day-action svg {
  color: rgba(255, 236, 182, 0.78);
}

.memorial-photo-special-day-action span {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(0.98rem, 1.45vw, 1.18rem);
  font-weight: 900;
  line-height: 1.12;
}

.memorial-photo-special-day-action small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.36;
}

.memorial-photo-special-day-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.026)),
    rgba(16, 16, 15, 0.94);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-today {
  display: grid;
  grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(16px, 3vw, 42px);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.1), transparent 34%),
    radial-gradient(circle at 86% 42%, rgba(155, 196, 169, 0.08), transparent 32%),
    linear-gradient(180deg, #050505 0%, #070807 100%);
  padding: clamp(24px, 4.4vw, 60px) clamp(16px, 6vw, 96px);
}

.memorial-photo-today-copy {
  display: grid;
  align-content: center;
  gap: 10px;
  min-width: 0;
}

.memorial-photo-today-copy > span,
.memorial-photo-today-card > span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-today-copy h2 {
  max-width: 560px;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(1.45rem, 3vw, 3rem);
  font-weight: 910;
  line-height: 1.04;
}

.memorial-photo-today-copy p {
  max-width: 500px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.94rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-photo-today-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.memorial-photo-today-actions button,
.memorial-photo-today-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-today-actions button:is(:hover, :focus-visible),
.memorial-photo-today-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-today-actions button.is-kept {
  border-color: rgba(255, 236, 182, 0.32);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.16), rgba(155, 196, 169, 0.08)),
    rgba(255, 255, 255, 0.09);
  color: rgba(255, 248, 232, 0.96);
}

.memorial-photo-private-reflection {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: flex-start;
  width: min(460px, 100%);
  margin-top: 2px;
  scroll-margin-top: 78px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.085), rgba(155, 196, 169, 0.045)),
    rgba(255, 255, 255, 0.03);
  color: rgba(255, 248, 232, 0.88);
  padding: 11px 12px;
}

.memorial-photo-private-reflection > svg {
  margin-top: 2px;
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-private-reflection-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.memorial-photo-private-reflection-copy > span {
  color: rgba(255, 236, 182, 0.64);
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-private-reflection strong {
  color: rgba(255, 248, 232, 0.93);
  font-size: 0.86rem;
  font-weight: 840;
  line-height: 1.36;
  overflow-wrap: anywhere;
}

.memorial-photo-private-reflection small {
  color: rgba(244, 241, 233, 0.56);
  font-size: 0.7rem;
  font-weight: 740;
  line-height: 1.2;
}

.memorial-photo-private-reflection-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.memorial-photo-private-reflection-actions :is(a, button) {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.82);
  padding: 0 9px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-private-reflection-actions :is(a, button):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.26);
  background: rgba(255, 255, 255, 0.095);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-private-reflection-actions svg {
  color: rgba(255, 236, 182, 0.68);
}

.memorial-photo-today-kept {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: min(420px, 100%);
  margin-top: 2px;
  border: 1px solid rgba(255, 236, 182, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.105), rgba(151, 186, 160, 0.06)),
    rgba(255, 255, 255, 0.035);
  color: rgba(255, 248, 232, 0.88);
  padding: 11px 12px;
}

.memorial-photo-today-kept > svg {
  color: rgba(255, 236, 182, 0.74);
}

.memorial-photo-today-kept-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-photo-today-kept strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.84rem;
  font-weight: 880;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-today-kept small {
  color: rgba(244, 241, 233, 0.56);
  font-size: 0.7rem;
  font-weight: 740;
  line-height: 1.2;
}

.memorial-photo-today-kept-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.memorial-photo-today-kept-actions a {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.84);
  padding: 0 9px;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-today-kept-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.26);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-today-kept-actions svg {
  color: rgba(255, 236, 182, 0.7);
}

.memorial-photo-return-memory {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 9px;
  align-items: center;
  width: min(420px, 100%);
  margin-top: 8px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.085), rgba(155, 196, 169, 0.05)),
    rgba(255, 255, 255, 0.035);
  color: rgba(255, 248, 232, 0.88);
  padding: 12px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-photo-return-memory svg {
  grid-row: 1 / span 3;
  color: rgba(255, 236, 182, 0.74);
}

.memorial-photo-return-memory span,
.memorial-photo-return-memory small {
  color: rgba(255, 236, 182, 0.62);
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}

.memorial-photo-return-memory strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.94rem;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-return-memory small {
  color: rgba(244, 241, 233, 0.54);
  font-weight: 760;
  text-transform: none;
}

.memorial-photo-return-memory:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.25);
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.11), rgba(155, 196, 169, 0.07)),
    rgba(255, 255, 255, 0.05);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-today-card {
  position: relative;
  display: grid;
  min-height: clamp(360px, 38vw, 520px);
  align-content: end;
  gap: 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background: #080808;
  padding: clamp(16px, 2vw, 24px);
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 28px 86px rgba(0, 0, 0, 0.34);
}

.memorial-photo-today-card::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.22) 38%, rgba(0, 0, 0, 0.84)),
    radial-gradient(circle at 78% 12%, rgba(255, 238, 196, 0.1), transparent 34%);
  content: "";
  pointer-events: none;
}

.memorial-photo-today-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.memorial-photo-today-card:is(:hover, :focus-visible) {
  outline: none;
}

.memorial-photo-today-card:is(:hover, :focus-visible) img {
  filter: saturate(0.98) contrast(1.06);
  transform: scale(1.045);
}

.memorial-photo-today-card > span,
.memorial-photo-today-card strong,
.memorial-photo-today-card p,
.memorial-photo-today-card small {
  position: relative;
  z-index: 2;
}

.memorial-photo-today-card strong {
  max-width: 760px;
  color: rgba(255, 248, 232, 0.96);
  font-size: clamp(1.12rem, 2vw, 1.8rem);
  font-weight: 910;
  line-height: 1.08;
}

.memorial-photo-today-card p {
  max-width: 660px;
  margin: 0;
  color: rgba(244, 241, 233, 0.7);
  font-size: 0.9rem;
  font-weight: 610;
  line-height: 1.55;
}

.memorial-photo-today-card small {
  max-width: 620px;
  color: rgba(255, 236, 196, 0.62);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.memorial-photo-presence {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 226, 174, 0.1), transparent 34%),
    linear-gradient(180deg, #050505 0%, #0a0b0a 100%);
  padding: clamp(24px, 4vw, 52px) clamp(16px, 6vw, 96px);
}

.memorial-photo-presence-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.memorial-photo-presence-head span,
.memorial-photo-favorites-copy > span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.065);
  color: rgba(255, 236, 182, 0.76);
  padding: 7px 10px;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-presence-head svg,
.memorial-photo-favorites-copy > span svg {
  color: rgba(255, 236, 182, 0.82);
}

.memorial-photo-presence-head strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.memorial-photo-presence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(9px, 1.4vw, 16px);
}

.memorial-photo-presence-card {
  position: relative;
  overflow: hidden;
  display: grid;
  width: 100%;
  min-height: 178px;
  align-content: end;
  gap: 8px;
  appearance: none;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 7px;
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 226, 174, 0.14), transparent 40%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(13, 14, 12, 0.9);
  color: inherit;
  padding: clamp(14px, 1.8vw, 20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 70px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.memorial-photo-presence-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 22% 74%, rgba(255, 255, 255, 0.04));
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.memorial-photo-presence-card.has-image {
  min-height: clamp(230px, 28vw, 360px);
  aspect-ratio: 3 / 4;
  align-content: end;
  border-color: rgba(255, 255, 255, 0.12);
  background: #090909;
  padding: 0;
}

.memorial-photo-presence-card .memorial-photo-object-icon,
.memorial-photo-presence-card .memorial-photo-object-label,
.memorial-photo-presence-card strong,
.memorial-photo-presence-card .memorial-photo-object-body {
  position: relative;
  z-index: 1;
}

.memorial-photo-presence-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.9) contrast(1.02);
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.memorial-photo-presence-card.has-image::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 45% 18%, rgba(255, 238, 196, 0.1), transparent 36%);
  opacity: 1;
}

.memorial-photo-presence-card.has-image > div {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 8px;
  align-items: end;
  padding: clamp(14px, 1.8vw, 20px);
}

.memorial-photo-presence-card.has-image:is(:hover, :focus-within) img {
  filter: saturate(0.96) contrast(1.05);
  transform: scale(1.045);
}

.memorial-photo-presence-card:focus-visible,
.memorial-photo-favorites-card:focus-visible {
  border-color: rgba(255, 236, 182, 0.42);
  outline: 2px solid rgba(255, 236, 182, 0.2);
  outline-offset: 3px;
}

.memorial-photo-object-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 236, 182, 0.82);
}

.memorial-photo-object-label {
  align-self: center;
  width: fit-content;
  color: rgba(255, 236, 182, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-presence-card .memorial-photo-object-title {
  grid-column: 1 / -1;
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 900;
  line-height: 1.12;
}

.memorial-photo-object-body {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites {
  gap: clamp(8px, 1.4vw, 14px);
  padding-top: clamp(18px, 3vw, 36px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-head span,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-copy > span {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  font-size: 0;
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-head span svg,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-copy > span svg {
  width: 16px;
  height: 16px;
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-grid,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-grid {
  gap: clamp(6px, 1vw, 11px);
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-card.has-image > div,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-card.has-image > div {
  grid-template-columns: auto;
  padding: clamp(10px, 1.2vw, 14px);
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-card.has-image .memorial-photo-object-icon,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-card.has-image .memorial-photo-object-icon {
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.28);
}

.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-card.has-image .memorial-photo-object-label,
.memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-card.has-image .memorial-photo-object-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  padding: 0;
  white-space: nowrap;
}

.memorial-photo-quiet-kept-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  width: min(520px, 100%);
  aspect-ratio: 4 / 3;
  justify-self: center;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 236, 182, 0.12), transparent 42%),
    rgba(0, 0, 0, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 28px 84px rgba(0, 0, 0, 0.32);
}

.memorial-photo-quiet-kept-stage:focus {
  outline: none;
}

.memorial-photo-quiet-kept-stage img,
.memorial-photo-quiet-kept-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.memorial-photo-quiet-kept-stage img {
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.96) contrast(1.04) brightness(1.02);
}

.memorial-photo-quiet-kept-fallback {
  display: grid;
  place-items: center;
  color: rgba(255, 236, 182, 0.82);
  font-size: 2rem;
}

.memorial-photo-quiet-kept-stage::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), transparent 38%, rgba(0, 0, 0, 0.36)),
    radial-gradient(circle at 52% 28%, transparent 0 34%, rgba(0, 0, 0, 0.22) 100%);
  content: "";
  pointer-events: none;
}

.memorial-photo-quiet-kept-mark {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 236, 182, 0.92);
  backdrop-filter: blur(10px);
}

.memorial-photo-quiet-kept-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  gap: 8px;
}

.memorial-photo-quiet-kept-actions a {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 236, 182, 0.9);
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.memorial-photo-quiet-kept-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.38);
  background: rgba(255, 236, 182, 0.12);
  color: rgba(255, 248, 232, 0.96);
  outline: none;
}

.memorial-photo-favorites {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 82% 0%, rgba(155, 196, 169, 0.12), transparent 34%),
    linear-gradient(180deg, #0a0b0a 0%, #050505 100%);
  padding: clamp(24px, 4vw, 58px) clamp(16px, 6vw, 96px);
}

.memorial-photo-favorites-copy {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.memorial-photo-favorites-copy strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.memorial-photo-kept-memory-bridge {
  display: grid;
  justify-items: start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.09), transparent 34%),
    linear-gradient(180deg, #0a0b0a 0%, #090a09 100%);
  padding: clamp(14px, 2.4vw, 24px) clamp(16px, 6vw, 96px);
}

.memorial-photo-kept-memory-ritual {
  display: grid;
  grid-template-columns: minmax(0, 380px) auto;
  width: min(520px, 100%);
  align-items: center;
  gap: 8px;
}

.memorial-photo-kept-object {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  width: 100%;
  min-height: 70px;
  align-items: center;
  gap: 11px;
  appearance: none;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 7px;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 236, 182, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.045);
  color: inherit;
  padding: 9px 12px 9px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 52px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.memorial-photo-kept-object:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.34);
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 236, 182, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.06);
  outline: none;
}

.memorial-photo-kept-memory-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.memorial-photo-kept-memory-actions a {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background:
    radial-gradient(circle at 40% 28%, rgba(255, 236, 182, 0.13), transparent 44%),
    rgba(255, 255, 255, 0.045);
  color: rgba(255, 236, 182, 0.84);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-kept-memory-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 236, 182, 0.1);
  color: rgba(255, 248, 232, 0.96);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-kept-memory-ritual.is-keeping-memory .memorial-photo-kept-memory-actions a {
  border-color: rgba(255, 236, 182, 0.22);
  background: rgba(255, 236, 182, 0.075);
}

.memorial-photo-kept-object img,
.memorial-photo-kept-object-fallback {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 236, 182, 0.82);
}

.memorial-photo-kept-object img {
  object-fit: cover;
}

.memorial-photo-kept-object-mark {
  position: absolute;
  top: 9px;
  left: 47px;
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: rgba(255, 236, 182, 0.92);
  backdrop-filter: blur(8px);
}

.memorial-photo-kept-object-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-photo-kept-object-copy small,
.memorial-photo-kept-object-copy em {
  overflow: hidden;
  color: rgba(255, 236, 182, 0.64);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 880;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.memorial-photo-kept-object-copy strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.92rem;
  font-weight: 920;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-kept-object-copy em {
  color: rgba(244, 241, 233, 0.48);
  font-size: 0.56rem;
}

.memorial-photo-favorites-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.memorial-photo-favorites-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 150px;
  align-content: end;
  gap: 7px;
  overflow: hidden;
  appearance: none;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    rgba(13, 15, 13, 0.88);
  color: inherit;
  padding: clamp(14px, 1.7vw, 19px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 62px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.memorial-photo-favorites-card.has-image {
  min-height: clamp(210px, 22vw, 310px);
  aspect-ratio: 3 / 4;
  border-color: rgba(255, 255, 255, 0.12);
  background: #080808;
  padding: 0;
}

.memorial-photo-favorites-card::before {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 32%, rgba(255, 236, 182, 0.18), transparent 44%),
    rgba(255, 255, 255, 0.035);
  content: "";
}

.memorial-photo-favorites-card.has-image::before {
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.2) 42%, rgba(0, 0, 0, 0.8)),
    radial-gradient(circle at 70% 14%, rgba(255, 238, 196, 0.1), transparent 35%);
}

.memorial-photo-favorites-card .memorial-photo-object-icon,
.memorial-photo-favorites-card .memorial-photo-object-label,
.memorial-photo-favorites-card strong,
.memorial-photo-favorites-card .memorial-photo-object-body {
  position: relative;
  z-index: 1;
}

.memorial-photo-favorites-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.9) contrast(1.02);
  transform: scale(1.01);
  transition: transform 500ms ease, filter 500ms ease;
}

.memorial-photo-favorites-card.has-image > div {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 8px;
  align-items: end;
  padding: clamp(14px, 1.8vw, 20px);
}

.memorial-photo-favorites-card.has-image:is(:hover, :focus-within) img {
  filter: saturate(0.96) contrast(1.05);
  transform: scale(1.045);
}

.memorial-photo-favorites-card .memorial-photo-object-title {
  grid-column: 1 / -1;
  color: rgba(255, 248, 232, 0.92);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.13;
}

.memorial-photo-presence-card.has-image > div,
.memorial-photo-favorites-card.has-image > div {
  grid-template-columns: auto auto;
  align-items: center;
  align-content: end;
  justify-content: flex-start;
}

.memorial-photo-presence-card.has-image .memorial-photo-object-icon,
.memorial-photo-favorites-card.has-image .memorial-photo-object-icon {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 248, 232, 0.18);
  background: rgba(0, 0, 0, 0.36);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}

.memorial-photo-presence-card.has-image .memorial-photo-object-label,
.memorial-photo-favorites-card.has-image .memorial-photo-object-label {
  max-width: min(170px, 52vw);
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 248, 232, 0.82);
  padding: 7px 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.memorial-photo-presence-card.has-image .memorial-photo-object-title,
.memorial-photo-favorites-card.has-image .memorial-photo-object-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.memorial-photo-object-kept {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  color: rgba(255, 236, 182, 0.9);
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease;
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.memorial-photo-object-ceremony {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.memorial-photo-object-ceremony i {
  position: absolute;
  width: 10px;
  height: 22px;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 999px 999px 999px 3px;
  background: rgba(255, 236, 182, 0.24);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: memorial-photo-object-petal-rise 2200ms ease-out both;
}

.memorial-photo-object-ceremony i:nth-child(1) {
  right: 22%;
  bottom: 18px;
  animation-delay: 40ms;
}

.memorial-photo-object-ceremony i:nth-child(2) {
  right: 16%;
  bottom: 24px;
  background: rgba(182, 234, 195, 0.2);
  animation-delay: 180ms;
}

.memorial-photo-object-ceremony i:nth-child(3) {
  right: 29%;
  bottom: 13px;
  background: rgba(255, 248, 232, 0.18);
  animation-delay: 320ms;
}

.memorial-photo-presence-card.is-kept,
.memorial-photo-favorites-card.is-kept {
  border-color: rgba(255, 236, 182, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 24px 76px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 236, 182, 0.08);
}

.memorial-photo-presence-card.is-kept .memorial-photo-object-kept,
.memorial-photo-favorites-card.is-kept .memorial-photo-object-kept {
  opacity: 1;
  transform: scale(1);
}

.memorial-photo-presence-card.is-kept.has-image img,
.memorial-photo-favorites-card.is-kept.has-image img {
  filter: saturate(1) contrast(1.07) brightness(1.04);
}

.memorial-photo-presence-card.is-keeping-memory,
.memorial-photo-favorites-card.is-keeping-memory,
.memorial-photo-kept-object.is-keeping-memory,
.memorial-photo-quiet-kept-stage.is-keeping-memory {
  animation: memorial-photo-object-ceremony-glow 2200ms ease both;
}

.memorial-photo-presence-card.is-reacting,
.memorial-photo-favorites-card.is-reacting {
  animation: memorial-photo-object-breathe 920ms ease both;
}

.memorial-photo-presence-card.is-reacting .memorial-photo-object-kept,
.memorial-photo-favorites-card.is-reacting .memorial-photo-object-kept,
.memorial-photo-kept-object.is-reacting .memorial-photo-kept-object-mark {
  animation: memorial-photo-object-heartbeat 920ms ease both;
}

.memorial-photo-kept-object.is-reacting {
  animation: memorial-photo-kept-token-breathe 920ms ease both;
}

.memorial-photo-quiet-kept-stage.is-reacting {
  animation: memorial-photo-quiet-stage-breathe 920ms ease both;
}

.memorial-photo-presence-card.is-reacting.is-keeping-memory,
.memorial-photo-favorites-card.is-reacting.is-keeping-memory,
.memorial-photo-kept-object.is-reacting.is-keeping-memory,
.memorial-photo-quiet-kept-stage.is-reacting.is-keeping-memory {
  animation: memorial-photo-object-ceremony-glow 2200ms ease both;
}

@keyframes memorial-photo-object-breathe {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: scale(1);
  }
  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 30px 82px rgba(0, 0, 0, 0.38),
      0 0 0 7px rgba(255, 236, 182, 0.08);
    transform: scale(1.012);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 236, 182, 0.08);
    transform: scale(1);
  }
}

@keyframes memorial-photo-object-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    border-color: rgba(255, 236, 182, 0.34);
    background: rgba(255, 236, 182, 0.12);
    transform: scale(1.12);
  }
}

@keyframes memorial-photo-object-ceremony-glow {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 0 rgba(255, 236, 182, 0);
  }

  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 30px 82px rgba(0, 0, 0, 0.38),
      0 0 0 8px rgba(255, 236, 182, 0.08);
  }
}

@keyframes memorial-photo-object-petal-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(16deg) scale(0.72);
  }

  22% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translate3d(-15px, -56px, 0) rotate(-18deg) scale(1);
  }
}

@keyframes memorial-photo-kept-token-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    border-color: rgba(255, 236, 182, 0.34);
    transform: translateY(-1px);
  }
}

@keyframes memorial-photo-quiet-stage-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 28px 84px rgba(0, 0, 0, 0.32),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: translateY(0);
  }
  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 34px 92px rgba(0, 0, 0, 0.36),
      0 0 0 8px rgba(255, 236, 182, 0.08);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-photo-presence-card.is-reacting,
  .memorial-photo-favorites-card.is-reacting,
  .memorial-photo-presence-card.is-reacting .memorial-photo-object-kept,
  .memorial-photo-favorites-card.is-reacting .memorial-photo-object-kept,
  .memorial-photo-kept-object.is-reacting,
  .memorial-photo-kept-object.is-reacting .memorial-photo-kept-object-mark,
  .memorial-photo-quiet-kept-stage.is-reacting,
  .memorial-photo-presence-card.is-keeping-memory,
  .memorial-photo-favorites-card.is-keeping-memory,
  .memorial-photo-kept-object.is-keeping-memory,
  .memorial-photo-quiet-kept-stage.is-keeping-memory,
  .memorial-photo-object-ceremony i {
    animation: none;
  }
}

.memorial-photo-presence-card .memorial-photo-object-body,
.memorial-photo-favorites-card .memorial-photo-object-body {
  position: absolute;
}

.memorial-photo-object-production-cue {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(155, 196, 169, 0.18);
  border-radius: 999px;
  background: rgba(155, 196, 169, 0.09);
  color: rgba(218, 239, 224, 0.76);
  padding: 4px 7px;
  font-size: 0.58rem;
  font-weight: 820;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-comfort-door {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 226, 174, 0.09), transparent 30%),
    linear-gradient(180deg, #050505 0%, #070807 100%);
  padding: clamp(22px, 3.5vw, 42px) clamp(16px, 6vw, 96px);
}

.memorial-photo-comfort-door > div {
  display: grid;
  max-width: 760px;
  gap: 8px;
  min-width: 0;
}

.memorial-photo-comfort-door span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-comfort-door strong {
  color: #fff8e8;
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  font-weight: 900;
  line-height: 1.12;
}

.memorial-photo-comfort-door p {
  max-width: 760px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.9rem;
  font-weight: 610;
  line-height: 1.55;
}

.memorial-photo-comfort-door a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 14px;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-comfort-door a strong {
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.memorial-photo-comfort-door a img {
  display: none;
}

.memorial-photo-comfort-door a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-public-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.memorial-photo-public-actions button,
.memorial-photo-public-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(8, 9, 8, 0.56);
  color: rgba(255, 248, 232, 0.86);
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  backdrop-filter: blur(18px);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-photo-public-actions button:is(:hover, :focus-visible),
.memorial-photo-public-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-public-actions button.is-active {
  border-color: rgba(255, 236, 182, 0.34);
  background: rgba(255, 236, 182, 0.14);
  color: #fff8e8;
}

.memorial-photo-viewer-page.has-admin-edit-mode :is(
  .memorial-photo-room-intro,
  .memorial-photo-special-day,
  .memorial-photo-letter-section,
  .memorial-photo-library-content
) {
  outline: 1px solid rgba(255, 236, 182, 0.16);
  outline-offset: -1px;
}

.memorial-photo-room-intro,
.memorial-photo-special-day,
.memorial-photo-letter-section,
.memorial-photo-library-content {
  position: relative;
}

.memorial-photo-admin-edit-chip {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 236, 182, 0.24);
  border-radius: 999px;
  background: rgba(32, 33, 36, 0.88);
  color: rgba(255, 248, 232, 0.92);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.memorial-photo-admin-edit-chip:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.42);
  background: rgba(48, 49, 52, 0.94);
  outline: none;
}

.memorial-flower-offerings {
  display: grid;
  grid-template-columns: minmax(240px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 239, 211, 0.12), transparent 34%),
    radial-gradient(circle at 85% 55%, rgba(122, 161, 184, 0.1), transparent 30%),
    linear-gradient(180deg, #090a09 0%, #050505 100%);
  padding: clamp(28px, 4.8vw, 68px) clamp(16px, 6vw, 96px);
}

.memorial-flower-offerings-copy {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.memorial-flower-offerings-copy > span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-flower-offerings-copy > strong {
  color: #fff8e8;
  font-size: clamp(1.45rem, 3vw, 3rem);
  font-weight: 910;
  line-height: 1.04;
}

.memorial-flower-offerings-copy p:not(.sr-only) {
  max-width: 460px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.94rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-flower-offerings-copy button,
.memorial-flower-ritual-submit button {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-flower-offerings-copy button:is(:hover, :focus-visible),
.memorial-flower-ritual-submit button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-flower-offerings-surface {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.memorial-flower-offerings-surface.is-viewing-offering .memorial-flower-garden-trail {
  border-color: rgba(255, 236, 182, 0.16);
  box-shadow: inset 0 -1px 0 rgba(255, 236, 182, 0.08);
}

.memorial-flower-form {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(14, 15, 14, 0.92);
  padding: clamp(14px, 2vw, 20px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 22px 72px rgba(0, 0, 0, 0.28);
}

.memorial-flower-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.memorial-flower-choice-grid button {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 248, 232, 0.74);
  padding: 6px;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-flower-choice-grid button:is(:hover, :focus-visible),
.memorial-flower-choice-grid button.is-selected {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  transform: translateY(-1px);
}

.memorial-flower-choice-grid img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  object-fit: cover;
}

.memorial-flower-choice-grid span {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.78);
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-flower-selected {
  position: relative;
  display: grid;
  grid-template-columns: minmax(118px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.09);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 236, 182, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.045);
  padding: 9px;
}

.memorial-flower-selected::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 8px;
  width: min(36%, 172px);
  border: 1px solid rgba(255, 236, 182, 0.08);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(255, 248, 232, 0.015));
  pointer-events: none;
}

.memorial-flower-selected-image {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  max-width: 170px;
  aspect-ratio: 1;
  place-items: center;
}

.memorial-flower-selected-image img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 7px;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.025);
  object-fit: cover;
}

.memorial-flower-selected-light {
  position: absolute;
  inset: -10%;
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 236, 182, 0.2), transparent 42%),
    radial-gradient(circle at 50% 72%, rgba(255, 248, 232, 0.1), transparent 54%);
  opacity: 0.72;
  filter: blur(2px);
  pointer-events: none;
}

.memorial-flower-selected-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.memorial-flower-selected-petals i {
  position: absolute;
  display: block;
  width: 9px;
  height: 13px;
  border-radius: 999px 999px 999px 3px;
  background: rgba(255, 236, 182, 0.74);
  box-shadow: 0 0 18px rgba(255, 236, 182, 0.18);
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(18deg);
  animation: memorial-flower-selected-petal 1900ms ease-out both;
}

.memorial-flower-selected-petals i:nth-child(1) {
  top: 10%;
  right: 16%;
  --petal-rotation: 18deg;
}

.memorial-flower-selected-petals i:nth-child(2) {
  top: 42%;
  left: 7%;
  --petal-rotation: -24deg;
  animation-delay: 130ms;
  transform: translate3d(0, 0, 0) rotate(-24deg);
}

.memorial-flower-selected-petals i:nth-child(3) {
  right: 8%;
  bottom: 14%;
  --petal-rotation: 34deg;
  animation-delay: 260ms;
  transform: translate3d(0, 0, 0) rotate(34deg);
}

.memorial-flower-selected div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  min-width: 0;
}

.memorial-flower-selected strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.16;
}

.memorial-flower-memory-cue {
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.07);
  color: rgba(255, 236, 182, 0.78);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1.08;
}

.memorial-flower-memory-cue span {
  overflow: hidden;
  max-width: 220px;
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.58rem;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-flower-memory-return {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.84);
  padding: 0 8px;
  font-size: 0.64rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-flower-memory-return:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 236, 182, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-flower-memory-return svg {
  color: rgba(255, 236, 182, 0.74);
}

.memorial-flower-selected p {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.memorial-flower-selected.is-prepared-from-memory {
  border-color: rgba(255, 236, 182, 0.32);
  animation: memorial-flower-prepared-glow 1800ms ease both;
}

.memorial-flower-selected.is-prepared-from-memory .memorial-flower-selected-light {
  opacity: 1;
  animation: memorial-flower-selected-light 1800ms ease both;
}

.memorial-flower-ritual-line {
  display: grid;
  grid-template-columns: auto minmax(18px, 1fr) auto minmax(18px, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}

.memorial-flower-ritual-line span {
  color: rgba(255, 236, 182, 0.54);
  font-size: 0.58rem;
  font-weight: 880;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-flower-ritual-line i {
  display: block;
  height: 1px;
  min-width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 236, 182, 0.22), transparent);
}

.memorial-flower-ritual-submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.memorial-flower-ritual-submit button:first-child {
  width: 100%;
  min-height: 48px;
  border-color: rgba(255, 236, 182, 0.22);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 182, 0.16), transparent 48%),
    rgba(255, 236, 182, 0.08);
  color: rgba(255, 248, 232, 0.94);
}

.memorial-flower-ritual-submit button:last-child {
  color: rgba(255, 248, 232, 0.72);
}

.memorial-flower-ritual-submit button:last-child.is-open {
  border-color: rgba(255, 236, 182, 0.24);
  background: rgba(255, 236, 182, 0.1);
  color: rgba(255, 248, 232, 0.9);
}

.memorial-flower-ritual-submit button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.memorial-flower-ritual-submit button.is-prepared-from-memory {
  border-color: rgba(255, 236, 182, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 182, 0.2), transparent 48%),
    rgba(255, 236, 182, 0.12);
  animation: memorial-flower-prepared-button 1800ms ease both;
}

.memorial-flower-ritual-submit svg {
  color: rgba(255, 236, 182, 0.76);
}

.memorial-flower-fields {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.memorial-flower-fields[hidden] {
  display: none;
}

.memorial-flower-fields input,
.memorial-flower-fields textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.9);
  padding: 10px 11px;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.35;
  outline: none;
}

.memorial-flower-fields textarea {
  min-height: 42px;
  resize: vertical;
}

.memorial-flower-fields input::placeholder,
.memorial-flower-fields textarea::placeholder {
  color: rgba(244, 241, 233, 0.42);
}

.memorial-flower-fields input:focus,
.memorial-flower-fields textarea:focus {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 255, 255, 0.08);
}

.memorial-flower-status {
  margin: 0;
  color: rgba(255, 236, 196, 0.64);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

@keyframes memorial-flower-prepared-glow {
  0%,
  100% {
    box-shadow: none;
    transform: translateY(0);
  }
  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 0 6px rgba(255, 236, 182, 0.07);
    transform: translateY(-1px);
  }
}

@keyframes memorial-flower-prepared-button {
  0%,
  100% {
    box-shadow: none;
    transform: translateY(0);
  }
  42% {
    box-shadow: 0 0 0 7px rgba(255, 236, 182, 0.08);
    transform: translateY(-1px);
  }
}

@keyframes memorial-flower-selected-light {
  0%,
  100% {
    filter: blur(2px);
    transform: scale(1);
  }
  44% {
    filter: blur(3px);
    transform: scale(1.045);
  }
}

@keyframes memorial-flower-selected-petal {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) rotate(var(--petal-rotation, 18deg)) scale(0.82);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) rotate(var(--petal-rotation, 18deg)) scale(1);
  }
}

@keyframes memorial-flower-newly-placed-bloom {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes memorial-flower-newly-placed-card {
  0%,
  100% {
    transform: translateY(0);
  }
  38% {
    transform: translateY(-2px);
  }
}

.memorial-flower-ritual {
  display: grid;
  grid-template-columns: minmax(116px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.026)),
    rgba(11, 12, 11, 0.93);
  padding: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.052),
    0 20px 64px rgba(0, 0, 0, 0.25);
}

.memorial-flower-ritual.is-pending,
.memorial-flower-ritual.is-local {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-flower-ritual > img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1.18;
  border-radius: 5px;
  object-fit: cover;
}

.memorial-flower-ritual > div {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.memorial-flower-ritual span {
  width: fit-content;
  max-width: 100%;
  color: rgba(255, 236, 182, 0.58);
  font-size: 0.6rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-flower-ritual-memory {
  display: inline-grid;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.07);
  color: rgba(255, 236, 182, 0.76);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 850;
  line-height: 1.08;
}

.memorial-flower-ritual-memory span {
  overflow: hidden;
  max-width: 260px;
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.58rem;
  font-weight: 760;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.memorial-flower-ritual strong {
  color: rgba(255, 248, 232, 0.93);
  font-size: clamp(1rem, 1.6vw, 1.32rem);
  font-weight: 900;
  line-height: 1.14;
}

.memorial-flower-ritual p {
  max-width: 520px;
  margin: 0;
  color: rgba(244, 241, 233, 0.67);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.48;
}

.memorial-flower-ritual-ceremony {
  display: grid;
  grid-template-columns: 1fr auto 1fr 1fr;
  width: min(380px, 100%);
  align-items: center;
  gap: 8px;
  margin: 3px 0 2px;
}

.memorial-flower-ritual-ceremony i {
  display: block;
  height: 1px;
  min-width: 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.3), transparent);
  transform-origin: left center;
  animation: memorialFlowerCeremonyLine 920ms ease both;
}

.memorial-flower-ritual-ceremony i:nth-of-type(2) {
  animation-delay: 120ms;
}

.memorial-flower-ritual-ceremony i:nth-of-type(3) {
  animation-delay: 240ms;
}

.memorial-flower-ritual-ceremony img {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.08);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  animation: memorialFlowerCeremonyBloom 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.memorial-flower-ritual .memorial-flower-ritual-breath {
  max-width: 480px;
  color: rgba(255, 236, 196, 0.68);
  font-size: 0.78rem;
  font-weight: 720;
}

.memorial-flower-ritual-pause {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(520px, 100%);
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.035);
  padding: 10px;
}

.memorial-flower-ritual-pause.is-kept {
  border-color: rgba(255, 236, 182, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.12), rgba(155, 196, 169, 0.055)),
    rgba(255, 255, 255, 0.05);
}

.memorial-flower-ritual-pause > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.memorial-flower-ritual-pause span {
  color: rgba(255, 236, 182, 0.62);
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
}

.memorial-flower-ritual-pause strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.24;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-flower-ritual-pause button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 10px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-flower-ritual-pause button[aria-pressed="true"] {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 236, 182, 0.12);
  color: rgba(255, 248, 232, 0.94);
}

.memorial-flower-ritual-pause button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-flower-ritual-pause svg {
  color: rgba(255, 236, 182, 0.76);
}

.memorial-flower-ritual-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.memorial-flower-ritual-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.068);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-flower-ritual-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-flower-ritual small {
  color: rgba(255, 236, 196, 0.52);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
}

@keyframes memorialFlowerCeremonyBloom {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }

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

@keyframes memorialFlowerCeremonyLine {
  from {
    opacity: 0;
    transform: scaleX(0.28);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-flower-selected.is-prepared-from-memory,
  .memorial-flower-selected.is-prepared-from-memory .memorial-flower-selected-light,
  .memorial-flower-selected-petals i,
  .memorial-flower-garden-trail button.is-newly-placed img,
  .memorial-flower-offering-list article.is-newly-placed,
  .memorial-flower-ritual-submit button.is-prepared-from-memory,
  .memorial-flower-ritual-ceremony i,
  .memorial-flower-ritual-ceremony img {
    animation: none;
  }
}

.memorial-flower-garden-trail {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.085);
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.09), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
    rgba(9, 10, 9, 0.9);
  padding: 10px;
}

.memorial-flower-garden-trail button {
  position: relative;
  display: grid;
  flex: 1 1 0;
  min-width: 34px;
  max-width: 62px;
  aspect-ratio: 1;
  place-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  opacity: 0.92;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}

.memorial-flower-garden-trail button:nth-child(2n) {
  transform: translateY(5px);
}

.memorial-flower-garden-trail button:nth-child(3n) {
  transform: translateY(-3px);
}

.memorial-flower-garden-trail button.is-pending {
  opacity: 0.58;
}

.memorial-flower-garden-trail button.is-newly-placed {
  opacity: 1;
}

.memorial-flower-garden-trail button.is-viewing-offering {
  opacity: 1;
}

.memorial-flower-garden-trail button:is(:hover, :focus-visible) {
  opacity: 1;
  outline: none;
}

.memorial-flower-garden-trail button:is(:hover, :focus-visible) img {
  border-color: rgba(255, 236, 182, 0.36);
  box-shadow:
    0 0 0 5px rgba(255, 236, 182, 0.07),
    0 16px 36px rgba(0, 0, 0, 0.28);
}

.memorial-flower-garden-trail button.is-viewing-offering img {
  border-color: rgba(255, 236, 182, 0.4);
  box-shadow:
    0 0 0 5px rgba(255, 236, 182, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.3);
}

.memorial-flower-garden-trail img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  object-fit: cover;
}

.memorial-flower-garden-trail button.is-newly-placed img {
  border-color: rgba(255, 236, 182, 0.45);
  box-shadow:
    0 0 0 6px rgba(255, 236, 182, 0.08),
    0 18px 40px rgba(0, 0, 0, 0.3),
    0 0 34px rgba(255, 236, 182, 0.18);
  animation: memorial-flower-newly-placed-bloom 2200ms ease both;
}

.memorial-flower-garden-trail i {
  position: absolute;
  right: 12%;
  bottom: -3px;
  left: 12%;
  z-index: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.12);
  filter: blur(5px);
  pointer-events: none;
}

.memorial-flower-garden-trail button.is-newly-placed i {
  background: rgba(255, 236, 182, 0.28);
}

.memorial-flower-offering-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.memorial-flower-offering-list::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.22), transparent);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.72);
  transition: opacity 180ms ease, transform 220ms ease;
}

.memorial-flower-offerings-surface.is-viewing-offering .memorial-flower-offering-list::before {
  opacity: 1;
  transform: scaleX(1);
}

.memorial-flower-offering-list article {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 182, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.02)),
    rgba(11, 12, 11, 0.9);
  padding: 8px;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.memorial-flower-offering-list article::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 9px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.18), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.memorial-flower-offering-list article:is(:hover, :focus-within) {
  border-color: rgba(255, 236, 182, 0.2);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 236, 182, 0.16), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(11, 12, 11, 0.92);
  transform: translateY(-1px);
}

.memorial-flower-offering-list article:focus-visible {
  border-color: rgba(255, 236, 182, 0.34);
  outline: none;
  box-shadow: 0 0 0 5px rgba(255, 236, 182, 0.07);
}

.memorial-flower-offering-list article.is-viewing-offering {
  border-color: rgba(255, 236, 182, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 0 5px rgba(255, 236, 182, 0.055);
}

.memorial-flower-offering-list article.is-viewing-offering::after {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.32), transparent);
}

.memorial-flower-offering-list article.is-pending {
  border-color: rgba(255, 236, 182, 0.24);
}

.memorial-flower-offering-list article.is-newly-placed {
  border-color: rgba(255, 236, 182, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 0 6px rgba(255, 236, 182, 0.05);
  animation: memorial-flower-newly-placed-card 2200ms ease both;
}

.memorial-flower-offering-bloom {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1.28;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 236, 182, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.035);
}

.memorial-flower-offering-bloom img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-flower-offering-bloom i {
  position: absolute;
  inset: auto 18% 10%;
  z-index: 3;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.34);
  box-shadow: 0 0 26px rgba(255, 236, 182, 0.18);
  pointer-events: none;
}

.memorial-flower-offering-list article.is-newly-placed .memorial-flower-offering-bloom i {
  background: rgba(255, 236, 182, 0.44);
}

.memorial-flower-offering-list article > div {
  display: grid;
  min-width: 0;
  align-content: flex-start;
  gap: 4px;
  padding: 0 2px 6px;
}

.memorial-flower-offering-label {
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.58);
  padding: 3px 6px;
  font-size: 0.58rem;
  font-weight: 880;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.memorial-flower-offering-list strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.86rem;
  font-weight: 880;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-flower-offering-list p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(244, 241, 233, 0.5);
  font-size: 0.74rem;
  font-weight: 610;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  transition: color 160ms ease;
}

.memorial-flower-offering-list article:is(:hover, :focus-within).is-viewing-offering p,
.memorial-flower-offering-list article.is-viewing-offering p {
  color: rgba(244, 241, 233, 0.72);
  -webkit-line-clamp: 3;
}

.memorial-flower-offering-list small {
  color: rgba(255, 236, 196, 0.5);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-community {
  display: grid;
  grid-template-columns: minmax(240px, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(18px, 3vw, 42px);
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 226, 174, 0.1), transparent 32%),
    radial-gradient(circle at 84% 70%, rgba(155, 196, 169, 0.08), transparent 30%),
    linear-gradient(180deg, #050505 0%, #090a09 100%);
  padding: clamp(28px, 4.8vw, 68px) clamp(16px, 6vw, 96px);
}

.memorial-photo-community-copy {
  position: sticky;
  top: 78px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.memorial-photo-community-copy span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-community-copy strong {
  color: #fff8e8;
  font-size: clamp(1.45rem, 3vw, 3rem);
  font-weight: 910;
  line-height: 1.04;
}

.memorial-photo-community-copy p {
  max-width: 450px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.94rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-photo-community-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.2vw, 14px);
}

.memorial-photo-community-card {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 198px;
  align-content: flex-start;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 7px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(13, 14, 13, 0.9);
  padding: clamp(16px, 2vw, 22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 66px rgba(0, 0, 0, 0.26);
}

.memorial-photo-community-card::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.1), transparent 38%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 30% 72%, rgba(255, 255, 255, 0.035));
  content: "";
  pointer-events: none;
}

.memorial-photo-community-card span,
.memorial-photo-community-card strong,
.memorial-photo-community-card p,
.memorial-photo-community-card small {
  position: relative;
  z-index: 1;
}

.memorial-photo-community-card span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.13);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.68);
  padding: 4px 7px;
  font-size: 0.58rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-community-card strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 900;
  line-height: 1.18;
}

.memorial-photo-community-card p {
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.84rem;
  font-weight: 610;
  line-height: 1.58;
}

.memorial-photo-community-card small {
  margin-top: auto;
  color: rgba(255, 236, 196, 0.54);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1.2;
}

.memorial-photo-letter-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 70% 0%, rgba(255, 226, 174, 0.09), transparent 34%),
    linear-gradient(180deg, #070807 0%, #050505 100%);
  padding: clamp(24px, 4vw, 52px) clamp(16px, 6vw, 96px);
}

.memorial-photo-letter-sheet {
  display: grid;
  max-width: 880px;
  gap: 18px;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.028)),
    rgba(16, 16, 14, 0.88);
  padding: clamp(22px, 4vw, 42px);
  box-shadow: 0 28px 86px rgba(0, 0, 0, 0.34);
}

.memorial-photo-letter-sheet.has-keepsake {
  grid-template-columns: minmax(184px, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
}

.memorial-photo-letter-keepsake {
  position: relative;
  display: grid;
  min-height: 312px;
  overflow: hidden;
  align-content: end;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 7px;
  background: #050505;
  color: rgba(255, 248, 232, 0.92);
  padding: 13px;
  text-align: left;
  cursor: pointer;
}

.memorial-photo-letter-keepsake::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 78% 18%, rgba(255, 236, 182, 0.16), transparent 38%);
}

.memorial-photo-letter-keepsake img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-photo-letter-keepsake span,
.memorial-photo-letter-keepsake strong {
  position: relative;
  z-index: 1;
}

.memorial-photo-letter-keepsake span {
  width: fit-content;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 236, 182, 0.78);
  padding: 5px 8px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-letter-keepsake strong {
  margin-top: 8px;
  color: rgba(255, 248, 232, 0.95);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 930;
  line-height: 1.12;
}

.memorial-photo-letter-keepsake:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.32);
  outline: none;
}

.memorial-photo-letter-body p {
  margin: 0;
}

.memorial-photo-letter-body {
  display: grid;
  align-content: center;
  gap: 15px;
}

.memorial-photo-letter-body p {
  color: rgba(244, 241, 233, 0.82);
  font-size: clamp(0.98rem, 1.25vw, 1.08rem);
  font-weight: 590;
  line-height: 1.78;
}

.memorial-photo-letter-pause {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  max-width: 880px;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  scroll-margin-top: 78px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.08), rgba(182, 234, 195, 0.045)),
    rgba(12, 13, 12, 0.9);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.18);
}

.memorial-photo-letter-pause.is-kept {
  border-color: rgba(182, 234, 195, 0.24);
  background:
    linear-gradient(135deg, rgba(182, 234, 195, 0.1), rgba(255, 236, 182, 0.045)),
    rgba(12, 13, 12, 0.9);
}

.memorial-photo-letter-pause > svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-letter-pause.is-kept > svg {
  color: rgba(182, 234, 195, 0.86);
}

.memorial-photo-letter-pause-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-letter-pause-copy span {
  color: rgba(255, 236, 182, 0.64);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-letter-pause-copy strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.92rem;
  font-weight: 880;
  line-height: 1.18;
}

.memorial-photo-letter-pause-copy p {
  max-width: 62ch;
  margin: 0;
  color: rgba(244, 241, 233, 0.66);
  font-size: 0.8rem;
  font-weight: 620;
  line-height: 1.48;
}

.memorial-photo-letter-pause-copy small {
  color: rgba(182, 234, 195, 0.72);
  font-size: 0.68rem;
  font-weight: 760;
}

.memorial-photo-letter-pause button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-pause button[aria-pressed="true"] {
  border-color: rgba(182, 234, 195, 0.24);
  background: rgba(182, 234, 195, 0.09);
  color: rgba(226, 248, 232, 0.9);
}

.memorial-photo-letter-pause button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-letter-pause button svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-letter-reply {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(220px, 1.1fr) auto;
  max-width: 880px;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  scroll-margin-top: 78px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.085), rgba(155, 196, 169, 0.045)),
    rgba(13, 14, 13, 0.9);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.18);
}

.memorial-photo-letter-reply > svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-letter-reply.has-saved > svg {
  color: rgba(182, 234, 195, 0.86);
}

.memorial-photo-letter-reply.is-prepared-from-memory {
  border-color: rgba(255, 236, 182, 0.26);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.12), rgba(155, 196, 169, 0.06)),
    rgba(13, 14, 13, 0.92);
  animation: memorial-photo-letter-reply-prepared 1800ms ease both;
}

.memorial-photo-letter-reply.is-prepared-from-memory > svg {
  color: rgba(255, 236, 182, 0.92);
}

.memorial-photo-letter-reply.is-prepared-from-memory .memorial-photo-letter-reply-input textarea {
  border-color: rgba(255, 236, 182, 0.34);
  background: rgba(255, 236, 182, 0.075);
}

.memorial-photo-letter-reply.is-keeping-line {
  border-color: rgba(182, 234, 195, 0.28);
  animation: memorial-photo-letter-reply-kept 2400ms ease both;
}

.memorial-photo-letter-reply-ceremony {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.memorial-photo-letter-reply-ceremony i {
  position: absolute;
  width: 11px;
  height: 24px;
  border: 1px solid rgba(255, 248, 232, 0.22);
  border-radius: 999px 999px 999px 2px;
  background: rgba(255, 236, 182, 0.24);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: memorial-photo-letter-reply-petal-rise 2200ms ease-out both;
}

.memorial-photo-letter-reply-ceremony i:nth-child(1) {
  right: 19%;
  bottom: 14px;
  animation-delay: 40ms;
}

.memorial-photo-letter-reply-ceremony i:nth-child(2) {
  right: 14%;
  bottom: 18px;
  background: rgba(182, 234, 195, 0.2);
  animation-delay: 170ms;
}

.memorial-photo-letter-reply-ceremony i:nth-child(3) {
  right: 24%;
  bottom: 10px;
  background: rgba(255, 248, 232, 0.18);
  animation-delay: 300ms;
}

.memorial-photo-letter-reply-copy {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-letter-reply-copy > span,
.memorial-photo-letter-reply-input > span {
  color: rgba(255, 236, 182, 0.64);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-letter-reply-copy strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.9rem;
  font-weight: 880;
  line-height: 1.2;
}

.memorial-photo-letter-reply-copy p {
  display: grid;
  gap: 4px;
  margin: 0;
  color: rgba(244, 241, 233, 0.72);
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.38;
  overflow-wrap: anywhere;
}

.memorial-photo-letter-reply-copy small {
  color: rgba(244, 241, 233, 0.54);
  font-size: 0.68rem;
  font-weight: 740;
}

.memorial-photo-letter-reply-input {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 6px;
}

.memorial-photo-letter-reply-input textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.9);
  padding: 9px 10px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.38;
}

.memorial-photo-letter-reply-input textarea::placeholder {
  color: rgba(244, 241, 233, 0.42);
}

.memorial-photo-letter-reply-input textarea:focus {
  border-color: rgba(255, 236, 182, 0.3);
  outline: none;
}

.memorial-photo-letter-reply-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.memorial-photo-letter-reply-suggestions {
  position: relative;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-photo-letter-reply-suggestions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(182, 234, 195, 0.15);
  border-radius: 999px;
  background: rgba(182, 234, 195, 0.065);
  color: rgba(226, 248, 232, 0.86);
  padding: 0 9px;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-reply-suggestions button:is(:hover, :focus-visible) {
  border-color: rgba(182, 234, 195, 0.3);
  background: rgba(182, 234, 195, 0.12);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-letter-reply-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-reply-actions button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-letter-reply-actions svg {
  color: rgba(255, 236, 182, 0.72);
}

@keyframes memorial-photo-letter-reply-prepared {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 18px 54px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: translateY(0);
  }

  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 22px 58px rgba(0, 0, 0, 0.22),
      0 0 0 7px rgba(255, 236, 182, 0.07);
    transform: translateY(-1px);
  }
}

@keyframes memorial-photo-letter-reply-kept {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 18px 54px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(182, 234, 195, 0);
  }

  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 24px 62px rgba(0, 0, 0, 0.22),
      0 0 0 8px rgba(182, 234, 195, 0.07);
  }
}

@keyframes memorial-photo-letter-reply-petal-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(18deg) scale(0.72);
  }

  22% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(-16px, -54px, 0) rotate(-16deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-photo-letter-reply.is-prepared-from-memory,
  .memorial-photo-letter-reply.is-keeping-line,
  .memorial-photo-letter-reply-ceremony i {
    animation: none;
  }
}

.memorial-photo-letter-memory-bridge {
  display: grid;
  grid-template-columns: minmax(190px, 0.52fr) minmax(0, 1fr);
  max-width: 880px;
  align-items: stretch;
  gap: 12px;
  margin: 12px auto 0;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(152, 202, 167, 0.1), rgba(255, 236, 182, 0.045)),
    rgba(13, 14, 13, 0.9);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.22);
}

.memorial-photo-letter-memory-card {
  position: relative;
  display: grid;
  min-height: 214px;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 7px;
  background: #050505;
  color: rgba(255, 248, 232, 0.92);
  padding: 13px;
  text-align: left;
  cursor: pointer;
}

.memorial-photo-letter-memory-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.78)),
    radial-gradient(circle at 72% 18%, rgba(255, 236, 182, 0.18), transparent 38%);
}

.memorial-photo-letter-memory-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-photo-letter-memory-card span,
.memorial-photo-letter-memory-card strong,
.memorial-photo-letter-memory-card small {
  position: relative;
  z-index: 1;
}

.memorial-photo-letter-memory-card span {
  align-self: flex-start;
  width: fit-content;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.26);
  color: rgba(255, 236, 182, 0.78);
  padding: 5px 8px;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-letter-memory-card strong {
  align-self: end;
  margin-top: auto;
  color: rgba(255, 248, 232, 0.95);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  font-weight: 930;
  line-height: 1.12;
}

.memorial-photo-letter-memory-card small {
  margin-top: 6px;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.72rem;
  font-weight: 760;
}

.memorial-photo-letter-memory-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.32);
  outline: none;
}

.memorial-photo-letter-memory-copy {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 8px;
  padding: clamp(4px, 1vw, 10px);
}

.memorial-photo-letter-memory-copy > span {
  color: rgba(182, 234, 195, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-letter-memory-copy > strong {
  color: rgba(255, 248, 232, 0.93);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 920;
  line-height: 1.12;
}

.memorial-photo-letter-memory-copy > p {
  max-width: 60ch;
  margin: 0;
  color: rgba(244, 241, 233, 0.66);
  font-size: 0.84rem;
  font-weight: 620;
  line-height: 1.52;
}

.memorial-photo-letter-memory-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.memorial-photo-letter-memory-actions :is(button, a) {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 11px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-memory-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-letter-memory-actions svg {
  color: rgba(182, 234, 195, 0.78);
}

.memorial-photo-letter-film-seed {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  max-width: 880px;
  align-items: center;
  gap: 12px;
  margin: 12px auto 0;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(13, 14, 13, 0.88);
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.2);
}

.memorial-photo-letter-film-seed > svg {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.15);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.075);
  color: rgba(255, 236, 182, 0.74);
  padding: 9px;
}

.memorial-photo-letter-film-seed > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.memorial-photo-letter-film-seed > div > span {
  width: fit-content;
  color: rgba(255, 236, 182, 0.64);
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-letter-film-seed strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.9rem;
  font-weight: 880;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-letter-film-seed p {
  display: -webkit-box;
  max-width: 62ch;
  margin: 0;
  overflow: hidden;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.memorial-photo-letter-film-seed a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 11px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-film-seed a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-film-bridge {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.11), transparent 32%),
    radial-gradient(circle at 88% 70%, rgba(122, 161, 184, 0.08), transparent 30%),
    linear-gradient(180deg, #050505 0%, #080908 100%);
  padding: clamp(24px, 4.4vw, 60px) clamp(16px, 6vw, 96px);
}

.memorial-photo-film-bridge-copy,
.memorial-photo-film-bridge-panel {
  min-width: 0;
}

.memorial-photo-film-bridge-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.memorial-photo-film-bridge-copy > span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-film-bridge-copy h2 {
  max-width: 620px;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(1.45rem, 3vw, 3rem);
  font-weight: 910;
  line-height: 1.04;
}

.memorial-photo-film-bridge-copy p {
  max-width: 520px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.94rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-photo-film-bridge-panel {
  display: grid;
  gap: 10px;
}

.memorial-photo-film-bridge-film {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: clamp(220px, 24vw, 340px);
  align-content: end;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.02)),
    rgba(12, 13, 12, 0.94);
  color: rgba(255, 248, 232, 0.92);
  padding: clamp(14px, 2vw, 20px);
  text-align: left;
}

button.memorial-photo-film-bridge-film {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

button.memorial-photo-film-bridge-film:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.026)),
    rgba(16, 16, 15, 0.94);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-film-bridge-film > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04) brightness(0.74);
}

.memorial-photo-film-bridge-film::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.86)),
    radial-gradient(circle at 82% 12%, rgba(255, 236, 182, 0.14), transparent 34%);
  content: "";
  pointer-events: none;
}

.memorial-photo-film-bridge-film > svg,
.memorial-photo-film-bridge-film > span,
.memorial-photo-film-bridge-film > strong,
.memorial-photo-film-bridge-film > small,
.memorial-photo-film-bridge-film > p {
  position: relative;
  z-index: 2;
}

.memorial-photo-film-bridge-film > span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.07);
  color: rgba(255, 236, 182, 0.76);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-film-bridge-film > strong {
  max-width: 680px;
  color: rgba(255, 248, 232, 0.96);
  font-size: clamp(1.08rem, 1.8vw, 1.52rem);
  font-weight: 910;
  line-height: 1.1;
}

.memorial-photo-film-bridge-film > small,
.memorial-photo-film-bridge-film > p {
  max-width: 620px;
  margin: 0;
  color: rgba(244, 241, 233, 0.66);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.5;
}

.memorial-photo-film-bridge-film.is-empty {
  align-content: center;
  min-height: 0;
}

.memorial-photo-film-bridge-film.is-empty::before {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.15), transparent 36%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.09), transparent 28% 76%, rgba(255, 255, 255, 0.035));
}

.memorial-photo-film-bridge-film.is-empty > svg {
  color: rgba(255, 236, 182, 0.7);
}

.memorial-photo-film-bridge-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.memorial-photo-film-bridge-steps article {
  display: grid;
  gap: 6px;
  min-height: 128px;
  align-content: flex-start;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  padding: 12px;
}

.memorial-photo-film-bridge-steps span {
  width: fit-content;
  color: rgba(255, 236, 182, 0.58);
  font-size: 0.58rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-film-bridge-steps strong {
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.94rem;
  font-weight: 890;
  line-height: 1.16;
}

.memorial-photo-film-bridge-steps p {
  margin: 0;
  color: rgba(244, 241, 233, 0.62);
  font-size: 0.76rem;
  font-weight: 610;
  line-height: 1.42;
}

.memorial-photo-film-bridge-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memorial-photo-film-bridge-actions :is(button, a) {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 12px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-film-bridge-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-film-bridge-actions svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-library-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 18px;
  padding: 16px 8px 178px 72px;
}

body:has(.memorial-photo-viewer-page) .memorial-ai-command-dock {
  z-index: 70;
  bottom: 22px;
}

body:has(.memorial-photo-viewer-page.is-viewer-open) .memorial-ai-command-dock {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-content {
  padding-bottom: 178px;
}

.memorial-photo-room-closing {
  display: grid;
  gap: clamp(18px, 3vw, 32px);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 226, 174, 0.12), transparent 34%),
    radial-gradient(circle at 12% 72%, rgba(155, 196, 169, 0.09), transparent 30%),
    #000000;
  padding: clamp(34px, 5vw, 72px) clamp(16px, 6vw, 96px) clamp(210px, 18vw, 280px);
}

.memorial-photo-room-closing-copy {
  display: grid;
  max-width: 860px;
  gap: 10px;
}

.memorial-photo-room-closing-copy span {
  width: fit-content;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.7);
  padding: 6px 9px;
  font-size: 0.62rem;
  font-weight: 880;
  text-transform: uppercase;
}

.memorial-photo-room-closing-copy h2 {
  margin: 0;
  color: rgba(255, 239, 201, 0.86);
  font-size: clamp(1.35rem, 3vw, 2.65rem);
  font-weight: 900;
  line-height: 1.1;
}

.memorial-photo-room-closing-copy p {
  max-width: 720px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: clamp(0.92rem, 1.25vw, 1.05rem);
  font-weight: 610;
  line-height: 1.68;
}

.memorial-photo-room-closing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.memorial-photo-room-closing-grid article {
  display: grid;
  min-height: 134px;
  align-content: end;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.1);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    rgba(12, 13, 11, 0.88);
  padding: clamp(13px, 1.6vw, 18px);
}

.memorial-photo-room-closing-grid article span {
  color: rgba(255, 236, 182, 0.58);
  font-size: 0.58rem;
  font-weight: 880;
  text-transform: uppercase;
}

.memorial-photo-room-closing-grid article strong {
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.14;
}

.memorial-photo-room-closing-grid article p {
  margin: 0;
  color: rgba(244, 241, 233, 0.62);
  font-size: 0.78rem;
  font-weight: 610;
  line-height: 1.45;
}

.memorial-photo-room-return-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 2vw, 24px);
  align-items: end;
  border: 1px solid rgba(255, 236, 182, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.085), rgba(151, 186, 160, 0.045)),
    rgba(14, 15, 13, 0.92);
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.36);
  padding: clamp(16px, 2.2vw, 24px);
}

.memorial-photo-room-return-card > div:first-child {
  display: grid;
  max-width: 740px;
  gap: 7px;
}

.memorial-photo-room-return-card span {
  color: rgba(255, 236, 182, 0.6);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.memorial-photo-room-return-card strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  font-weight: 920;
  line-height: 1.12;
}

.memorial-photo-room-return-card p {
  max-width: 680px;
  margin: 0;
  color: rgba(244, 241, 233, 0.64);
  font-size: 0.86rem;
  font-weight: 610;
  line-height: 1.55;
}

.memorial-photo-room-return-card small {
  color: rgba(255, 236, 182, 0.62);
  font-size: 0.72rem;
  font-weight: 760;
}

.memorial-photo-room-return-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.memorial-photo-room-return-actions :is(button, a) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.064);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 13px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 880;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-room-return-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 255, 255, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-room-return-actions svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-room-return-ritual {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border-top: 1px solid rgba(255, 248, 232, 0.1);
  padding-top: 14px;
}

.memorial-photo-room-return-ritual > svg {
  color: rgba(255, 236, 182, 0.72);
}

.memorial-photo-room-return-ritual-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-room-return-ritual-copy strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.16;
}

.memorial-photo-room-return-ritual-copy p {
  max-width: 680px;
  margin: 0;
  color: rgba(244, 241, 233, 0.62);
  font-size: 0.78rem;
  font-weight: 610;
  line-height: 1.45;
}

.memorial-photo-room-return-ritual button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.064);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 12px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 880;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-room-return-ritual button.is-kept {
  border-color: rgba(152, 202, 167, 0.34);
  background: rgba(152, 202, 167, 0.13);
  color: rgba(221, 247, 228, 0.94);
}

.memorial-photo-room-return-ritual button:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 255, 255, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-room-return-ritual button svg {
  color: currentColor;
}

body:has(.memorial-photo-viewer-page) .memorial-ai-command-form > textarea {
  color: #f1f3f4;
}

.memorial-photo-library-years {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.memorial-photo-library-year {
  display: grid;
  gap: 10px;
  min-width: 0;
  scroll-margin-top: 64px;
}

.memorial-photo-library-year-head {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
  color: #e8eaed;
}

.memorial-photo-library-year-head strong {
  font-size: 0.96rem;
  font-weight: 860;
}

.memorial-photo-library-year-head span {
  overflow: hidden;
  color: #9aa0a6;
  font-size: 0.78rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-library-grid {
  display: grid;
  grid-auto-flow: dense;
  grid-auto-rows: 118px;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 3px;
}

.memorial-photo-library-tile {
  position: relative;
  overflow: hidden;
  display: block;
  grid-row: span 2;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #111111;
  padding: 0;
  cursor: pointer;
}

.memorial-photo-library-tile.is-large {
  grid-column: span 2;
  grid-row: span 3;
}

.memorial-photo-library-tile.is-wide {
  grid-column: span 2;
}

.memorial-photo-library-tile.is-tall {
  grid-row: span 3;
}

.memorial-photo-library-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease, filter 180ms ease;
}

.memorial-photo-library-tile span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 2px;
  padding: 28px 8px 8px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
  color: #ffffff;
  opacity: 0;
  transition: opacity 160ms ease;
}

.memorial-photo-library-tile strong,
.memorial-photo-library-tile small {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-library-tile strong {
  font-size: 0.78rem;
  font-weight: 820;
}

.memorial-photo-library-tile small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 760;
}

.memorial-photo-library-tile:is(:hover, :focus-visible) {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: -2px;
}

.memorial-photo-library-tile:is(:hover, :focus-visible) img {
  filter: brightness(0.86);
  transform: scale(1.025);
}

.memorial-photo-library-tile:is(:hover, :focus-visible) span {
  opacity: 1;
}

.memorial-photo-library-rail {
  position: sticky;
  top: 72px;
  display: grid;
  align-content: flex-start;
  gap: 10px;
  min-width: 0;
  max-height: calc(100svh - 92px);
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: none;
}

.memorial-photo-library-rail::-webkit-scrollbar {
  display: none;
}

.memorial-photo-library-rail a {
  display: block;
  color: #9aa0a6;
  font-size: 0.72rem;
  font-weight: 860;
  line-height: 1.15;
  text-align: right;
  text-decoration: none;
}

.memorial-photo-library-rail a:is(:hover, :focus-visible) {
  color: #ffffff;
  outline: none;
}

.memorial-photo-viewer-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-stage {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 236, 182, 0.055), transparent 34%),
    #000000;
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-stage::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0, 0, 0, 0.34) 78%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 28% 72%, rgba(0, 0, 0, 0.34));
  pointer-events: none;
}

.memorial-photo-viewer-ambient {
  position: absolute;
  inset: -8%;
  z-index: 0;
  width: 116%;
  height: 116%;
  object-fit: cover;
  opacity: 0.34;
  filter: blur(34px) saturate(0.86) brightness(0.48);
  transform: scale(1.04);
  user-select: none;
  animation: memorialPhotoViewerAmbientIn 900ms ease both;
}

.memorial-photo-viewer-frame {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  animation: memorialPhotoViewerFrameIn 560ms ease both;
}

.memorial-photo-viewer-frame.is-next {
  animation-name: memorialPhotoViewerFrameInNext;
}

.memorial-photo-viewer-frame.is-prev {
  animation-name: memorialPhotoViewerFrameInPrev;
}

.memorial-photo-viewer-frame.is-jump {
  animation-name: memorialPhotoViewerFrameIn;
}

.memorial-photo-viewer-memory-trail {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 3;
  display: grid;
  min-width: min(300px, calc(100vw - 112px));
  max-width: min(460px, calc(100vw - 112px));
  gap: 5px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 8px;
  background: rgba(7, 8, 8, 0.46);
  color: rgba(255, 248, 232, 0.8);
  padding: 8px 10px 9px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(16px);
  animation: memorialPhotoViewerTrailIn 620ms ease 120ms both;
}

.memorial-photo-viewer-memory-trail span {
  overflow: hidden;
  color: rgba(255, 236, 182, 0.66);
  font-size: 0.62rem;
  font-weight: 840;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.memorial-photo-viewer-memory-trail strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.8rem;
  font-weight: 880;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-viewer-memory-trail i {
  display: block;
  overflow: hidden;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.12);
}

.memorial-photo-viewer-memory-trail b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 236, 182, 0.58), rgba(255, 248, 232, 0.88));
  transition: width 420ms ease;
}

.memorial-photo-viewer-memory-turn {
  position: absolute;
  top: 132px;
  left: 50%;
  z-index: 3;
  display: grid;
  min-width: min(280px, calc(100vw - 132px));
  max-width: min(520px, calc(100vw - 132px));
  gap: 4px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(7, 8, 8, 0.46);
  color: rgba(255, 248, 232, 0.82);
  padding: 8px 14px 9px;
  text-align: center;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.26);
  transform: translateX(-50%);
  pointer-events: none;
  backdrop-filter: blur(16px);
  animation: memorialPhotoViewerMemoryTurn 2600ms ease both;
}

.memorial-photo-viewer-memory-turn.is-next {
  animation-name: memorialPhotoViewerMemoryTurnNext;
}

.memorial-photo-viewer-memory-turn.is-prev {
  animation-name: memorialPhotoViewerMemoryTurnPrev;
}

.memorial-photo-viewer-memory-turn span {
  overflow: hidden;
  color: rgba(255, 236, 182, 0.68);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.memorial-photo-viewer-memory-turn strong {
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.76rem;
  font-weight: 860;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-viewer-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100svh;
  object-fit: contain;
  user-select: none;
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-image {
  filter: saturate(0.96) contrast(1.035);
  animation: memorialPhotoViewerImageSettle 1200ms ease both;
}

.memorial-photo-viewer-page.is-fit-cover .memorial-photo-viewer-image {
  width: 100vw;
  height: 100svh;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.memorial-photo-viewer-video {
  display: block;
  width: min(100vw, 100%);
  max-height: 100svh;
  background: #000000;
}

.memorial-photo-viewer-media-card {
  position: relative;
  display: grid;
  width: min(720px, calc(100vw - 48px));
  min-height: min(420px, calc(100svh - 96px));
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #111111;
  isolation: isolate;
}

.memorial-photo-viewer-media-card > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.44;
  filter: blur(16px) saturate(0.9);
  transform: scale(1.08);
}

.memorial-photo-viewer-media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.72));
}

.memorial-photo-viewer-media-card > div {
  display: grid;
  width: min(520px, calc(100% - 48px));
  gap: 14px;
  color: #ffffff;
  text-align: center;
}

.memorial-photo-viewer-media-card strong {
  font-size: 1.35rem;
  font-weight: 900;
}

.memorial-photo-viewer-media-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.88rem;
  line-height: 1.45;
}

.memorial-photo-viewer-media-card audio {
  width: 100%;
}

.memorial-photo-viewer-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 0;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-top::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 92px;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.34) 52%, transparent);
  pointer-events: none;
}

.memorial-photo-viewer-actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}

.memorial-photo-viewer-icon,
.memorial-photo-viewer-nav,
.memorial-photo-viewer-panel-close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.94);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease, opacity 130ms ease, transform 130ms ease;
}

.memorial-photo-viewer-icon:is(:hover, :focus-visible),
.memorial-photo-viewer-nav:is(:hover, :focus-visible),
.memorial-photo-viewer-panel-close:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
}

.memorial-photo-viewer-icon.is-back {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.memorial-photo-viewer-icon.is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-icon,
.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-nav {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 7, 7, 0.48);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-icon:is(:hover, :focus-visible),
.memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-nav:is(:hover, :focus-visible) {
  background: rgba(6, 7, 7, 0.68);
}

.memorial-photo-viewer-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 72px;
  border-radius: 10px;
  opacity: 0.86;
  transform: translateY(-50%);
}

.memorial-photo-viewer-nav.is-prev {
  left: 8px;
}

.memorial-photo-viewer-nav.is-next {
  right: 8px;
}

.memorial-photo-viewer-memory {
  position: absolute;
  right: 76px;
  bottom: 22px;
  left: 76px;
  z-index: 4;
  display: grid;
  max-width: 680px;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(24, 24, 23, 0.86), rgba(8, 8, 8, 0.76));
  padding: 15px 16px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
  backdrop-filter: blur(18px);
  animation: memorialPhotoViewerMemoryIn 620ms ease 80ms both;
}

.memorial-photo-viewer-memory strong,
.memorial-photo-viewer-memory p,
.memorial-photo-viewer-memory small,
.memorial-photo-viewer-memory blockquote {
  margin: 0;
}

.memorial-photo-viewer-memory-label {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 238, 202, 0.74);
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-viewer-memory strong {
  color: #ffffff;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 880;
  line-height: 1.2;
}

.memorial-photo-viewer-memory p {
  max-width: 62ch;
  color: rgba(247, 241, 226, 0.84);
  font-size: clamp(0.86rem, 1vw, 0.98rem);
  font-weight: 610;
  line-height: 1.48;
}

.memorial-photo-viewer-memory blockquote {
  max-width: 58ch;
  border-left: 2px solid rgba(255, 221, 157, 0.42);
  color: rgba(255, 246, 225, 0.92);
  padding-left: 10px;
  font-size: clamp(0.86rem, 1vw, 0.96rem);
  font-weight: 760;
  line-height: 1.42;
}

.memorial-photo-viewer-memory-meta {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
}

.memorial-photo-viewer-memory small {
  color: rgba(255, 236, 196, 0.62);
  font-size: 0.74rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-viewer-memory-meta div {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.memorial-photo-viewer-memory-meta span {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  padding: 3px 7px;
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.1;
}

.memorial-photo-viewer-stillness {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
  border-top: 1px solid rgba(255, 248, 232, 0.08);
  padding-top: 9px;
}

.memorial-photo-viewer-stillness span {
  flex: 0 0 auto;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.065);
  color: rgba(255, 236, 182, 0.72);
  padding: 4px 8px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-viewer-stillness small {
  color: rgba(255, 248, 232, 0.68);
  line-height: 1.35;
}

.memorial-photo-viewer-memory-actions {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 2px;
}

.memorial-photo-viewer-memory-actions :is(button, a) {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 248, 232, 0.86);
  padding: 0 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.memorial-photo-viewer-memory-actions :is(button, a):is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-viewer-memory-actions button.is-kept {
  border-color: rgba(255, 236, 182, 0.3);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.14), rgba(155, 196, 169, 0.07)),
    rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.94);
}

.memorial-photo-viewer-memory-actions svg {
  color: rgba(255, 236, 182, 0.72);
}

@keyframes memorialPhotoViewerFrameIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

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

@keyframes memorialPhotoViewerFrameInNext {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.992);
  }

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

@keyframes memorialPhotoViewerFrameInPrev {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.992);
  }

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

@keyframes memorialPhotoViewerAmbientIn {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1.04);
  }
}

@keyframes memorialPhotoViewerTrailIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes memorialPhotoViewerMemoryTurn {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(-50%) translateY(8px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(-50%) translateY(-5px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerMemoryTurnNext {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(calc(-50% + 18px)) translateY(6px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(calc(-50% - 8px)) translateY(-4px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerMemoryTurnPrev {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(calc(-50% - 18px)) translateY(6px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(calc(-50% + 8px)) translateY(-4px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerImageSettle {
  from {
    filter: saturate(0.88) contrast(1.02) brightness(0.88);
    transform: scale(1.012);
  }

  to {
    filter: saturate(0.96) contrast(1.035) brightness(1);
    transform: scale(1);
  }
}

@keyframes memorialPhotoViewerMemoryIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

@media (prefers-reduced-motion: reduce) {
  .memorial-photo-viewer-ambient,
  .memorial-photo-viewer-frame,
  .memorial-photo-viewer-memory-trail,
  .memorial-photo-viewer-memory-turn,
  .memorial-photo-viewer-page.is-public-memory-room.is-viewer-open .memorial-photo-viewer-image,
  .memorial-photo-viewer-memory {
    animation: none;
  }
}

.memorial-photo-viewer-grid {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  overflow-y: auto;
  max-height: min(46svh, 390px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  padding: 8px;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(18px);
}

.memorial-photo-viewer-grid button {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 4px;
  background: #111111;
  padding: 0;
  cursor: pointer;
}

.memorial-photo-viewer-grid button.is-active {
  border-color: #ffffff;
}

.memorial-photo-viewer-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-photo-viewer-panel {
  position: absolute;
  top: 54px;
  right: 12px;
  z-index: 8;
  display: grid;
  width: min(320px, calc(100vw - 24px));
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(32, 33, 36, 0.96);
  color: #e8eaed;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.memorial-photo-viewer-panel-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
}

.memorial-photo-viewer-panel strong {
  max-width: calc(100% - 34px);
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 860;
  line-height: 1.18;
}

.memorial-photo-viewer-panel p,
.memorial-photo-viewer-panel small {
  color: #bdc1c6;
  font-size: 0.84rem;
  line-height: 1.5;
}

.memorial-photo-viewer-panel-quote {
  border-left: 2px solid rgba(255, 221, 157, 0.36);
  color: rgba(255, 246, 225, 0.9) !important;
  padding-left: 10px;
  font-weight: 720;
}

.memorial-photo-viewer-panel button,
.memorial-photo-viewer-panel a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #e8eaed;
  padding: 0 11px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 780;
  text-decoration: none;
  cursor: pointer;
}

.memorial-photo-viewer-panel button:is(:hover, :focus-visible),
.memorial-photo-viewer-panel a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.memorial-photo-admin-panel-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-photo-viewer-panel .memorial-photo-admin-panel-nav button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 0.72rem;
}

.memorial-photo-viewer-panel .memorial-photo-admin-panel-nav button.is-active {
  background: rgba(255, 236, 182, 0.16);
  color: #fff8e8;
}

.memorial-photo-admin-command-center {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 236, 182, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(10, 11, 12, 0.94);
  padding: 12px;
}

.memorial-photo-admin-command-center.is-ready {
  border-color: rgba(152, 202, 167, 0.23);
  background:
    linear-gradient(180deg, rgba(152, 202, 167, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(10, 11, 12, 0.94);
}

.memorial-photo-admin-command-center.is-watch {
  border-color: rgba(255, 236, 182, 0.21);
}

.memorial-photo-admin-command-center.is-todo {
  border-color: rgba(255, 190, 185, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 190, 185, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(10, 11, 12, 0.94);
}

.memorial-photo-admin-command-center-head,
.memorial-photo-admin-command-center-action {
  display: grid;
  gap: 8px;
}

.memorial-photo-admin-command-center-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
}

.memorial-photo-admin-command-center-head > div,
.memorial-photo-admin-command-center-action > div {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.memorial-photo-admin-command-center-head span,
.memorial-photo-admin-command-center-action span,
.memorial-photo-admin-command-center-queues span {
  color: rgba(255, 236, 182, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-command-center.is-ready .memorial-photo-admin-command-center-head span,
.memorial-photo-admin-command-center.is-ready .memorial-photo-admin-command-center-action span {
  color: rgba(182, 234, 195, 0.84);
}

.memorial-photo-admin-command-center.is-todo .memorial-photo-admin-command-center-head span,
.memorial-photo-admin-command-center.is-todo .memorial-photo-admin-command-center-action span {
  color: rgba(255, 190, 185, 0.86);
}

.memorial-photo-admin-command-center-head strong {
  color: rgba(255, 248, 232, 0.97);
  font-size: 1.02rem;
  font-weight: 930;
  line-height: 1.12;
}

.memorial-photo-admin-command-center-head p,
.memorial-photo-admin-command-center-action p {
  margin: 0;
  color: rgba(244, 241, 233, 0.66);
  font-size: 0.74rem;
  font-weight: 680;
  line-height: 1.4;
}

.memorial-photo-admin-command-center-head small {
  max-width: 116px;
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
  text-align: right;
}

.memorial-photo-admin-command-center-action {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 9px;
}

.memorial-photo-admin-command-center-action.is-ready {
  border-color: rgba(152, 202, 167, 0.24);
}

.memorial-photo-admin-command-center-action.is-watch {
  border-color: rgba(255, 236, 182, 0.23);
}

.memorial-photo-admin-command-center-action.is-todo {
  border-color: rgba(255, 190, 185, 0.25);
}

.memorial-photo-admin-command-center-action strong {
  color: rgba(255, 248, 232, 0.95);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.16;
}

.memorial-photo-admin-command-center-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 248, 232, 0.92);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.memorial-photo-admin-command-center-button:focus-visible {
  outline: 2px solid rgba(255, 236, 182, 0.62);
  outline-offset: 2px;
}

.memorial-photo-admin-command-center-queues {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.memorial-photo-admin-command-center-queues > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  padding: 8px;
}

.memorial-photo-admin-command-center-queues > div.is-ready {
  border-color: rgba(152, 202, 167, 0.22);
}

.memorial-photo-admin-command-center-queues > div.is-watch {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-photo-admin-command-center-queues > div.is-todo {
  border-color: rgba(255, 190, 185, 0.23);
}

.memorial-photo-admin-command-center-queues > div.is-ready span {
  color: rgba(182, 234, 195, 0.84);
}

.memorial-photo-admin-command-center-queues > div.is-todo span {
  color: rgba(255, 190, 185, 0.86);
}

.memorial-photo-admin-command-center-queues strong {
  overflow-wrap: anywhere;
  color: rgba(255, 248, 232, 0.95);
  font-size: 1.1rem;
  font-weight: 930;
  line-height: 1;
}

.memorial-photo-admin-command-center-queues small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.2;
}

@media (max-width: 560px) {
  .memorial-photo-admin-command-center-head,
  .memorial-photo-admin-command-center-action {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-admin-command-center-head small {
    max-width: none;
    text-align: left;
  }

  .memorial-photo-admin-command-center-button {
    width: fit-content;
  }

  .memorial-photo-admin-command-center-queues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.memorial-photo-admin-readiness {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(12, 13, 13, 0.92);
  padding: 12px;
}

.memorial-photo-admin-readiness-head {
  display: grid;
  gap: 6px;
}

.memorial-photo-admin-readiness-head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memorial-photo-admin-readiness-head span,
.memorial-photo-admin-readiness-stats span,
.memorial-photo-admin-readiness-actions article > div > span,
.memorial-photo-admin-readiness-list article > div > span {
  color: rgba(255, 236, 182, 0.74);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-readiness-head strong {
  color: #fff8e8;
  font-size: 1.55rem;
  font-weight: 930;
  line-height: 1;
}

.memorial-photo-admin-readiness-head p,
.memorial-photo-admin-readiness-actions p,
.memorial-photo-admin-readiness-list p {
  margin: 0;
  color: rgba(244, 241, 233, 0.66);
  font-size: 0.74rem;
  font-weight: 640;
  line-height: 1.42;
}

.memorial-photo-admin-readiness-meter {
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.memorial-photo-admin-readiness-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #98caa7, #f3d58f);
  transition: width 240ms ease;
}

.memorial-photo-admin-readiness-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-photo-admin-readiness-stats span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 6px 8px;
}

.memorial-photo-admin-readiness-stats span.is-ready {
  color: rgba(182, 234, 195, 0.9);
}

.memorial-photo-admin-readiness-stats span.is-watch {
  color: rgba(255, 236, 182, 0.88);
}

.memorial-photo-admin-readiness-stats span.is-todo {
  color: rgba(255, 190, 185, 0.88);
}

.memorial-photo-admin-readiness-ops {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 9px;
}

.memorial-photo-admin-readiness-ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.memorial-photo-admin-readiness-ops-head span,
.memorial-photo-admin-readiness-ops-grid span {
  color: rgba(255, 236, 182, 0.72);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-readiness-ops-head small,
.memorial-photo-admin-readiness-ops-grid small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-admin-readiness-ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.memorial-photo-admin-readiness-ops-grid > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.15);
  padding: 8px;
}

.memorial-photo-admin-readiness-ops-grid > div.is-ready {
  border-color: rgba(152, 202, 167, 0.2);
}

.memorial-photo-admin-readiness-ops-grid > div.is-watch {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-photo-admin-readiness-ops-grid > div.is-todo {
  border-color: rgba(255, 190, 185, 0.2);
}

.memorial-photo-admin-readiness-ops-grid strong {
  overflow-wrap: anywhere;
  color: rgba(255, 248, 232, 0.94);
  font-size: 1.08rem;
  font-weight: 930;
  line-height: 1;
}

.memorial-photo-admin-readiness-ops-error,
.memorial-photo-admin-readiness-ops-note {
  margin: 0;
  color: rgba(244, 241, 233, 0.62);
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.35;
}

.memorial-photo-admin-care-plan {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022)),
    rgba(0, 0, 0, 0.15);
  padding: 9px;
}

.memorial-photo-admin-care-plan.is-ready {
  border-color: rgba(152, 202, 167, 0.24);
  background:
    linear-gradient(180deg, rgba(152, 202, 167, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.14);
}

.memorial-photo-admin-care-plan.is-watch {
  border-color: rgba(255, 236, 182, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 236, 182, 0.085), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.14);
}

.memorial-photo-admin-care-plan.is-todo {
  border-color: rgba(255, 190, 185, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 190, 185, 0.08), rgba(255, 255, 255, 0.024)),
    rgba(0, 0, 0, 0.14);
}

.memorial-photo-admin-care-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.memorial-photo-admin-care-plan-head > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-care-plan-head span,
.memorial-photo-admin-care-plan-list span {
  color: rgba(255, 236, 182, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-care-plan.is-ready .memorial-photo-admin-care-plan-head span,
.memorial-photo-admin-care-plan.is-ready .memorial-photo-admin-care-plan-list span {
  color: rgba(182, 234, 195, 0.82);
}

.memorial-photo-admin-care-plan.is-todo .memorial-photo-admin-care-plan-head span,
.memorial-photo-admin-care-plan.is-todo .memorial-photo-admin-care-plan-list span {
  color: rgba(255, 190, 185, 0.84);
}

.memorial-photo-admin-care-plan-head strong {
  color: rgba(255, 248, 232, 0.95);
  font-size: 0.88rem;
  font-weight: 920;
  line-height: 1.16;
}

.memorial-photo-admin-care-plan-head small {
  max-width: 118px;
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.25;
  text-align: right;
}

.memorial-photo-admin-care-plan > p,
.memorial-photo-admin-care-plan-list p {
  margin: 0;
  color: rgba(244, 241, 233, 0.64);
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.38;
}

.memorial-photo-admin-care-plan-list {
  display: grid;
  gap: 6px;
}

.memorial-photo-admin-care-plan-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  padding: 8px;
}

.memorial-photo-admin-care-plan-list article > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-care-plan-list article.is-ready {
  border-color: rgba(152, 202, 167, 0.22);
}

.memorial-photo-admin-care-plan-list article.is-watch {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-photo-admin-care-plan-list article.is-todo {
  border-color: rgba(255, 190, 185, 0.22);
}

.memorial-photo-admin-care-plan-action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 9px;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 560px) {
  .memorial-photo-admin-care-plan-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-admin-care-plan-action {
    width: fit-content;
  }
}

.memorial-photo-admin-share-preview {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(182, 234, 195, 0.17);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(182, 234, 195, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.14);
  padding: 9px;
}

.memorial-photo-admin-share-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.memorial-photo-admin-share-preview-head span,
.memorial-photo-admin-share-preview-checks span {
  color: rgba(182, 234, 195, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-share-preview-head small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-admin-share-preview-main {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.memorial-photo-admin-share-preview-main img {
  width: 70px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  object-fit: cover;
}

.memorial-photo-admin-share-preview-main > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-share-preview-main strong {
  overflow-wrap: anywhere;
  color: rgba(255, 248, 232, 0.95);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.16;
}

.memorial-photo-admin-share-preview p {
  margin: 0;
  color: rgba(244, 241, 233, 0.64);
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.38;
}

.memorial-photo-admin-share-preview code {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 248, 232, 0.84);
  padding: 8px;
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.32;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-admin-share-preview-checks,
.memorial-photo-admin-share-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.memorial-photo-admin-share-preview-checks span {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 6px 8px;
}

.memorial-photo-admin-share-preview-checks span.is-ready {
  color: rgba(182, 234, 195, 0.9);
}

.memorial-photo-admin-share-preview-checks span.is-watch {
  color: rgba(255, 236, 182, 0.9);
}

.memorial-photo-admin-share-preview-actions button,
.memorial-photo-admin-share-preview-actions a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  text-decoration: none;
  cursor: pointer;
}

.memorial-photo-admin-preservation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255, 236, 182, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 236, 182, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.14);
  padding: 9px;
}

.memorial-photo-admin-preservation > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-preservation span {
  color: rgba(255, 236, 182, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-preservation strong {
  color: rgba(255, 248, 232, 0.95);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.16;
}

.memorial-photo-admin-preservation p {
  margin: 0;
  color: rgba(244, 241, 233, 0.64);
  font-size: 0.72rem;
  font-weight: 680;
  line-height: 1.38;
}

.memorial-photo-admin-preservation button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 850;
  white-space: nowrap;
  cursor: pointer;
}

@media (max-width: 560px) {
  .memorial-photo-admin-preservation {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-admin-preservation button {
    width: fit-content;
  }
}

.memorial-photo-admin-readiness-signals {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(152, 202, 167, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(152, 202, 167, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.13);
  padding: 9px;
}

.memorial-photo-admin-readiness-signals-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.memorial-photo-admin-readiness-signals-head span,
.memorial-photo-admin-readiness-signals-grid span {
  color: rgba(182, 234, 195, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-readiness-signals-head small,
.memorial-photo-admin-readiness-signals-grid small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-admin-readiness-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.memorial-photo-admin-readiness-signals-grid > div {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  padding: 8px;
}

.memorial-photo-admin-readiness-signals-grid > div.is-ready {
  border-color: rgba(152, 202, 167, 0.23);
}

.memorial-photo-admin-readiness-signals-grid > div.is-watch {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-photo-admin-readiness-signals-grid > div.is-todo {
  border-color: rgba(255, 190, 185, 0.2);
}

.memorial-photo-admin-readiness-signals-grid strong {
  overflow-wrap: anywhere;
  color: rgba(255, 248, 232, 0.94);
  font-size: 1.12rem;
  font-weight: 930;
  line-height: 1;
}

.memorial-photo-admin-readiness-actions {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 236, 182, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(0, 0, 0, 0.14);
  padding: 9px;
}

.memorial-photo-admin-readiness-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.memorial-photo-admin-readiness-actions-head span {
  color: rgba(255, 236, 182, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-admin-readiness-actions-head small {
  color: rgba(244, 241, 233, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.2;
}

.memorial-photo-admin-readiness-actions article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  padding: 9px;
}

.memorial-photo-admin-readiness-actions article.is-ready {
  border-color: rgba(152, 202, 167, 0.26);
}

.memorial-photo-admin-readiness-actions article.is-watch {
  border-color: rgba(255, 236, 182, 0.24);
}

.memorial-photo-admin-readiness-actions article.is-todo {
  border-color: rgba(255, 190, 185, 0.25);
}

.memorial-photo-admin-readiness-actions article > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-readiness-actions strong {
  color: rgba(255, 248, 232, 0.95);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.15;
}

.memorial-photo-admin-readiness-list {
  display: grid;
  gap: 7px;
}

.memorial-photo-admin-readiness-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 9px;
}

.memorial-photo-admin-readiness-list article.is-ready {
  border-color: rgba(152, 202, 167, 0.22);
}

.memorial-photo-admin-readiness-list article.is-watch {
  border-color: rgba(255, 236, 182, 0.2);
}

.memorial-photo-admin-readiness-list article.is-todo {
  border-color: rgba(255, 190, 185, 0.22);
}

.memorial-photo-admin-readiness-list article > div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.memorial-photo-admin-readiness-list strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.82rem;
  font-weight: 880;
  line-height: 1.16;
}

.memorial-photo-viewer-panel .memorial-photo-admin-readiness-list button {
  min-height: 32px;
  white-space: nowrap;
}

.memorial-photo-viewer-panel .memorial-photo-admin-action-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
}

.memorial-photo-admin-panel-section {
  display: grid;
  gap: 10px;
}

.memorial-photo-admin-panel-section label {
  display: grid;
  gap: 6px;
}

.memorial-photo-admin-panel-section label span {
  color: #bdc1c6;
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1;
}

.memorial-photo-admin-panel-section input,
.memorial-photo-admin-panel-section textarea,
.memorial-photo-admin-panel-section select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  padding: 10px 11px;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.35;
}

.memorial-photo-admin-panel-section textarea {
  resize: vertical;
}

.memorial-photo-admin-panel-section input:focus,
.memorial-photo-admin-panel-section textarea:focus,
.memorial-photo-admin-panel-section select:focus {
  border-color: rgba(255, 236, 182, 0.34);
  outline: none;
}

.memorial-photo-admin-panel-section select option {
  background: #202124;
  color: #ffffff;
}

.memorial-photo-admin-photo-preview {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 154px;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.memorial-photo-admin-photo-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-photo-admin-photo-preview span {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 10px;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 999px;
  background: rgba(32, 33, 36, 0.78);
  color: rgba(255, 248, 232, 0.9);
  padding: 5px 8px;
  font-size: 0.68rem;
  font-weight: 880;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.memorial-photo-admin-panel-section .memorial-photo-admin-checkbox {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
}

.memorial-photo-admin-panel-section .memorial-photo-admin-checkbox input {
  width: 15px;
  height: 15px;
  accent-color: #f3d58f;
}

.memorial-photo-admin-panel-section .memorial-photo-admin-checkbox span {
  color: #e8eaed;
  font-size: 0.8rem;
}

.memorial-photo-admin-panel-section .memorial-photo-admin-checkbox:has(input:disabled) {
  opacity: 0.62;
}

.memorial-photo-admin-danger-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.memorial-photo-viewer-panel .memorial-photo-admin-danger-row button {
  min-height: 36px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.88);
}

.memorial-photo-viewer-panel .memorial-photo-admin-danger-row button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.09);
}

.memorial-photo-viewer-panel button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.memorial-comment-list {
  display: grid;
  max-height: min(42vh, 380px);
  gap: 9px;
  overflow: auto;
  padding-right: 2px;
}

.memorial-comment-list article {
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 10px;
}

.memorial-comment-list article.is-pending {
  border-color: rgba(232, 179, 96, 0.3);
}

.memorial-comment-list article > div {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.memorial-comment-list article strong {
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.memorial-comment-list article p {
  margin: 0;
  color: #e8eaed;
  overflow-wrap: anywhere;
}

.memorial-comment-list article button {
  min-height: 30px;
  justify-self: start;
  padding: 0 9px;
  font-size: 0.78rem;
}

.memorial-comment-form {
  display: grid;
  gap: 8px;
}

.memorial-comment-form input,
.memorial-comment-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: #ffffff;
  padding: 10px 11px;
  font: inherit;
  font-size: 0.86rem;
  outline: none;
  resize: vertical;
}

.memorial-comment-form input::placeholder,
.memorial-comment-form textarea::placeholder {
  color: #9aa0a6;
}

.memorial-comment-form input:focus,
.memorial-comment-form textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
}

.memorial-production-list {
  display: grid;
  max-height: min(46vh, 420px);
  gap: 10px;
  overflow: auto;
  padding-right: 2px;
}

.memorial-production-list article {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 11px;
}

.memorial-production-list article.is-generating,
.memorial-production-list article.is-in_review,
.memorial-production-list article.is-queued {
  border-color: rgba(102, 187, 255, 0.28);
}

.memorial-production-list article.is-ready,
.memorial-production-list article.is-published {
  border-color: rgba(123, 214, 148, 0.3);
}

.memorial-production-list article.is-failed,
.memorial-production-list article.is-cancelled {
  border-color: rgba(255, 118, 118, 0.3);
}

.memorial-production-list article > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.memorial-production-list article > div:first-child span {
  color: #e8eaed;
  font-size: 0.76rem;
  font-weight: 850;
}

.memorial-production-list article p {
  margin: 0;
  color: #bdc1c6;
  overflow-wrap: anywhere;
}

.memorial-production-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.memorial-production-progress span {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.memorial-production-progress span.is-complete {
  background: #e8eaed;
}

.memorial-production-progress span.is-muted {
  background: rgba(255, 118, 118, 0.4);
}

.memorial-photo-viewer-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 9;
  border-radius: 999px;
  background: rgba(32, 33, 36, 0.94);
  color: #ffffff;
  padding: 10px 14px;
  font-size: 0.84rem;
  font-weight: 780;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  transform: translateX(-50%);
}

.memorial-comfort-page {
  min-height: 100svh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 226, 174, 0.11), transparent 28%),
    radial-gradient(circle at 86% 58%, rgba(155, 196, 169, 0.08), transparent 28%),
    #050505;
  color: #fff8e8;
  padding: 72px clamp(14px, 5vw, 72px) clamp(120px, 12vw, 180px);
}

.memorial-comfort-topbar {
  position: fixed;
  top: 8px;
  right: 10px;
  left: 10px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.memorial-comfort-topbar a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.72);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 12px;
  font-size: 0.82rem;
  font-weight: 820;
  text-decoration: none;
  pointer-events: auto;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.memorial-comfort-topbar a:is(:hover, :focus-visible) {
  background: rgba(28, 28, 27, 0.86);
  outline: none;
}

.memorial-comfort-hero {
  display: grid;
  max-width: 900px;
  gap: 12px;
  padding: clamp(24px, 5vw, 72px) 0 clamp(22px, 4vw, 44px);
}

.memorial-comfort-hero span,
.memorial-comfort-wall-head p,
.memorial-comfort-submit > div span,
.memorial-comfort-card span,
.memorial-comfort-pending article span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-comfort-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #fff8e8;
  font-size: clamp(2.2rem, 6vw, 5.6rem);
  font-weight: 930;
  line-height: 0.98;
}

.memorial-comfort-hero p {
  max-width: 700px;
  margin: 0;
  color: rgba(244, 241, 233, 0.72);
  font-size: clamp(0.96rem, 1.4vw, 1.12rem);
  font-weight: 610;
  line-height: 1.62;
}

.memorial-comfort-wall,
.memorial-comfort-return-bridge,
.memorial-comfort-guide,
.memorial-comfort-submit,
.memorial-comfort-pending {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  max-width: 1180px;
  margin: 0 auto;
}

.memorial-comfort-return-bridge {
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  margin-bottom: clamp(18px, 3vw, 34px);
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 248, 232, 0.075), rgba(255, 255, 255, 0.022)),
    rgba(15, 16, 15, 0.86);
  padding: clamp(14px, 2.2vw, 22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 62px rgba(0, 0, 0, 0.22);
}

.memorial-comfort-return-bridge > div:first-child {
  display: grid;
  gap: 9px;
}

.memorial-comfort-return-bridge > div:first-child span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-comfort-return-bridge strong {
  max-width: 520px;
  color: rgba(255, 248, 232, 0.95);
  font-size: clamp(1.1rem, 1.75vw, 1.55rem);
  font-weight: 920;
  line-height: 1.12;
}

.memorial-comfort-return-bridge p {
  max-width: 620px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.9rem;
  font-weight: 610;
  line-height: 1.58;
}

.memorial-comfort-return-bridge > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.memorial-comfort-return-bridge a {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.9);
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
}

.memorial-comfort-return-bridge a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.3);
  background: rgba(255, 255, 255, 0.095);
  outline: none;
}

.memorial-comfort-return-bridge svg {
  flex: 0 0 auto;
  color: rgba(255, 236, 182, 0.76);
}

.memorial-comfort-guide {
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  margin-bottom: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(14, 15, 14, 0.9);
  padding: clamp(15px, 2.4vw, 24px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 70px rgba(0, 0, 0, 0.24);
}

.memorial-comfort-guide > div:first-child {
  display: grid;
  align-content: flex-start;
  gap: 9px;
}

.memorial-comfort-guide > div:first-child > span {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 236, 182, 0.72);
  padding: 5px 8px;
  font-size: 0.62rem;
  font-weight: 880;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-comfort-guide > div:first-child > strong {
  color: rgba(255, 248, 232, 0.95);
  font-size: clamp(1.18rem, 2vw, 1.9rem);
  font-weight: 920;
  line-height: 1.1;
}

.memorial-comfort-guide p {
  max-width: 560px;
  margin: 0;
  color: rgba(244, 241, 233, 0.7);
  font-size: 0.92rem;
  font-weight: 610;
  line-height: 1.58;
}

.memorial-comfort-guide > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.memorial-comfort-guide a {
  display: grid;
  min-height: 122px;
  align-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.052);
  color: rgba(255, 248, 232, 0.9);
  padding: 13px;
  text-decoration: none;
}

.memorial-comfort-guide a:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.28);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.memorial-comfort-guide a strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.2;
}

.memorial-comfort-guide a span {
  color: rgba(244, 241, 233, 0.62);
  font-size: 0.76rem;
  font-weight: 690;
  line-height: 1.38;
}

.memorial-comfort-wall-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.memorial-comfort-wall-head strong,
.memorial-comfort-submit > div strong,
.memorial-comfort-pending-head strong {
  color: #fff8e8;
  font-size: clamp(1.35rem, 2.6vw, 2.5rem);
  font-weight: 910;
  line-height: 1.08;
}

.memorial-comfort-wall-head p {
  flex: 0 1 auto;
  margin: 0;
  text-transform: none;
}

.memorial-comfort-feeling-rail {
  display: flex;
  max-width: 100%;
  gap: 7px;
  overflow-x: auto;
  padding: 0 0 2px;
  scrollbar-width: thin;
}

.memorial-comfort-feeling-rail button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.72);
  padding: 0 11px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 830;
  white-space: nowrap;
  cursor: pointer;
}

.memorial-comfort-feeling-rail button.is-active {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 236, 182, 0.12);
  color: rgba(255, 248, 232, 0.94);
}

.memorial-comfort-feeling-rail button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.memorial-comfort-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 1.3vw, 15px);
}

.memorial-comfort-card,
.memorial-comfort-pending article {
  position: relative;
  overflow: hidden;
  display: grid;
  min-height: 220px;
  align-content: flex-start;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(13, 14, 13, 0.9);
  padding: clamp(16px, 2vw, 22px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 20px 66px rgba(0, 0, 0, 0.26);
}

.memorial-comfort-card::before,
.memorial-comfort-pending article::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.1), transparent 38%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 30% 72%, rgba(255, 255, 255, 0.035));
  content: "";
  pointer-events: none;
}

.memorial-comfort-card > *,
.memorial-comfort-pending article > * {
  position: relative;
  z-index: 1;
}

.memorial-comfort-card strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  font-weight: 900;
  line-height: 1.18;
}

.memorial-comfort-card p,
.memorial-comfort-pending article p {
  margin: 0;
  color: rgba(244, 241, 233, 0.7);
  font-size: 0.9rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-comfort-card small,
.memorial-comfort-pending article small,
.memorial-comfort-submit > div small {
  color: rgba(255, 236, 196, 0.56);
  font-size: 0.74rem;
  font-weight: 780;
  line-height: 1.35;
}

.memorial-comfort-card > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.memorial-comfort-card-tags {
  margin-top: 2px;
}

.memorial-comfort-card-tags em,
.admin-studio-memorial-comfort-note-tags span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.06);
  color: rgba(255, 236, 182, 0.68);
  padding: 0 7px;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 840;
  line-height: 1;
}

.memorial-comfort-card button,
.memorial-comfort-submit button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.065);
  color: rgba(255, 248, 232, 0.84);
  padding: 0 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 820;
  cursor: pointer;
}

.memorial-comfort-card button:is(:hover, :focus-visible),
.memorial-comfort-submit button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.memorial-comfort-submit {
  grid-template-columns: minmax(240px, 0.74fr) minmax(0, 1.26fr);
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  padding-top: clamp(24px, 4vw, 52px);
  margin-top: clamp(28px, 5vw, 66px);
}

.memorial-comfort-submit > div {
  display: grid;
  gap: 10px;
}

.memorial-comfort-submit > div p {
  max-width: 460px;
  margin: 0;
  color: rgba(244, 241, 233, 0.68);
  font-size: 0.92rem;
  font-weight: 610;
  line-height: 1.6;
}

.memorial-comfort-submit form {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 248, 232, 0.11);
  border-radius: 8px;
  background: rgba(14, 15, 14, 0.9);
  padding: clamp(14px, 2vw, 20px);
}

.memorial-comfort-submit input,
.memorial-comfort-submit textarea {
  width: 100%;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.9);
  padding: 12px;
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}

.memorial-comfort-submit textarea {
  min-height: 132px;
  resize: vertical;
}

.memorial-comfort-submit input::placeholder,
.memorial-comfort-submit textarea::placeholder {
  color: rgba(244, 241, 233, 0.42);
}

.memorial-comfort-submit input:focus,
.memorial-comfort-submit textarea:focus {
  border-color: rgba(255, 236, 182, 0.28);
}

.memorial-comfort-submit form > p {
  margin: 0;
  color: rgba(255, 236, 196, 0.72);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.memorial-comfort-pending {
  margin-top: clamp(22px, 4vw, 48px);
}

.memorial-comfort-pending-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memorial-comfort-pending-head button {
  min-height: 34px;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 248, 232, 0.78);
  padding: 0 10px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 820;
  cursor: pointer;
}

.memorial-comfort-pending-head button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.memorial-comfort-pending > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.memorial-comfort-pending article {
  min-height: 0;
}

@media (max-width: 720px) {
  .memorial-comfort-page {
    padding: 62px 8px 110px;
  }

  .memorial-comfort-topbar {
    top: 8px;
    right: 8px;
    left: 8px;
  }

  .memorial-comfort-topbar a {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.78rem;
  }

  .memorial-comfort-hero {
    gap: 9px;
    padding: 24px 2px 24px;
  }

  .memorial-comfort-hero h1 {
    font-size: clamp(2.1rem, 13vw, 3.35rem);
  }

  .memorial-comfort-hero p {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  .memorial-comfort-wall,
  .memorial-comfort-return-bridge,
  .memorial-comfort-guide,
  .memorial-comfort-submit,
  .memorial-comfort-pending {
    gap: 12px;
  }

  .memorial-comfort-return-bridge,
  .memorial-comfort-return-bridge > div:last-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-comfort-return-bridge {
    margin-bottom: 20px;
    padding: 12px;
  }

  .memorial-comfort-return-bridge strong {
    font-size: 1rem;
  }

  .memorial-comfort-return-bridge p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-comfort-return-bridge a {
    min-height: 40px;
    justify-content: flex-start;
    padding: 0 11px;
    font-size: 0.74rem;
  }

  .memorial-comfort-guide,
  .memorial-comfort-guide > div:last-child {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-comfort-guide {
    margin-bottom: 28px;
    padding: 13px;
  }

  .memorial-comfort-guide a {
    min-height: 86px;
  }

  .memorial-comfort-wall-head {
    display: grid;
    gap: 8px;
  }

  .memorial-comfort-wall-head strong,
  .memorial-comfort-submit > div strong,
  .memorial-comfort-pending-head strong {
    font-size: 1.2rem;
    line-height: 1.12;
  }

  .memorial-comfort-grid,
  .memorial-comfort-submit,
  .memorial-comfort-pending > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-comfort-card,
  .memorial-comfort-pending article {
    min-height: 0;
    gap: 8px;
    padding: 14px;
  }

  .memorial-comfort-card strong {
    font-size: 1rem;
  }

  .memorial-comfort-card p,
  .memorial-comfort-pending article p,
  .memorial-comfort-submit > div p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-comfort-submit {
    margin-top: 28px;
    padding-top: 24px;
  }

  .memorial-comfort-submit form {
    padding: 12px;
  }

  .memorial-photo-library-top {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px;
    padding: 4px 6px;
  }

  .memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-top {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .memorial-photo-library-search {
    height: 36px;
    padding: 0 12px;
    font-size: 0.86rem;
  }

  .memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-search {
    width: 100%;
  }

  .memorial-photo-public-actions {
    gap: 5px;
    justify-content: flex-end;
  }

  .memorial-photo-public-actions button,
  .memorial-photo-public-actions a {
    width: 34px;
    min-width: 34px;
    min-height: 34px;
    padding: 0;
  }

  .memorial-photo-public-actions span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .memorial-photo-admin-edit-chip {
    top: 8px;
    right: 8px;
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.62rem;
  }

  .memorial-photo-room-arrival {
    min-height: 430px;
    padding: 78px 12px 26px;
  }

  .memorial-photo-room-arrival-image img {
    object-position: 50% 28%;
  }

  .memorial-photo-room-arrival-copy {
    gap: 8px;
  }

  .memorial-photo-room-arrival-copy span {
    padding: 6px 9px;
    font-size: 0.58rem;
  }

  .memorial-photo-room-arrival-copy strong {
    max-width: 320px;
    font-size: clamp(2rem, 12vw, 3rem);
    line-height: 1;
  }

  .memorial-photo-room-arrival-copy p {
    max-width: 330px;
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .memorial-photo-room-arrival-name-ritual {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 9px;
    margin-top: 4px;
    padding: 9px;
  }

  .memorial-photo-room-arrival-name-ritual > div > strong {
    font-size: 0.9rem;
    line-height: 1.18;
    white-space: normal;
  }

  .memorial-photo-room-arrival-name-ritual small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .memorial-photo-room-arrival-name-ritual button {
    width: fit-content;
    min-height: 36px;
    max-width: 100%;
    padding: 0 11px;
    font-size: 0.7rem;
  }

  .memorial-photo-room-arrival-breath {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    gap: 8px;
    padding: 8px 9px;
  }

  .memorial-photo-room-arrival-breath small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .memorial-photo-room-arrival-breath b {
    grid-column: 1 / -1;
    padding-left: 38px;
  }

  .memorial-photo-room-arrival-actions {
    gap: 7px;
    margin-top: 6px;
  }

  .memorial-photo-room-arrival-actions :is(button, a) {
    min-height: 38px;
    padding: 0 11px;
    font-size: 0.72rem;
  }

  .memorial-photo-room-arrival-return {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    gap: 10px;
    margin-top: 10px;
    padding: 10px;
  }

  .memorial-photo-room-arrival-return-copy strong {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
  }

  .memorial-photo-room-arrival-return-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    gap: 6px;
  }

  .memorial-photo-room-arrival-return-actions :is(button, a) {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-photo-visual-path {
    padding: 12px 8px 14px;
  }

  .memorial-photo-visual-path-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 0 4px 4px;
    scrollbar-width: none;
  }

  .memorial-photo-visual-path-grid::-webkit-scrollbar {
    display: none;
  }

  .memorial-photo-visual-path-card {
    flex: 0 0 min(132px, 38vw);
    min-height: 176px;
    padding: 10px;
  }

  .memorial-photo-visual-path-card span {
    max-width: 100%;
    padding: 6px 7px;
    font-size: 0.58rem;
  }

  .memorial-photo-visual-path-card strong {
    font-size: 0.84rem;
    line-height: 1.12;
  }

  .memorial-photo-room-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px 8px 14px;
  }

  .memorial-photo-room-intro-media {
    display: none;
    min-height: 136px;
    order: 2;
  }

  .memorial-photo-room-intro-media img {
    min-height: 136px;
  }

  .memorial-photo-room-intro-copy {
    gap: 7px;
    order: 1;
    padding: 2px 2px 0;
  }

  .memorial-photo-room-intro h1 {
    font-size: clamp(2.6rem, 15vw, 3.75rem);
  }

  .memorial-photo-room-intro h2 {
    font-size: 1.12rem;
    line-height: 1.12;
  }

  .memorial-photo-room-intro-copy > p:last-of-type,
  .memorial-photo-room-intro-letter small {
    font-size: 0.78rem;
    line-height: 1.42;
  }

  .memorial-photo-room-intro-copy > p:last-of-type {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .memorial-photo-room-intro-letter {
    order: 3;
    padding: 12px;
  }

  .memorial-photo-room-intro-letter small {
    display: none;
  }

  .memorial-photo-special-day {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 22px 8px 24px;
  }

  .memorial-photo-special-day-copy {
    gap: 8px;
    padding: 0 2px;
  }

  .memorial-photo-special-day-copy > span {
    font-size: 0.58rem;
  }

  .memorial-photo-special-day-copy h2 {
    font-size: 1.2rem;
    line-height: 1.12;
  }

  .memorial-photo-special-day-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-special-day-copy small {
    font-size: 0.74rem;
  }

  .memorial-photo-special-day-rituals {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-special-day-action {
    min-height: 118px;
    border-radius: 7px;
    padding: 14px;
  }

  .memorial-photo-special-day-action span {
    font-size: 0.98rem;
  }

  .memorial-photo-special-day-action small {
    font-size: 0.74rem;
  }

  .memorial-photo-today {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 8px 24px;
  }

  .memorial-photo-today-copy {
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-photo-today-copy h2 {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-photo-today-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-today-actions {
    gap: 7px;
  }

  .memorial-photo-today-actions button,
  .memorial-photo-today-actions a {
    min-height: 40px;
    padding: 0 12px;
  }

  .memorial-photo-private-reflection {
    width: 100%;
    padding: 10px 11px;
  }

  .memorial-photo-private-reflection strong {
    font-size: 0.78rem;
    line-height: 1.32;
  }

  .memorial-photo-private-reflection small {
    font-size: 0.66rem;
  }

  .memorial-photo-private-reflection-actions {
    gap: 5px;
  }

  .memorial-photo-private-reflection-actions :is(a, button) {
    min-height: 29px;
    padding: 0 8px;
    font-size: 0.64rem;
  }

  .memorial-photo-today-kept {
    width: 100%;
    padding: 10px 11px;
  }

  .memorial-photo-today-kept strong {
    font-size: 0.78rem;
    white-space: normal;
  }

  .memorial-photo-today-kept small {
    font-size: 0.66rem;
  }

  .memorial-photo-today-kept-actions {
    gap: 5px;
  }

  .memorial-photo-today-kept-actions a {
    min-height: 29px;
    padding: 0 8px;
    font-size: 0.64rem;
  }

  .memorial-photo-return-memory {
    width: 100%;
    padding: 11px;
  }

  .memorial-photo-return-memory strong {
    font-size: 0.88rem;
  }

  .memorial-photo-today-card {
    min-height: 330px;
    border-radius: 7px;
    padding: 14px;
  }

  .memorial-photo-today-card strong {
    font-size: 1.02rem;
    line-height: 1.12;
  }

  .memorial-photo-today-card p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-today-card small {
    font-size: 0.76rem;
  }

  .memorial-photo-presence {
    gap: 12px;
    padding: 20px 8px 22px;
  }

  .memorial-photo-presence-head {
    padding: 0 2px;
  }

  .memorial-photo-presence-head strong {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-photo-presence-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-presence-card {
    min-height: 132px;
    padding: 14px;
  }

  .memorial-photo-presence-card.has-image {
    min-height: 232px;
    aspect-ratio: 3 / 4;
    padding: 0;
  }

  .memorial-photo-presence-card.has-image > div {
    padding: 14px;
  }

  .memorial-photo-presence-card strong {
    font-size: 0.98rem;
  }

  .memorial-photo-presence-card p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-favorites {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 20px 8px 22px;
  }

  .memorial-photo-favorites-copy {
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-photo-favorites-copy strong {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-photo-favorites-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-kept-memory-bridge {
    padding: 14px 8px;
  }

  .memorial-photo-kept-memory-ritual {
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    gap: 6px;
  }

  .memorial-photo-kept-object {
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 66px;
    width: 100%;
    padding: 8px 10px 8px 8px;
  }

  .memorial-photo-kept-memory-actions {
    flex-direction: column;
    gap: 5px;
  }

  .memorial-photo-kept-memory-actions a {
    width: 34px;
    height: 34px;
  }

  .memorial-photo-kept-object img,
  .memorial-photo-kept-object-fallback {
    width: 48px;
    height: 48px;
  }

  .memorial-photo-kept-object-mark {
    left: 43px;
  }

  .memorial-photo-kept-object-copy strong {
    font-size: 0.86rem;
  }

  .memorial-photo-favorites-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-grid,
  .memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .memorial-photo-favorites-card {
    min-height: 126px;
    padding: 14px;
  }

  .memorial-photo-favorites-card.has-image {
    min-height: 220px;
    aspect-ratio: 3 / 4;
    padding: 0;
  }

  .memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-presence-card.has-image,
  .memorial-photo-viewer-page.is-quiet-memory-room .memorial-photo-favorites-card.has-image {
    min-height: 0;
  }

  .memorial-photo-quiet-kept-stage {
    width: 100%;
    aspect-ratio: 3 / 4;
  }

  .memorial-photo-quiet-kept-mark {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
  }

  .memorial-photo-quiet-kept-actions {
    top: 10px;
    right: 10px;
    gap: 6px;
  }

  .memorial-photo-quiet-kept-actions a {
    width: 36px;
    height: 36px;
  }

  .memorial-photo-favorites-card.has-image > div {
    padding: 14px;
  }

  .memorial-photo-favorites-card strong {
    font-size: 0.98rem;
  }

  .memorial-photo-favorites-card p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-comfort-door {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 20px 8px 24px;
  }

  .memorial-photo-comfort-door > div {
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-photo-comfort-door strong {
    font-size: 1.05rem;
    line-height: 1.16;
  }

  .memorial-photo-comfort-door p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-comfort-door a {
    width: fit-content;
    max-width: 100%;
    min-height: 40px;
    padding: 0 12px;
  }

  .memorial-flower-offerings {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 8px 24px;
  }

  .memorial-flower-offerings-copy {
    position: static;
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-flower-offerings-copy > strong {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-flower-offerings-copy p:not(.sr-only) {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-flower-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-flower-selected {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
  }

  .memorial-flower-selected::before {
    width: 94px;
  }

  .memorial-flower-selected-image {
    max-width: 86px;
  }

  .memorial-flower-selected-image img {
    width: 100%;
  }

  .memorial-flower-memory-cue {
    max-width: 100%;
    font-size: 0.58rem;
  }

  .memorial-flower-memory-cue span {
    max-width: 180px;
  }

  .memorial-flower-memory-return {
    min-height: 28px;
    padding: 0 8px;
    font-size: 0.6rem;
  }

  .memorial-flower-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-flower-ritual-line {
    gap: 6px;
    padding: 0 2px;
  }

  .memorial-flower-ritual-line span {
    font-size: 0.54rem;
  }

  .memorial-flower-ritual-submit {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-flower-ritual-submit button {
    width: 100%;
    min-height: 40px;
  }

  .memorial-flower-garden-trail {
    gap: 6px;
    overflow-x: auto;
    padding: 9px;
    scrollbar-width: none;
  }

  .memorial-flower-garden-trail::-webkit-scrollbar {
    display: none;
  }

  .memorial-flower-garden-trail button {
    flex: 0 0 42px;
    max-width: 42px;
  }

  .memorial-flower-offering-list {
    gap: 8px;
  }

  .memorial-flower-offering-bloom {
    aspect-ratio: 1.1;
  }

  .memorial-flower-offering-list p {
    -webkit-line-clamp: 1;
  }

  .memorial-flower-ritual {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .memorial-flower-ritual > img {
    aspect-ratio: 1.72;
  }

  .memorial-flower-ritual strong {
    font-size: 1rem;
    line-height: 1.16;
  }

  .memorial-flower-ritual p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-flower-ritual-memory {
    max-width: 100%;
    font-size: 0.58rem;
  }

  .memorial-flower-ritual-memory span {
    max-width: 180px;
  }

  .memorial-flower-ritual-ceremony {
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    gap: 7px;
  }

  .memorial-flower-ritual-ceremony i:nth-of-type(3) {
    display: none;
  }

  .memorial-flower-ritual-ceremony img {
    width: 40px;
    height: 40px;
  }

  .memorial-flower-ritual .memorial-flower-ritual-breath {
    font-size: 0.74rem;
  }

  .memorial-flower-ritual-pause {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
  }

  .memorial-flower-ritual-pause strong {
    font-size: 0.78rem;
    white-space: normal;
  }

  .memorial-flower-ritual-pause button {
    width: fit-content;
    max-width: 100%;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-flower-ritual-actions a {
    min-height: 38px;
    padding: 0 11px;
  }

  .memorial-flower-offering-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-community {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 8px 150px;
  }

  .memorial-photo-community-copy {
    position: static;
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-photo-community-copy strong {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-photo-community-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-community-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-community-card {
    min-height: 0;
    gap: 8px;
    padding: 14px;
  }

  .memorial-photo-community-card strong {
    font-size: 0.98rem;
  }

  .memorial-photo-community-card p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-letter-section {
    padding: 20px 8px 22px;
  }

  .memorial-photo-letter-sheet {
    gap: 14px;
    padding: 18px 16px;
  }

  .memorial-photo-letter-sheet.has-keepsake {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-letter-keepsake {
    min-height: 186px;
    padding: 11px;
  }

  .memorial-photo-letter-keepsake strong {
    font-size: 0.98rem;
  }

  .memorial-photo-letter-body {
    gap: 12px;
  }

  .memorial-photo-letter-body p {
    font-size: 0.91rem;
    line-height: 1.66;
  }

  .memorial-photo-letter-pause {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
  }

  .memorial-photo-letter-pause > svg {
    display: none;
  }

  .memorial-photo-letter-pause-copy strong {
    font-size: 0.84rem;
  }

  .memorial-photo-letter-pause-copy p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-letter-pause button {
    width: fit-content;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-photo-letter-reply {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
  }

  .memorial-photo-letter-reply > svg {
    display: none;
  }

  .memorial-photo-letter-reply-copy strong {
    font-size: 0.84rem;
  }

  .memorial-photo-letter-reply-input textarea {
    min-height: 64px;
    font-size: 0.78rem;
  }

  .memorial-photo-letter-reply-actions {
    justify-content: flex-start;
  }

  .memorial-photo-letter-reply-suggestions button {
    min-height: 30px;
    padding: 0 8px;
    font-size: 0.64rem;
  }

  .memorial-photo-letter-reply-actions button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-photo-letter-memory-bridge {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
  }

  .memorial-photo-letter-memory-card {
    min-height: 190px;
    padding: 11px;
  }

  .memorial-photo-letter-memory-card strong {
    font-size: 1rem;
  }

  .memorial-photo-letter-memory-copy {
    gap: 7px;
    padding: 2px;
  }

  .memorial-photo-letter-memory-copy > strong {
    font-size: 1rem;
  }

  .memorial-photo-letter-memory-copy > p {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .memorial-photo-letter-memory-actions :is(button, a) {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-photo-letter-film-seed {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
  }

  .memorial-photo-letter-film-seed > svg {
    width: 34px;
    height: 34px;
    padding: 8px;
  }

  .memorial-photo-letter-film-seed strong {
    font-size: 0.82rem;
    line-height: 1.2;
    white-space: normal;
  }

  .memorial-photo-letter-film-seed p {
    font-size: 0.76rem;
    line-height: 1.38;
  }

  .memorial-photo-letter-film-seed a {
    grid-column: 1 / -1;
    width: fit-content;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.68rem;
  }

  .memorial-photo-film-bridge {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 8px 24px;
  }

  .memorial-photo-film-bridge-copy {
    gap: 7px;
    padding: 0 2px;
  }

  .memorial-photo-film-bridge-copy h2 {
    font-size: 1.18rem;
    line-height: 1.12;
  }

  .memorial-photo-film-bridge-copy p {
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .memorial-photo-film-bridge-film {
    min-height: 190px;
    border-radius: 7px;
    padding: 14px;
  }

  .memorial-photo-film-bridge-film > strong {
    font-size: 1rem;
    line-height: 1.14;
  }

  .memorial-photo-film-bridge-film > small,
  .memorial-photo-film-bridge-film > p {
    font-size: 0.76rem;
    line-height: 1.42;
  }

  .memorial-photo-film-bridge-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-film-bridge-steps article {
    min-height: 0;
    padding: 12px;
  }

  .memorial-photo-film-bridge-actions :is(button, a) {
    min-height: 38px;
    padding: 0 11px;
  }

  body:has(.memorial-photo-viewer-page) .memorial-ai-command-dock {
    right: 10px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: max(64px, calc(var(--sidebar-rail-width) + 10px)) !important;
    min-height: 94px !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
  }

  .memorial-photo-library-content {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 0 154px;
  }

  .memorial-photo-viewer-page.is-public-memory-room .memorial-photo-library-content {
    padding-bottom: 154px;
  }

  .memorial-photo-room-closing {
    gap: 14px;
    padding: 30px 8px 220px;
  }

  .memorial-photo-room-closing-copy {
    gap: 8px;
    padding: 0 2px;
  }

  .memorial-photo-room-closing-copy h2 {
    font-size: 1.42rem;
    line-height: 1.14;
  }

  .memorial-photo-room-closing-copy p {
    font-size: 0.82rem;
    line-height: 1.54;
  }

  .memorial-photo-room-closing-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .memorial-photo-room-closing-grid article {
    min-height: 112px;
    padding: 14px;
  }

  .memorial-photo-room-return-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding: 15px;
  }

  .memorial-photo-room-return-card strong {
    font-size: 1rem;
  }

  .memorial-photo-room-return-card p {
    font-size: 0.8rem;
    line-height: 1.48;
  }

  .memorial-photo-room-return-actions {
    justify-content: flex-start;
  }

  .memorial-photo-room-return-actions :is(button, a) {
    flex: 1 1 138px;
    min-height: 39px;
    padding: 0 10px;
  }

  .memorial-photo-room-return-ritual {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .memorial-photo-room-return-ritual > svg {
    display: none;
  }

  .memorial-photo-room-return-ritual button {
    width: fit-content;
    min-height: 38px;
  }

  .memorial-photo-library-years {
    gap: 14px;
  }

  .memorial-photo-library-year-head {
    display: grid;
    gap: 2px;
    padding: 0 8px;
  }

  .memorial-photo-library-year-head span {
    white-space: normal;
  }

  .memorial-photo-library-grid {
    grid-auto-rows: 92px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
  }

  .memorial-photo-library-tile,
  .memorial-photo-library-tile.is-large,
  .memorial-photo-library-tile.is-wide,
  .memorial-photo-library-tile.is-tall {
    grid-column: span 1;
    grid-row: span 1;
  }

  .memorial-photo-library-rail {
    display: none;
  }

  .memorial-photo-viewer-top {
    align-items: flex-start;
    gap: 4px;
    padding: 6px 6px 0;
  }

  .memorial-photo-viewer-actions {
    overflow-x: auto;
    max-width: calc(100vw - 54px);
    scrollbar-width: none;
  }

  .memorial-photo-viewer-actions::-webkit-scrollbar {
    display: none;
  }

  .memorial-photo-viewer-icon {
    width: 36px;
    height: 36px;
  }

  .memorial-photo-viewer-nav {
    width: 44px;
    height: 62px;
  }

  .memorial-photo-viewer-memory-trail {
    top: 52px;
    min-width: min(260px, calc(100vw - 88px));
    max-width: min(320px, calc(100vw - 88px));
    gap: 4px;
    padding: 7px 9px 8px;
  }

  .memorial-photo-viewer-memory-trail span {
    font-size: 0.56rem;
  }

  .memorial-photo-viewer-memory-trail strong {
    font-size: 0.72rem;
  }

  .memorial-photo-viewer-memory-turn {
    top: 116px;
    min-width: min(230px, calc(100vw - 96px));
    max-width: min(300px, calc(100vw - 96px));
    gap: 3px;
    padding: 7px 11px 8px;
  }

  .memorial-photo-viewer-memory-turn span {
    font-size: 0.52rem;
  }

  .memorial-photo-viewer-memory-turn strong {
    font-size: 0.68rem;
  }

  .memorial-photo-viewer-memory {
    right: 10px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 10px;
    max-height: 48svh;
    gap: 6px;
    overflow: hidden;
    padding: 11px 12px;
  }

  .memorial-photo-viewer-memory-label {
    padding: 3px 7px;
    font-size: 0.62rem;
  }

  .memorial-photo-viewer-memory strong {
    font-size: 0.9rem;
  }

  .memorial-photo-viewer-memory p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.8rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .memorial-photo-viewer-memory blockquote {
    display: -webkit-box;
    overflow: hidden;
    padding-left: 8px;
    font-size: 0.78rem;
    line-height: 1.34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .memorial-photo-viewer-memory small {
    font-size: 0.68rem;
  }

  .memorial-photo-viewer-memory-meta {
    gap: 5px 7px;
  }

  .memorial-photo-viewer-memory-meta span {
    padding: 2px 6px;
    font-size: 0.6rem;
  }

  .memorial-photo-viewer-stillness {
    align-items: flex-start;
    gap: 6px;
    padding-top: 7px;
  }

  .memorial-photo-viewer-stillness span {
    padding: 3px 7px;
    font-size: 0.58rem;
  }

  .memorial-photo-viewer-stillness small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .memorial-photo-viewer-memory-actions {
    gap: 5px;
  }

  .memorial-photo-viewer-memory-actions :is(button, a) {
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.66rem;
  }

  .memorial-photo-viewer-grid {
    right: 8px;
    bottom: 8px;
    left: 8px;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    max-height: 42svh;
  }

  .memorial-photo-viewer-panel {
    top: 48px;
    right: 8px;
  }
}

/* Memory Hall rainbow bridge entrance */
body:has(.memorial-index-page) {
  --sidebar-rail-width: 0px;
  overflow: hidden;
  background: #040404;
}

body:has(.memorial-index-page) .site-main-shell-memory-hall {
  margin-left: 0 !important;
  background: #040404 !important;
}

body:has(.memorial-index-page) .site-main-memory-hall {
  padding: 0 !important;
  background: #040404 !important;
}

body:has(.memorial-index-page) .site-sidebar.is-studio-console,
body:has(.memorial-index-page) .mobile-nav-toggle.is-studio-console-toggle,
body:has(.memorial-index-page) .site-footer {
  display: none;
}

.memorial-index-page {
  min-height: 100svh;
  background: #040404;
}

.memory-hall-bridge-experience {
  min-height: 100svh;
  background: #040404;
}

.memory-hall-bridge-experience .memory-hall-vista {
  background: #040404;
  transition: background 900ms ease;
}

.memory-hall-bridge-experience.is-inside .memory-hall-vista {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.2), transparent 22%),
    radial-gradient(circle at 22% 38%, rgba(217, 170, 87, 0.14), transparent 24%),
    radial-gradient(circle at 78% 36%, rgba(255, 223, 145, 0.1), transparent 24%),
    linear-gradient(180deg, #17130d 0%, #080807 58%, #030303 100%);
}

.memory-hall-bridge-experience .memory-hall-vista-image {
  inset: 0;
  background-image: var(--memory-hall-vista-image, url("/memorial/memory-hall-ivory-single-wall-v1.webp"));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.01) brightness(1.04);
  opacity: 1;
  transform: scale(1.01) translate3d(0, 0, 0);
  transition:
    opacity 860ms ease,
    transform 1100ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 1100ms ease;
}

.memory-hall-bridge-experience .memory-hall-vista-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-bridge-experience.is-inside .memory-hall-vista-image {
  filter: blur(10px) saturate(0.84) contrast(1.04) brightness(0.58);
  opacity: 0.26;
  transform: scale(1.14) translate3d(0, 1.2%, 0);
}

.memory-hall-bridge-experience .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.13), transparent 18%),
    radial-gradient(circle at 50% 58%, rgba(248, 221, 152, 0.1), transparent 34%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.02) 32%, rgba(0, 0, 0, 0.02) 68%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.01) 46%, rgba(0, 0, 0, 0.24));
}

.memory-hall-bridge-experience.is-inside .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 248, 232, 0.2), transparent 20%),
    radial-gradient(circle at 50% 72%, rgba(255, 205, 96, 0.08), transparent 40%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.3) 24%, rgba(0, 0, 0, 0.24) 76%, rgba(0, 0, 0, 0.78)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0.1) 48%, rgba(0, 0, 0, 0.64));
  opacity: 1;
}

.memory-hall-bridge-halo,
.memory-hall-prism,
.memory-hall-threshold-breath {
  position: absolute;
  pointer-events: none;
}

.memory-hall-bridge-halo {
  top: 8%;
  left: 50%;
  width: min(62vw, 820px);
  aspect-ratio: 1.4;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  box-shadow:
    0 -12px 80px rgba(255, 235, 174, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 0.62;
  transform: translateX(-50%);
  transition: opacity 760ms ease, transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-bridge-experience.is-inside .memory-hall-bridge-halo {
  opacity: 0.08;
  transform: translateX(-50%) translateY(-18px) scale(1.06);
}

.memory-hall-prism {
  width: 18vw;
  max-width: 280px;
  height: 42vh;
  opacity: 0.32;
  filter: blur(18px) saturate(1.18);
  mix-blend-mode: screen;
}

.memory-hall-prism.is-left {
  top: 31%;
  left: 19%;
  background: linear-gradient(135deg, transparent, rgba(98, 201, 255, 0.22), rgba(251, 190, 82, 0.16), transparent);
  transform: rotate(16deg);
}

.memory-hall-prism.is-right {
  top: 30%;
  right: 18%;
  background: linear-gradient(225deg, transparent, rgba(110, 222, 178, 0.18), rgba(255, 106, 164, 0.16), transparent);
  transform: rotate(-13deg);
}

.memory-hall-prism.is-floor {
  right: 16%;
  bottom: 7%;
  left: 18%;
  width: auto;
  max-width: none;
  height: 24vh;
  background: linear-gradient(90deg, transparent, rgba(114, 190, 255, 0.12), rgba(255, 220, 106, 0.11), rgba(255, 107, 166, 0.1), transparent);
  filter: blur(20px);
  transform: perspective(900px) rotateX(68deg);
  transform-origin: bottom center;
}

.memory-hall-threshold-breath {
  inset: auto 18% 4% 18%;
  height: 34vh;
  background: radial-gradient(ellipse at center, rgba(255, 238, 194, 0.18), rgba(246, 189, 88, 0.05) 45%, transparent 70%);
  filter: blur(30px);
  opacity: 0.72;
}

.memory-hall-threshold-card-path {
  position: absolute;
  right: clamp(16px, 5vw, 92px);
  bottom: clamp(22px, 4vh, 54px);
  left: clamp(16px, 5vw, 92px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: clamp(4px, 0.62vw, 9px);
  align-items: end;
  opacity: 0.48;
  pointer-events: none;
  transform: perspective(920px) rotateX(64deg) translateY(12px) scaleX(1.08);
  transform-origin: center bottom;
  transition:
    opacity 620ms ease,
    transform 840ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 620ms ease;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.92) 0 48%, rgba(0, 0, 0, 0.56) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.92) 0 48%, rgba(0, 0, 0, 0.56) 70%, transparent 100%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-threshold-card-path {
  opacity: 0;
  filter: blur(4px);
  transform: perspective(920px) rotateX(64deg) translateY(42px) scaleX(1.18);
}

.memory-hall-threshold-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 248, 232, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(7, 8, 7, 0.44));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(255, 223, 145, 0.08);
  opacity: 0.6;
  transform: scale(0.88);
}

.memory-hall-threshold-card::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 24% 72%, rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 50% 22%, rgba(255, 236, 182, 0.16), transparent 44%);
  content: "";
  opacity: 0.7;
}

.memory-hall-threshold-card-image {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 8px;
  left: 2px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 248, 232, 0.5) 0 11%, rgba(255, 236, 182, 0.16) 30%, transparent 54%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.1), rgba(0, 0, 0, 0.2));
}

.memory-hall-threshold-card-light {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.52), transparent);
}

.memory-hall-threshold-card.is-cat .memory-hall-threshold-card-image {
  border-radius: 42% 42% 3px 3px;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 241, 215, 0.48) 0 11%, rgba(235, 176, 111, 0.15) 30%, transparent 54%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.1), rgba(0, 0, 0, 0.2));
}

.memory-hall-threshold-card.is-depth-1,
.memory-hall-threshold-card.is-depth-5 {
  opacity: 0.34;
  transform: translateY(5px) scale(0.68);
}

.memory-hall-threshold-card.is-depth-2,
.memory-hall-threshold-card.is-depth-6 {
  border-color: rgba(176, 213, 197, 0.12);
  opacity: 0.42;
  transform: translateY(-4px) scale(0.74);
}

.memory-hall-threshold-card.is-depth-3 {
  opacity: 0.28;
  transform: scale(0.58);
}

.memory-hall-threshold-card.is-depth-4 {
  opacity: 0.5;
  transform: translateY(8px) scale(0.8);
}

.memory-hall-brand-mark {
  position: absolute;
  top: clamp(18px, 3vh, 32px);
  left: 50%;
  z-index: 3;
  display: grid;
  gap: 2px;
  color: rgba(255, 250, 236, 0.92);
  opacity: 0.78;
  text-align: center;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.46);
  transform: translateX(-50%);
  transition: opacity 520ms ease, transform 720ms ease;
}

.memory-hall-brand-mark span {
  color: rgba(255, 236, 182, 0.72);
  font-size: clamp(0.54rem, 0.68vw, 0.64rem);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.memory-hall-brand-mark strong {
  color: #fff8e8;
  font-size: clamp(0.86rem, 1.14vw, 1.05rem);
  font-weight: 920;
  line-height: 1;
}

.memory-hall-bridge-experience.is-inside .memory-hall-brand-mark {
  opacity: 0;
  transform: translateX(-50%) translateY(-18px);
}

.memory-hall-bridge-experience .memory-hall-enter {
  bottom: clamp(86px, 11vh, 126px);
  min-width: 202px;
  min-height: 62px;
  border-color: rgba(255, 241, 202, 0.88);
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.82), transparent 38%),
    linear-gradient(180deg, rgba(255, 235, 176, 0.98), rgba(218, 164, 64, 0.96));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 34px rgba(255, 239, 188, 0.42),
    0 18px 66px rgba(173, 114, 29, 0.26),
    0 30px 90px rgba(0, 0, 0, 0.28);
}

.memory-hall-entrance-picker {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(18px, 3vh, 34px);
  z-index: 5;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(255, 246, 218, 0.22);
  border-radius: 999px;
  background: rgba(14, 15, 12, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 60px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px) saturate(1.18);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 420ms ease, transform 520ms ease;
}

.memory-hall-bridge-experience.is-inside .memory-hall-entrance-picker {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
}

.memory-hall-entrance-option {
  position: relative;
  display: grid;
  width: 78px;
  height: 46px;
  align-items: flex-end;
  justify-items: flex-start;
  overflow: hidden;
  padding: 6px;
  border: 1px solid rgba(255, 246, 218, 0.3);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)),
    var(--memory-hall-option-image) center center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(0, 0, 0, 0.18);
  color: #fff8e8;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.memory-hall-entrance-option span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: rgba(5, 7, 5, 0.48);
  color: #fff8e8;
  font-size: 0.72rem;
  font-weight: 920;
  line-height: 1;
  backdrop-filter: blur(8px);
}

.memory-hall-entrance-option:is(:hover, :focus-visible) {
  border-color: rgba(255, 241, 202, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 3px rgba(255, 236, 182, 0.12),
    0 12px 30px rgba(0, 0, 0, 0.22);
  outline: none;
  transform: translateY(-2px);
}

.memory-hall-entrance-option.is-active {
  border-color: rgba(255, 241, 202, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 3px rgba(255, 236, 182, 0.22),
    0 18px 38px rgba(160, 101, 24, 0.24);
}

.memory-hall-arrival-guide {
  position: absolute;
  top: clamp(26px, 4vh, 44px);
  left: 50%;
  z-index: 4;
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 520ms ease 360ms, transform 680ms ease 360ms;
  pointer-events: none;
}

.memory-hall-arrival-guide span {
  display: inline-flex;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.44);
  color: rgba(255, 248, 232, 0.82);
  padding: 9px 14px;
  font-size: 0.74rem;
  font-weight: 860;
  backdrop-filter: blur(16px);
}

.memory-hall-together-note {
  position: absolute;
  top: clamp(64px, 8vh, 88px);
  left: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 520ms ease 520ms, transform 680ms ease 520ms;
}

.memory-hall-together-note span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.34);
  color: rgba(255, 248, 232, 0.86);
  padding: 8px 13px;
  font-size: 0.72rem;
  font-weight: 860;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(16px);
}

.memory-hall-together-note svg {
  color: rgba(255, 221, 142, 0.88);
}

.memory-hall-together-note small {
  color: rgba(255, 236, 182, 0.66);
  font-size: 0.62rem;
  font-weight: 840;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.memory-hall-bridge-experience.is-inside .memory-hall-arrival-guide {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}

.memory-hall-bridge-experience.is-inside .memory-hall-together-note {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.memory-hall-bridge-experience .memory-hall-niche-field {
  opacity: 0;
  pointer-events: none;
  filter: blur(9px) brightness(0.68);
  transform: translateY(62px) scale(0.9);
}

.memory-hall-bridge-experience.is-inside .memory-hall-niche-field {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: none;
}

.memory-hall-bridge-experience .memory-hall-niche-wall {
  top: clamp(84px, 12vh, 130px);
  right: clamp(72px, 9vw, 164px);
  left: clamp(72px, 9vw, 164px);
  border-color: rgba(255, 236, 182, 0.16);
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 223, 145, 0.18), transparent 33%),
    linear-gradient(180deg, rgba(13, 17, 14, 0.62), rgba(7, 10, 8, 0.82));
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -34px 90px rgba(0, 0, 0, 0.38),
    0 44px 140px rgba(0, 0, 0, 0.5);
  transform: perspective(1400px) rotateX(0.5deg) rotateY(0deg);
}

body:has(.memory-hall-bridge-experience.is-threshold) .memorial-ai-command-dock {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(18px) scale(0.96) !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 520ms ease 440ms, transform 620ms ease 440ms !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command {
  top: clamp(20px, 3vh, 36px) !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(var(--sidebar-rail-width, 0px) + clamp(14px, 2vw, 28px)) !important;
  width: min(258px, calc(100vw - var(--sidebar-rail-width, 0px) - 178px)) !important;
  min-height: 44px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(28, 29, 28, 0.78), rgba(18, 19, 18, 0.82)),
    rgba(19, 20, 19, 0.72) !important;
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  opacity: 0.92 !important;
  transform: translateY(0) scale(1) !important;
  backdrop-filter: blur(22px) saturate(128%) !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command {
  grid-template-columns: 32px minmax(0, 1fr) 32px !important;
  grid-template-rows: 32px !important;
  gap: 0 4px !important;
  align-items: center !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command > textarea {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 28px !important;
  max-height: 28px !important;
  padding: 0 4px !important;
  font-size: 0.74rem !important;
  line-height: 28px !important;
  white-space: nowrap !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 32px !important;
  height: 32px !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-height: 32px !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
  width: min(456px, calc(100vw - var(--sidebar-rail-width, 0px) - 42px)) !important;
  min-height: 88px !important;
  padding: 10px 12px !important;
  border-radius: 20px !important;
  opacity: 1 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status) .memorial-ai-command-form.is-hall-command,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command {
  grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  grid-template-rows: auto 34px auto !important;
  gap: 1px 7px !important;
  align-items: end !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context {
  grid-template-rows: auto auto 34px auto !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command > textarea,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status) .memorial-ai-command-form.is-hall-command > textarea,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command > textarea {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-height: 30px !important;
  max-height: min(44vh, 440px) !important;
  padding: 5px 12px 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context > textarea {
  grid-row: 2 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 34px !important;
  height: 34px !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context > .studio-minis-character-picker-wrap {
  grid-row: 3 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  min-height: 34px !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-command-actions {
  grid-row: 3 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command .memorial-command-status {
  grid-column: 1 / -1 !important;
}

body:has(.memorial-page) .memorial-command-hall-start-row {
  display: none;
  min-width: 0;
  gap: 6px;
  align-items: center;
  padding: 0 2px 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

body:has(.memorial-page) .memorial-command-hall-start-row::-webkit-scrollbar {
  display: none;
}

body:has(.memorial-page) .memorial-command-hall-start-row > span,
body:has(.memorial-page) .memorial-command-hall-start-row button {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(245, 239, 226, 0.055);
  color: rgba(245, 239, 226, 0.78);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

body:has(.memorial-page) .memorial-command-hall-start-row > span {
  border-color: rgba(255, 236, 182, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 236, 182, 0.11), rgba(255, 255, 255, 0.035)),
    rgba(245, 239, 226, 0.045);
  color: rgba(255, 236, 182, 0.82);
  font-weight: 900;
}

body:has(.memorial-page) .memorial-command-hall-start-row button {
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body:has(.memorial-page) .memorial-command-hall-start-row button:is(:hover, :focus-visible) {
  border-color: rgba(255, 248, 232, 0.26);
  background: rgba(255, 255, 255, 0.09);
  outline: none;
  transform: translateY(-1px);
}

body:has(.memorial-page) .memorial-command-hall-start-row button svg {
  color: rgba(255, 236, 182, 0.76);
}

body:has(.memorial-page) .memorial-command-hall-start-row button strong {
  color: rgba(255, 248, 232, 0.92);
  font-size: inherit;
  font-weight: 880;
}

body:has(.memorial-page) .memorial-command-hall-start-row button small {
  color: rgba(200, 193, 180, 0.58);
  font-size: 0.62rem;
  font-weight: 740;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start {
  grid-template-rows: auto 34px 34px auto !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start > .memorial-command-hall-start-row,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start > .memorial-command-hall-start-row {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start > textarea,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start > textarea {
  grid-row: 2 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start > .studio-minis-character-picker-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start > .studio-minis-character-picker-wrap,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .is-drop-active, .is-submitting) .memorial-ai-command-form.is-hall-command.has-hall-start > .admin-studio-flow-command-actions,
body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) .memorial-ai-command-form.is-hall-command.has-hall-start > .admin-studio-flow-command-actions {
  grid-row: 3 !important;
}

body:has(.memory-hall-bridge-experience.is-inside) .memorial-ai-command-form.is-hall-command.has-hall-start .memorial-command-status {
  grid-row: 4 !important;
}

@media (max-width: 900px) {
  .memory-hall-bridge-experience .memory-hall-vista-image {
    inset: 0 -68%;
    background-position: center center;
  }

  .memory-hall-bridge-halo {
    top: 11%;
    width: 92vw;
  }

  .memory-hall-brand-mark {
    top: 20px;
  }

  .memory-hall-together-note {
    top: 18px;
    right: auto;
    left: 50%;
    max-width: calc(100vw - 24px);
    transform: translateX(-50%) translateY(-8px);
  }

  .memory-hall-together-note span {
    max-width: 100%;
    justify-content: center;
    padding: 8px 11px;
    font-size: 0.68rem;
    white-space: normal;
    text-align: center;
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-together-note {
    transform: translateX(-50%) translateY(0);
  }

  .memory-hall-bridge-experience .memory-hall-enter {
    bottom: 96px;
    min-width: min(210px, calc(100vw - 42px));
  }

  .memory-hall-entrance-picker {
    right: 50%;
    bottom: 16px;
    gap: 7px;
    padding: 7px;
    transform: translateX(50%);
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-entrance-picker {
    transform: translateX(50%) translateY(14px);
  }

  .memory-hall-entrance-option {
    width: 58px;
    height: 38px;
    padding: 5px;
  }

  .memory-hall-entrance-option span {
    width: 19px;
    height: 19px;
    font-size: 0.66rem;
  }

  .memory-hall-threshold-card-path {
    right: -18px;
    bottom: 18px;
    left: -18px;
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 6px;
    opacity: 0.38;
    transform: perspective(720px) rotateX(66deg) translateY(8px) scaleX(1.18);
  }

  .memory-hall-threshold-card:nth-child(n + 57) {
    display: none;
  }

  .memory-hall-bridge-experience .memory-hall-niche-wall {
    top: 78px;
    right: 12px;
    left: 12px;
    max-height: calc(100svh - 196px);
  }

  body:has(.memory-hall-bridge-experience.is-threshold) .memorial-ai-command-dock {
    transform: translateY(18px) scale(0.96) !important;
  }
}

/* Memory Hall spatial memorial niches */
.memory-hall-spatial-niche-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  grid-template-rows: repeat(3, minmax(128px, 1fr));
  gap: clamp(10px, 1.15vw, 18px);
  align-content: center;
  box-sizing: border-box;
  overflow: hidden;
  padding: clamp(96px, 11vh, 124px) clamp(56px, 6vw, 112px) clamp(132px, 15vh, 164px);
  perspective: 1600px;
  pointer-events: none;
}

.memory-hall-spatial-niche-stage::before,
.memory-hall-spatial-niche-stage::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-spatial-niche-stage::before {
  inset: clamp(64px, 9vh, 104px) clamp(36px, 5vw, 92px) clamp(92px, 12vh, 138px);
  z-index: 0;
  border: 1px solid rgba(255, 224, 156, 0.06);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 230, 170, 0.055) 1px, transparent 1px) 0 0 / clamp(120px, 12vw, 170px) 100%,
    linear-gradient(180deg, rgba(255, 230, 170, 0.045) 1px, transparent 1px) 0 0 / 100% clamp(128px, 18vh, 170px),
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.12), transparent 34%),
    radial-gradient(circle at 50% 68%, rgba(255, 223, 145, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.045), rgba(7, 8, 7, 0.64) 72%, rgba(3, 4, 4, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 -36px 80px rgba(0, 0, 0, 0.38),
    0 34px 110px rgba(0, 0, 0, 0.34);
  opacity: 0.72;
  transform: perspective(1400px) rotateX(1deg);
}

.memory-hall-spatial-niche-stage::after {
  right: 12%;
  bottom: 4%;
  left: 12%;
  z-index: 0;
  height: 24vh;
  background:
    radial-gradient(ellipse at center, rgba(255, 207, 114, 0.12), transparent 56%),
    linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.08), transparent);
  filter: blur(28px);
  opacity: 0.72;
  transform: perspective(900px) rotateX(68deg);
  transform-origin: bottom center;
}

.memory-hall-distant-companions {
  position: absolute;
  inset: clamp(70px, 8vh, 112px) clamp(28px, 4vw, 78px) clamp(96px, 12vh, 146px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  grid-auto-rows: minmax(14px, 1fr);
  gap: clamp(7px, 0.8vw, 13px);
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transition: opacity 780ms ease 480ms, transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1) 480ms;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.08) 0 24%, rgba(0, 0, 0, 0.82) 40% 78%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0.08) 0 24%, rgba(0, 0, 0, 0.82) 40% 78%, transparent 100%);
}

.memory-hall-distant-companions::before,
.memory-hall-distant-companions::after {
  position: absolute;
  z-index: 0;
  content: "";
  pointer-events: none;
}

.memory-hall-distant-companions::before {
  inset: -2% -8% 14%;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 236, 182, 0.105) 18px 19px, transparent 19px 44px),
    repeating-linear-gradient(180deg, transparent 0 18px, rgba(255, 236, 182, 0.075) 18px 19px, transparent 19px 38px),
    radial-gradient(ellipse at 50% 38%, transparent 0 30%, rgba(255, 236, 182, 0.08) 54%, transparent 82%);
  opacity: 0.48;
  transform: perspective(980px) rotateX(1.5deg) scaleX(1.08);
}

.memory-hall-distant-companions::after {
  right: -4%;
  bottom: -18%;
  left: -4%;
  height: 38%;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 236, 182, 0.095) 22px 23px, transparent 23px 54px),
    repeating-linear-gradient(180deg, transparent 0 16px, rgba(176, 213, 197, 0.06) 16px 17px, transparent 17px 34px),
    radial-gradient(ellipse at 50% 22%, rgba(255, 236, 182, 0.12), transparent 64%);
  filter: blur(0.2px);
  opacity: 0.46;
  transform: perspective(760px) rotateX(64deg);
  transform-origin: bottom center;
}

.memory-hall-bridge-experience.is-inside .memory-hall-distant-companions {
  animation: none;
  opacity: 0.42;
  transform: scale(1);
}

.memory-hall-distant-companion {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-width: 0;
  min-height: clamp(12px, 2vh, 24px);
  border: 1px solid rgba(255, 236, 182, 0.08);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.18), transparent 38%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.06), rgba(8, 10, 8, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 16px rgba(255, 223, 145, 0.045);
  opacity: 0.42;
  transform: scale(0.76);
}

.memory-hall-distant-companion i {
  position: absolute;
  top: 32%;
  left: 50%;
  width: clamp(3px, 0.38vw, 6px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.72);
  box-shadow:
    0 0 0 3px rgba(255, 236, 182, 0.035),
    0 0 13px rgba(255, 223, 145, 0.18);
  transform: translate(-50%, -50%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-distant-companion i {
  animation: none;
}

.memory-hall-bridge-experience.is-inside .memory-hall-distant-companion:nth-child(4n + 1) i {
  animation-delay: -1.8s;
}

.memory-hall-bridge-experience.is-inside .memory-hall-distant-companion:nth-child(4n + 2) i {
  animation-delay: -3.6s;
}

.memory-hall-bridge-experience.is-inside .memory-hall-distant-companion:nth-child(4n + 3) i {
  animation-delay: -5.4s;
}

.memory-hall-distant-companion.is-cat i {
  border-radius: 45% 45% 999px 999px;
}

.memory-hall-distant-companion.is-tone-1,
.memory-hall-distant-companion.is-tone-5 {
  opacity: 0.28;
  transform: translateY(5px) scale(0.62);
}

.memory-hall-distant-companion.is-tone-2,
.memory-hall-distant-companion.is-tone-6 {
  border-color: rgba(176, 213, 197, 0.08);
}

.memory-hall-distant-companion.is-tone-2 i,
.memory-hall-distant-companion.is-tone-6 i {
  background: rgba(222, 246, 233, 0.58);
  box-shadow:
    0 0 0 3px rgba(176, 213, 197, 0.032),
    0 0 13px rgba(176, 213, 197, 0.12);
}

.memory-hall-distant-companion.is-tone-3,
.memory-hall-distant-companion.is-tone-7 {
  opacity: 0.22;
  transform: translateY(-4px) scale(0.52);
}

@keyframes memoryHallDistantFieldBreath {
  from {
    opacity: 0.34;
    transform: scale(0.992) translateY(2px);
  }

  to {
    opacity: 0.48;
    transform: scale(1.006) translateY(-2px);
  }
}

@keyframes memoryHallDistantLightPulse {
  0%,
  100% {
    opacity: 0.46;
    filter: brightness(0.86);
  }

  48% {
    opacity: 0.86;
    filter: brightness(1.14);
  }
}

.memory-hall-companion-card-field {
  position: absolute;
  inset: clamp(74px, 8.5vh, 116px) clamp(18px, 3vw, 68px) clamp(102px, 12vh, 152px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(5px, 0.58vw, 10px);
  align-content: center;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: perspective(1200px) rotateX(4deg) scale(0.982) translateY(8px);
  transform-origin: center 56%;
  transition:
    opacity 880ms ease 620ms,
    transform 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) 620ms;
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0.04) 0 21%, rgba(0, 0, 0, 0.82) 38% 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0.04) 0 21%, rgba(0, 0, 0, 0.82) 38% 82%, transparent 100%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-companion-card-field {
  animation: none;
  opacity: 0.34;
  transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
}

.memory-hall-companion-card-light {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.075);
  border-radius: 3px;
  background:
    radial-gradient(circle at 48% 18%, rgba(255, 248, 232, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.045), rgba(8, 10, 8, 0.32));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 0 16px rgba(255, 223, 145, 0.035);
  opacity: 0.42;
  transform: translateY(0) scale(0.92);
}

.memory-hall-companion-card-light::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), transparent 28% 72%, rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 50% 20%, rgba(255, 236, 182, 0.11), transparent 44%);
  content: "";
  opacity: 0.64;
  pointer-events: none;
}

.memory-hall-companion-card-image {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 8px;
  left: 2px;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 248, 232, 0.42) 0 12%, rgba(255, 236, 182, 0.12) 30%, transparent 52%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(0, 0, 0, 0.16));
  opacity: 0.74;
}

.memory-hall-companion-card-plaque {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.38), transparent);
  opacity: 0.78;
}

.memory-hall-companion-card-light.is-cat .memory-hall-companion-card-image {
  border-radius: 42% 42% 3px 3px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 241, 215, 0.43) 0 12%, rgba(235, 176, 111, 0.12) 30%, transparent 52%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(0, 0, 0, 0.16));
}

.memory-hall-companion-card-light.is-tone-1,
.memory-hall-companion-card-light.is-tone-6 {
  opacity: 0.24;
  transform: translateY(6px) scale(0.76);
}

.memory-hall-companion-card-light.is-tone-2,
.memory-hall-companion-card-light.is-tone-7 {
  border-color: rgba(176, 213, 197, 0.07);
}

.memory-hall-companion-card-light.is-tone-2 .memory-hall-companion-card-image,
.memory-hall-companion-card-light.is-tone-7 .memory-hall-companion-card-image {
  background:
    radial-gradient(circle at 50% 34%, rgba(226, 246, 234, 0.32) 0 12%, rgba(176, 213, 197, 0.09) 30%, transparent 52%),
    linear-gradient(180deg, rgba(232, 250, 240, 0.06), rgba(0, 0, 0, 0.16));
}

.memory-hall-companion-card-light.is-tone-3,
.memory-hall-companion-card-light.is-tone-8 {
  opacity: 0.2;
  transform: translateY(-5px) scale(0.68);
}

.memory-hall-companion-card-light.is-tone-4,
.memory-hall-companion-card-light.is-tone-9 {
  opacity: 0.3;
  transform: scale(0.82);
}

@keyframes memoryHallCompanionCardFieldBreath {
  from {
    opacity: 0.28;
    transform: perspective(1200px) rotateX(0deg) scale(0.996) translateY(3px);
  }

  to {
    opacity: 0.42;
    transform: perspective(1200px) rotateX(0deg) scale(1.008) translateY(-3px);
  }
}

.memory-hall-public-continuation-field {
  position: absolute;
  inset: clamp(70px, 8vh, 112px) clamp(18px, 3vw, 68px) clamp(102px, 12vh, 152px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(5px, 0.56vw, 10px);
  align-content: center;
  opacity: 0;
  pointer-events: none;
  transform: perspective(1200px) rotateX(3deg) scale(0.98) translateY(10px);
  transform-origin: center 56%;
  transition:
    opacity 880ms ease 820ms,
    transform 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) 820ms;
  -webkit-mask-image: radial-gradient(ellipse at 50% 47%, transparent 0 24%, rgba(0, 0, 0, 0.72) 42% 84%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 47%, transparent 0 24%, rgba(0, 0, 0, 0.72) 42% 84%, transparent 100%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-field {
  opacity: 0.38;
  transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
}

.memory-hall-public-continuation-tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.06);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.038), rgba(8, 10, 8, 0.26));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.022),
    0 0 15px rgba(255, 223, 145, 0.034);
  opacity: 0;
  transform: translateY(7px) scale(0.82);
  transition:
    opacity 560ms ease var(--memory-hall-public-continuation-delay),
    transform 720ms cubic-bezier(0.18, 0.82, 0.24, 1) var(--memory-hall-public-continuation-delay);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-tile {
  opacity: 0.42;
  transform: translateY(0) scale(1);
}

.memory-hall-public-continuation-tile i {
  position: absolute;
  top: 32%;
  left: 50%;
  width: clamp(3px, 0.3vw, 5px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.58);
  box-shadow:
    0 0 0 3px rgba(255, 236, 182, 0.028),
    0 0 12px rgba(255, 223, 145, 0.12);
  transform: translate(-50%, -50%);
}

.memory-hall-public-continuation-tile::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  left: 3px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.24), transparent);
  content: "";
  opacity: 0.62;
}

.memory-hall-public-continuation-tile.is-tone-2,
.memory-hall-public-continuation-tile.is-tone-7 {
  border-color: rgba(176, 213, 197, 0.06);
}

.memory-hall-public-continuation-tile.is-tone-2 i,
.memory-hall-public-continuation-tile.is-tone-7 i {
  background: rgba(222, 246, 233, 0.46);
  box-shadow:
    0 0 0 3px rgba(176, 213, 197, 0.026),
    0 0 12px rgba(176, 213, 197, 0.1);
}

.memory-hall-public-continuation-tile.is-depth-1,
.memory-hall-public-continuation-tile.is-depth-4 {
  transform: translateY(5px) scale(0.72);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-tile.is-depth-1,
.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-tile.is-depth-4 {
  opacity: 0.28;
  transform: translateY(0) scale(0.82);
}

.memory-hall-public-continuation-tile.is-depth-2,
.memory-hall-public-continuation-tile.is-depth-5 {
  transform: translateY(-4px) scale(0.62);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-tile.is-depth-2,
.memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-tile.is-depth-5 {
  opacity: 0.2;
  transform: translateY(0) scale(0.7);
}

.memory-hall-public-portrait-field {
  position: absolute;
  inset: clamp(74px, 8.5vh, 116px) clamp(24px, 3.5vw, 78px) clamp(106px, 12.5vh, 156px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: clamp(6px, 0.68vw, 11px);
  align-content: center;
  isolation: isolate;
  opacity: 0;
  pointer-events: none;
  transform: perspective(1200px) rotateX(2deg) scale(0.978) translateY(10px);
  transform-origin: center 54%;
  transition:
    opacity 840ms ease 760ms,
    transform 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) 760ms;
  -webkit-mask-image: radial-gradient(ellipse at 50% 49%, transparent 0 26%, rgba(0, 0, 0, 0.86) 42% 84%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 49%, transparent 0 26%, rgba(0, 0, 0, 0.86) 42% 84%, transparent 100%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-field {
  opacity: 0.64;
  transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
}

.memory-hall-public-portrait-tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 5px;
  background: rgba(7, 8, 7, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(255, 236, 182, 0.055);
  opacity: 0;
  transform: translateY(9px) scale(0.9);
  transition:
    opacity 520ms ease var(--memory-hall-public-portrait-delay),
    transform 720ms cubic-bezier(0.18, 0.82, 0.24, 1) var(--memory-hall-public-portrait-delay);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-tile {
  opacity: 0.72;
  transform: translateY(0) scale(1);
}

.memory-hall-public-portrait-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.88) brightness(0.9);
}

.memory-hall-public-portrait-tile::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26% 58%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.16), transparent 38%);
  content: "";
}

.memory-hall-public-portrait-tile.is-cat::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26% 58%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 18%, rgba(255, 221, 182, 0.18), transparent 38%);
}

.memory-hall-public-portrait-tile.is-tone-2,
.memory-hall-public-portrait-tile.is-tone-5 {
  border-color: rgba(176, 213, 197, 0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.024),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 20px rgba(176, 213, 197, 0.055);
}

.memory-hall-public-portrait-tile.is-depth-1,
.memory-hall-public-portrait-tile.is-depth-4 {
  opacity: 0;
  transform: translateY(6px) scale(0.78);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-tile.is-depth-1,
.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-tile.is-depth-4 {
  opacity: 0.48;
  transform: translateY(0) scale(0.86);
}

.memory-hall-public-portrait-tile.is-depth-2,
.memory-hall-public-portrait-tile.is-depth-5 {
  opacity: 0;
  transform: translateY(-5px) scale(0.7);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-tile.is-depth-2,
.memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-tile.is-depth-5 {
  opacity: 0.34;
  transform: translateY(0) scale(0.76);
}

.memory-hall-companion-glow {
  position: absolute;
  inset: clamp(92px, 10vh, 128px) clamp(30%, 32vw, 36%) clamp(112px, 14vh, 158px);
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.08);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.16), transparent 30%),
    radial-gradient(circle at 50% 68%, rgba(255, 207, 114, 0.1), transparent 48%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 0 72px rgba(255, 223, 145, 0.12);
  opacity: 0.76;
  pointer-events: none;
}

.memory-hall-companion-glow span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.2);
  border-radius: 999px;
  background: rgba(8, 10, 8, 0.36);
  color: rgba(255, 236, 182, 0.84);
  box-shadow: 0 0 34px rgba(255, 223, 145, 0.18);
  backdrop-filter: blur(14px);
}

.memory-hall-companion-glow small {
  position: absolute;
  bottom: -8px;
  max-width: 180px;
  overflow: hidden;
  color: rgba(255, 236, 182, 0.56);
  font-size: 0.58rem;
  font-weight: 880;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.memory-hall-companion-orbit {
  position: absolute;
  inset: clamp(82px, 9vh, 118px) clamp(18%, 21vw, 28%) clamp(118px, 15vh, 168px);
  z-index: 3;
  pointer-events: none;
}

.memory-hall-companion-orbit::before,
.memory-hall-companion-orbit::after {
  position: absolute;
  inset: 8% 4%;
  border: 1px solid rgba(255, 236, 182, 0.08);
  border-radius: 999px;
  content: "";
  opacity: 0.7;
  transform: rotate(-6deg);
}

.memory-hall-companion-orbit::after {
  inset: 17% 14%;
  border-color: rgba(176, 213, 197, 0.07);
  opacity: 0.56;
  transform: rotate(8deg);
}

.memory-hall-companion-light {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: rgba(255, 248, 232, 0.84);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 560ms ease, transform 680ms ease;
}

.memory-hall-bridge-experience.is-inside .memory-hall-companion-light {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.memory-hall-companion-light i {
  display: block;
  width: clamp(10px, 1.1vw, 16px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.95), rgba(255, 236, 182, 0.54) 42%, rgba(255, 205, 96, 0.18));
  box-shadow:
    0 0 0 5px rgba(255, 236, 182, 0.035),
    0 0 28px rgba(255, 223, 145, 0.22);
}

.memory-hall-companion-light strong {
  max-width: 74px;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.09);
  border-radius: 999px;
  background: rgba(7, 9, 7, 0.32);
  color: rgba(255, 248, 232, 0.68);
  padding: 4px 7px;
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.memory-hall-companion-light.is-cat i {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.96), rgba(255, 221, 182, 0.52) 42%, rgba(235, 176, 111, 0.18));
}

.memory-hall-companion-light.is-sage i,
.memory-hall-companion-light.is-mist i {
  box-shadow:
    0 0 0 5px rgba(176, 213, 197, 0.034),
    0 0 28px rgba(176, 213, 197, 0.18);
}

.memory-hall-companion-light.is-slot-1 {
  top: 16%;
  left: 30%;
  transition-delay: 560ms;
}

.memory-hall-companion-light.is-slot-2 {
  top: 29%;
  left: 14%;
  transition-delay: 610ms;
}

.memory-hall-companion-light.is-slot-3 {
  top: 56%;
  left: 10%;
  transition-delay: 660ms;
}

.memory-hall-companion-light.is-slot-4 {
  top: 82%;
  left: 28%;
  transition-delay: 710ms;
}

.memory-hall-companion-light.is-slot-5 {
  top: 16%;
  left: 70%;
  transition-delay: 760ms;
}

.memory-hall-companion-light.is-slot-6 {
  top: 38%;
  left: 88%;
  transition-delay: 810ms;
}

.memory-hall-companion-light.is-slot-7 {
  top: 68%;
  left: 86%;
  transition-delay: 860ms;
}

.memory-hall-companion-light.is-slot-8 {
  top: 84%;
  left: 66%;
  transition-delay: 910ms;
}

.memory-hall-companion-portraits {
  position: absolute;
  top: clamp(88px, 10vh, 124px);
  left: 50%;
  z-index: 4;
  display: flex;
  width: min(470px, calc(100vw - 132px));
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1vw, 13px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-10px) scale(0.96);
  transition: opacity 620ms ease 580ms, transform 780ms cubic-bezier(0.18, 0.82, 0.24, 1) 580ms;
}

.memory-hall-bridge-experience.is-inside .memory-hall-companion-portraits {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.memory-hall-companion-portrait {
  display: grid;
  width: clamp(34px, 3.3vw, 50px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 22%, rgba(255, 255, 255, 0.34), transparent 34%),
    rgba(9, 10, 8, 0.48);
  color: rgba(255, 236, 182, 0.8);
  box-shadow:
    0 0 0 5px rgba(255, 236, 182, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(255, 223, 145, 0.14);
  backdrop-filter: blur(12px);
}

.memory-hall-companion-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.86;
  filter: saturate(0.92) brightness(0.96);
}

.memory-hall-companion-portrait.is-slot-2,
.memory-hall-companion-portrait.is-slot-5 {
  margin-top: 18px;
}

.memory-hall-companion-portrait.is-slot-3,
.memory-hall-companion-portrait.is-slot-4 {
  margin-top: 32px;
}

.memory-hall-watson-light-ribbons {
  position: absolute;
  inset: clamp(116px, 14vh, 162px) clamp(13%, 16vw, 22%) clamp(128px, 16vh, 176px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition:
    opacity 720ms ease 680ms,
    transform 960ms cubic-bezier(0.18, 0.82, 0.24, 1) 680ms;
}

.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons {
  opacity: 0.68;
  transform: scale(1);
}

.memory-hall-watson-light-ribbons i {
  position: absolute;
  height: 1px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.55), rgba(255, 236, 182, 0.16) 48%, transparent 74%),
    linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.24), rgba(176, 213, 197, 0.12), transparent);
  filter: blur(0.25px);
  opacity: 0.54;
  transform-origin: center center;
}

.memory-hall-watson-light-ribbons i::after {
  position: absolute;
  top: 50%;
  width: clamp(4px, 0.48vw, 7px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.66);
  box-shadow:
    0 0 0 4px rgba(255, 236, 182, 0.04),
    0 0 18px rgba(255, 236, 182, 0.2);
  content: "";
  transform: translateY(-50%);
}

.memory-hall-watson-light-ribbons i:nth-child(1) {
  top: 18%;
  right: 50%;
  left: 0;
  transform: rotate(8deg);
}

.memory-hall-watson-light-ribbons i:nth-child(2) {
  top: 39%;
  right: 52%;
  left: 5%;
  transform: rotate(-3deg);
}

.memory-hall-watson-light-ribbons i:nth-child(3) {
  top: 68%;
  right: 50%;
  left: 2%;
  transform: rotate(-9deg);
}

.memory-hall-watson-light-ribbons i:nth-child(4) {
  top: 18%;
  right: 0;
  left: 50%;
  transform: rotate(-8deg);
}

.memory-hall-watson-light-ribbons i:nth-child(5) {
  top: 41%;
  right: 5%;
  left: 52%;
  transform: rotate(3deg);
}

.memory-hall-watson-light-ribbons i:nth-child(6) {
  top: 70%;
  right: 2%;
  left: 50%;
  transform: rotate(9deg);
}

.memory-hall-watson-light-ribbons i:nth-child(-n + 3)::after {
  right: -2px;
}

.memory-hall-watson-light-ribbons i:nth-child(n + 4)::after {
  left: -2px;
}

.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i {
  animation: none;
}

.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i:nth-child(2),
.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i:nth-child(5) {
  animation-delay: -2.4s;
}

.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i:nth-child(3),
.memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i:nth-child(6) {
  animation-delay: -4.8s;
}

@keyframes memoryHallWatsonRibbonPulse {
  0%,
  100% {
    opacity: 0.32;
    filter: blur(0.35px) brightness(0.9);
  }

  50% {
    opacity: 0.76;
    filter: blur(0.2px) brightness(1.14);
  }
}

.memory-hall-shared-light-path {
  position: absolute;
  inset: clamp(122px, 15vh, 168px) clamp(16%, 19vw, 25%) clamp(126px, 16vh, 178px);
  z-index: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.14), transparent 26%),
    radial-gradient(circle at 28% 56%, rgba(255, 236, 182, 0.08), transparent 22%),
    radial-gradient(circle at 72% 56%, rgba(176, 213, 197, 0.06), transparent 24%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transition: opacity 620ms ease 520ms, transform 840ms cubic-bezier(0.18, 0.82, 0.24, 1) 520ms;
}

.memory-hall-bridge-experience.is-inside .memory-hall-shared-light-path {
  opacity: 1;
  transform: scale(1);
}

.memory-hall-shared-light-path i {
  position: absolute;
  right: 10%;
  left: 10%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.22), rgba(176, 213, 197, 0.12), transparent);
  filter: blur(0.2px);
}

.memory-hall-shared-light-path i:nth-child(1) {
  top: 24%;
  transform: rotate(-7deg);
}

.memory-hall-shared-light-path i:nth-child(2) {
  top: 50%;
}

.memory-hall-shared-light-path i:nth-child(3) {
  top: 76%;
  transform: rotate(7deg);
}

.memory-hall-spatial-line-break {
  display: none;
}

.memory-hall-spatial-niche {
  position: relative;
  z-index: 2;
  display: grid;
  width: auto;
  min-height: 0;
  grid-template-rows: minmax(84px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 229, 165, 0.24);
  border-radius: 7px;
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 248, 232, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(28, 29, 23, 0.84), rgba(5, 6, 5, 0.94));
  color: #fff8e8;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 -22px 52px rgba(0, 0, 0, 0.48),
    0 18px 0 rgba(0, 0, 0, 0.22),
    0 26px 72px rgba(0, 0, 0, 0.46);
  pointer-events: auto;
  transform: translateZ(0);
  backdrop-filter: blur(10px);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.memory-hall-spatial-niche::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.14), transparent 18% 68%, rgba(255, 255, 255, 0.06)),
    linear-gradient(90deg, rgba(255, 236, 182, 0.2), transparent 22% 78%, rgba(255, 236, 182, 0.16));
  content: "";
  opacity: 0.56;
  pointer-events: none;
}

.memory-hall-spatial-niche::after {
  position: absolute;
  right: 10px;
  bottom: 38px;
  left: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.38), transparent);
  content: "";
  pointer-events: none;
}

.memory-hall-spatial-niche:is(:hover, :focus-visible) {
  border-color: rgba(255, 223, 145, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -22px 52px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 223, 145, 0.18),
    0 26px 76px rgba(0, 0, 0, 0.48);
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-3px);
}

.memory-hall-spatial-niche.is-left.is-slot-1 {
  grid-column: 1;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-left.is-slot-2 {
  grid-column: 1;
  grid-row: 2;
}

.memory-hall-spatial-niche.is-left.is-slot-3 {
  grid-column: 1;
  grid-row: 3;
}

.memory-hall-spatial-niche.is-left.is-slot-4 {
  grid-column: 2;
  grid-row: 3;
}

.memory-hall-spatial-niche.is-left.is-slot-5 {
  grid-column: 2;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-right.is-slot-1 {
  grid-column: 6;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-right.is-slot-2 {
  grid-column: 6;
  grid-row: 2;
}

.memory-hall-spatial-niche.is-right.is-slot-3 {
  grid-column: 6;
  grid-row: 3;
}

.memory-hall-spatial-niche.is-right.is-slot-4 {
  grid-column: 5;
  grid-row: 3;
}

.memory-hall-spatial-niche.is-right.is-slot-5 {
  grid-column: 5;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-center.is-slot-custom-1 {
  grid-column: 3;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-center.is-slot-custom-2 {
  grid-column: 4;
  grid-row: 1;
}

.memory-hall-spatial-niche.is-center.is-slot-custom-3 {
  grid-column: 3;
  grid-row: 3;
}

.memory-hall-spatial-niche.is-center.is-slot-custom-4 {
  grid-column: 4;
  grid-row: 3;
}

.memory-hall-spatial-glass {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 0;
  place-items: center;
  padding: 16px 14px 12px;
}

.memory-hall-spatial-glass::before {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 236, 182, 0.08);
  border-radius: 5px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.13), transparent 18% 76%, rgba(255, 255, 255, 0.04)),
    radial-gradient(circle at 50% 0%, rgba(255, 229, 165, 0.08), transparent 54%);
  content: "";
  pointer-events: none;
}

.memory-hall-spatial-glass::after {
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 223, 145, 0.18), transparent),
    linear-gradient(180deg, rgba(255, 236, 182, 0.1), rgba(0, 0, 0, 0.08));
  content: "";
  pointer-events: none;
}

.memory-hall-spatial-generated {
  position: absolute;
  inset: 6px;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 5px;
  background: rgba(255, 248, 232, 0.06);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 18px 42px rgba(0, 0, 0, 0.34);
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-generated {
  inset: 0;
  border: 0;
  border-radius: inherit;
}

.memory-hall-spatial-generated img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-generated img {
  object-position: center bottom;
}

.memory-hall-spatial-niche.has-niche-image {
  grid-template-rows: minmax(132px, 1fr) auto;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 248, 232, 0.22), transparent 42%),
    linear-gradient(180deg, rgba(37, 34, 23, 0.9), rgba(7, 7, 5, 0.96));
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-glass {
  min-height: 132px;
  padding: 0;
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-glass::before {
  inset: 0;
  z-index: 2;
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22% 76%, rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.18), transparent 34%);
  opacity: 0.72;
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-glass::after {
  display: none;
}

.memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque {
  background:
    linear-gradient(180deg, rgba(8, 9, 7, 0.64), rgba(4, 5, 4, 0.82));
}

.memory-hall-spatial-portrait {
  position: relative;
  overflow: hidden;
  display: grid;
  width: clamp(56px, 5.4vw, 76px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.12), rgba(0, 0, 0, 0.22));
  color: rgba(255, 205, 96, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 14px 38px rgba(0, 0, 0, 0.28);
}

.memory-hall-spatial-portrait::before {
  position: absolute;
  inset: 5px;
  z-index: 2;
  border: 1px solid rgba(255, 236, 182, 0.22);
  border-radius: inherit;
  box-shadow: inset 0 0 18px rgba(255, 236, 182, 0.08);
  content: "";
  pointer-events: none;
}

.memory-hall-spatial-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-hall-spatial-memory-card {
  position: absolute;
  bottom: 11px;
  left: 13px;
  z-index: 2;
  display: grid;
  width: clamp(42px, 3.5vw, 54px);
  min-height: 28px;
  align-content: center;
  border: 1px solid rgba(255, 236, 182, 0.24);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 250, 238, 0.92), rgba(215, 201, 177, 0.84));
  color: rgba(61, 48, 30, 0.68);
  padding: 4px 5px;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transform: rotate(-2deg);
}

.memory-hall-spatial-memory-card span {
  overflow: hidden;
  display: -webkit-box;
  font-size: 0.42rem;
  font-weight: 820;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.memory-hall-spatial-candle {
  position: absolute;
  right: 15px;
  bottom: 8px;
  z-index: 3;
  width: 9px;
  height: 18px;
  border-radius: 3px 3px 2px 2px;
  background:
    radial-gradient(circle at 50% -4px, rgba(255, 217, 116, 0.98) 0 3px, rgba(255, 152, 67, 0.68) 4px, transparent 8px),
    linear-gradient(180deg, rgba(255, 247, 221, 0.9), rgba(174, 151, 112, 0.78));
  box-shadow:
    0 -5px 18px rgba(255, 196, 84, 0.44),
    0 8px 18px rgba(0, 0, 0, 0.34);
}

.memory-hall-spatial-flowers {
  position: absolute;
  right: 28px;
  bottom: 9px;
  z-index: 2;
  width: 30px;
  height: 18px;
  border-radius: 999px 999px 4px 4px;
  background:
    radial-gradient(circle at 20% 48%, rgba(255, 252, 238, 0.88) 0 3px, transparent 4px),
    radial-gradient(circle at 46% 36%, rgba(255, 252, 238, 0.88) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 50%, rgba(255, 252, 238, 0.82) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(168, 176, 130, 0.72), rgba(72, 90, 63, 0.28));
  opacity: 0.78;
  filter: blur(0.1px);
}

.memory-hall-spatial-plaque {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 3px;
  border-top: 1px solid rgba(255, 236, 182, 0.12);
  background: rgba(8, 10, 8, 0.48);
  padding: 9px 11px 10px;
}

.memory-hall-spatial-plaque strong,
.memory-hall-spatial-plaque small,
.memory-hall-spatial-plaque em {
  overflow: hidden;
  min-width: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-spatial-plaque strong {
  color: #fff8e8;
  font-size: clamp(0.86rem, 1vw, 1rem);
  font-weight: 940;
}

.memory-hall-spatial-plaque small {
  color: rgba(255, 236, 182, 0.58);
  font-size: 0.64rem;
  font-weight: 780;
}

.memory-hall-spatial-plaque em {
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.13);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.68);
  padding: 3px 6px;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 860;
  text-transform: uppercase;
}

.memory-hall-spatial-niche.is-sage {
  border-color: rgba(185, 212, 160, 0.18);
}

.memory-hall-spatial-niche.is-mist {
  border-color: rgba(154, 197, 210, 0.18);
}

.memory-hall-spatial-niche.is-bronze {
  border-color: rgba(212, 149, 89, 0.18);
}

.memory-hall-spatial-niche.is-marble {
  border-color: rgba(255, 248, 232, 0.18);
}

.memory-hall-spatial-niche.is-frame-linen {
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 248, 232, 0.15), transparent 36%),
    linear-gradient(180deg, rgba(31, 31, 25, 0.88), rgba(5, 6, 5, 0.94));
}

.memory-hall-spatial-niche.is-frame-linen .memory-hall-spatial-glass::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.15), transparent 18% 76%, rgba(255, 255, 255, 0.04)),
    repeating-linear-gradient(90deg, rgba(255, 246, 220, 0.06) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 0%, rgba(255, 229, 165, 0.1), transparent 54%);
}

.memory-hall-spatial-niche.is-frame-marble {
  background:
    radial-gradient(circle at 38% 18%, rgba(255, 248, 232, 0.18), transparent 34%),
    linear-gradient(150deg, rgba(36, 38, 34, 0.9), rgba(7, 8, 8, 0.96));
}

.memory-hall-spatial-niche.is-frame-marble .memory-hall-spatial-portrait {
  border-radius: 9px;
  border-color: rgba(255, 248, 232, 0.34);
}

.memory-hall-spatial-niche.is-frame-halo .memory-hall-spatial-portrait {
  border-color: rgba(255, 205, 96, 0.5);
  box-shadow:
    0 0 0 8px rgba(255, 205, 96, 0.04),
    0 0 42px rgba(255, 205, 96, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 14px 38px rgba(0, 0, 0, 0.28);
}

.memory-hall-spatial-niche.is-frame-wood {
  border-color: rgba(212, 149, 89, 0.28);
  background:
    radial-gradient(circle at 42% 18%, rgba(255, 216, 159, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(34, 26, 18, 0.9), rgba(6, 5, 4, 0.96));
}

.memory-hall-spatial-niche.is-frame-wood .memory-hall-spatial-portrait {
  border-radius: 8px;
  border-color: rgba(223, 163, 89, 0.38);
}

.memory-hall-spatial-niche.is-frame-hero .memory-hall-spatial-portrait {
  border-color: rgba(255, 223, 145, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 223, 145, 0.16),
    0 20px 42px rgba(0, 0, 0, 0.34);
}

.memory-hall-spatial-niche.is-flower-lily .memory-hall-spatial-flowers {
  background:
    radial-gradient(circle at 20% 48%, rgba(255, 252, 238, 0.92) 0 3px, transparent 4px),
    radial-gradient(circle at 46% 36%, rgba(255, 252, 238, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 50%, rgba(255, 252, 238, 0.84) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(168, 176, 130, 0.72), rgba(72, 90, 63, 0.28));
}

.memory-hall-spatial-niche.is-flower-orchid .memory-hall-spatial-flowers {
  background:
    radial-gradient(circle at 18% 44%, rgba(244, 214, 235, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 46% 34%, rgba(255, 241, 226, 0.88) 0 3px, transparent 4px),
    radial-gradient(circle at 72% 52%, rgba(207, 170, 197, 0.82) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(137, 161, 117, 0.68), rgba(60, 82, 55, 0.3));
}

.memory-hall-spatial-niche.is-flower-olive .memory-hall-spatial-flowers {
  background:
    radial-gradient(ellipse at 16% 52%, rgba(204, 215, 170, 0.88) 0 4px, transparent 5px),
    radial-gradient(ellipse at 42% 38%, rgba(180, 197, 141, 0.82) 0 4px, transparent 5px),
    radial-gradient(ellipse at 70% 54%, rgba(226, 233, 197, 0.86) 0 4px, transparent 5px),
    linear-gradient(180deg, rgba(91, 113, 71, 0.76), rgba(45, 61, 42, 0.32));
}

.memory-hall-spatial-niche.is-flower-rose .memory-hall-spatial-flowers {
  background:
    radial-gradient(circle at 20% 48%, rgba(237, 183, 163, 0.9) 0 3px, transparent 4px),
    radial-gradient(circle at 46% 36%, rgba(255, 225, 206, 0.88) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 50%, rgba(213, 145, 122, 0.84) 0 3px, transparent 4px),
    linear-gradient(180deg, rgba(143, 163, 106, 0.7), rgba(72, 90, 63, 0.28));
}

.memory-hall-spatial-feature {
  grid-column: 2 / 6;
  grid-row: 2;
  z-index: 4;
  width: auto;
  min-height: clamp(330px, 38vh, 388px);
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  border-color: rgba(255, 223, 145, 0.46);
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 245, 214, 0.2), transparent 38%),
    radial-gradient(circle at 72% 24%, rgba(255, 223, 145, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(54, 49, 33, 0.92), rgba(8, 9, 7, 0.98)),
    #050605;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 223, 145, 0.12),
    0 18px 0 rgba(0, 0, 0, 0.26),
    0 34px 100px rgba(0, 0, 0, 0.58);
  transform: translateZ(24px);
  isolation: isolate;
}

.memory-hall-spatial-feature:is(:hover, :focus-visible) {
  transform: translateY(-3px) translateZ(24px);
}

.memory-hall-spatial-feature .memory-hall-spatial-glass {
  grid-area: 1 / 1;
  min-height: clamp(304px, 35vh, 362px);
  padding: 0;
}

.memory-hall-spatial-feature.has-niche-image .memory-hall-spatial-glass {
  grid-area: 1 / 1;
  min-height: clamp(304px, 35vh, 362px);
  padding: 0;
}

.memory-hall-spatial-feature .memory-hall-spatial-portrait {
  width: 86px;
  border-radius: 10px;
}

.memory-hall-spatial-feature .memory-hall-spatial-memory-card {
  left: 24px;
  bottom: 13px;
  width: 82px;
  min-height: 34px;
  padding: 5px 6px;
}

.memory-hall-spatial-feature .memory-hall-spatial-memory-card span {
  font-size: 0.5rem;
  -webkit-line-clamp: 2;
}

.memory-hall-spatial-feature .memory-hall-spatial-candle {
  right: 10px;
  bottom: 15px;
}

.memory-hall-spatial-feature .memory-hall-spatial-flowers {
  right: 18px;
  bottom: 15px;
}

.memory-hall-spatial-feature .memory-hall-spatial-plaque {
  position: absolute;
  right: clamp(12px, 1.4vw, 20px);
  top: clamp(12px, 1.4vw, 20px);
  bottom: auto;
  z-index: 3;
  width: min(214px, calc(100% - 32px));
  align-content: flex-start;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 7px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 236, 182, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(6, 7, 6, 0.58), rgba(4, 5, 4, 0.76));
  padding: 12px 13px;
  backdrop-filter: blur(18px);
}

.memory-hall-spatial-feature .memory-hall-spatial-plaque strong {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  overflow: visible;
  line-height: 1.12;
}

.memory-hall-spatial-feature .memory-hall-spatial-plaque small,
.memory-hall-spatial-feature .memory-hall-spatial-plaque em {
  overflow: visible;
  line-height: 1.15;
}

.memory-hall-spatial-feature > svg {
  display: none;
}

.memory-hall-spatial-niche-stage {
  grid-template-columns: repeat(auto-fill, minmax(clamp(178px, 15vw, 240px), 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  grid-auto-flow: dense;
  align-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
  padding: clamp(88px, 10vh, 118px) clamp(36px, 4.8vw, 86px) clamp(136px, 16vh, 172px);
  scrollbar-color: rgba(255, 223, 145, 0.26) transparent;
  scrollbar-width: thin;
}

.memory-hall-spatial-niche-stage::-webkit-scrollbar {
  width: 8px;
}

.memory-hall-spatial-niche-stage::-webkit-scrollbar-track {
  background: transparent;
}

.memory-hall-spatial-niche-stage::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 10, 8, 0.72);
  border-radius: 999px;
  background: rgba(255, 223, 145, 0.3);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche,
.memory-hall-spatial-niche-stage .memory-hall-spatial-feature,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-center {
  grid-column: auto;
  grid-row: auto;
  width: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  transform: none;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche:is(:hover, :focus-visible),
.memory-hall-spatial-niche-stage .memory-hall-spatial-feature:is(:hover, :focus-visible) {
  transform: translateY(-3px);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-feature {
  grid-column-start: auto !important;
  grid-column-end: span 2 !important;
  order: -1;
  grid-template-rows: 1fr;
  border-color: rgba(255, 223, 145, 0.38);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-feature .memory-hall-spatial-glass,
.memory-hall-spatial-niche-stage .memory-hall-spatial-feature.has-niche-image .memory-hall-spatial-glass,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-glass {
  min-height: 0;
  height: 100%;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image {
  grid-template-rows: 1fr;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image::before {
  opacity: 0.12;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-glass::before {
  opacity: 0.18;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 4;
  display: grid;
  width: auto;
  max-width: calc(100% - 20px);
  gap: 2px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(4, 5, 4, 0.74), rgba(4, 5, 4, 0.36) 72%, rgba(4, 5, 4, 0.1)),
    radial-gradient(circle at 10% 50%, rgba(255, 236, 182, 0.16), transparent 38%);
  padding: 7px 10px 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-generated img {
  object-fit: cover;
  object-position: center center;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(0.72rem, 0.86vw, 0.9rem);
  line-height: 1;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.62);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque small,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque em {
  overflow: hidden;
  max-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: max-height 180ms ease, opacity 160ms ease, transform 180ms ease;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image:is(:hover, :focus-visible) .memory-hall-spatial-plaque {
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.72), rgba(3, 4, 3, 0.82)),
    radial-gradient(circle at 12% 0%, rgba(255, 236, 182, 0.14), transparent 38%);
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image:is(:hover, :focus-visible) .memory-hall-spatial-plaque small,
.memory-hall-spatial-niche-stage .memory-hall-spatial-niche.has-niche-image:is(:hover, :focus-visible) .memory-hall-spatial-plaque em {
  max-height: 1.2em;
  opacity: 1;
  transform: translateY(0);
}

.memory-hall-create-trigger {
  position: absolute;
  top: clamp(20px, 3vh, 36px);
  right: clamp(18px, 3vw, 44px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255, 223, 145, 0.2);
  border-radius: 999px;
  background: rgba(9, 12, 10, 0.62);
  color: rgba(255, 248, 232, 0.86);
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 880;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 420ms ease 420ms, transform 520ms ease 420ms, border-color 180ms ease, background 180ms ease;
  backdrop-filter: blur(16px);
}

.memory-hall-bridge-experience.is-inside .memory-hall-create-trigger {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.memory-hall-create-trigger:is(:hover, :focus-visible) {
  border-color: rgba(255, 223, 145, 0.48);
  background: rgba(24, 23, 16, 0.78);
  outline: none;
}

.memory-hall-spatial-niche.is-ai-custom {
  border-color: rgba(255, 223, 145, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    inset 0 -22px 52px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 223, 145, 0.1),
    0 0 54px rgba(255, 205, 96, 0.1),
    0 26px 72px rgba(0, 0, 0, 0.46);
}

.memory-hall-spatial-niche.is-public-room {
  border-color: rgba(255, 244, 210, 0.34);
}

.memory-hall-spatial-niche.is-public-room .memory-hall-spatial-plaque em {
  border-color: rgba(176, 213, 197, 0.22);
  color: rgba(222, 246, 233, 0.76);
}

.memory-hall-spatial-niche.is-public-room:is(:hover, :focus-visible) {
  border-color: rgba(255, 244, 210, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -22px 52px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 244, 210, 0.2),
    0 0 58px rgba(176, 213, 197, 0.14),
    0 28px 78px rgba(0, 0, 0, 0.5);
}

.memory-hall-public-room-river {
  position: absolute;
  right: clamp(48px, 5.2vw, 92px);
  bottom: clamp(24px, 3.1vh, 38px);
  left: clamp(48px, 5.2vw, 92px);
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.982);
  transition:
    opacity 520ms ease 720ms,
    transform 720ms cubic-bezier(0.18, 0.82, 0.24, 1) 720ms;
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-room-river {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.memory-hall-public-room-river-glow {
  position: absolute;
  right: 8%;
  bottom: -42%;
  left: 8%;
  height: 98px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 236, 182, 0.16), transparent 68%);
  filter: blur(18px);
  opacity: 0.62;
  pointer-events: none;
}

.memory-hall-public-room-river-track {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  gap: clamp(7px, 0.85vw, 12px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 9px clamp(8px, 1.2vw, 14px);
  scroll-padding-inline: 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.memory-hall-public-room-river-track::-webkit-scrollbar {
  display: none;
}

.memory-hall-public-room-card {
  position: relative;
  display: block;
  flex: 0 0 clamp(54px, 5vw, 78px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 6px;
  background: rgba(7, 8, 7, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 14px 34px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(255, 223, 145, 0.055);
  scroll-snap-align: center;
  text-decoration: none;
  transform: translateY(0);
  transition:
    border-color 160ms ease,
    box-shadow 180ms ease,
    filter 180ms ease,
    transform 180ms ease;
}

.memory-hall-public-room-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 248, 232, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 18px 42px rgba(0, 0, 0, 0.36),
    0 0 32px rgba(255, 236, 182, 0.14);
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-3px);
}

.memory-hall-public-room-image,
.memory-hall-public-room-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.memory-hall-public-room-image img {
  object-fit: cover;
  object-position: center center;
}

.memory-hall-public-room-image::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28% 58%, rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.18), transparent 38%);
  content: "";
}

.memory-hall-public-room-card.is-cat .memory-hall-public-room-image::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28% 58%, rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 50% 18%, rgba(255, 221, 182, 0.2), transparent 38%);
}

.memory-hall-public-room-card.is-tone-2,
.memory-hall-public-room-card.is-tone-5 {
  border-color: rgba(176, 213, 197, 0.18);
}

.memory-hall-public-room-label {
  position: absolute;
  right: 5px;
  bottom: 5px;
  left: 5px;
  z-index: 2;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background: rgba(4, 5, 4, 0.55);
  padding: 4px 5px;
  text-align: center;
  backdrop-filter: blur(10px);
}

.memory-hall-public-room-label strong,
.memory-hall-public-room-label small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.9);
  font-size: 0.56rem;
  font-weight: 880;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-public-room-label small {
  max-height: 0;
  color: rgba(222, 246, 233, 0.72);
  font-size: 0.48rem;
  opacity: 0;
  transition: max-height 160ms ease, opacity 160ms ease;
}

.memory-hall-public-room-card:is(:hover, :focus-visible) .memory-hall-public-room-label {
  border-radius: 6px;
}

.memory-hall-public-room-card:is(:hover, :focus-visible) .memory-hall-public-room-label small {
  max-height: 1em;
  opacity: 1;
}

.memory-hall-public-sky-garden {
  position: absolute;
  inset: clamp(82px, 9vh, 120px) clamp(34px, 4vw, 86px) clamp(114px, 13vh, 158px);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 760ms ease 760ms,
    transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1) 760ms;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 22%, rgba(0, 0, 0, 0.86) 38% 82%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 22%, rgba(0, 0, 0, 0.86) 38% 82%, transparent 100%);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-sky-garden {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.memory-hall-public-sky-veil {
  position: absolute;
  inset: 4% 8% 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 248, 232, 0.1), transparent 34%),
    radial-gradient(circle at 24% 58%, rgba(255, 236, 182, 0.08), transparent 26%),
    radial-gradient(circle at 76% 58%, rgba(176, 213, 197, 0.07), transparent 28%);
  filter: blur(12px);
  opacity: 0.7;
}

.memory-hall-public-sky-petal {
  position: absolute;
  top: var(--memory-hall-public-sky-y);
  left: var(--memory-hall-public-sky-x);
  display: block;
  width: clamp(34px, 3.7vw, 62px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 6px;
  background: rgba(7, 8, 7, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.26),
    0 0 28px rgba(255, 236, 182, 0.08);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-public-sky-rotate))
    scale(var(--memory-hall-public-sky-scale));
  transition:
    opacity 520ms ease var(--memory-hall-public-sky-delay),
    transform 760ms cubic-bezier(0.18, 0.82, 0.24, 1) var(--memory-hall-public-sky-delay);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-sky-petal {
  opacity: calc(var(--memory-hall-public-sky-scale) * 0.72);
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-public-sky-rotate))
    scale(var(--memory-hall-public-sky-scale));
}

.memory-hall-public-sky-petal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.92) brightness(0.92);
}

.memory-hall-public-sky-petal::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24% 62%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 16%, rgba(255, 248, 232, 0.18), transparent 36%);
  content: "";
}

.memory-hall-public-sky-petal.is-cat::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24% 62%, rgba(0, 0, 0, 0.42)),
    radial-gradient(circle at 50% 16%, rgba(255, 221, 182, 0.2), transparent 36%);
}

.memory-hall-public-sky-petal.is-tone-2,
.memory-hall-public-sky-petal.is-tone-5 {
  border-color: rgba(176, 213, 197, 0.15);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 10px 30px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(176, 213, 197, 0.08);
}

.memory-hall-public-directory-trigger {
  position: absolute;
  top: clamp(62px, 7.4vh, 82px);
  right: clamp(18px, 3vw, 44px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(176, 213, 197, 0.2);
  border-radius: 999px;
  background: rgba(9, 12, 10, 0.58);
  color: rgba(255, 248, 232, 0.84);
  padding: 8px 11px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 880;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 420ms ease 500ms, transform 520ms ease 500ms, border-color 180ms ease, background 180ms ease;
  backdrop-filter: blur(16px);
}

.memory-hall-bridge-experience.is-inside .memory-hall-public-directory-trigger {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.memory-hall-public-directory-trigger:is(:hover, :focus-visible) {
  border-color: rgba(222, 246, 233, 0.46);
  background: rgba(19, 25, 20, 0.78);
  outline: none;
}

.memory-hall-public-directory-trigger small {
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.08);
  color: rgba(222, 246, 233, 0.82);
  font-size: 0.58rem;
  font-weight: 900;
}

.memory-hall-public-directory {
  position: absolute;
  right: clamp(16px, 3vw, 44px);
  bottom: max(112px, env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  width: min(520px, calc(100vw - 32px));
  max-height: min(610px, calc(100svh - 154px));
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 10px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 236, 182, 0.16), transparent 38%),
    radial-gradient(circle at 100% 14%, rgba(176, 213, 197, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(19, 21, 17, 0.94), rgba(6, 7, 6, 0.97));
  color: #fff8e8;
  padding: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035),
    0 36px 126px rgba(0, 0, 0, 0.66);
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px) scale(0.98);
  transition: opacity 220ms ease, transform 240ms ease;
  backdrop-filter: blur(26px) saturate(118%);
}

.memory-hall-public-directory.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0) scale(1);
}

.memory-hall-public-directory.has-directory-search {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.memory-hall-public-directory-head {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 5px;
  padding-right: 38px;
}

.memory-hall-public-directory-head span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: rgba(222, 246, 233, 0.72);
  font-size: 0.64rem;
  font-weight: 880;
  line-height: 1;
  text-transform: uppercase;
}

.memory-hall-public-directory-head strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(1.05rem, 1.4vw, 1.42rem);
  font-weight: 930;
  line-height: 1.08;
}

.memory-hall-public-directory-head button {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 248, 232, 0.78);
  cursor: pointer;
}

.memory-hall-public-directory-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 248, 232, 0.88);
  padding: 0 13px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 780;
}

.memory-hall-public-directory-search input::placeholder {
  color: rgba(255, 248, 232, 0.44);
}

.memory-hall-public-directory-search input:focus {
  border-color: rgba(255, 236, 182, 0.42);
  outline: none;
}

.memory-hall-public-directory-filters {
  display: flex;
  min-width: 0;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.memory-hall-public-directory-filters::-webkit-scrollbar {
  display: none;
}

.memory-hall-public-directory-filters button {
  display: inline-flex;
  min-height: 32px;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255, 236, 182, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 248, 232, 0.68);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 860;
  cursor: pointer;
}

.memory-hall-public-directory-filters button.is-selected {
  border-color: rgba(255, 236, 182, 0.32);
  background: rgba(255, 236, 182, 0.1);
  color: rgba(255, 248, 232, 0.94);
}

.memory-hall-public-directory-reset {
  display: inline-flex;
  min-height: 32px;
  width: fit-content;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(222, 246, 233, 0.14);
  border-radius: 999px;
  background: rgba(222, 246, 233, 0.07);
  color: rgba(222, 246, 233, 0.8);
  padding: 0 10px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 860;
  cursor: pointer;
}

.memory-hall-public-directory-reset:is(:hover, :focus-visible) {
  border-color: rgba(222, 246, 233, 0.34);
  background: rgba(222, 246, 233, 0.11);
  color: rgba(255, 248, 232, 0.94);
  outline: none;
}

.memory-hall-public-directory-grid {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 9px;
  overflow: hidden auto;
  padding: 1px 2px 4px;
  scrollbar-color: rgba(255, 223, 145, 0.32) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.memory-hall-public-directory-card {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.16);
  border-radius: 7px;
  background: rgba(7, 8, 7, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 34px rgba(0, 0, 0, 0.26);
  text-decoration: none;
  transition: border-color 160ms ease, filter 180ms ease, transform 180ms ease;
}

.memory-hall-public-directory-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 248, 232, 0.58);
  filter: brightness(1.08);
  outline: none;
  transform: translateY(-2px);
}

.memory-hall-public-directory-card-image,
.memory-hall-public-directory-card-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.memory-hall-public-directory-card-image img {
  object-fit: cover;
  object-position: center center;
}

.memory-hall-public-directory-card-image::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26% 58%, rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 50% 14%, rgba(255, 248, 232, 0.16), transparent 38%);
  content: "";
}

.memory-hall-public-directory-card.is-cat .memory-hall-public-directory-card-image::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 26% 58%, rgba(0, 0, 0, 0.5)),
    radial-gradient(circle at 50% 14%, rgba(255, 221, 182, 0.18), transparent 38%);
}

.memory-hall-public-directory-card-name {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 7px;
  background: rgba(4, 5, 4, 0.58);
  padding: 6px 7px;
  backdrop-filter: blur(10px);
}

.memory-hall-public-directory-card-name strong,
.memory-hall-public-directory-card-name small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.94);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-public-directory-card-name small {
  color: rgba(222, 246, 233, 0.72);
  font-size: 0.55rem;
  font-weight: 760;
}

.memory-hall-public-directory-empty {
  display: grid;
  min-height: 116px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 248, 232, 0.64);
  padding: 16px;
  font-size: 0.76rem;
  font-weight: 760;
  text-align: center;
}

.memory-hall-public-directory-sentinel {
  grid-column: 1 / -1;
  display: block;
  height: 1px;
  margin-top: -1px;
  opacity: 0;
  pointer-events: none;
}

.memory-hall-public-directory-more {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 2px;
}

.memory-hall-public-directory-more button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.18);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.08);
  color: rgba(255, 248, 232, 0.86);
  padding: 0 13px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 880;
  cursor: pointer;
}

.memory-hall-public-directory-more button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.memory-hall-public-directory-more button:not(:disabled):is(:hover, :focus-visible) {
  border-color: rgba(255, 248, 232, 0.42);
  background: rgba(255, 236, 182, 0.12);
  outline: none;
}

.memory-hall-public-directory-more span {
  min-width: 0;
  color: rgba(255, 248, 232, 0.6);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.memory-hall-spatial-niche.is-ai-custom .memory-hall-spatial-glass::before {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.17), transparent 18% 76%, rgba(255, 255, 255, 0.05)),
    radial-gradient(circle at 50% 0%, rgba(255, 229, 165, 0.15), transparent 54%),
    radial-gradient(circle at 22% 20%, rgba(255, 205, 96, 0.12), transparent 34%);
}

.memory-hall-creator {
  position: absolute;
  top: clamp(88px, 11vh, 118px);
  right: clamp(16px, 3vw, 44px);
  bottom: max(142px, env(safe-area-inset-bottom));
  z-index: 10;
  width: min(366px, calc(100vw - 32px));
  max-height: none;
  overflow: hidden auto;
  border: 1px solid rgba(255, 223, 145, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 223, 145, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(20, 22, 17, 0.94), rgba(6, 7, 6, 0.97));
  color: #fff8e8;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 34px 120px rgba(0, 0, 0, 0.64);
  opacity: 0;
  pointer-events: none;
  transform: translateX(16px) scale(0.98);
  transition: opacity 220ms ease, transform 240ms ease;
  backdrop-filter: blur(24px);
  scrollbar-color: rgba(255, 223, 145, 0.32) rgba(255, 255, 255, 0.04);
  scrollbar-width: thin;
}

.memory-hall-creator::-webkit-scrollbar {
  width: 8px;
}

.memory-hall-creator::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

.memory-hall-creator::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 10, 8, 0.85);
  border-radius: 999px;
  background: rgba(255, 223, 145, 0.34);
}

.memory-hall-creator.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.memory-hall-creator-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 236, 182, 0.12);
  background: rgba(10, 12, 9, 0.82);
  padding: 12px 13px;
  backdrop-filter: blur(18px);
}

.memory-hall-creator-head span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 900;
}

.memory-hall-creator-head button,
.memory-hall-creator-row button,
.memory-hall-creator-mode button,
.memory-hall-creator-choice button,
.memory-hall-creator-submit,
.memory-hall-creator-photo {
  font: inherit;
}

.memory-hall-creator-head button {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 248, 232, 0.82);
}

.memory-hall-creator-form {
  display: grid;
  gap: 11px;
  padding: 12px;
}

.memory-hall-creator-intro {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(255, 236, 182, 0.11);
  border-radius: 7px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 223, 145, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.035);
  padding: 11px 12px;
}

.memory-hall-creator-intro strong {
  color: #fff8e8;
  font-size: 0.82rem;
  font-weight: 920;
  line-height: 1.18;
}

.memory-hall-creator-intro p {
  margin: 0;
  color: rgba(255, 248, 232, 0.62);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.45;
}

.memory-hall-creator-preview {
  display: grid;
  min-height: 172px;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.09);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(255, 230, 170, 0.05) 1px, transparent 1px) 0 0 / 54px 100%,
    linear-gradient(180deg, rgba(255, 230, 170, 0.04) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18));
  padding: 12px;
}

.memory-hall-creator-preview .memory-hall-spatial-niche {
  position: relative;
  inset: auto;
  grid-column: auto;
  grid-row: auto;
  width: min(210px, 100%);
  min-height: 150px;
  transform: none;
}

.memory-hall-creator-field {
  display: grid;
  gap: 6px;
}

.memory-hall-creator-field span,
.memory-hall-creator-choice legend {
  color: rgba(255, 248, 232, 0.6);
  font-size: 0.66rem;
  font-weight: 860;
}

.memory-hall-creator-field input,
.memory-hall-creator-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.22);
  color: #fff8e8;
  padding: 10px 11px;
  font-size: 0.84rem;
  font-weight: 760;
  outline: none;
}

.memory-hall-creator-field input[aria-invalid="true"] {
  border-color: rgba(255, 155, 128, 0.52);
  box-shadow: 0 0 0 3px rgba(255, 118, 84, 0.12);
}

.memory-hall-creator-field input:focus,
.memory-hall-creator-field textarea:focus {
  border-color: rgba(255, 223, 145, 0.42);
  box-shadow: 0 0 0 3px rgba(255, 223, 145, 0.1);
}

.memory-hall-creator-field textarea {
  resize: vertical;
}

.memory-hall-creator-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.memory-hall-creator-mode {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.memory-hall-creator-row button,
.memory-hall-creator-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 7px;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 248, 232, 0.78);
  padding: 9px 10px;
  font-size: 0.74rem;
  font-weight: 860;
}

.memory-hall-creator-row button.is-selected,
.memory-hall-creator-mode button.is-selected {
  border-color: rgba(255, 223, 145, 0.42);
  background: rgba(255, 223, 145, 0.12);
  color: #fff8e8;
}

.memory-hall-creator-ai-note,
.memory-hall-creator-status {
  margin: 0;
  color: rgba(255, 248, 232, 0.6);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.45;
}

.memory-hall-creator-advanced {
  overflow: hidden;
  border: 1px solid rgba(255, 236, 182, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}

.memory-hall-creator-advanced summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 248, 232, 0.66);
  padding: 10px 11px;
  font-size: 0.68rem;
  font-weight: 860;
  cursor: pointer;
  list-style: none;
}

.memory-hall-creator-advanced summary::-webkit-details-marker {
  display: none;
}

.memory-hall-creator-advanced summary::after {
  content: "+";
  display: grid;
  width: 20px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 236, 182, 0.12);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.64);
  font-size: 0.74rem;
  line-height: 1;
}

.memory-hall-creator-advanced[open] summary {
  border-bottom: 1px solid rgba(255, 236, 182, 0.1);
  color: #fff8e8;
}

.memory-hall-creator-advanced[open] summary::after {
  content: "-";
}

.memory-hall-creator-advanced-body {
  display: grid;
  gap: 11px;
  padding: 11px;
}

.memory-hall-creator-photo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  border: 1px dashed rgba(255, 223, 145, 0.32);
  border-radius: 7px;
  background: rgba(255, 223, 145, 0.06);
  color: rgba(255, 248, 232, 0.82);
  padding: 10px 11px;
  font-size: 0.76rem;
  font-weight: 860;
  cursor: pointer;
}

.memory-hall-creator-photo span {
  overflow: hidden;
  min-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-creator-choice {
  min-width: 0;
  border: 0;
  padding: 0;
}

.memory-hall-creator-choice div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 6px;
}

.memory-hall-creator-choice button {
  display: grid;
  min-width: 0;
  gap: 5px;
  border: 1px solid rgba(255, 236, 182, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 248, 232, 0.72);
  padding: 7px 5px;
  font-size: 0.62rem;
  font-weight: 840;
}

.memory-hall-creator-choice button span {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255, 236, 182, 0.14), rgba(0, 0, 0, 0.2));
}

.memory-hall-creator-choice button.is-selected {
  border-color: rgba(255, 223, 145, 0.42);
  background: rgba(255, 223, 145, 0.1);
  color: #fff8e8;
}

.memory-hall-creator-choice button.is-frame-wood span {
  background: linear-gradient(135deg, rgba(115, 71, 37, 0.7), rgba(255, 205, 128, 0.18));
}

.memory-hall-creator-choice button.is-frame-marble span {
  background: linear-gradient(135deg, rgba(255, 248, 232, 0.42), rgba(63, 68, 62, 0.48));
}

.memory-hall-creator-choice button.is-frame-halo span {
  background: radial-gradient(circle, rgba(255, 205, 96, 0.7), rgba(255, 205, 96, 0.08) 58%, rgba(0, 0, 0, 0.2));
}

.memory-hall-creator-choice button.is-flower-orchid span {
  background: linear-gradient(135deg, rgba(230, 185, 221, 0.72), rgba(90, 114, 70, 0.45));
}

.memory-hall-creator-choice button.is-flower-olive span {
  background: linear-gradient(135deg, rgba(190, 207, 150, 0.72), rgba(58, 79, 44, 0.52));
}

.memory-hall-creator-choice button.is-flower-rose span {
  background: linear-gradient(135deg, rgba(226, 152, 128, 0.78), rgba(89, 101, 60, 0.5));
}

.memory-hall-creator-submit {
  border: 1px solid rgba(255, 223, 145, 0.48);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255, 223, 145, 0.94), rgba(194, 139, 48, 0.94));
  color: #19140b;
  padding: 11px 12px;
  font-size: 0.78rem;
  font-weight: 940;
}

.memory-hall-creator-saved {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(166, 225, 184, 0.2);
  border-radius: 7px;
  background:
    radial-gradient(circle at 14% 0%, rgba(166, 225, 184, 0.14), transparent 40%),
    rgba(166, 225, 184, 0.055);
  padding: 11px 12px;
}

.memory-hall-creator-saved strong {
  color: #ecfff2;
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1.2;
}

.memory-hall-creator-saved p {
  margin: 0;
  color: rgba(236, 255, 242, 0.66);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.42;
}

.memory-hall-creator-saved dl {
  display: grid;
  gap: 6px;
  margin: 0;
}

.memory-hall-creator-saved div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
}

.memory-hall-creator-saved dt,
.memory-hall-creator-saved dd {
  min-width: 0;
  margin: 0;
  font-size: 0.62rem;
  line-height: 1.2;
}

.memory-hall-creator-saved dt {
  color: rgba(236, 255, 242, 0.48);
  font-weight: 860;
  text-transform: uppercase;
}

.memory-hall-creator-saved dd {
  overflow-wrap: anywhere;
  color: rgba(236, 255, 242, 0.86);
  font-weight: 840;
}

@media (max-width: 1100px) {
  .memory-hall-spatial-niche.is-slot-4 {
    display: grid;
  }

  .memory-hall-spatial-feature {
    min-height: 286px;
    grid-template-columns: 1fr;
  }

  .memory-hall-spatial-feature .memory-hall-spatial-glass,
  .memory-hall-spatial-feature.has-niche-image .memory-hall-spatial-glass {
    min-height: 258px;
  }
}

@media (max-width: 900px) {
  .memory-hall-spatial-niche-stage {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    overflow-y: auto;
    padding: 82px 12px 224px;
    pointer-events: auto;
    scrollbar-width: none;
  }

  .memory-hall-companion-glow {
    inset: 198px 12% auto;
    height: 176px;
    opacity: 0.58;
  }

  .memory-hall-companion-glow small {
    display: none;
  }

  .memory-hall-companion-orbit {
    inset: 156px 18px auto;
    height: 320px;
    opacity: 0.78;
  }

  .memory-hall-companion-orbit::before,
  .memory-hall-companion-orbit::after {
    inset: 14% 10%;
  }

  .memory-hall-companion-light strong {
    display: none;
  }

  .memory-hall-companion-light i {
    width: 11px;
  }

  .memory-hall-companion-portraits {
    display: none;
  }

  .memory-hall-watson-light-ribbons {
    inset: 170px 8px 214px;
    opacity: 0;
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons {
    opacity: 0.34;
  }

  .memory-hall-watson-light-ribbons i:nth-child(1),
  .memory-hall-watson-light-ribbons i:nth-child(3),
  .memory-hall-watson-light-ribbons i:nth-child(4),
  .memory-hall-watson-light-ribbons i:nth-child(6) {
    display: none;
  }

  .memory-hall-distant-companions {
    inset: 82px 8px 152px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 18px;
    gap: 8px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.06) 0 32%, rgba(0, 0, 0, 0.68) 48% 82%, transparent 100%);
    mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.06) 0 32%, rgba(0, 0, 0, 0.68) 48% 82%, transparent 100%);
  }

  .memory-hall-distant-companions::before {
    inset: 2% -12% 20%;
    opacity: 0.34;
    transform: perspective(720px) rotateX(2deg) scaleX(1.14);
  }

  .memory-hall-distant-companions::after {
    bottom: -14%;
    height: 32%;
    opacity: 0.3;
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-distant-companions {
    opacity: 0.32;
  }

  .memory-hall-companion-card-field {
    inset: 88px -18px 156px;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 6px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.04) 0 26%, rgba(0, 0, 0, 0.7) 48% 82%, transparent 100%);
    mask-image: radial-gradient(ellipse at 50% 42%, rgba(0, 0, 0, 0.04) 0 26%, rgba(0, 0, 0, 0.7) 48% 82%, transparent 100%);
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-companion-card-field {
    opacity: 0.25;
  }

  .memory-hall-public-continuation-field {
    inset: 90px -20px 160px;
    grid-template-columns: repeat(18, minmax(0, 1fr));
    gap: 6px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 42%, transparent 0 24%, rgba(0, 0, 0, 0.58) 48% 80%, transparent 100%);
    mask-image: radial-gradient(ellipse at 50% 42%, transparent 0 24%, rgba(0, 0, 0, 0.58) 48% 80%, transparent 100%);
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-public-continuation-field {
    opacity: 0.24;
  }

  .memory-hall-public-continuation-tile:nth-child(n + 55) {
    display: none;
  }

  .memory-hall-public-portrait-field {
    inset: 96px -14px 170px;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 42%, transparent 0 24%, rgba(0, 0, 0, 0.66) 48% 80%, transparent 100%);
    mask-image: radial-gradient(ellipse at 50% 42%, transparent 0 24%, rgba(0, 0, 0, 0.66) 48% 80%, transparent 100%);
  }

  .memory-hall-bridge-experience.is-inside .memory-hall-public-portrait-field {
    opacity: 0.36;
  }

  .memory-hall-public-portrait-tile:nth-child(n + 31) {
    display: none;
  }

  .memory-hall-bridge-experience.is-threshold .memory-hall-spatial-niche-stage {
    pointer-events: none;
  }

  .memory-hall-spatial-niche-stage::-webkit-scrollbar {
    display: none;
  }

  .memory-hall-spatial-niche,
  .memory-hall-spatial-niche.is-left,
  .memory-hall-spatial-niche.is-right,
  .memory-hall-spatial-feature {
    position: relative;
    inset: auto;
    grid-column: auto !important;
    grid-row: auto !important;
    right: auto;
    left: auto;
    top: auto;
    width: auto;
    min-height: 144px;
    grid-template-rows: 82px auto;
    transform: none;
  }

  .memory-hall-spatial-niche:is(:hover, :focus-visible),
  .memory-hall-spatial-niche.is-left:is(:hover, :focus-visible),
  .memory-hall-spatial-niche.is-right:is(:hover, :focus-visible),
  .memory-hall-spatial-feature:is(:hover, :focus-visible) {
    transform: translateY(-2px);
  }

  .memory-hall-spatial-niche.is-slot-4,
  .memory-hall-spatial-niche.is-slot-5 {
    display: grid;
  }

  .memory-hall-spatial-niche.memory-hall-spatial-feature {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    order: -1;
    min-height: 208px;
  }

  .memory-hall-spatial-glass {
    padding: 14px 12px 10px;
  }

  .memory-hall-spatial-feature .memory-hall-spatial-glass {
    padding: 0;
  }

  .memory-hall-spatial-feature.has-niche-image .memory-hall-spatial-glass {
    min-height: 184px;
    padding: 0;
  }

  .memory-hall-spatial-feature .memory-hall-spatial-portrait {
    width: 70px;
  }

  .memory-hall-spatial-plaque {
    padding: 10px 12px 12px;
  }

  .memory-hall-spatial-portrait {
    width: 54px;
  }

  .memory-hall-spatial-plaque strong {
    font-size: 0.88rem;
  }

  .memory-hall-spatial-plaque small {
    font-size: 0.6rem;
  }

  .memory-hall-spatial-plaque em {
    font-size: 0.5rem;
  }
}

.memory-hall-arrival-guide:focus {
  outline: none;
}

.memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  display: grid;
}

@media (min-width: 901px) {
  .memory-hall-bridge-experience.is-inside .memory-hall-spatial-niche-stage {
    grid-template-columns:
      minmax(132px, 0.7fr)
      minmax(132px, 0.7fr)
      minmax(260px, 0.92fr)
      minmax(132px, 0.7fr)
      minmax(132px, 0.7fr);
    grid-template-rows:
      minmax(150px, 0.82fr)
      minmax(190px, 1fr)
      minmax(150px, 0.82fr);
    align-content: center;
    align-items: stretch;
    overflow: hidden;
    padding:
      clamp(92px, 10vh, 118px)
      clamp(42px, 5vw, 78px)
      clamp(126px, 14vh, 158px);
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center {
    grid-column: 3 !important;
    grid-row: 1 / 4 !important;
    order: 0;
    justify-self: center;
    align-self: center;
    width: min(100%, 360px, calc((100svh - 246px) * 0.75));
    min-height: 0;
    aspect-ratio: 3 / 4 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche:not(.memory-hall-spatial-feature) {
    min-height: 0;
    aspect-ratio: 3 / 4 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left.is-slot-1 {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left.is-slot-2 {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left.is-slot-3 {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left.is-slot-4 {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-left.is-slot-5 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right.is-slot-1 {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right.is-slot-2 {
    grid-column: 5 !important;
    grid-row: 2 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right.is-slot-3 {
    grid-column: 5 !important;
    grid-row: 3 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right.is-slot-4 {
    grid-column: 4 !important;
    grid-row: 2 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche.is-right.is-slot-5 {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-glass,
  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center.has-niche-image .memory-hall-spatial-glass {
    min-height: 0;
    height: 100%;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated img {
    object-fit: cover;
    object-position: center center;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
    top: auto;
    right: auto;
    bottom: clamp(14px, 1.6vw, 24px);
    left: clamp(14px, 1.6vw, 24px);
    width: min(224px, calc(100% - 40px));
  }
}

@media (max-width: 900px) {
  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche,
  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature {
    aspect-ratio: 3 / 4 !important;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-niche:not(.memory-hall-spatial-feature) {
    flex: 0 0 min(calc(50% - 6px), 206px);
    width: min(calc(50% - 6px), 206px);
    min-height: 164px;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center {
    flex: 0 0 100%;
    grid-row: auto !important;
    width: min(100%, 380px);
    max-width: 380px;
    margin-inline: auto;
    min-height: 0;
    order: -2;
    justify-self: center;
  }

  .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
  }

  .memory-hall-public-room-river {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    order: 99;
    flex: 0 0 100%;
    width: 100%;
    margin: 4px 0 10px;
  }

  .memory-hall-public-room-river-track {
    padding: 7px 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }

  .memory-hall-public-room-card {
    flex-basis: clamp(58px, 18vw, 82px);
  }

  .memory-hall-public-sky-garden {
    inset: 116px 4px 204px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 18%, rgba(0, 0, 0, 0.74) 38% 78%, transparent 100%);
    mask-image: radial-gradient(ellipse at 50% 48%, transparent 0 18%, rgba(0, 0, 0, 0.74) 38% 78%, transparent 100%);
  }

  .memory-hall-public-sky-petal {
    width: clamp(34px, 9vw, 52px);
  }

  .memory-hall-public-sky-petal:nth-child(n + 14) {
    display: none;
  }

  .memory-hall-public-directory-trigger {
    top: auto;
    right: 12px;
    bottom: 148px;
    padding: 8px 10px;
  }

  .memory-hall-public-directory-trigger span {
    display: none;
  }

  .memory-hall-public-directory {
    right: 10px;
    bottom: 94px;
    left: 10px;
    width: auto;
    max-height: min(520px, calc(100svh - 118px));
    transform: translateY(14px) scale(0.98);
  }

  .memory-hall-public-directory.is-open {
    transform: translateY(0) scale(1);
  }

  .memory-hall-public-directory-grid {
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  }

  .memory-hall-spatial-line-break {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    order: -1;
    pointer-events: none;
  }
}

.memory-hall-room-opening {
  position: absolute;
  right: 0;
  bottom: clamp(86px, 12vh, 142px);
  left: 0;
  z-index: 14;
  display: grid;
  width: min(390px, calc(100vw - 42px));
  gap: 5px;
  justify-items: center;
  margin: 0 auto;
  text-align: center;
  opacity: 1;
  pointer-events: none;
  isolation: isolate;
  transform: translateY(0) scale(1);
  animation: memoryHallRoomOpeningIn 520ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening > span:not(.memory-hall-room-opening-veil):not(.memory-hall-room-opening-sanctuary):not(.memory-hall-room-opening-source-aura):not(.memory-hall-room-opening-depth-tunnel):not(.memory-hall-room-opening-starway):not(.memory-hall-room-opening-horizon):not(.memory-hall-room-opening-threshold):not(.memory-hall-room-opening-sparks):not(.memory-hall-room-opening-card-gate):not(.memory-hall-room-opening-memory-iris),
.memory-hall-room-opening small {
  border: 1px solid rgba(255, 236, 182, 0.15);
  border-radius: 999px;
  background: rgba(6, 7, 6, 0.52);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.memory-hall-room-opening > span:not(.memory-hall-room-opening-veil):not(.memory-hall-room-opening-sanctuary):not(.memory-hall-room-opening-source-aura):not(.memory-hall-room-opening-depth-tunnel):not(.memory-hall-room-opening-starway):not(.memory-hall-room-opening-horizon):not(.memory-hall-room-opening-threshold):not(.memory-hall-room-opening-sparks):not(.memory-hall-room-opening-card-gate):not(.memory-hall-room-opening-memory-iris) {
  color: rgba(255, 236, 182, 0.76);
  padding: 6px 10px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.memory-hall-room-opening strong {
  color: #fff8e8;
  font-size: clamp(2.8rem, 7vw, 5.8rem);
  font-weight: 950;
  line-height: 0.94;
  text-shadow:
    0 0 32px rgba(255, 236, 182, 0.22),
    0 18px 72px rgba(0, 0, 0, 0.56);
}

.memory-hall-room-opening small {
  max-width: 100%;
  color: rgba(255, 248, 232, 0.78);
  padding: 8px 13px;
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.32;
}

.memory-hall-room-opening-card {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(96px, 12vw, 156px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.16), transparent 34%),
    #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 28px 88px rgba(0, 0, 0, 0.68),
    0 0 76px rgba(255, 236, 182, 0.28);
}

.memory-hall-room-opening-card::before,
.memory-hall-room-opening-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-room-opening-card::before {
  inset: -44%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.32), rgba(255, 236, 182, 0.12) 36%, transparent 70%),
    conic-gradient(from 12deg, transparent 0 14%, rgba(255, 248, 232, 0.16) 15%, transparent 20% 46%, rgba(196, 224, 211, 0.12) 50%, transparent 56% 100%);
  filter: blur(0.2px);
}

.memory-hall-room-opening-card::after {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 38%, rgba(255, 248, 232, 0.1) 66%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 38% 68%, rgba(0, 0, 0, 0.42));
}

.memory-hall-room-opening-card-gate {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: clamp(164px, 21vw, 310px);
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.76);
}

.memory-hall-room-opening-card-gate::before,
.memory-hall-room-opening-card-gate::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-room-opening-card-gate::before {
  inset: -18% -16%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.22), rgba(255, 236, 182, 0.08) 34%, transparent 68%),
    conic-gradient(from 18deg, transparent 0 15%, rgba(255, 248, 232, 0.2) 18%, transparent 22% 46%, rgba(196, 224, 211, 0.14) 50%, transparent 56% 76%, rgba(223, 210, 241, 0.11) 80%, transparent 86% 100%);
  filter: blur(0.4px);
  opacity: 0.82;
}

.memory-hall-room-opening-card-gate::after {
  inset: -7%;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.18), transparent 14% 86%, rgba(255, 248, 232, 0.18)),
    linear-gradient(180deg, rgba(255, 248, 232, 0.12), transparent 34% 74%, rgba(255, 236, 182, 0.1));
  box-shadow:
    0 0 54px rgba(255, 236, 182, 0.24),
    inset 0 0 36px rgba(255, 248, 232, 0.06);
  opacity: 0.86;
}

.memory-hall-room-opening-card-gate.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.2), rgba(223, 210, 241, 0.1) 34%, transparent 68%),
    conic-gradient(from 18deg, transparent 0 15%, rgba(255, 248, 232, 0.18) 18%, transparent 22% 46%, rgba(223, 210, 241, 0.18) 50%, transparent 56% 76%, rgba(196, 224, 211, 0.1) 80%, transparent 86% 100%);
}

.memory-hall-room-opening-card-gate i {
  --memory-hall-gate-inset: 0%;
  --memory-hall-gate-rotate: 0deg;
  --memory-hall-gate-delay: 0ms;
  position: absolute;
  inset: var(--memory-hall-gate-inset);
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.14), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(255, 236, 182, 0.08) 66%, transparent 77%);
  box-shadow:
    0 0 28px rgba(255, 236, 182, 0.12),
    inset 0 0 28px rgba(255, 248, 232, 0.03);
  opacity: 0;
  transform: rotate(var(--memory-hall-gate-rotate)) scale(0.72);
}

.memory-hall-room-opening-card-gate i.is-gate-2 {
  --memory-hall-gate-inset: 8%;
  --memory-hall-gate-rotate: 3deg;
  --memory-hall-gate-delay: 70ms;
  border-color: rgba(196, 224, 211, 0.12);
}

.memory-hall-room-opening-card-gate i.is-gate-3 {
  --memory-hall-gate-inset: -9%;
  --memory-hall-gate-rotate: -4deg;
  --memory-hall-gate-delay: 130ms;
  border-color: rgba(255, 236, 182, 0.12);
}

.memory-hall-room-opening-card-gate i.is-gate-4 {
  --memory-hall-gate-inset: 18%;
  --memory-hall-gate-rotate: -8deg;
  --memory-hall-gate-delay: 210ms;
  border-color: rgba(223, 210, 241, 0.11);
}

.memory-hall-room-opening-card-gate i.is-gate-5 {
  --memory-hall-gate-inset: -18%;
  --memory-hall-gate-rotate: 7deg;
  --memory-hall-gate-delay: 270ms;
  border-color: rgba(255, 248, 232, 0.08);
}

.memory-hall-room-opening-card-gate i.is-gate-6 {
  --memory-hall-gate-inset: 28%;
  --memory-hall-gate-rotate: 12deg;
  --memory-hall-gate-delay: 330ms;
  border-color: rgba(196, 224, 211, 0.1);
}

.memory-hall-room-opening-memory-iris {
  position: fixed;
  top: var(--memory-hall-opening-source-y, 50%);
  left: var(--memory-hall-opening-source-x, 50%);
  z-index: 1;
  display: grid;
  width: clamp(168px, 24vw, 388px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 30px;
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 140px rgba(0, 0, 0, 0.72),
    0 0 128px rgba(255, 236, 182, 0.22);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-opening-source-rotate, 0deg))
    scale(0.34);
  animation: memoryHallPublicOpeningMemoryIris 1320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-memory-iris::before,
.memory-hall-room-opening-memory-iris::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-room-opening-memory-iris::before {
  inset: -34%;
  z-index: -1;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.3), rgba(255, 236, 182, 0.12) 34%, transparent 70%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(255, 248, 232, 0.18) 16%, transparent 20% 44%, rgba(196, 224, 211, 0.12) 48%, transparent 54% 100%);
  filter: blur(0.4px);
  opacity: 0.86;
}

.memory-hall-room-opening-memory-iris::after {
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 36%, rgba(255, 248, 232, 0.09) 58%, rgba(0, 0, 0, 0.42) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 42% 66%, rgba(0, 0, 0, 0.48));
  box-shadow:
    inset 0 0 42px rgba(255, 248, 232, 0.08),
    inset 0 -52px 90px rgba(0, 0, 0, 0.36);
}

.memory-hall-room-opening-memory-iris.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.26), rgba(223, 210, 241, 0.12) 34%, transparent 70%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(255, 248, 232, 0.16) 16%, transparent 20% 44%, rgba(223, 210, 241, 0.14) 48%, transparent 54% 100%);
}

.memory-hall-room-opening-memory-iris img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.72;
  filter: saturate(1.1) contrast(1.06) brightness(1.04);
  transform: scale(1.04);
}

.memory-hall-room-opening-memory-iris i {
  --memory-hall-iris-inset: -6%;
  --memory-hall-iris-rotate: 0deg;
  --memory-hall-iris-delay: 0ms;
  position: absolute;
  inset: var(--memory-hall-iris-inset);
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.15);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.18), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(255, 236, 182, 0.08) 67%, transparent 78%);
  box-shadow:
    0 0 36px rgba(255, 236, 182, 0.14),
    inset 0 0 30px rgba(255, 248, 232, 0.04);
  opacity: 0;
  transform: rotate(var(--memory-hall-iris-rotate)) scale(0.62);
  animation: memoryHallPublicOpeningMemoryIrisRing 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-iris-delay);
}

.memory-hall-room-opening-memory-iris i.is-iris-2 {
  --memory-hall-iris-inset: 8%;
  --memory-hall-iris-rotate: 4deg;
  --memory-hall-iris-delay: 90ms;
  border-color: rgba(196, 224, 211, 0.12);
}

.memory-hall-room-opening-memory-iris i.is-iris-3 {
  --memory-hall-iris-inset: -16%;
  --memory-hall-iris-rotate: -6deg;
  --memory-hall-iris-delay: 170ms;
  border-color: rgba(255, 236, 182, 0.11);
}

.memory-hall-room-opening-memory-iris i.is-iris-4 {
  --memory-hall-iris-inset: 22%;
  --memory-hall-iris-rotate: 10deg;
  --memory-hall-iris-delay: 250ms;
  border-color: rgba(223, 210, 241, 0.11);
}

.memory-hall-room-opening-starway,
.memory-hall-room-opening-veil,
.memory-hall-room-opening-sanctuary,
.memory-hall-room-opening-horizon,
.memory-hall-room-opening-source-aura,
.memory-hall-room-opening-depth-tunnel,
.memory-hall-room-opening-threshold,
.memory-hall-room-opening-sparks {
  position: absolute;
  top: 42%;
  left: 50%;
  z-index: 0;
  display: block;
  width: clamp(220px, 30vw, 440px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  backdrop-filter: none;
}

.memory-hall-room-opening-veil {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(108vw, 1320px);
  height: min(92vh, 820px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.22), rgba(255, 236, 182, 0.08) 22%, transparent 58%),
    radial-gradient(ellipse at 50% 62%, rgba(196, 224, 211, 0.095), transparent 54%),
    conic-gradient(from 24deg, transparent 0 18%, rgba(255, 248, 232, 0.14) 23%, transparent 30% 52%, rgba(223, 210, 241, 0.08) 59%, transparent 68% 100%);
  opacity: 0;
  filter: blur(12px) saturate(1.08);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.62);
  animation: memoryHallOpeningSanctuaryVeil 1320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-sanctuary {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: clamp(280px, 40vw, 680px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.memory-hall-room-opening-sanctuary i {
  position: absolute;
  inset: var(--memory-hall-opening-arc-inset, 8%);
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.14), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 0 57%, rgba(255, 236, 182, 0.09) 64%, transparent 75%);
  box-shadow:
    0 0 38px rgba(255, 236, 182, 0.13),
    inset 0 0 34px rgba(255, 248, 232, 0.03);
  opacity: 0;
  transform: rotate(var(--memory-hall-opening-arc-rotate, 0deg)) scale(0.68);
  -webkit-mask-image: linear-gradient(180deg, #000 0 62%, transparent 82%);
  mask-image: linear-gradient(180deg, #000 0 62%, transparent 82%);
  animation: memoryHallOpeningSanctuaryArc 1280ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-sanctuary i.is-arc-2 {
  --memory-hall-opening-arc-inset: 16%;
  --memory-hall-opening-arc-rotate: 14deg;
  border-color: rgba(196, 224, 211, 0.13);
  animation-delay: 90ms;
}

.memory-hall-room-opening-sanctuary i.is-arc-3 {
  --memory-hall-opening-arc-inset: 0%;
  --memory-hall-opening-arc-rotate: -12deg;
  border-color: rgba(255, 236, 182, 0.11);
  animation-delay: 160ms;
}

.memory-hall-room-opening-sanctuary i.is-arc-4 {
  --memory-hall-opening-arc-inset: 25%;
  --memory-hall-opening-arc-rotate: -24deg;
  border-color: rgba(223, 210, 241, 0.11);
  animation-delay: 230ms;
}

.memory-hall-room-opening-sanctuary i.is-arc-5 {
  --memory-hall-opening-arc-inset: -9%;
  --memory-hall-opening-arc-rotate: 28deg;
  border-color: rgba(255, 248, 232, 0.075);
  animation-delay: 300ms;
}

.memory-hall-room-opening-horizon {
  position: fixed;
  top: calc(50% + clamp(86px, 13vh, 148px));
  left: 50%;
  z-index: 1;
  width: min(72vw, 760px);
  height: clamp(28px, 4.6vw, 62px);
  overflow: visible;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.24), rgba(255, 236, 182, 0.1) 33%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.48), rgba(196, 224, 211, 0.2), transparent);
  box-shadow:
    0 0 44px rgba(255, 236, 182, 0.22),
    0 0 118px rgba(255, 248, 232, 0.1);
  opacity: 0;
  filter: blur(1px);
  transform: translate(-50%, -50%) scaleX(0.28);
  animation: memoryHallOpeningHorizon 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-horizon i {
  position: absolute;
  top: 50%;
  left: var(--memory-hall-opening-horizon-x, 50%);
  width: clamp(5px, 0.62vw, 10px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #fff8e8;
  box-shadow:
    0 0 14px rgba(255, 248, 232, 0.86),
    0 0 42px rgba(255, 236, 182, 0.32);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
  animation: memoryHallOpeningHorizonSpark 1080ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-opening-horizon-delay, 0ms);
}

.memory-hall-room-opening-horizon i.is-horizon-1 {
  --memory-hall-opening-horizon-x: 18%;
  --memory-hall-opening-horizon-delay: 80ms;
}

.memory-hall-room-opening-horizon i.is-horizon-2 {
  --memory-hall-opening-horizon-x: 39%;
  --memory-hall-opening-horizon-delay: 190ms;
}

.memory-hall-room-opening-horizon i.is-horizon-3 {
  --memory-hall-opening-horizon-x: 62%;
  --memory-hall-opening-horizon-delay: 40ms;
}

.memory-hall-room-opening-horizon i.is-horizon-4 {
  --memory-hall-opening-horizon-x: 83%;
  --memory-hall-opening-horizon-delay: 260ms;
}

.memory-hall-room-opening-source-aura {
  position: fixed;
  top: var(--memory-hall-opening-source-y, 50%);
  left: var(--memory-hall-opening-source-x, 50%);
  z-index: 0;
  width: clamp(132px, 16vw, 252px);
  aspect-ratio: 1;
  opacity: 1;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-opening-source-rotate, 0deg));
}

.memory-hall-room-opening-source-aura i {
  position: absolute;
  inset: 18%;
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.18), rgba(255, 236, 182, 0.07) 42%, transparent 72%),
    conic-gradient(from 20deg, transparent 0 16%, rgba(255, 248, 232, 0.44) 18%, transparent 22% 52%, rgba(196, 224, 211, 0.24) 56%, transparent 62% 100%);
  box-shadow:
    0 0 38px rgba(255, 236, 182, 0.22),
    inset 0 0 28px rgba(255, 248, 232, 0.035);
  opacity: 0;
  animation: memoryHallOpeningSourceAura 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-source-aura i.is-aura-2 {
  inset: 6%;
  border-color: rgba(196, 224, 211, 0.16);
  animation-delay: 90ms;
}

.memory-hall-room-opening-source-aura i.is-aura-3 {
  inset: -8%;
  border-color: rgba(255, 236, 182, 0.11);
  animation-delay: 170ms;
}

.memory-hall-room-opening-depth-tunnel {
  position: fixed;
  top: var(--memory-hall-opening-source-y, 50%);
  left: var(--memory-hall-opening-source-x, 50%);
  z-index: 0;
  width: var(--memory-hall-opening-starway-length, 28%);
  height: clamp(96px, 13vw, 190px);
  aspect-ratio: auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.02), rgba(255, 248, 232, 0.32) 44%, rgba(255, 236, 182, 0.16) 68%, transparent),
    linear-gradient(90deg, rgba(196, 224, 211, 0.16), transparent 58%);
  box-shadow:
    0 0 34px rgba(255, 248, 232, 0.2),
    0 0 116px rgba(255, 236, 182, 0.12);
  clip-path: polygon(0 46%, 100% 3%, 100% 97%, 0 54%);
  filter: blur(0.2px);
  opacity: 0;
  overflow: visible;
  transform:
    translateY(-50%)
    rotate(var(--memory-hall-opening-starway-angle, 0deg))
    scaleX(0.08);
  transform-origin: left center;
  animation: memoryHallOpeningDepthTunnel 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-depth-tunnel i {
  position: absolute;
  top: var(--memory-hall-tunnel-lane, 50%);
  left: var(--memory-hall-tunnel-stop, 0%);
  width: clamp(3px, 0.42vw, 7px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #fff8e8;
  box-shadow:
    0 0 14px rgba(255, 248, 232, 0.92),
    0 0 42px rgba(255, 236, 182, 0.36);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
  animation: memoryHallOpeningTunnelDust 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-depth-tunnel i.is-tunnel-1 { --memory-hall-tunnel-stop: 7%; --memory-hall-tunnel-lane: 48%; animation-delay: 0ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-2 { --memory-hall-tunnel-stop: 14%; --memory-hall-tunnel-lane: 36%; animation-delay: 90ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-3 { --memory-hall-tunnel-stop: 23%; --memory-hall-tunnel-lane: 62%; animation-delay: 35ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-4 { --memory-hall-tunnel-stop: 32%; --memory-hall-tunnel-lane: 43%; animation-delay: 150ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-5 { --memory-hall-tunnel-stop: 41%; --memory-hall-tunnel-lane: 58%; animation-delay: 70ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-6 { --memory-hall-tunnel-stop: 50%; --memory-hall-tunnel-lane: 32%; animation-delay: 210ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-7 { --memory-hall-tunnel-stop: 58%; --memory-hall-tunnel-lane: 68%; animation-delay: 120ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-8 { --memory-hall-tunnel-stop: 66%; --memory-hall-tunnel-lane: 45%; animation-delay: 260ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-9 { --memory-hall-tunnel-stop: 74%; --memory-hall-tunnel-lane: 57%; animation-delay: 170ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-10 { --memory-hall-tunnel-stop: 82%; --memory-hall-tunnel-lane: 38%; animation-delay: 310ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-11 { --memory-hall-tunnel-stop: 90%; --memory-hall-tunnel-lane: 64%; animation-delay: 230ms; }
.memory-hall-room-opening-depth-tunnel i.is-tunnel-12 { --memory-hall-tunnel-stop: 98%; --memory-hall-tunnel-lane: 50%; animation-delay: 360ms; }

.memory-hall-room-opening-starway {
  position: fixed;
  top: var(--memory-hall-opening-source-y, 50%);
  left: var(--memory-hall-opening-source-x, 50%);
  z-index: 0;
  width: var(--memory-hall-opening-starway-length, 28%);
  height: 2px;
  aspect-ratio: auto;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.82), rgba(255, 236, 182, 0.38) 42%, transparent),
    linear-gradient(90deg, rgba(196, 224, 211, 0.22), transparent 62%);
  box-shadow:
    0 0 18px rgba(255, 248, 232, 0.48),
    0 0 72px rgba(255, 236, 182, 0.18);
  opacity: 0;
  overflow: visible;
  transform: rotate(var(--memory-hall-opening-starway-angle, 0deg));
  transform-origin: left center;
  animation: memoryHallOpeningStarway 1220ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-starway i {
  position: absolute;
  top: 50%;
  left: var(--memory-hall-starway-stop, 0%);
  width: clamp(5px, 0.55vw, 9px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #fff8e8;
  box-shadow:
    0 0 16px rgba(255, 248, 232, 0.9),
    0 0 48px rgba(255, 236, 182, 0.42);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
  animation: memoryHallOpeningStarwayDust 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-starway i.is-starway-1 { --memory-hall-starway-stop: 3%; animation-delay: 0ms; }
.memory-hall-room-opening-starway i.is-starway-2 { --memory-hall-starway-stop: 17%; animation-delay: 80ms; }
.memory-hall-room-opening-starway i.is-starway-3 { --memory-hall-starway-stop: 31%; animation-delay: 150ms; }
.memory-hall-room-opening-starway i.is-starway-4 { --memory-hall-starway-stop: 44%; animation-delay: 40ms; }
.memory-hall-room-opening-starway i.is-starway-5 { --memory-hall-starway-stop: 58%; animation-delay: 190ms; }
.memory-hall-room-opening-starway i.is-starway-6 { --memory-hall-starway-stop: 72%; animation-delay: 110ms; }
.memory-hall-room-opening-starway i.is-starway-7 { --memory-hall-starway-stop: 86%; animation-delay: 230ms; }
.memory-hall-room-opening-starway i.is-starway-8 { --memory-hall-starway-stop: 98%; animation-delay: 20ms; }

.memory-hall-room-opening-threshold i,
.memory-hall-room-opening-sparks i {
  position: absolute;
  display: block;
  pointer-events: none;
}

.memory-hall-room-opening-threshold i {
  inset: 18%;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(255, 236, 182, 0.13) 63%, transparent 72%),
    conic-gradient(from 18deg, transparent 0 13%, rgba(255, 248, 232, 0.44) 15%, transparent 18% 48%, rgba(196, 224, 211, 0.24) 50%, transparent 54% 100%);
  filter: blur(0.2px);
  opacity: 0;
  transform: scale(0.5) rotate(-8deg);
  animation: memoryHallOpeningThresholdRing 1080ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-threshold i.is-ring-2 {
  inset: 10%;
  border-color: rgba(255, 236, 182, 0.13);
  animation-delay: 90ms;
}

.memory-hall-room-opening-threshold i.is-ring-3 {
  inset: 0;
  border-color: rgba(196, 224, 211, 0.1);
  animation-delay: 180ms;
}

.memory-hall-room-opening-sparks {
  top: 41%;
  z-index: 1;
  width: clamp(250px, 34vw, 510px);
}

.memory-hall-room-opening-sparks i {
  top: 50%;
  left: 50%;
  width: clamp(3px, 0.42vw, 6px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: #fff8e8;
  box-shadow:
    0 0 12px rgba(255, 248, 232, 0.9),
    0 0 32px rgba(255, 214, 132, 0.48);
  opacity: 0;
  --memory-hall-opening-spark-angle: 0deg;
  --memory-hall-opening-spark-distance: 120px;
  transform:
    rotate(var(--memory-hall-opening-spark-angle))
    translateX(0)
    scale(0.72);
  animation: memoryHallOpeningSpark 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-room-opening-sparks i.is-spark-1 { --memory-hall-opening-spark-angle: 4deg; --memory-hall-opening-spark-distance: clamp(98px, 13vw, 174px); animation-delay: 40ms; }
.memory-hall-room-opening-sparks i.is-spark-2 { --memory-hall-opening-spark-angle: 27deg; --memory-hall-opening-spark-distance: clamp(84px, 11vw, 152px); animation-delay: 120ms; }
.memory-hall-room-opening-sparks i.is-spark-3 { --memory-hall-opening-spark-angle: 51deg; --memory-hall-opening-spark-distance: clamp(96px, 12vw, 168px); animation-delay: 0ms; }
.memory-hall-room-opening-sparks i.is-spark-4 { --memory-hall-opening-spark-angle: 82deg; --memory-hall-opening-spark-distance: clamp(78px, 10vw, 144px); animation-delay: 170ms; }
.memory-hall-room-opening-sparks i.is-spark-5 { --memory-hall-opening-spark-angle: 116deg; --memory-hall-opening-spark-distance: clamp(102px, 14vw, 184px); animation-delay: 80ms; }
.memory-hall-room-opening-sparks i.is-spark-6 { --memory-hall-opening-spark-angle: 148deg; --memory-hall-opening-spark-distance: clamp(82px, 11vw, 156px); animation-delay: 220ms; }
.memory-hall-room-opening-sparks i.is-spark-7 { --memory-hall-opening-spark-angle: 183deg; --memory-hall-opening-spark-distance: clamp(94px, 13vw, 178px); animation-delay: 60ms; }
.memory-hall-room-opening-sparks i.is-spark-8 { --memory-hall-opening-spark-angle: 211deg; --memory-hall-opening-spark-distance: clamp(76px, 10vw, 148px); animation-delay: 155ms; }
.memory-hall-room-opening-sparks i.is-spark-9 { --memory-hall-opening-spark-angle: 238deg; --memory-hall-opening-spark-distance: clamp(104px, 14vw, 190px); animation-delay: 15ms; }
.memory-hall-room-opening-sparks i.is-spark-10 { --memory-hall-opening-spark-angle: 267deg; --memory-hall-opening-spark-distance: clamp(82px, 11vw, 154px); animation-delay: 190ms; }
.memory-hall-room-opening-sparks i.is-spark-11 { --memory-hall-opening-spark-angle: 292deg; --memory-hall-opening-spark-distance: clamp(94px, 12vw, 168px); animation-delay: 95ms; }
.memory-hall-room-opening-sparks i.is-spark-12 { --memory-hall-opening-spark-angle: 319deg; --memory-hall-opening-spark-distance: clamp(80px, 10vw, 148px); animation-delay: 145ms; }
.memory-hall-room-opening-sparks i.is-spark-13 { --memory-hall-opening-spark-angle: 342deg; --memory-hall-opening-spark-distance: clamp(110px, 15vw, 198px); animation-delay: 30ms; }
.memory-hall-room-opening-sparks i.is-spark-14 { --memory-hall-opening-spark-angle: 66deg; --memory-hall-opening-spark-distance: clamp(118px, 16vw, 214px); animation-delay: 240ms; }
.memory-hall-room-opening-sparks i.is-spark-15 { --memory-hall-opening-spark-angle: 160deg; --memory-hall-opening-spark-distance: clamp(112px, 15vw, 204px); animation-delay: 210ms; }
.memory-hall-room-opening-sparks i.is-spark-16 { --memory-hall-opening-spark-angle: 252deg; --memory-hall-opening-spark-distance: clamp(116px, 16vw, 210px); animation-delay: 260ms; }

.memory-hall-room-opening-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-room-opening {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes memoryHallRoomOpeningIn {
  from {
    transform: translateY(16px) scale(0.96);
  }

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

.memory-hall-bridge-experience.is-opening-room .memory-hall-arrival-guide,
.memory-hall-bridge-experience.is-opening-room .memory-hall-create-trigger,
.memory-hall-bridge-experience.is-opening-room .memory-hall-public-directory-trigger,
.memory-hall-bridge-experience.is-opening-room .memory-hall-public-directory,
.memory-hall-bridge-experience.is-opening-room .memory-hall-creator {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-vista-image {
  filter: blur(13px) saturate(0.78) contrast(1.05) brightness(0.42);
  opacity: 0.2;
  transform: scale(1.18) translate3d(0, 1.6%, 0);
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 248, 232, 0.24), transparent 18%),
    radial-gradient(circle at 50% 64%, rgba(255, 205, 96, 0.1), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.38) 25%, rgba(0, 0, 0, 0.34) 75%, rgba(0, 0, 0, 0.86)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.78));
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-spatial-niche-stage .memory-hall-spatial-niche {
  transition:
    opacity 420ms ease,
    filter 420ms ease,
    border-color 180ms ease,
    box-shadow 420ms ease,
    transform 560ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-spatial-niche-stage .memory-hall-spatial-niche:not(.is-watson-center):not(.is-room-opening-target) {
  opacity: 0.14;
  filter: blur(7px) saturate(0.68) brightness(0.72);
  transform: translateY(10px) scale(0.92);
}

.memory-hall-spatial-niche.is-room-opening-away {
  opacity: 0.14;
  filter: blur(7px) saturate(0.68) brightness(0.72);
  transform: translateY(10px) scale(0.92);
  transition: none !important;
}

.memory-hall-bridge-experience.is-opening-watson .memory-hall-spatial-niche-stage .memory-hall-spatial-feature.is-watson-center {
  z-index: 16;
  border-color: rgba(255, 244, 210, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 223, 145, 0.22),
    0 0 58px rgba(255, 236, 182, 0.24),
    0 38px 112px rgba(0, 0, 0, 0.64);
  transform: translateY(-8px) scale(1.035) translateZ(34px);
}

.memory-hall-spatial-niche.is-room-opening-target {
  z-index: 16;
  border-color: rgba(255, 244, 210, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 223, 145, 0.22),
    0 0 58px rgba(255, 236, 182, 0.24),
    0 38px 112px rgba(0, 0, 0, 0.64);
  transform: translateY(-8px) scale(1.035) translateZ(34px);
  transition: none !important;
}

.memory-hall-public-room-card.is-room-opening-away,
.memory-hall-public-directory-card.is-room-opening-away {
  opacity: 0.16;
  filter: blur(4px) saturate(0.72) brightness(0.72);
  transform: translateY(8px) scale(0.92);
  transition: none !important;
}

.memory-hall-public-room-card.is-room-opening-target,
.memory-hall-public-directory-card.is-room-opening-target {
  z-index: 16;
  border-color: rgba(255, 244, 210, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 244, 210, 0.22),
    0 0 42px rgba(255, 236, 182, 0.18),
    0 24px 70px rgba(0, 0, 0, 0.52);
  filter: brightness(1.12);
  opacity: 1;
  transform: translateY(-8px) scale(1.08);
  transition: none !important;
}

.memory-hall-bridge-experience.is-opening-room .memory-hall-spatial-niche-stage {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .memory-hall-threshold-card-path,
  .memory-hall-bridge-experience.is-inside .memory-hall-distant-companions,
  .memory-hall-bridge-experience.is-inside .memory-hall-distant-companion i,
  .memory-hall-bridge-experience.is-inside .memory-hall-companion-card-field,
  .memory-hall-public-continuation-field,
  .memory-hall-public-continuation-tile,
  .memory-hall-public-portrait-field,
  .memory-hall-public-portrait-tile,
  .memory-hall-bridge-experience.is-inside .memory-hall-watson-light-ribbons i,
  .memory-hall-public-room-river,
  .memory-hall-public-room-card,
  .memory-hall-public-sky-garden,
  .memory-hall-public-sky-petal,
  .memory-hall-public-directory,
  .memory-hall-public-directory-trigger,
  .memory-hall-public-directory-card,
  .memory-hall-card-only.is-constellation-arriving:not(.is-opening-room)::before,
  .memory-hall-card-only.is-constellation-arriving:not(.is-opening-room)::after,
  .memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-vista-image,
  .memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-constellation-sky,
  .memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-constellation-node.is-active,
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active::before,
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active::after,
  .memory-hall-constellation-focus-sanctuary,
  .memory-hall-constellation-focus-hush,
  .memory-hall-constellation-focus-hush::before,
  .memory-hall-constellation-focus-hush::after,
  .memory-hall-constellation-focus-witnesses,
  .memory-hall-constellation-focus-witnesses i,
	  .memory-hall-constellation-focus-dust,
	  .memory-hall-constellation-focus-dust i,
	  .memory-hall-constellation-companion-halo,
	  .memory-hall-constellation-companion-halo button,
	  .memory-hall-constellation-focus-beacon,
	  .memory-hall-constellation-depth-lens,
	  .memory-hall-constellation-depth-lens i,
	  .memory-hall-constellation-approach-aperture,
	  .memory-hall-constellation-approach-aperture i,
	  .memory-hall-constellation-approach,
	  .memory-hall-constellation-approach-rings i,
	  .memory-hall-constellation-focus-pull,
	  .memory-hall-constellation-focus-pull i,
	  .memory-hall-constellation-focus-trail,
	  .memory-hall-constellation-focus-trail i,
	  .memory-hall-constellation-focus-motes,
	  .memory-hall-constellation-focus-motes i,
	  .memory-hall-constellation-room-aura,
	  .memory-hall-constellation-room-aura i,
	  .memory-hall-constellation-enter-cue,
	  .memory-hall-constellation-travel-path,
	  .memory-hall-constellation-travel-path i,
	  .memory-hall-constellation-arrival-bloom,
	  .memory-hall-constellation-arrival-bloom i,
	  .memory-hall-constellation-return-trail,
	  .memory-hall-constellation-return-trail::before,
	  .memory-hall-constellation-return-trail::after,
	  .memory-hall-constellation-return-trail i,
	  .memory-hall-constellation-thread::before,
	  .memory-hall-constellation-thread::after,
	  .memory-hall-constellation-node .memory-hall-constellation-node-image,
	  .memory-hall-constellation-node .memory-hall-constellation-node-image::before,
	  .memory-hall-constellation-node .memory-hall-constellation-node-image::after,
	  .memory-hall-constellation-ghost-card::before,
	  .memory-hall-constellation-visited-glow,
	  .memory-hall-constellation-visited-glow::before,
	  .memory-hall-constellation-visited-glow::after,
	  .memory-hall-constellation-visited-glow i,
  .memory-hall-constellation-focus-card,
  .memory-hall-constellation-focus-card::before,
  .memory-hall-constellation-focus-card::after,
  .memory-hall-constellation-focus-card i::after,
	  .memory-hall-constellation-side-card,
	  .memory-hall-constellation-side-card::before,
	  .memory-hall-constellation-side-card i::after,
	  .memory-hall-constellation-side-card-trace,
	  .memory-hall-room-opening,
	  .memory-hall-room-opening-veil,
	  .memory-hall-room-opening-sanctuary,
	  .memory-hall-room-opening-sanctuary i,
	  .memory-hall-room-opening-source-aura,
	  .memory-hall-room-opening-source-aura i,
	  .memory-hall-room-opening-depth-tunnel,
	  .memory-hall-room-opening-depth-tunnel i,
	  .memory-hall-room-opening-starway,
	  .memory-hall-room-opening-starway i,
	  .memory-hall-room-opening-horizon,
	  .memory-hall-room-opening-horizon i,
	  .memory-hall-room-opening-card-gate,
	  .memory-hall-room-opening-card-gate i,
	  .memory-hall-room-opening-memory-iris,
	  .memory-hall-room-opening-memory-iris i,
	  .memory-hall-room-opening-card,
	  .memory-hall-room-opening-threshold i,
  .memory-hall-room-opening-sparks i,
  .memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target .memory-hall-constellation-node-image,
  .memory-hall-bridge-experience.is-opening-room .memory-hall-spatial-niche-stage .memory-hall-spatial-niche,
  .memory-hall-bridge-experience.is-opening-room .memory-hall-vista-image {
    animation: none !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}

/* Card-only Memory Hall: the public hall is controlled by the AI command bar, with the owner's room anchored. */
.memory-hall-card-only {
  --memory-hall-fixed-card-size: clamp(270px, 29vw, 430px);
  --memory-hall-roaming-card-size: clamp(168px, 17vw, 258px);
  --memory-hall-constellation-card-size: clamp(58px, 6.2vw, 110px);
  --memory-hall-pointer-x: 0;
  --memory-hall-pointer-y: 0;
  --memory-hall-pointer-drift-x: 0px;
  --memory-hall-pointer-drift-y: 0px;
  --memory-hall-pointer-depth-x: 0px;
  --memory-hall-pointer-depth-y: 0px;
  --memory-hall-pointer-card-x: 0px;
  --memory-hall-pointer-card-y: 0px;
  --memory-hall-orbit-pan-x: 0px;
  --memory-hall-orbit-pan-y: 0px;
  --memory-hall-drag-active: 0;
  --memory-hall-active-constellation-x: 50%;
  --memory-hall-active-constellation-y: 50%;
  --memory-hall-opening-source-x: 50%;
  --memory-hall-opening-source-y: 50%;
  --memory-hall-opening-source-scale: 1;
  --memory-hall-opening-source-rotate: 0deg;
  --memory-hall-opening-starway-angle: 0deg;
  --memory-hall-opening-starway-length: 28%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 248, 232, 0.12), transparent 34%),
    radial-gradient(circle at 50% 80%, rgba(255, 236, 182, 0.075), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.24) 36%, rgba(0, 0, 0, 0.2) 64%, rgba(0, 0, 0, 0.92)),
    linear-gradient(180deg, #020202 0%, #060504 48%, #000 100%),
    #000;
}

.memory-hall-card-only::before,
.memory-hall-card-only::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only::before {
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.2), rgba(255, 236, 182, 0.075) 24%, transparent 58%),
    linear-gradient(115deg, transparent 0 36%, rgba(255, 248, 232, 0.07) 42%, transparent 54%),
    linear-gradient(245deg, transparent 0 42%, rgba(176, 213, 197, 0.052) 48%, transparent 62%);
  opacity: 0.18;
  transform:
    translate3d(var(--memory-hall-pointer-depth-x), var(--memory-hall-pointer-depth-y), 0)
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0);
  transition: transform 220ms ease;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0 62%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 0 62%, rgba(0, 0, 0, 0.72) 78%, transparent 100%);
  mix-blend-mode: screen;
}

.memory-hall-card-only::after {
  right: -8%;
  bottom: -6%;
  left: -8%;
  z-index: 0;
  height: 38%;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.18), transparent),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255, 248, 232, 0.055) 96px 97px, transparent 97px 192px),
    linear-gradient(180deg, transparent, rgba(255, 236, 182, 0.06) 54%, transparent);
  filter: blur(0.2px);
  opacity: 0.12;
  transform:
    perspective(1200px)
    rotateX(74deg)
    translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0);
  transform-origin: bottom center;
  transition: transform 220ms ease;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room)::before {
  background:
    radial-gradient(
      circle at var(--memory-hall-active-constellation-x) var(--memory-hall-active-constellation-y),
      rgba(255, 248, 232, 0.34),
      rgba(255, 236, 182, 0.12) 13%,
      transparent 34%
    ),
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.2), rgba(255, 236, 182, 0.075) 24%, transparent 58%),
    linear-gradient(115deg, transparent 0 36%, rgba(255, 248, 232, 0.07) 42%, transparent 54%),
    linear-gradient(245deg, transparent 0 42%, rgba(176, 213, 197, 0.052) 48%, transparent 62%);
  opacity: 0.34;
  transform:
    translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.45), calc(var(--memory-hall-pointer-depth-y) * 0.45), 0)
    translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.58), calc(var(--memory-hall-orbit-pan-y) * 0.58), 0)
    scale(1.08);
  transition:
    opacity 520ms ease,
    transform 760ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room)::after {
  height: 48%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 232, 0.24), transparent 34%),
    linear-gradient(90deg, transparent 8%, rgba(255, 236, 182, 0.36) 38%, rgba(255, 248, 232, 0.2) 52%, transparent 78%),
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(255, 248, 232, 0.08) 84px 85px, transparent 85px 168px),
    linear-gradient(180deg, transparent, rgba(255, 236, 182, 0.08) 54%, transparent);
  opacity: 0.24;
  transform:
    perspective(1200px)
    rotateX(73deg)
    translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.2), 0)
    translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
    scaleX(1.08);
  transition:
    opacity 520ms ease,
    transform 760ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room)::before {
  animation: memoryHallConstellationDepthApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room)::after {
  animation: memoryHallConstellationFloorApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only .memory-hall-vista,
.memory-hall-card-only .memory-hall-brand-mark,
.memory-hall-card-only .memory-hall-enter,
.memory-hall-card-only .memory-hall-arrival-guide,
.memory-hall-card-only .memory-hall-together-note,
.memory-hall-card-only .memory-hall-create-trigger,
.memory-hall-card-only .memory-hall-public-directory-trigger,
.memory-hall-card-only .memory-hall-distant-companions,
.memory-hall-card-only .memory-hall-companion-card-field,
.memory-hall-card-only .memory-hall-public-continuation-field,
.memory-hall-card-only .memory-hall-public-portrait-field,
.memory-hall-card-only .memory-hall-public-sky-garden,
.memory-hall-card-only .memory-hall-companion-glow,
.memory-hall-card-only .memory-hall-companion-orbit,
.memory-hall-card-only .memory-hall-companion-portraits,
.memory-hall-card-only .memory-hall-watson-light-ribbons,
.memory-hall-card-only .memory-hall-shared-light-path,
.memory-hall-card-only .memory-hall-spatial-line-break,
.memory-hall-card-only .memory-hall-creator,
.memory-hall-card-only .memory-hall-constellation-echo-node {
  display: none !important;
}

.memory-hall-card-only .memory-hall-vista,
.memory-hall-card-only .memory-hall-bridge-halo,
.memory-hall-card-only .memory-hall-prism {
  display: none !important;
}

.memory-hall-card-only .memory-hall-vista {
  display: block !important;
}

.memory-hall-card-only .memory-hall-vista {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 248, 232, 0.16), transparent 24%),
    linear-gradient(180deg, #0d0a06, #030303 58%, #000);
}

.memory-hall-card-only .memory-hall-vista-image {
  inset: -4%;
  filter: saturate(1.12) contrast(1.04) brightness(0.9);
  opacity: 0.92;
  transform:
    scale(1.05)
    translate3d(calc(var(--memory-hall-pointer-depth-x) * -0.18), calc(var(--memory-hall-pointer-depth-y) * -0.18), 0);
}

.memory-hall-card-only.is-inside .memory-hall-vista-image,
.memory-hall-card-only.is-threshold .memory-hall-vista-image {
  filter: saturate(1.16) contrast(1.07) brightness(0.96);
  opacity: 1;
  transform:
    scale(1.035)
    translate3d(calc(var(--memory-hall-pointer-depth-x) * -0.14), calc(var(--memory-hall-pointer-depth-y) * -0.14), 0);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-vista-image {
  filter: saturate(1.14) contrast(1.08) brightness(0.94);
  opacity: 1;
  transform:
    scale(1.055)
    translate3d(calc(var(--memory-hall-pointer-depth-x) * -0.2), calc(var(--memory-hall-pointer-depth-y) * -0.2), 0);
}

.memory-hall-card-only .memory-hall-vista-shade {
  display: block !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 248, 232, 0.08), transparent 18%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.18) 48%, rgba(0, 0, 0, 0.72) 88%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.12) 31%, rgba(0, 0, 0, 0.1) 69%, rgba(0, 0, 0, 0.88)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.02) 42%, rgba(0, 0, 0, 0.7));
  opacity: 0.42;
}

.memory-hall-card-only.is-inside .memory-hall-vista-shade,
.memory-hall-card-only.is-threshold .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 248, 232, 0.05), transparent 18%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.46) 92%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.02) 30%, rgba(0, 0, 0, 0.02) 70%, rgba(0, 0, 0, 0.56)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 44%, rgba(0, 0, 0, 0.38));
  opacity: 0.32;
}

.memory-hall-card-only .memory-hall-spatial-ui,
.memory-hall-card-only .memory-hall-niche-field {
  background: transparent;
}

.memory-hall-card-only .memory-hall-niche-field {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: none;
  cursor: grab;
  touch-action: none;
}

.memory-hall-card-only.is-constellation-dragging .memory-hall-niche-field {
  cursor: grabbing;
}

.memory-hall-card-only .memory-hall-spatial-niche-stage {
  inset: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: clamp(10px, 2vh, 28px) !important;
  align-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  padding:
    clamp(56px, 7vh, 94px)
    clamp(14px, 4vw, 64px)
    clamp(122px, 15vh, 174px) !important;
  background: transparent;
  perspective: 1500px;
  pointer-events: auto;
}

.memory-hall-card-only .memory-hall-spatial-niche-stage::before,
.memory-hall-card-only .memory-hall-spatial-niche-stage::after {
  position: absolute;
  display: block !important;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-spatial-niche-stage::before {
  inset: clamp(66px, 8vh, 98px) clamp(8px, 2vw, 42px) clamp(122px, 15vh, 178px);
  z-index: 0;
  border: 0;
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.16), rgba(255, 236, 182, 0.05) 30%, transparent 70%),
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.08), transparent),
    linear-gradient(24deg, transparent 18%, rgba(176, 213, 197, 0.06), transparent 58%),
    linear-gradient(146deg, transparent 20%, rgba(223, 210, 241, 0.046), transparent 64%);
  box-shadow: 0 0 148px rgba(255, 236, 182, 0.04);
  opacity: 0.12;
  transform:
    perspective(1400px)
    rotateX(0.8deg)
    translate3d(var(--memory-hall-pointer-depth-x), var(--memory-hall-pointer-depth-y), 0)
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0);
  transition: transform 220ms ease;
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 50%, #000 0 60%, transparent 100%),
    linear-gradient(180deg, #000, transparent 95%);
  mask-image:
    radial-gradient(ellipse at 50% 50%, #000 0 60%, transparent 100%),
    linear-gradient(180deg, #000, transparent 95%);
}

.memory-hall-card-only .memory-hall-spatial-niche-stage::after {
  display: none !important;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 2;
  width: min(72vw, 820px);
  height: min(44vw, 420px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(176, 213, 197, 0.16), rgba(255, 248, 232, 0.24), rgba(211, 190, 235, 0.14), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.08), transparent 62%);
  box-shadow:
    0 0 44px rgba(255, 248, 232, 0.1),
    0 0 92px rgba(176, 213, 197, 0.06);
  opacity: 0.34;
  transform:
    translate(-50%, -50%)
    rotate(-8deg)
    translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0);
  transition: transform 220ms ease;
}

.memory-hall-card-depth-field {
  position: absolute;
  inset: clamp(82px, 10vh, 128px) clamp(10px, 2vw, 38px) clamp(104px, 13vh, 150px);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: clamp(5px, 0.54vw, 10px);
  align-content: center;
  opacity: 0.42;
  pointer-events: none;
  transform:
    perspective(1300px)
    rotateX(3deg)
    translate3d(var(--memory-hall-pointer-depth-x), var(--memory-hall-pointer-depth-y), 0)
    scale(0.992);
  transition: transform 220ms ease, opacity 220ms ease;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.memory-hall-card-only .memory-hall-card-depth-field {
  display: none;
}

.memory-hall-constellation-sky {
  position: absolute;
  inset: clamp(42px, 6vh, 78px) clamp(10px, 4vw, 76px) clamp(118px, 16vh, 188px);
  z-index: 4;
  pointer-events: auto;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0);
  transition: inset 260ms ease, transform 180ms ease;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0 64%, rgba(0, 0, 0, 0.74) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0 64%, rgba(0, 0, 0, 0.74) 78%, transparent 100%);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-sky {
  inset: clamp(26px, 4vh, 54px) clamp(0px, 2vw, 36px) clamp(98px, 13vh, 152px);
  z-index: 5;
}

.memory-hall-card-only.is-constellation-dragging .memory-hall-constellation-sky,
.memory-hall-card-only.is-constellation-dragging::before,
.memory-hall-card-only.is-constellation-dragging .memory-hall-spatial-niche-stage::before {
  transition-duration: 1ms;
}

.memory-hall-constellation-atlas {
  position: absolute;
  inset: -7%;
  z-index: 0;
  display: block;
  width: 114%;
  height: 114%;
  opacity: 0;
  pointer-events: none;
  filter: saturate(1.08) brightness(1.04);
  mix-blend-mode: screen;
  transform:
    translate3d(calc(var(--memory-hall-orbit-pan-x) * -0.1), calc(var(--memory-hall-orbit-pan-y) * -0.1), 0)
    scale(1.01);
  transition:
    opacity 620ms ease,
    filter 520ms ease,
    transform 760ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-atlas {
  opacity: 0.72;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-atlas {
  opacity: 0.64;
  filter: saturate(1.14) brightness(1.1);
  transform:
    translate3d(calc(var(--memory-hall-orbit-pan-x) * -0.16), calc(var(--memory-hall-orbit-pan-y) * -0.16), 0)
    scale(1.035);
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-atlas {
  opacity: 0.24;
  filter: saturate(0.82) brightness(0.72) blur(1.2px);
}

.memory-hall-constellation-sky::before,
.memory-hall-constellation-sky::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-constellation-sky::before,
.memory-hall-card-only .memory-hall-constellation-sky::after {
  display: none;
}

.memory-hall-constellation-sky::before {
  inset: 8% 12%;
  border: 1px solid rgba(255, 248, 232, 0.045);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.12), transparent 7%),
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.075), transparent 42%);
  box-shadow:
    inset 0 0 52px rgba(255, 248, 232, 0.03),
    0 0 78px rgba(176, 213, 197, 0.05);
  opacity: 0.82;
}

.memory-hall-constellation-sky::after {
  inset: 17% 22%;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.14), transparent),
    linear-gradient(35deg, transparent 18%, rgba(176, 213, 197, 0.13), transparent 64%),
    linear-gradient(145deg, transparent 20%, rgba(211, 190, 235, 0.12), transparent 68%);
  filter: blur(0.35px);
  opacity: 0.52;
  transform: rotate(-7deg);
}

.memory-hall-constellation-ring,
.memory-hall-constellation-line {
  position: absolute;
  pointer-events: none;
}

.memory-hall-constellation-ring {
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 248, 232, 0.07);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.memory-hall-constellation-ring.is-outer {
  width: min(92%, 940px);
  aspect-ratio: 1.86 / 1;
  opacity: 0.34;
}

.memory-hall-constellation-ring.is-inner {
  width: min(54%, 560px);
  aspect-ratio: 1.62 / 1;
  opacity: 0.28;
}

.memory-hall-constellation-line {
  top: 50%;
  left: 50%;
  width: min(72%, 760px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.16), rgba(176, 213, 197, 0.11), transparent);
  opacity: 0.22;
  transform-origin: center;
}

.memory-hall-constellation-line.is-line-1 {
  transform: translate(-50%, -50%) rotate(-15deg);
}

.memory-hall-constellation-line.is-line-2 {
  transform: translate(-50%, -50%) rotate(28deg);
}

.memory-hall-constellation-line.is-line-3 {
  width: min(54%, 600px);
  opacity: 0.3;
  transform: translate(-50%, -50%) rotate(74deg);
}

.memory-hall-constellation-line.is-line-4 {
  width: min(62%, 700px);
  opacity: 0.26;
  transform: translate(-50%, -50%) rotate(118deg);
}

.memory-hall-constellation-line.is-line-5 {
  width: min(46%, 520px);
  opacity: 0.24;
  transform: translate(-50%, -50%) rotate(-62deg);
}

.memory-hall-constellation-line.is-line-6 {
  width: min(38%, 460px);
  opacity: 0.2;
  transform: translate(-50%, -50%) rotate(0deg);
}

.memory-hall-card-only .memory-hall-constellation-ring,
.memory-hall-card-only .memory-hall-constellation-line {
  opacity: 0;
}

.memory-hall-constellation-thread {
  position: absolute;
  top: var(--memory-hall-thread-start-y, 50%);
  left: var(--memory-hall-thread-start-x, 50%);
  z-index: 2;
  width: var(--memory-hall-thread-length);
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 248, 232, 0.1), rgba(196, 224, 211, 0.055), transparent);
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--memory-hall-thread-angle));
  transform-origin: left center;
  animation: memoryHallConstellationThreadAppear 680ms ease forwards;
  animation-delay: var(--memory-hall-thread-delay);
}

.memory-hall-constellation-thread::before {
  position: absolute;
  inset: -2px 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.72) 46%, rgba(255, 236, 182, 0.28) 68%, transparent);
  content: "";
  filter: blur(0.4px);
  opacity: 0;
  transform: scaleX(0.12);
  transform-origin: left center;
}

.memory-hall-constellation-thread::after {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.34);
  box-shadow: 0 0 12px rgba(255, 236, 182, 0.14);
  content: "";
  transform: translateY(-50%);
}

.memory-hall-constellation-thread.is-active {
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 248, 232, 0.8), rgba(255, 236, 182, 0.58), transparent);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.24),
    0 0 40px rgba(255, 248, 232, 0.12);
}

.memory-hall-constellation-focus-pull {
  position: absolute;
  top: var(--memory-hall-focus-pull-y);
  left: var(--memory-hall-focus-pull-x);
  z-index: 5;
  display: block;
  width: var(--memory-hall-focus-pull-length);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.72), rgba(255, 236, 182, 0.42) 34%, rgba(196, 224, 211, 0.16) 68%, transparent);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.24),
    0 0 52px rgba(255, 248, 232, 0.12);
  opacity: 0;
  pointer-events: none;
  transform:
    rotate(var(--memory-hall-focus-pull-angle))
    scaleX(0.08);
  transform-origin: left center;
}

.memory-hall-constellation-focus-pull::before,
.memory-hall-constellation-focus-pull::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-focus-pull::before {
  top: 50%;
  left: 0;
  width: clamp(54px, 8vw, 122px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 248, 232, 0.42), rgba(255, 236, 182, 0.12) 32%, transparent 72%);
  filter: blur(1px);
  opacity: 0.78;
  transform:
    translate(-50%, -50%)
    scale(calc(var(--memory-hall-focus-pull-scale) + 0.28));
}

.memory-hall-constellation-focus-pull::after {
  top: 50%;
  right: -8px;
  width: clamp(46px, 6vw, 96px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 248, 232, 0.24), transparent 62%);
  box-shadow:
    0 0 24px rgba(255, 236, 182, 0.2),
    inset 0 0 22px rgba(255, 248, 232, 0.04);
  opacity: 0.46;
  transform: translate(50%, -50%) scale(0.78);
}

.memory-hall-constellation-focus-pull i {
  position: absolute;
  top: 50%;
  left: var(--memory-hall-focus-pull-spark-left, 18%);
  display: block;
  width: clamp(4px, 0.5vw, 8px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.92);
  box-shadow:
    0 0 0 4px rgba(255, 248, 232, 0.035),
    0 0 20px rgba(255, 236, 182, 0.32);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.54);
}

.memory-hall-constellation-focus-pull i:nth-child(1) {
  --memory-hall-focus-pull-spark-left: 14%;
  animation-delay: 120ms;
}

.memory-hall-constellation-focus-pull i:nth-child(2) {
  --memory-hall-focus-pull-spark-left: 31%;
  animation-delay: 280ms;
}

.memory-hall-constellation-focus-pull i:nth-child(3) {
  --memory-hall-focus-pull-spark-left: 49%;
  animation-delay: 440ms;
}

.memory-hall-constellation-focus-pull i:nth-child(4) {
  --memory-hall-focus-pull-spark-left: 67%;
  animation-delay: 600ms;
}

.memory-hall-constellation-focus-pull i:nth-child(5) {
  --memory-hall-focus-pull-spark-left: 84%;
  animation-delay: 760ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-pull {
  animation: memoryHallConstellationFocusPull 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-pull i {
  animation: none;
}

.memory-hall-constellation-focus-pull.is-cat {
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0.7), rgba(223, 210, 241, 0.34) 36%, rgba(196, 224, 211, 0.14) 72%, transparent);
}

.memory-hall-constellation-focus-trail {
  position: absolute;
  top: var(--memory-hall-focus-trail-y);
  left: var(--memory-hall-focus-trail-x);
  z-index: 9;
  width: var(--memory-hall-focus-trail-length);
  height: clamp(42px, 5.4vw, 82px);
  opacity: 0;
  pointer-events: none;
  transform:
    translateY(-50%)
    rotate(var(--memory-hall-focus-trail-angle))
    scaleY(0.84);
  transform-origin: left center;
}

.memory-hall-constellation-focus-trail::before,
.memory-hall-constellation-focus-trail::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-focus-trail::before {
  top: 50%;
  right: -2%;
  left: -3%;
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, 0.58) 32%, rgba(255, 236, 182, 0.34) 58%, rgba(196, 224, 211, 0.08) 82%, transparent),
    radial-gradient(ellipse at 76% 50%, rgba(255, 248, 232, 0.32), transparent 58%);
  box-shadow:
    0 0 22px rgba(255, 236, 182, 0.2),
    0 0 64px rgba(255, 248, 232, 0.09);
  filter: blur(2.8px);
  opacity: 0.72;
  transform: translateY(-50%);
}

.memory-hall-constellation-focus-trail::after {
  top: 50%;
  right: clamp(-76px, -6.6vw, -42px);
  width: clamp(58px, 6.4vw, 112px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 248, 232, 0.22), rgba(255, 236, 182, 0.07) 42%, transparent 72%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.06), rgba(0, 0, 0, 0.18));
  box-shadow:
    0 0 38px rgba(255, 236, 182, 0.18),
    inset 0 0 26px rgba(255, 248, 232, 0.035);
  filter: blur(1.2px);
  opacity: 0.42;
  transform:
    translateY(-50%)
    rotate(var(--memory-hall-focus-trail-counter-angle))
    scale(0.78);
}

.memory-hall-constellation-focus-trail i {
  --memory-hall-focus-trail-stop: 16%;
  --memory-hall-focus-trail-size: clamp(13px, 1.34vw, 24px);
  --memory-hall-focus-trail-delay: 0ms;
  position: absolute;
  top: 50%;
  left: var(--memory-hall-focus-trail-stop);
  display: block;
  width: var(--memory-hall-focus-trail-size);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: clamp(4px, 0.5vw, 8px);
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 248, 232, 0.34), transparent 36%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.1), rgba(0, 0, 0, 0.3)),
    #080706;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 16px rgba(255, 236, 182, 0.2),
    0 10px 28px rgba(0, 0, 0, 0.42);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-focus-trail-counter-angle))
    scale(0.38);
}

.memory-hall-constellation-focus-trail i::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 36%, transparent 0 32%, rgba(255, 248, 232, 0.11) 68%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.07), transparent 36% 70%, rgba(0, 0, 0, 0.42));
  content: "";
}

.memory-hall-constellation-focus-trail.is-cat::before {
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, 0.5) 30%, rgba(223, 210, 241, 0.34) 58%, rgba(196, 224, 211, 0.08) 82%, transparent),
    radial-gradient(ellipse at 76% 50%, rgba(223, 210, 241, 0.26), transparent 58%);
}

.memory-hall-constellation-focus-trail.is-cat i {
  border-color: rgba(223, 210, 241, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 16px rgba(223, 210, 241, 0.18),
    0 10px 28px rgba(0, 0, 0, 0.42);
}

.memory-hall-constellation-focus-trail i.is-trail-1 {
  --memory-hall-focus-trail-stop: 12%;
  --memory-hall-focus-trail-size: clamp(11px, 1.05vw, 18px);
  --memory-hall-focus-trail-delay: 40ms;
}

.memory-hall-constellation-focus-trail i.is-trail-2 {
  --memory-hall-focus-trail-stop: 24%;
  --memory-hall-focus-trail-size: clamp(14px, 1.26vw, 22px);
  --memory-hall-focus-trail-delay: 130ms;
}

.memory-hall-constellation-focus-trail i.is-trail-3 {
  --memory-hall-focus-trail-stop: 37%;
  --memory-hall-focus-trail-size: clamp(12px, 1.12vw, 20px);
  --memory-hall-focus-trail-delay: 220ms;
}

.memory-hall-constellation-focus-trail i.is-trail-4 {
  --memory-hall-focus-trail-stop: 50%;
  --memory-hall-focus-trail-size: clamp(16px, 1.48vw, 26px);
  --memory-hall-focus-trail-delay: 310ms;
}

.memory-hall-constellation-focus-trail i.is-trail-5 {
  --memory-hall-focus-trail-stop: 63%;
  --memory-hall-focus-trail-size: clamp(13px, 1.22vw, 21px);
  --memory-hall-focus-trail-delay: 400ms;
}

.memory-hall-constellation-focus-trail i.is-trail-6 {
  --memory-hall-focus-trail-stop: 76%;
  --memory-hall-focus-trail-size: clamp(17px, 1.6vw, 28px);
  --memory-hall-focus-trail-delay: 490ms;
}

.memory-hall-constellation-focus-trail i.is-trail-7 {
  --memory-hall-focus-trail-stop: 90%;
  --memory-hall-focus-trail-size: clamp(12px, 1.12vw, 20px);
  --memory-hall-focus-trail-delay: 580ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-trail {
  animation: memoryHallConstellationFocusTrail 1040ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-trail i {
  animation: memoryHallConstellationFocusTrailCard 1320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-focus-trail-delay);
}

.memory-hall-constellation-focus-motes {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 8;
  width: clamp(126px, 14vw, 228px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.12))
    scale(calc(var(--memory-hall-constellation-scale) + 0.16));
  transform-origin: center;
}

.memory-hall-constellation-focus-motes::before {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 248, 232, 0.08);
  border-radius: inherit;
  background:
    radial-gradient(circle, rgba(255, 248, 232, 0.08), transparent 62%);
  box-shadow:
    0 0 32px rgba(255, 236, 182, 0.08),
    inset 0 0 28px rgba(255, 248, 232, 0.028);
  content: "";
  opacity: 0.42;
}

.memory-hall-constellation-focus-motes i {
  position: absolute;
  top: var(--memory-hall-focus-mote-y, 50%);
  left: var(--memory-hall-focus-mote-x, 50%);
  display: block;
  width: clamp(3px, 0.42vw, 7px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.9);
  box-shadow:
    0 0 0 4px rgba(255, 248, 232, 0.03),
    0 0 18px rgba(255, 236, 182, 0.28);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    translate(var(--memory-hall-focus-mote-dx, 0px), var(--memory-hall-focus-mote-dy, 0px))
    scale(0.44);
}

.memory-hall-constellation-focus-motes.is-cat i {
  background: rgba(236, 226, 255, 0.9);
  box-shadow:
    0 0 0 4px rgba(223, 210, 241, 0.03),
    0 0 18px rgba(223, 210, 241, 0.26);
}

.memory-hall-constellation-focus-motes i:nth-child(1) {
  --memory-hall-focus-mote-x: 50%;
  --memory-hall-focus-mote-y: 15%;
  --memory-hall-focus-mote-dx: -4px;
  --memory-hall-focus-mote-dy: -22px;
  animation-delay: 40ms;
}

.memory-hall-constellation-focus-motes i:nth-child(2) {
  --memory-hall-focus-mote-x: 70%;
  --memory-hall-focus-mote-y: 24%;
  --memory-hall-focus-mote-dx: 24px;
  --memory-hall-focus-mote-dy: -18px;
  animation-delay: 180ms;
}

.memory-hall-constellation-focus-motes i:nth-child(3) {
  --memory-hall-focus-mote-x: 83%;
  --memory-hall-focus-mote-y: 48%;
  --memory-hall-focus-mote-dx: 32px;
  --memory-hall-focus-mote-dy: 2px;
  animation-delay: 320ms;
}

.memory-hall-constellation-focus-motes i:nth-child(4) {
  --memory-hall-focus-mote-x: 70%;
  --memory-hall-focus-mote-y: 75%;
  --memory-hall-focus-mote-dx: 22px;
  --memory-hall-focus-mote-dy: 24px;
  animation-delay: 460ms;
}

.memory-hall-constellation-focus-motes i:nth-child(5) {
  --memory-hall-focus-mote-x: 50%;
  --memory-hall-focus-mote-y: 86%;
  --memory-hall-focus-mote-dx: -2px;
  --memory-hall-focus-mote-dy: 32px;
  animation-delay: 600ms;
}

.memory-hall-constellation-focus-motes i:nth-child(6) {
  --memory-hall-focus-mote-x: 28%;
  --memory-hall-focus-mote-y: 74%;
  --memory-hall-focus-mote-dx: -26px;
  --memory-hall-focus-mote-dy: 22px;
  animation-delay: 740ms;
}

.memory-hall-constellation-focus-motes i:nth-child(7) {
  --memory-hall-focus-mote-x: 17%;
  --memory-hall-focus-mote-y: 48%;
  --memory-hall-focus-mote-dx: -34px;
  --memory-hall-focus-mote-dy: 0px;
  animation-delay: 880ms;
}

.memory-hall-constellation-focus-motes i:nth-child(8) {
  --memory-hall-focus-mote-x: 29%;
  --memory-hall-focus-mote-y: 24%;
  --memory-hall-focus-mote-dx: -24px;
  --memory-hall-focus-mote-dy: -20px;
  animation-delay: 1020ms;
}

.memory-hall-constellation-focus-motes i:nth-child(9) {
  --memory-hall-focus-mote-x: 51%;
  --memory-hall-focus-mote-y: 50%;
  --memory-hall-focus-mote-dx: 7px;
  --memory-hall-focus-mote-dy: -7px;
  animation-delay: 1160ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-motes {
  animation: memoryHallConstellationFocusMotesIn 760ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-motes i {
  animation: none;
}

.memory-hall-constellation-star {
  position: absolute;
  top: var(--memory-hall-star-y);
  left: var(--memory-hall-star-x);
  width: clamp(2px, 0.34vw, 5px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.82);
  box-shadow:
    0 0 0 4px rgba(255, 248, 232, 0.026),
    0 0 18px rgba(255, 236, 182, 0.18);
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--memory-hall-star-scale));
  animation: memoryHallConstellationAppear 780ms ease forwards;
  animation-delay: var(--memory-hall-star-delay);
}

.memory-hall-constellation-star.is-tone-1,
.memory-hall-constellation-star.is-tone-5 {
  background: rgba(196, 224, 211, 0.82);
  box-shadow:
    0 0 0 4px rgba(176, 213, 197, 0.024),
    0 0 18px rgba(176, 213, 197, 0.16);
}

.memory-hall-constellation-star.is-tone-3,
.memory-hall-constellation-star.is-tone-7 {
  background: rgba(223, 210, 241, 0.76);
  box-shadow:
    0 0 0 4px rgba(211, 190, 235, 0.022),
    0 0 18px rgba(211, 190, 235, 0.14);
}

.memory-hall-constellation-ghost-card {
  position: absolute;
  top: var(--memory-hall-ghost-y);
  left: var(--memory-hall-ghost-x);
  z-index: 1;
  display: block;
  width: clamp(13px, 1.6vw, 32px);
  aspect-ratio: 3 / 4;
  overflow: visible;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 248, 232, 0.52), transparent 16%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 236, 182, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.18), rgba(255, 248, 232, 0.04) 62%, rgba(0, 0, 0, 0.28)),
    rgba(12, 12, 11, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 0 0 4px rgba(255, 248, 232, 0.018),
    0 0 24px rgba(255, 236, 182, 0.2);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-ghost-rotate))
    scale(var(--memory-hall-ghost-scale));
  animation: memoryHallConstellationGhostAppear 820ms ease forwards;
  animation-delay: var(--memory-hall-ghost-delay);
}

.memory-hall-constellation-ghost-card::before {
  position: absolute;
  inset: -90% -120%;
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255, 248, 232, 0.14), transparent 64%);
  content: "";
}

.memory-hall-constellation-ghost-card::after {
  position: absolute;
  right: 18%;
  bottom: 14%;
  left: 18%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.38);
  box-shadow: 0 0 8px rgba(255, 236, 182, 0.18);
  content: "";
}

.memory-hall-constellation-ghost-card i {
  position: absolute;
  top: 37%;
  left: 50%;
  display: block;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 999px 999px 54% 54%;
  background:
    radial-gradient(circle at 36% 36%, rgba(255, 255, 255, 0.42), transparent 13%),
    rgba(255, 248, 232, 0.46);
  box-shadow:
    0 0 0 2px rgba(255, 248, 232, 0.04),
    0 0 12px rgba(255, 236, 182, 0.2);
  transform: translate(-50%, -50%);
}

.memory-hall-constellation-ghost-card.is-cat i {
  border-radius: 48% 48% 999px 999px;
}

.memory-hall-constellation-ghost-card.is-tone-2,
.memory-hall-constellation-ghost-card.is-tone-6 {
  border-color: rgba(176, 213, 197, 0.1);
}

.memory-hall-constellation-ghost-card.is-tone-3,
.memory-hall-constellation-ghost-card.is-tone-7 {
  border-color: rgba(211, 190, 235, 0.1);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-ghost-card {
  width: clamp(13px, 1.6vw, 32px);
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-ghost-card::before {
  animation: none;
  animation-delay: var(--memory-hall-ghost-delay);
}

.memory-hall-constellation-echo-node {
  position: absolute;
  top: var(--memory-hall-echo-y);
  left: var(--memory-hall-echo-x);
  z-index: 2;
  display: grid;
  width: clamp(14px, 1.8vw, 28px);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.08);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 248, 232, 0.22), rgba(255, 248, 232, 0.06) 34%, transparent 70%),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.012),
    0 0 24px rgba(255, 236, 182, 0.08);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    scale(calc(var(--memory-hall-echo-scale) * 0.76));
}

.memory-hall-constellation-echo-node::before,
.memory-hall-constellation-echo-node::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-echo-node::before {
  inset: -74%;
  background: radial-gradient(circle, rgba(255, 248, 232, 0.16), transparent 62%);
}

.memory-hall-constellation-echo-node::after {
  inset: -18%;
  border: 1px solid rgba(255, 248, 232, 0.07);
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.12), transparent),
    linear-gradient(36deg, transparent 24%, rgba(196, 224, 211, 0.08), transparent 60%);
  transform: rotate(18deg);
}

.memory-hall-constellation-echo-node i {
  position: relative;
  z-index: 1;
  display: block;
  width: 32%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.6);
  box-shadow:
    0 0 0 3px rgba(255, 248, 232, 0.026),
    0 0 14px rgba(255, 236, 182, 0.18);
}

.memory-hall-constellation-echo-node.is-cat i {
  border-radius: 48% 48% 999px 999px;
}

.memory-hall-constellation-echo-node.is-tone-2,
.memory-hall-constellation-echo-node.is-tone-6 {
  border-color: rgba(196, 224, 211, 0.12);
}

.memory-hall-constellation-echo-node.is-tone-3,
.memory-hall-constellation-echo-node.is-tone-7 {
  border-color: rgba(223, 210, 241, 0.1);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-echo-node {
  --memory-hall-echo-opacity: 0.18;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(var(--memory-hall-echo-scale));
  animation: memoryHallConstellationEchoIn 760ms ease forwards;
  animation-delay: var(--memory-hall-echo-delay);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-echo-node:nth-of-type(4n + 1) {
  width: clamp(18px, 2.2vw, 34px);
}

.memory-hall-card-only.is-constellation-filter-dog .memory-hall-constellation-echo-node.is-dog,
.memory-hall-card-only.is-constellation-filter-cat .memory-hall-constellation-echo-node.is-cat {
  --memory-hall-echo-opacity: 0.28;
}

.memory-hall-card-only.is-constellation-filter-dog .memory-hall-constellation-echo-node.is-cat,
.memory-hall-card-only.is-constellation-filter-cat .memory-hall-constellation-echo-node.is-dog {
  --memory-hall-echo-opacity: 0.08;
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-star {
  width: clamp(3px, 0.42vw, 6px);
  box-shadow:
    0 0 0 5px rgba(255, 248, 232, 0.034),
    0 0 24px rgba(255, 236, 182, 0.26);
}

.memory-hall-constellation-node {
  appearance: none;
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 3;
  display: grid;
  width: var(--memory-hall-constellation-card-size);
  aspect-ratio: 3 / 4;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 248, 232, 0.92);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-constellation-rotate))
    scale(var(--memory-hall-constellation-scale));
  animation: memoryHallConstellationAppear 620ms ease forwards;
  animation-delay: var(--memory-hall-constellation-delay);
}

.memory-hall-constellation-node::before {
  position: absolute;
  inset: -44% -54%;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.26), rgba(255, 248, 232, 0.07) 30%, transparent 66%),
    conic-gradient(from 26deg, transparent 0 14%, rgba(255, 248, 232, 0.15) 15%, transparent 18% 46%, rgba(196, 224, 211, 0.12) 48%, transparent 52% 74%, rgba(223, 210, 241, 0.09) 76%, transparent 80% 100%);
  content: "";
  opacity: 0.62;
  transition: opacity 180ms ease;
}

.memory-hall-constellation-node::after {
  position: absolute;
  inset: -10%;
  z-index: 0;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.16), transparent),
    linear-gradient(38deg, transparent 24%, rgba(196, 224, 211, 0.1), transparent 62%);
  box-shadow:
    0 0 22px rgba(255, 236, 182, 0.14),
    inset 0 0 18px rgba(255, 248, 232, 0.04);
  content: "";
  opacity: 0.68;
  transform: rotate(12deg);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.memory-hall-constellation-node-orbit {
  position: absolute;
  inset: -8%;
  z-index: 1;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 12px;
  box-shadow:
    0 0 24px rgba(255, 248, 232, 0.08),
    0 0 44px rgba(176, 213, 197, 0.04);
  opacity: 0.82;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.memory-hall-constellation-node-image {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.26);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.18), transparent 30%),
    #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 46px rgba(0, 0, 0, 0.6),
    0 0 38px rgba(255, 236, 182, 0.24);
  opacity: 0.98;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.memory-hall-constellation-node-silhouette {
  position: relative;
  z-index: 2;
  display: grid;
  width: 42%;
  aspect-ratio: 3 / 4;
  place-items: center;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px 999px 12px 12px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 248, 232, 0.32), transparent 38%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.12), rgba(255, 236, 182, 0.04));
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.18),
    inset 0 0 16px rgba(255, 248, 232, 0.04);
  color: rgba(255, 248, 232, 0.66);
  opacity: 0.72;
}

.memory-hall-constellation-node-silhouette::before,
.memory-hall-constellation-node-silhouette::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-node-silhouette::before {
  inset: -78%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 236, 182, 0.18), transparent 66%);
  filter: blur(6px);
  opacity: 0.68;
}

.memory-hall-constellation-node-silhouette::after {
  right: -34%;
  bottom: -13%;
  left: -34%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.46), transparent);
  box-shadow: 0 0 16px rgba(255, 236, 182, 0.22);
}

.memory-hall-constellation-node.is-image-deferred .memory-hall-constellation-node-image {
  border-color: rgba(255, 248, 232, 0.14);
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.2), transparent 34%),
    radial-gradient(ellipse at 50% 72%, rgba(255, 236, 182, 0.08), transparent 62%),
    #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 10px 30px rgba(0, 0, 0, 0.48),
    0 0 22px rgba(255, 236, 182, 0.12);
}

.memory-hall-constellation-node-image::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.1) 64%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 36% 70%, rgba(0, 0, 0, 0.36));
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-node-image::before {
  position: absolute;
  right: 10%;
  bottom: 10%;
  z-index: 2;
  width: clamp(18px, 2vw, 34px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 7px 7px 999px 999px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 248, 232, 0.72), rgba(255, 236, 182, 0.18) 32%, transparent 72%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.16), transparent 56%);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.24),
    0 0 46px rgba(255, 248, 232, 0.1),
    inset 0 0 18px rgba(255, 248, 232, 0.04);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate3d(6px, 8px, 18px) scale(0.58);
}

.memory-hall-constellation-node.is-cat .memory-hall-constellation-node-image::before {
  border-color: rgba(223, 210, 241, 0.22);
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 248, 232, 0.58), rgba(223, 210, 241, 0.22) 34%, transparent 72%),
    linear-gradient(180deg, rgba(236, 226, 255, 0.15), transparent 56%);
  box-shadow:
    0 0 18px rgba(223, 210, 241, 0.22),
    0 0 46px rgba(255, 248, 232, 0.08),
    inset 0 0 18px rgba(255, 248, 232, 0.04);
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node .memory-hall-constellation-node-image::after {
  animation: none;
  animation-delay: var(--memory-hall-card-light-delay, 0ms);
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node.is-slot-1 .memory-hall-constellation-node-image::after {
  --memory-hall-card-light-delay: 520ms;
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node.is-slot-2 .memory-hall-constellation-node-image::after {
  --memory-hall-card-light-delay: 1040ms;
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node.is-slot-3 .memory-hall-constellation-node-image::after {
  --memory-hall-card-light-delay: 1560ms;
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node.is-slot-4 .memory-hall-constellation-node-image::after {
  --memory-hall-card-light-delay: 2080ms;
}

.memory-hall-card-only.is-constellation-exploring:not(.is-opening-room) .memory-hall-constellation-node.is-slot-5 .memory-hall-constellation-node-image::after {
  --memory-hall-card-light-delay: 2600ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active::before,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active::after,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active .memory-hall-constellation-node-image,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active .memory-hall-constellation-node-image::before {
  animation: none;
}

.memory-hall-constellation-node-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-constellation-node-name {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  max-width: 88px;
  overflow: hidden;
  color: rgba(255, 248, 232, 0.78);
  font-size: clamp(0.58rem, 0.7vw, 0.72rem);
  font-weight: 650;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.74);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(-3px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.memory-hall-constellation-node:is(:hover, :focus-visible) {
  z-index: 30;
  outline: none;
}

.memory-hall-constellation-node.is-active {
  z-index: 9;
  outline: none;
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(calc(var(--memory-hall-constellation-scale) + 0.16));
}

.memory-hall-constellation-node:is(:hover, :focus-visible)::before,
.memory-hall-constellation-node.is-active::before {
  opacity: 0.68;
}

.memory-hall-constellation-node:is(:hover, :focus-visible)::after,
.memory-hall-constellation-node.is-active::after {
  border-color: rgba(255, 248, 232, 0.38);
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.08),
    0 0 34px rgba(255, 236, 182, 0.32),
    inset 0 0 22px rgba(255, 248, 232, 0.06);
  opacity: 0.88;
}

.memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-orbit,
.memory-hall-constellation-node.is-active .memory-hall-constellation-node-orbit {
  border-color: rgba(255, 248, 232, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.08),
    0 0 34px rgba(255, 236, 182, 0.24);
  opacity: 1;
}

.memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-name,
.memory-hall-constellation-node.is-active .memory-hall-constellation-node-name {
  opacity: 0.94;
  transform: translateX(-50%) translateY(0);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-node {
  width: clamp(70px, 7.2vw, 126px);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-node-name {
  opacity: 0;
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-node:is(:hover, :focus-visible) {
  z-index: 32;
  filter: brightness(1.18) saturate(1.08);
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(calc(var(--memory-hall-constellation-scale) + 0.18));
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-image {
  border-color: rgba(255, 248, 232, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 74px rgba(0, 0, 0, 0.68),
    0 0 64px rgba(255, 236, 182, 0.38),
    0 0 130px rgba(255, 248, 232, 0.14);
  opacity: 1;
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-name {
  max-width: min(132px, 18vw);
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(4, 5, 4, 0.78), rgba(4, 5, 4, 0.46)),
    radial-gradient(circle at 18% 50%, rgba(255, 236, 182, 0.18), transparent 48%);
  padding: 6px 9px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(255, 236, 182, 0.16);
  opacity: 0.96;
  transform: translateX(-50%) translateY(2px);
  backdrop-filter: blur(14px);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-vista-image {
  filter: saturate(1.18) contrast(1.1) brightness(0.88);
  opacity: 0.98;
  transform:
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
    scale(1.28);
  transition:
    opacity 620ms ease,
    transform 880ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 620ms ease;
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-vista-image {
  animation: memoryHallConstellationVistaApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-vista-shade {
  background:
    radial-gradient(circle at var(--memory-hall-active-constellation-x) var(--memory-hall-active-constellation-y), rgba(255, 248, 232, 0.16), transparent 18%),
    radial-gradient(circle at 50% 42%, rgba(255, 248, 232, 0.03), transparent 21%),
    radial-gradient(ellipse at 50% 52%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.14) 44%, rgba(0, 0, 0, 0.72) 92%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.1) 68%, rgba(0, 0, 0, 0.82)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 42%, rgba(0, 0, 0, 0.68));
  transition: background 620ms ease;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-sky {
  transform:
    translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
    scale(1.28);
  transition:
    inset 260ms ease,
    transform 880ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-constellation-sky {
  animation: memoryHallConstellationSkyApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node {
  animation: none;
  opacity: 1;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node:not(.is-active) {
  opacity: 0.16;
  filter: blur(1.8px) saturate(0.62) brightness(0.54);
  transition:
    opacity 520ms ease,
    filter 520ms ease,
    transform 760ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-near-active:not(.is-active) {
  z-index: 12;
  opacity: 0.56;
  filter: blur(0.4px) saturate(0.86) brightness(0.78);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.34))
    scale(calc(var(--memory-hall-constellation-scale) + 0.02));
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-soft-active:not(.is-active) {
  z-index: 8;
  opacity: 0.28;
  filter: blur(1.1px) saturate(0.72) brightness(0.64);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.56))
    scale(calc(var(--memory-hall-constellation-scale) - 0.02));
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-far-active:not(.is-active) {
  opacity: 0.08;
  filter: blur(2.4px) saturate(0.52) brightness(0.46);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-image-deferred:not(.is-active) {
  opacity: 0.11;
  filter: blur(0.75px) saturate(0.58) brightness(0.6);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.38))
    scale(calc(var(--memory-hall-constellation-scale) - 0.06));
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-image-deferred:not(.is-active)::before,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-image-deferred:not(.is-active)::after {
  opacity: 0.26;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-image-deferred:not(.is-active) .memory-hall-constellation-node-orbit {
  border-color: rgba(255, 248, 232, 0.12);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.08),
    0 0 36px rgba(255, 248, 232, 0.035);
  opacity: 0.58;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-image-deferred:not(.is-active) .memory-hall-constellation-node-name {
  opacity: 0;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-near-active:not(.is-active)::before,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-near-active:not(.is-active)::after {
  opacity: 0.5;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-near-active:not(.is-active) .memory-hall-constellation-node-orbit {
  border-color: rgba(255, 248, 232, 0.24);
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.04),
    0 0 26px rgba(255, 236, 182, 0.16);
  opacity: 0.9;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active {
  z-index: 14;
  opacity: 0.62;
  filter: brightness(1.06) saturate(0.92);
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  transition:
    transform 880ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 620ms ease,
    opacity 520ms ease;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active .memory-hall-constellation-node-image {
  border-color: rgba(255, 248, 232, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 18px 54px rgba(0, 0, 0, 0.64),
    0 0 44px rgba(255, 236, 182, 0.28),
    0 0 96px rgba(255, 248, 232, 0.08);
  opacity: 0.56;
  transform: translateY(0) scale(0.62);
  transition:
    border-color 620ms ease,
    opacity 520ms ease,
    box-shadow 620ms ease,
    transform 880ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-node.is-active .memory-hall-constellation-node-name {
  opacity: 0;
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-constellation-node.is-active {
  animation: memoryHallConstellationActiveNodeApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread:not(.is-active),
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-ghost-card,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-echo-node,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-star {
  opacity: 0.045 !important;
  filter: blur(3.4px) saturate(0.48) brightness(0.5);
  transition:
    opacity 520ms ease,
    filter 520ms ease;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread.is-near-active:not(.is-active) {
  --memory-hall-thread-pulse-opacity: 0.34;
  --memory-hall-thread-end-opacity: 0.58;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(255, 248, 232, 0.42), rgba(255, 236, 182, 0.22), transparent);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.16),
    0 0 46px rgba(255, 248, 232, 0.08);
  opacity: 0.38 !important;
  filter: blur(0.2px) saturate(0.9) brightness(0.9);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread.is-soft-active:not(.is-active) {
  --memory-hall-thread-pulse-opacity: 0.14;
  --memory-hall-thread-end-opacity: 0.34;
  opacity: 0.2 !important;
  filter: blur(0.8px) saturate(0.72) brightness(0.72);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread.is-active {
  --memory-hall-thread-pulse-opacity: 0.64;
  --memory-hall-thread-end-opacity: 0.82;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 248, 232, 0.82), rgba(255, 236, 182, 0.42), transparent);
  box-shadow:
    0 0 24px rgba(255, 236, 182, 0.28),
    0 0 62px rgba(255, 248, 232, 0.12);
  opacity: 0.78 !important;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread:is(.is-active, .is-near-active, .is-soft-active)::before {
  animation: none;
  animation-delay: var(--memory-hall-thread-delay);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-thread:is(.is-active, .is-near-active, .is-soft-active)::after {
  animation: none;
  animation-delay: var(--memory-hall-thread-delay);
}

.memory-hall-constellation-focus-sanctuary {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 8;
  width: clamp(148px, 14vw, 236px);
  aspect-ratio: 1 / 0.46;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.24), rgba(255, 236, 182, 0.08) 34%, transparent 72%),
    radial-gradient(ellipse at 50% 58%, rgba(196, 224, 211, 0.08), transparent 68%);
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.055),
    0 0 44px rgba(255, 236, 182, 0.18),
    0 0 96px rgba(255, 248, 232, 0.075);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, 28%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
    scale(calc(var(--memory-hall-constellation-scale) + 0.28));
}

.memory-hall-constellation-focus-sanctuary::before,
.memory-hall-constellation-focus-sanctuary::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}

.memory-hall-constellation-focus-sanctuary::before {
  inset: 22% 13%;
  border: 1px solid rgba(255, 248, 232, 0.18);
  box-shadow:
    inset 0 0 18px rgba(255, 248, 232, 0.045),
    0 0 22px rgba(255, 236, 182, 0.12);
  opacity: 0.72;
}

.memory-hall-constellation-focus-sanctuary::after {
  inset: 37% 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.38), transparent);
  filter: blur(1px);
  opacity: 0.76;
}

.memory-hall-constellation-focus-sanctuary.is-cat {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.2), rgba(223, 210, 241, 0.09) 36%, transparent 72%),
    radial-gradient(ellipse at 50% 58%, rgba(196, 224, 211, 0.065), transparent 68%);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-sanctuary {
  animation: memoryHallConstellationFocusSanctuary 820ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-focus-hush {
  position: absolute;
  inset: 0;
  z-index: 13;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  contain: paint;
  background:
    radial-gradient(
      ellipse at 83% 53%,
      rgba(255, 248, 232, 0.22),
      rgba(255, 236, 182, 0.08) 18%,
      transparent 41%
    ),
    radial-gradient(
      circle at var(--memory-hall-active-constellation-x) var(--memory-hall-active-constellation-y),
      rgba(255, 248, 232, 0.22),
      rgba(255, 236, 182, 0.08) 12%,
      transparent 28%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.04) 46%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 44%, rgba(0, 0, 0, 0.3));
  filter: blur(0.1px);
  transform: translate3d(0, 0, 0);
}

.memory-hall-constellation-focus-hush::before,
.memory-hall-constellation-focus-hush::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-focus-hush::before {
  top: var(--memory-hall-active-constellation-y);
  left: var(--memory-hall-active-constellation-x);
  width: clamp(180px, 23vw, 420px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.42), rgba(255, 236, 182, 0.14) 18%, transparent 54%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(255, 248, 232, 0.24) 18%, transparent 23% 48%, rgba(196, 224, 211, 0.16) 52%, transparent 58% 78%, rgba(255, 236, 182, 0.16) 82%, transparent 88% 100%);
  filter: blur(0.6px);
  opacity: 0.74;
  transform: translate(-50%, -50%) scale(0.78) rotate(-8deg);
}

.memory-hall-constellation-focus-hush::after {
  right: clamp(16px, 6vw, 108px);
  bottom: clamp(108px, 17vh, 220px);
  width: clamp(220px, 27vw, 430px);
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255, 248, 232, 0.24), rgba(255, 236, 182, 0.08) 38%, transparent 72%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 58%);
  box-shadow:
    0 0 88px rgba(255, 236, 182, 0.18),
    0 0 180px rgba(255, 248, 232, 0.08);
  filter: blur(16px);
  opacity: 0.64;
  transform: translate3d(4px, 10px, 0) scale(0.86);
}

.memory-hall-constellation-focus-hush.is-cat {
  background:
    radial-gradient(
      ellipse at 83% 53%,
      rgba(255, 248, 232, 0.2),
      rgba(223, 210, 241, 0.1) 19%,
      transparent 42%
    ),
    radial-gradient(
      circle at var(--memory-hall-active-constellation-x) var(--memory-hall-active-constellation-y),
      rgba(255, 248, 232, 0.2),
      rgba(223, 210, 241, 0.09) 13%,
      transparent 29%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.04) 46%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 44%, rgba(0, 0, 0, 0.3));
}

.memory-hall-constellation-focus-hush.is-cat::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.36), rgba(223, 210, 241, 0.15) 20%, transparent 55%),
    conic-gradient(from 18deg, transparent 0 14%, rgba(255, 248, 232, 0.2) 18%, transparent 23% 48%, rgba(223, 210, 241, 0.2) 52%, transparent 58% 78%, rgba(196, 224, 211, 0.12) 82%, transparent 88% 100%);
}

.memory-hall-constellation-focus-hush.is-cat::after {
  box-shadow:
    0 0 88px rgba(223, 210, 241, 0.18),
    0 0 180px rgba(255, 248, 232, 0.08);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush {
  animation: memoryHallConstellationFocusHush 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush::before {
  animation: memoryHallConstellationFocusHushNode 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush::after {
  animation: memoryHallConstellationFocusHushCard 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-focus-witnesses {
  position: absolute;
  right: clamp(2px, 5.8vw, 94px);
  bottom: clamp(94px, 15.8vh, 206px);
  z-index: 17;
  width: clamp(230px, 28vw, 440px);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  opacity: 0;
  transform:
    translate3d(calc(var(--memory-hall-pointer-card-x) * -0.18), calc(var(--memory-hall-pointer-card-y) * -0.18), 0)
    scale(0.92);
}

.memory-hall-constellation-focus-witnesses::before {
  position: absolute;
  inset: 6% 0 8%;
  border: 1px solid rgba(255, 248, 232, 0.07);
  border-radius: 999px;
  background:
    conic-gradient(from -18deg, transparent 0 10%, rgba(255, 248, 232, 0.16) 12%, transparent 15% 38%, rgba(196, 224, 211, 0.11) 40%, transparent 44% 64%, rgba(223, 210, 241, 0.09) 67%, transparent 71% 100%),
    radial-gradient(ellipse at 50% 50%, transparent 0 54%, rgba(255, 236, 182, 0.08) 68%, transparent 76%);
  box-shadow:
    0 0 54px rgba(255, 236, 182, 0.08),
    inset 0 0 42px rgba(255, 248, 232, 0.025);
  content: "";
  opacity: 0.58;
  transform: rotate(8deg);
}

.memory-hall-constellation-focus-witnesses i {
  --memory-hall-witness-x: 50%;
  --memory-hall-witness-y: 50%;
  --memory-hall-witness-scale: 1;
  --memory-hall-witness-rotate: 0deg;
  --memory-hall-witness-delay: 0ms;
  position: absolute;
  top: var(--memory-hall-witness-y);
  left: var(--memory-hall-witness-x);
  width: clamp(11px, 1.25vw, 20px);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 5px;
  background:
    radial-gradient(circle at 50% 23%, rgba(255, 248, 232, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.12), rgba(255, 236, 182, 0.025)),
    rgba(5, 5, 5, 0.66);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(255, 236, 182, 0.16);
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-witness-rotate))
    scale(calc(var(--memory-hall-witness-scale) * 0.62));
}

.memory-hall-constellation-focus-witnesses i::after {
  position: absolute;
  right: 24%;
  bottom: 4px;
  left: 24%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.58);
  box-shadow: 0 0 8px rgba(255, 236, 182, 0.22);
  content: "";
  opacity: 0.72;
}

.memory-hall-constellation-focus-witnesses.is-cat i {
  border-color: rgba(223, 210, 241, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 22px rgba(223, 210, 241, 0.16);
}

.memory-hall-constellation-focus-witnesses i:nth-child(1) {
  --memory-hall-witness-x: 10%;
  --memory-hall-witness-y: 26%;
  --memory-hall-witness-scale: 0.78;
  --memory-hall-witness-rotate: -13deg;
  --memory-hall-witness-delay: 60ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(2) {
  --memory-hall-witness-x: 29%;
  --memory-hall-witness-y: 12%;
  --memory-hall-witness-scale: 0.66;
  --memory-hall-witness-rotate: 8deg;
  --memory-hall-witness-delay: 120ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(3) {
  --memory-hall-witness-x: 64%;
  --memory-hall-witness-y: 9%;
  --memory-hall-witness-scale: 0.72;
  --memory-hall-witness-rotate: -6deg;
  --memory-hall-witness-delay: 0ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(4) {
  --memory-hall-witness-x: 91%;
  --memory-hall-witness-y: 29%;
  --memory-hall-witness-scale: 0.8;
  --memory-hall-witness-rotate: 12deg;
  --memory-hall-witness-delay: 170ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(5) {
  --memory-hall-witness-x: 8%;
  --memory-hall-witness-y: 58%;
  --memory-hall-witness-scale: 0.62;
  --memory-hall-witness-rotate: 9deg;
  --memory-hall-witness-delay: 230ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(6) {
  --memory-hall-witness-x: 94%;
  --memory-hall-witness-y: 62%;
  --memory-hall-witness-scale: 0.68;
  --memory-hall-witness-rotate: -10deg;
  --memory-hall-witness-delay: 280ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(7) {
  --memory-hall-witness-x: 18%;
  --memory-hall-witness-y: 85%;
  --memory-hall-witness-scale: 0.72;
  --memory-hall-witness-rotate: -7deg;
  --memory-hall-witness-delay: 340ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(8) {
  --memory-hall-witness-x: 49%;
  --memory-hall-witness-y: 94%;
  --memory-hall-witness-scale: 0.58;
  --memory-hall-witness-rotate: 5deg;
  --memory-hall-witness-delay: 390ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(9) {
  --memory-hall-witness-x: 82%;
  --memory-hall-witness-y: 86%;
  --memory-hall-witness-scale: 0.74;
  --memory-hall-witness-rotate: 11deg;
  --memory-hall-witness-delay: 450ms;
}

.memory-hall-constellation-focus-witnesses i:nth-child(10) {
  --memory-hall-witness-x: 50%;
  --memory-hall-witness-y: 48%;
  --memory-hall-witness-scale: 0.46;
  --memory-hall-witness-rotate: -2deg;
  --memory-hall-witness-delay: 510ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-witnesses {
  animation: memoryHallConstellationFocusWitnesses 860ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-witnesses i {
  animation: memoryHallConstellationFocusWitnessCard 760ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-witness-delay);
}

@media (prefers-reduced-motion: reduce) {
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush {
    opacity: 0.44;
    filter: none;
    transform: none;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush::before {
    opacity: 0.56;
    filter: none;
    transform: translate(-50%, -50%) scale(0.84) rotate(0deg);
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-hush::after {
    opacity: 0.5;
    filter: blur(16px);
    transform: translate3d(4px, 10px, 0) scale(0.86);
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-witnesses {
    opacity: 0.72;
    filter: none;
    transform: none;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-witnesses i {
    opacity: 0.54;
    filter: none;
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-witness-rotate))
      scale(calc(var(--memory-hall-witness-scale) * 0.9));
  }
}

.memory-hall-constellation-focus-dust {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 11;
  width: clamp(176px, 16vw, 272px);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
    scale(calc(var(--memory-hall-constellation-scale) + 0.28));
}

.memory-hall-constellation-focus-dust i {
  --memory-hall-focus-dust-x: 50%;
  --memory-hall-focus-dust-y: 50%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 0ms;
  position: absolute;
  top: var(--memory-hall-focus-dust-y);
  left: var(--memory-hall-focus-dust-x);
  width: var(--memory-hall-focus-dust-size);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.92);
  box-shadow:
    0 0 10px rgba(255, 236, 182, 0.54),
    0 0 24px rgba(255, 248, 232, 0.24);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.memory-hall-constellation-focus-dust.is-cat i {
  box-shadow:
    0 0 10px rgba(223, 210, 241, 0.46),
    0 0 24px rgba(255, 248, 232, 0.2);
}

.memory-hall-constellation-focus-dust i:nth-child(1) {
  --memory-hall-focus-dust-x: 18%;
  --memory-hall-focus-dust-y: 28%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 30ms;
}

.memory-hall-constellation-focus-dust i:nth-child(2) {
  --memory-hall-focus-dust-x: 34%;
  --memory-hall-focus-dust-y: 14%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 110ms;
}

.memory-hall-constellation-focus-dust i:nth-child(3) {
  --memory-hall-focus-dust-x: 68%;
  --memory-hall-focus-dust-y: 18%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 70ms;
}

.memory-hall-constellation-focus-dust i:nth-child(4) {
  --memory-hall-focus-dust-x: 82%;
  --memory-hall-focus-dust-y: 34%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 160ms;
}

.memory-hall-constellation-focus-dust i:nth-child(5) {
  --memory-hall-focus-dust-x: 12%;
  --memory-hall-focus-dust-y: 48%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 230ms;
}

.memory-hall-constellation-focus-dust i:nth-child(6) {
  --memory-hall-focus-dust-x: 88%;
  --memory-hall-focus-dust-y: 54%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 190ms;
}

.memory-hall-constellation-focus-dust i:nth-child(7) {
  --memory-hall-focus-dust-x: 26%;
  --memory-hall-focus-dust-y: 73%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 270ms;
}

.memory-hall-constellation-focus-dust i:nth-child(8) {
  --memory-hall-focus-dust-x: 72%;
  --memory-hall-focus-dust-y: 78%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 330ms;
}

.memory-hall-constellation-focus-dust i:nth-child(9) {
  --memory-hall-focus-dust-x: 42%;
  --memory-hall-focus-dust-y: 88%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 250ms;
}

.memory-hall-constellation-focus-dust i:nth-child(10) {
  --memory-hall-focus-dust-x: 58%;
  --memory-hall-focus-dust-y: 7%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 390ms;
}

.memory-hall-constellation-focus-dust i:nth-child(11) {
  --memory-hall-focus-dust-x: 6%;
  --memory-hall-focus-dust-y: 63%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 430ms;
}

.memory-hall-constellation-focus-dust i:nth-child(12) {
  --memory-hall-focus-dust-x: 94%;
  --memory-hall-focus-dust-y: 70%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 470ms;
}

.memory-hall-constellation-focus-dust i:nth-child(13) {
  --memory-hall-focus-dust-x: 22%;
  --memory-hall-focus-dust-y: 8%;
  --memory-hall-focus-dust-size: 2px;
  --memory-hall-focus-dust-delay: 510ms;
}

.memory-hall-constellation-focus-dust i:nth-child(14) {
  --memory-hall-focus-dust-x: 80%;
  --memory-hall-focus-dust-y: 86%;
  --memory-hall-focus-dust-size: 3px;
  --memory-hall-focus-dust-delay: 550ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-dust i {
  animation: memoryHallConstellationFocusDust 1.48s ease both;
  animation-delay: var(--memory-hall-focus-dust-delay);
}

.memory-hall-constellation-companion-halo {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 34;
  width: clamp(190px, 18vw, 310px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
    scale(calc(var(--memory-hall-constellation-scale) + 0.22));
}

.memory-hall-constellation-companion-halo::before {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255, 248, 232, 0.1);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(255, 248, 232, 0.055) 64%, transparent 74%),
    conic-gradient(from 24deg, transparent 0 10%, rgba(255, 248, 232, 0.16) 12%, transparent 15% 42%, rgba(196, 224, 211, 0.1) 45%, transparent 49% 76%, rgba(223, 210, 241, 0.08) 79%, transparent 84% 100%);
  box-shadow:
    0 0 44px rgba(255, 236, 182, 0.1),
    inset 0 0 34px rgba(255, 248, 232, 0.025);
  content: "";
  opacity: 0.72;
  pointer-events: none;
}

.memory-hall-constellation-companion-halo::after {
  position: absolute;
  inset: 5%;
  border-radius: 999px;
  background:
    conic-gradient(from 14deg, transparent 0 5%, rgba(255, 248, 232, 0.2) 6%, transparent 7% 18%, rgba(196, 224, 211, 0.11) 19%, transparent 20% 34%, rgba(255, 248, 232, 0.16) 35%, transparent 36% 51%, rgba(223, 210, 241, 0.1) 52%, transparent 53% 67%, rgba(255, 236, 182, 0.14) 68%, transparent 69% 83%, rgba(255, 248, 232, 0.18) 84%, transparent 85% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.18), transparent 14%);
  content: "";
  filter: blur(0.2px);
  opacity: 0;
  mask-image: radial-gradient(circle at 50% 50%, transparent 0 23%, #000 25% 69%, transparent 73%);
  pointer-events: none;
  animation: none;
}

.memory-hall-constellation-companion-halo button {
  --memory-hall-companion-halo-rotate: 0deg;
  --memory-hall-companion-halo-counter-rotate: 0deg;
  --memory-hall-companion-halo-radius: clamp(78px, 7.2vw, 126px);
  --memory-hall-companion-halo-scale: 1;
  --memory-hall-companion-halo-delay: 0ms;
  appearance: none;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(29px, 2.9vw, 48px);
  aspect-ratio: 3 / 4;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.16), transparent 34%),
    #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(0, 0, 0, 0.52),
    0 0 28px rgba(255, 236, 182, 0.16);
  color: rgba(255, 248, 232, 0.78);
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-companion-halo-rotate))
    translateY(calc(var(--memory-hall-companion-halo-radius) * -1))
    rotate(var(--memory-hall-companion-halo-counter-rotate))
    scale(calc(var(--memory-hall-companion-halo-scale) * 0.72));
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

.memory-hall-constellation-companion-halo button::after,
.memory-hall-constellation-companion-halo button span {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-companion-halo button::after {
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 34% 70%, rgba(0, 0, 0, 0.42));
}

.memory-hall-constellation-companion-halo button span {
  right: 26%;
  bottom: 5px;
  left: 26%;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.6);
  box-shadow: 0 0 10px rgba(255, 236, 182, 0.22);
  opacity: 0.76;
}

.memory-hall-constellation-companion-halo button.is-cat {
  border-color: rgba(223, 210, 241, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 18px 44px rgba(0, 0, 0, 0.52),
    0 0 28px rgba(223, 210, 241, 0.16);
}

.memory-hall-constellation-companion-halo button:is(:hover, :focus-visible) {
  outline: none;
  border-color: rgba(255, 248, 232, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 24px 58px rgba(0, 0, 0, 0.6),
    0 0 54px rgba(255, 236, 182, 0.28);
  filter: brightness(1.12) saturate(1.08);
}

.memory-hall-constellation-companion-halo button:is(:hover, :focus-visible) span {
  background: rgba(255, 248, 232, 0.82);
  box-shadow:
    0 0 14px rgba(255, 236, 182, 0.34),
    0 0 32px rgba(255, 248, 232, 0.16);
}

.memory-hall-constellation-companion-halo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-constellation-companion-halo svg {
  width: 42%;
  height: 42%;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.52));
}

.memory-hall-constellation-companion-halo button.is-slot-1 {
  --memory-hall-companion-halo-rotate: -68deg;
  --memory-hall-companion-halo-counter-rotate: 68deg;
  --memory-hall-companion-halo-scale: 0.92;
}

.memory-hall-constellation-companion-halo button.is-slot-2 {
  --memory-hall-companion-halo-rotate: -24deg;
  --memory-hall-companion-halo-counter-rotate: 24deg;
  --memory-hall-companion-halo-radius: clamp(86px, 7.8vw, 138px);
  --memory-hall-companion-halo-scale: 0.98;
}

.memory-hall-constellation-companion-halo button.is-slot-3 {
  --memory-hall-companion-halo-rotate: 22deg;
  --memory-hall-companion-halo-counter-rotate: -22deg;
  --memory-hall-companion-halo-scale: 0.9;
}

.memory-hall-constellation-companion-halo button.is-slot-4 {
  --memory-hall-companion-halo-rotate: 74deg;
  --memory-hall-companion-halo-counter-rotate: -74deg;
  --memory-hall-companion-halo-radius: clamp(82px, 7.6vw, 132px);
  --memory-hall-companion-halo-scale: 1.02;
}

.memory-hall-constellation-companion-halo button.is-slot-5 {
  --memory-hall-companion-halo-rotate: 126deg;
  --memory-hall-companion-halo-counter-rotate: -126deg;
  --memory-hall-companion-halo-scale: 0.88;
}

.memory-hall-constellation-companion-halo button.is-slot-6 {
  --memory-hall-companion-halo-rotate: 172deg;
  --memory-hall-companion-halo-counter-rotate: -172deg;
  --memory-hall-companion-halo-radius: clamp(88px, 8vw, 142px);
  --memory-hall-companion-halo-scale: 0.96;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo {
  animation: memoryHallConstellationCompanionHalo 880ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-gentle-tour:not(.is-opening-room) .memory-hall-constellation-companion-halo {
  animation:
    memoryHallConstellationCompanionHalo 880ms cubic-bezier(0.18, 0.82, 0.24, 1) both,
    memoryHallConstellationCompanionHaloBreathe 2600ms ease-in-out 880ms infinite;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo button {
  animation: memoryHallConstellationCompanionHaloCard 760ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-companion-halo-delay);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo button::after {
  animation: none;
  animation-delay: calc(var(--memory-hall-companion-halo-delay) + 760ms);
}

@media (prefers-reduced-motion: reduce) {
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-focus-dust i {
    opacity: 0.24;
    filter: none;
    transform: translate(-50%, -50%) scale(0.84);
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo,
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo button,
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo button::after {
    animation: none !important;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo {
    opacity: 0.72;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-companion-halo button {
    opacity: 0.62;
    filter: none;
  }
}

.memory-hall-constellation-focus-beacon {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 10;
  width: clamp(124px, 12vw, 198px);
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.16))
    scale(calc(var(--memory-hall-constellation-scale) + 0.34));
  animation: memoryHallConstellationFocusBeacon 920ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-focus-beacon::before,
.memory-hall-constellation-focus-beacon::after {
  position: absolute;
  border-radius: inherit;
  content: "";
}

.memory-hall-constellation-focus-beacon::before {
  inset: -34%;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.24), rgba(255, 236, 182, 0.11) 36%, transparent 68%),
    conic-gradient(from 24deg, transparent 0 18%, rgba(255, 248, 232, 0.2) 22%, transparent 27% 52%, rgba(196, 224, 211, 0.16) 58%, transparent 64% 84%, rgba(223, 210, 241, 0.12) 90%, transparent 96% 100%);
  filter: blur(0.2px);
  opacity: 0.92;
}

.memory-hall-constellation-focus-beacon::after {
  inset: -7%;
  border: 1px solid rgba(255, 248, 232, 0.24);
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.18), transparent),
    linear-gradient(34deg, transparent 22%, rgba(196, 224, 211, 0.12), transparent 62%);
  box-shadow:
    0 0 42px rgba(255, 236, 182, 0.26),
    inset 0 0 28px rgba(255, 248, 232, 0.06);
  opacity: 0.84;
  transform: rotate(9deg);
}

.memory-hall-constellation-focus-beacon.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.2), rgba(223, 210, 241, 0.14) 38%, transparent 68%),
    conic-gradient(from 24deg, transparent 0 18%, rgba(255, 248, 232, 0.18) 22%, transparent 27% 52%, rgba(223, 210, 241, 0.18) 58%, transparent 64% 84%, rgba(196, 224, 211, 0.12) 90%, transparent 96% 100%);
}

.memory-hall-constellation-depth-lens {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 10;
  width: clamp(220px, 30vw, 560px);
  aspect-ratio: 1.38 / 1;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.05))
    scale(calc(var(--memory-hall-constellation-scale) + 0.18));
  transform-origin: center;
}

.memory-hall-constellation-depth-lens::before,
.memory-hall-constellation-depth-lens::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-depth-lens::before {
  inset: -10%;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 30%, rgba(255, 248, 232, 0.14) 35%, rgba(255, 236, 182, 0.06) 52%, transparent 76%),
    conic-gradient(from 12deg, transparent 0 13%, rgba(255, 248, 232, 0.18) 15%, transparent 19% 44%, rgba(196, 224, 211, 0.1) 48%, transparent 54% 72%, rgba(223, 210, 241, 0.08) 78%, transparent 84% 100%);
  filter: blur(0.6px);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.memory-hall-constellation-depth-lens::after {
  inset: 17% 12%;
  border: 1px solid rgba(255, 248, 232, 0.13);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.08), transparent 62%),
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.16), transparent);
  box-shadow:
    0 0 50px rgba(255, 236, 182, 0.16),
    inset 0 0 42px rgba(255, 248, 232, 0.04);
  opacity: 0.58;
  transform: rotate(-5deg);
}

.memory-hall-constellation-depth-lens.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 30%, rgba(255, 248, 232, 0.11) 35%, rgba(223, 210, 241, 0.08) 54%, transparent 76%),
    conic-gradient(from 12deg, transparent 0 13%, rgba(255, 248, 232, 0.16) 15%, transparent 19% 44%, rgba(223, 210, 241, 0.14) 48%, transparent 54% 72%, rgba(196, 224, 211, 0.08) 78%, transparent 84% 100%);
}

.memory-hall-constellation-depth-lens i {
  --memory-hall-depth-lens-inset: 12%;
  --memory-hall-depth-lens-rotate: 0deg;
  --memory-hall-depth-lens-delay: 0ms;
  position: absolute;
  inset: var(--memory-hall-depth-lens-inset);
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.14), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(255, 236, 182, 0.06) 66%, transparent 78%);
  box-shadow:
    0 0 34px rgba(255, 236, 182, 0.12),
    inset 0 0 28px rgba(255, 248, 232, 0.028);
  opacity: 0;
  transform: rotate(var(--memory-hall-depth-lens-rotate)) scale(0.74);
}

.memory-hall-constellation-depth-lens i.is-lens-1 {
  --memory-hall-depth-lens-inset: -2% 4%;
  --memory-hall-depth-lens-rotate: -14deg;
  --memory-hall-depth-lens-delay: 40ms;
}

.memory-hall-constellation-depth-lens i.is-lens-2 {
  --memory-hall-depth-lens-inset: 11% 16%;
  --memory-hall-depth-lens-rotate: 18deg;
  --memory-hall-depth-lens-delay: 150ms;
}

.memory-hall-constellation-depth-lens i.is-lens-3 {
  --memory-hall-depth-lens-inset: 22% 3%;
  --memory-hall-depth-lens-rotate: 43deg;
  --memory-hall-depth-lens-delay: 260ms;
}

.memory-hall-constellation-depth-lens i.is-lens-4 {
  --memory-hall-depth-lens-inset: 30% 24%;
  --memory-hall-depth-lens-rotate: -62deg;
  --memory-hall-depth-lens-delay: 360ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-depth-lens {
  animation: memoryHallConstellationDepthLens 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-depth-lens i {
  animation: memoryHallConstellationDepthLensRing 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-depth-lens-delay);
}

.memory-hall-constellation-approach-aperture {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 11;
  width: clamp(248px, 34vw, 620px);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
    scale(calc(var(--memory-hall-constellation-scale) + 0.24));
  transform-origin: center;
  animation: memoryHallConstellationApproachAperture 1280ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-approach-aperture::before,
.memory-hall-constellation-approach-aperture::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.memory-hall-constellation-approach-aperture::before {
  inset: -12%;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.28), rgba(255, 236, 182, 0.12) 22%, transparent 56%),
    conic-gradient(from -18deg, transparent 0 12%, rgba(255, 248, 232, 0.2) 15%, transparent 20% 46%, rgba(196, 224, 211, 0.15) 50%, transparent 58% 76%, rgba(223, 210, 241, 0.12) 82%, transparent 90% 100%);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0.78;
}

.memory-hall-constellation-approach-aperture::after {
  inset: 16%;
  border: 1px solid rgba(255, 248, 232, 0.2);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.11), transparent 54%),
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.18), transparent);
  box-shadow:
    0 0 46px rgba(255, 236, 182, 0.22),
    inset 0 0 38px rgba(255, 248, 232, 0.04);
  opacity: 0.66;
}

.memory-hall-constellation-approach-aperture.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.22), rgba(223, 210, 241, 0.14) 24%, transparent 58%),
    conic-gradient(from -18deg, transparent 0 12%, rgba(255, 248, 232, 0.18) 15%, transparent 20% 46%, rgba(223, 210, 241, 0.18) 50%, transparent 58% 76%, rgba(196, 224, 211, 0.11) 82%, transparent 90% 100%);
}

.memory-hall-constellation-approach-aperture i {
  --memory-hall-aperture-inset: 10%;
  --memory-hall-aperture-rotate: 0deg;
  --memory-hall-aperture-delay: 0ms;
  position: absolute;
  inset: var(--memory-hall-aperture-inset);
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.16), transparent),
    radial-gradient(ellipse at 50% 50%, transparent 0 58%, rgba(255, 236, 182, 0.08) 64%, transparent 76%);
  box-shadow:
    0 0 36px rgba(255, 236, 182, 0.16),
    inset 0 0 26px rgba(255, 248, 232, 0.028);
  opacity: 0;
  transform: rotate(var(--memory-hall-aperture-rotate)) scale(0.62);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(180deg, #000 0 68%, transparent 88%);
  mask-image:
    linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent),
    linear-gradient(180deg, #000 0 68%, transparent 88%);
  animation: memoryHallConstellationApproachApertureArc 1280ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-aperture-delay);
}

.memory-hall-constellation-approach-aperture i.is-arc-1 {
  --memory-hall-aperture-inset: 2%;
  --memory-hall-aperture-rotate: -16deg;
  --memory-hall-aperture-delay: 30ms;
}

.memory-hall-constellation-approach-aperture i.is-arc-2 {
  --memory-hall-aperture-inset: 11%;
  --memory-hall-aperture-rotate: 18deg;
  --memory-hall-aperture-delay: 120ms;
}

.memory-hall-constellation-approach-aperture i.is-arc-3 {
  --memory-hall-aperture-inset: 22%;
  --memory-hall-aperture-rotate: -38deg;
  --memory-hall-aperture-delay: 210ms;
}

.memory-hall-constellation-approach-aperture i.is-arc-4 {
  --memory-hall-aperture-inset: -8%;
  --memory-hall-aperture-rotate: 42deg;
  --memory-hall-aperture-delay: 280ms;
}

.memory-hall-constellation-approach-aperture i.is-arc-5 {
  --memory-hall-aperture-inset: 31%;
  --memory-hall-aperture-rotate: 76deg;
  --memory-hall-aperture-delay: 360ms;
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-approach-aperture {
  opacity: 0;
  filter: blur(10px);
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
    scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform 360ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-constellation-approach {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 12;
  width: clamp(218px, 25vw, 438px);
  aspect-ratio: 3 / 4;
  opacity: 0;
  filter: blur(12px) saturate(0.78) brightness(0.66);
  pointer-events: none;
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(calc(var(--memory-hall-pointer-card-x) * -0.42), calc(var(--memory-hall-pointer-card-y) * -0.42), 0)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.14))
    scale(calc(var(--memory-hall-constellation-scale) + 0.16));
  transform-origin: 50% 58%;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-approach {
  animation: memoryHallConstellationApproach 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-approach {
  opacity: 0;
  filter: blur(14px) saturate(0.64) brightness(0.58);
  transform:
    translate3d(-50%, -50%, 0)
    translate3d(calc(var(--memory-hall-pointer-card-x) * -0.24), calc(var(--memory-hall-pointer-card-y) * -0.24), 0)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
    scale(calc(var(--memory-hall-constellation-scale) + 0.06));
  transition:
    opacity 320ms ease,
    filter 320ms ease,
    transform 420ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-constellation-approach-image,
.memory-hall-constellation-approach-rings {
  position: absolute;
  inset: 0;
  display: block;
}

.memory-hall-constellation-approach-image {
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: clamp(18px, 2.1vw, 30px);
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), rgba(255, 248, 232, 0.018)),
    #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 -120px 112px rgba(0, 0, 0, 0.46),
    0 28px 86px rgba(0, 0, 0, 0.42),
    0 0 128px rgba(255, 236, 182, 0.22);
  opacity: 0.54;
  -webkit-mask-image:
    linear-gradient(180deg, transparent, #000 7%, #000 84%, transparent),
    radial-gradient(ellipse at 50% 48%, #000 0 56%, rgba(0, 0, 0, 0.84) 72%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent, #000 7%, #000 84%, transparent),
    radial-gradient(ellipse at 50% 48%, #000 0 56%, rgba(0, 0, 0, 0.84) 72%, transparent 100%);
}

.memory-hall-constellation-approach-image::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 36%, rgba(255, 248, 232, 0.08) 64%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.05), transparent 42% 70%, rgba(0, 0, 0, 0.52));
  content: "";
}

.memory-hall-constellation-approach-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.03) brightness(1.06);
  transform: scale(1.035);
}

.memory-hall-constellation-approach-rings {
  inset: -18%;
  z-index: -1;
}

.memory-hall-constellation-approach-rings i {
  --memory-hall-approach-ring-inset: 11%;
  --memory-hall-approach-ring-rotate: 0deg;
  --memory-hall-approach-ring-delay: 0ms;
  position: absolute;
  inset: var(--memory-hall-approach-ring-inset);
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.13), transparent),
    radial-gradient(ellipse at 50% 50%, rgba(255, 236, 182, 0.08), transparent 70%);
  box-shadow:
    0 0 34px rgba(255, 236, 182, 0.15),
    inset 0 0 28px rgba(255, 248, 232, 0.035);
  opacity: 0;
  transform: rotate(var(--memory-hall-approach-ring-rotate)) scale(0.86);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-approach-rings i {
  animation: memoryHallConstellationApproachRing 1280ms ease both;
  animation-delay: var(--memory-hall-approach-ring-delay);
}

.memory-hall-constellation-approach-rings i:nth-child(1) {
  --memory-hall-approach-ring-inset: 13% 6%;
  --memory-hall-approach-ring-rotate: -16deg;
  --memory-hall-approach-ring-delay: 70ms;
}

.memory-hall-constellation-approach-rings i:nth-child(2) {
  --memory-hall-approach-ring-inset: 18% 15%;
  --memory-hall-approach-ring-rotate: 18deg;
  --memory-hall-approach-ring-delay: 160ms;
}

.memory-hall-constellation-approach-rings i:nth-child(3) {
  --memory-hall-approach-ring-inset: 25% 2%;
  --memory-hall-approach-ring-rotate: 42deg;
  --memory-hall-approach-ring-delay: 240ms;
}

.memory-hall-constellation-approach-rings i:nth-child(4) {
  --memory-hall-approach-ring-inset: 4% 19%;
  --memory-hall-approach-ring-rotate: -48deg;
  --memory-hall-approach-ring-delay: 310ms;
}

.memory-hall-constellation-approach-rings i:nth-child(5) {
  --memory-hall-approach-ring-inset: 32% 24%;
  --memory-hall-approach-ring-rotate: 72deg;
  --memory-hall-approach-ring-delay: 380ms;
}

.memory-hall-constellation-approach-rings i:nth-child(6) {
  --memory-hall-approach-ring-inset: 8% 34%;
  --memory-hall-approach-ring-rotate: 104deg;
  --memory-hall-approach-ring-delay: 450ms;
}

.memory-hall-constellation-approach.is-cat .memory-hall-constellation-approach-image {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    inset 0 -120px 112px rgba(0, 0, 0, 0.46),
    0 28px 86px rgba(0, 0, 0, 0.42),
    0 0 128px rgba(223, 210, 241, 0.18);
}

.memory-hall-constellation-approach.is-cat .memory-hall-constellation-approach-rings i {
  border-color: rgba(223, 210, 241, 0.16);
  box-shadow:
    0 0 34px rgba(223, 210, 241, 0.14),
    inset 0 0 28px rgba(255, 248, 232, 0.035);
}

.memory-hall-constellation-travel-path {
  position: absolute;
  top: var(--memory-hall-travel-start-y);
  left: var(--memory-hall-travel-start-x);
  z-index: 32;
  width: var(--memory-hall-travel-length);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, 0.82), rgba(255, 236, 182, 0));
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.32),
    0 0 48px rgba(255, 248, 232, 0.14);
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--memory-hall-travel-angle));
  transform-origin: left center;
  animation: memoryHallConstellationTravelPath 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-travel-path::before,
.memory-hall-constellation-travel-path::after {
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.9);
  box-shadow:
    0 0 14px rgba(255, 236, 182, 0.42),
    0 0 34px rgba(255, 248, 232, 0.18);
  content: "";
  transform: translate(-50%, -50%);
}

.memory-hall-constellation-travel-path::before {
  left: 0;
  width: 5px;
  opacity: 0.34;
}

.memory-hall-constellation-travel-path::after {
  left: 100%;
  width: 7px;
  opacity: 0.9;
}

.memory-hall-constellation-travel-path i {
  --memory-hall-travel-spark-delay: 0ms;
  --memory-hall-travel-spark-size: 5px;
  --memory-hall-travel-spark-end: 92%;
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: var(--memory-hall-travel-spark-size);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96), rgba(255, 236, 182, 0.7) 42%, transparent 72%);
  box-shadow:
    0 0 10px rgba(255, 248, 232, 0.72),
    0 0 28px rgba(255, 236, 182, 0.26);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  animation: memoryHallConstellationTravelSpark 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-travel-spark-delay);
}

.memory-hall-constellation-travel-path i:nth-child(2) {
  --memory-hall-travel-spark-delay: 70ms;
  --memory-hall-travel-spark-size: 4px;
  --memory-hall-travel-spark-end: 84%;
}

.memory-hall-constellation-travel-path i:nth-child(3) {
  --memory-hall-travel-spark-delay: 132ms;
  --memory-hall-travel-spark-size: 7px;
  --memory-hall-travel-spark-end: 96%;
}

.memory-hall-constellation-travel-path i:nth-child(4) {
  --memory-hall-travel-spark-delay: 184ms;
  --memory-hall-travel-spark-size: 3px;
  --memory-hall-travel-spark-end: 78%;
}

.memory-hall-constellation-travel-path i:nth-child(5) {
  --memory-hall-travel-spark-delay: 236ms;
  --memory-hall-travel-spark-size: 5px;
  --memory-hall-travel-spark-end: 88%;
}

.memory-hall-constellation-travel-path i:nth-child(6) {
  --memory-hall-travel-spark-delay: 292ms;
  --memory-hall-travel-spark-size: 4px;
  --memory-hall-travel-spark-end: 98%;
}

.memory-hall-constellation-travel-path i:nth-child(7) {
  --memory-hall-travel-spark-delay: 346ms;
  --memory-hall-travel-spark-size: 6px;
  --memory-hall-travel-spark-end: 90%;
}

.memory-hall-constellation-arrival-bloom {
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 33;
  width: clamp(108px, 10vw, 176px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.24), rgba(255, 236, 182, 0.08) 30%, transparent 64%);
  filter: saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
    scale(calc(var(--memory-hall-constellation-scale) + 0.18));
  animation: memoryHallConstellationArrivalBloom 1200ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-arrival-bloom.is-cat {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.2), rgba(223, 210, 241, 0.09) 32%, transparent 66%);
}

.memory-hall-constellation-arrival-bloom i {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 248, 232, 0.24);
  border-radius: 999px;
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.18),
    inset 0 0 22px rgba(255, 248, 232, 0.04);
  opacity: 0;
  transform: scale(0.48);
  animation: memoryHallConstellationArrivalRing 1120ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-arrival-bloom i:nth-child(2) {
  inset: 8%;
  animation-delay: 90ms;
}

.memory-hall-constellation-arrival-bloom i:nth-child(3) {
  inset: -4%;
  border-color: rgba(255, 236, 182, 0.14);
  animation-delay: 180ms;
}

.memory-hall-constellation-return-trail {
  --memory-hall-return-trail-opacity: 0.36;
  --memory-hall-return-trail-blur: 0;
  position: absolute;
  top: var(--memory-hall-travel-start-y);
  left: var(--memory-hall-travel-start-x);
  z-index: 7;
  width: var(--memory-hall-travel-length);
  height: 1px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.62) 42%, rgba(196, 224, 211, 0.34) 64%, transparent),
    linear-gradient(90deg, transparent, rgba(255, 214, 132, 0.2), transparent);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.18),
    0 0 56px rgba(255, 248, 232, 0.08);
  filter: blur(var(--memory-hall-return-trail-blur));
  opacity: var(--memory-hall-return-trail-opacity);
  overflow: visible;
  pointer-events: none;
  transform: rotate(var(--memory-hall-travel-angle));
  transform-origin: left center;
  animation: memoryHallConstellationReturnTrail 1260ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-return-trail::before,
.memory-hall-constellation-return-trail::after {
  position: absolute;
  top: 50%;
  width: 4px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.78);
  box-shadow:
    0 0 14px rgba(255, 236, 182, 0.34),
    0 0 32px rgba(196, 224, 211, 0.14);
  content: "";
  transform: translate(-50%, -50%);
}

.memory-hall-constellation-return-trail::before {
  left: 0;
  opacity: 0.38;
  animation: none;
}

.memory-hall-constellation-return-trail::after {
  left: 100%;
  opacity: 0.72;
  animation: none;
}

.memory-hall-constellation-return-trail i {
  position: absolute;
  inset: -16px -18px;
  display: block;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.1), transparent 72%);
  filter: blur(5px);
  opacity: 0.72;
  animation: none;
}

.memory-hall-constellation-return-trail.is-memory-1 {
  --memory-hall-return-trail-opacity: 0.24;
  --memory-hall-return-trail-blur: 0.3px;
}

.memory-hall-constellation-return-trail.is-memory-2,
.memory-hall-constellation-return-trail.is-memory-3 {
  --memory-hall-return-trail-opacity: 0.16;
  --memory-hall-return-trail-blur: 0.7px;
}

.memory-hall-constellation-visited-glow {
  --memory-hall-visited-glow-filter: blur(0);
  --memory-hall-visited-glow-opacity: 0.42;
  --memory-hall-visited-glow-rotate: calc(var(--memory-hall-constellation-rotate) * 0.24);
  --memory-hall-visited-glow-scale: calc(var(--memory-hall-constellation-scale) + 0.12);
  position: absolute;
  top: var(--memory-hall-constellation-y);
  left: var(--memory-hall-constellation-x);
  z-index: 6;
  width: clamp(92px, 8.8vw, 142px);
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.16), rgba(255, 236, 182, 0.055) 42%, transparent 72%),
    linear-gradient(38deg, transparent 24%, rgba(196, 224, 211, 0.09), transparent 62%);
  box-shadow:
    0 0 28px rgba(255, 236, 182, 0.16),
    inset 0 0 0 1px rgba(255, 248, 232, 0.08);
  filter: var(--memory-hall-visited-glow-filter);
  opacity: var(--memory-hall-visited-glow-opacity);
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotate(var(--memory-hall-visited-glow-rotate))
    scale(var(--memory-hall-visited-glow-scale));
  animation: memoryHallConstellationVisitedGlow 620ms ease both;
}

.memory-hall-constellation-visited-glow::before {
  position: absolute;
  inset: -18px -14px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.12), transparent 68%),
    linear-gradient(38deg, transparent 22%, rgba(255, 236, 182, 0.08), transparent 64%);
  content: "";
  filter: blur(7px);
  opacity: 0.48;
  animation: none;
}

.memory-hall-constellation-visited-glow.is-cat {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 248, 232, 0.13), rgba(223, 210, 241, 0.07) 42%, transparent 72%),
    linear-gradient(38deg, transparent 24%, rgba(223, 210, 241, 0.1), transparent 62%);
  box-shadow:
    0 0 28px rgba(223, 210, 241, 0.13),
    inset 0 0 0 1px rgba(255, 248, 232, 0.075);
}

.memory-hall-constellation-visited-glow.is-return-memory {
  --memory-hall-visited-glow-filter: saturate(1.06) brightness(1.02);
  --memory-hall-visited-glow-opacity: 0.54;
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.08),
    0 0 38px rgba(255, 236, 182, 0.24),
    0 0 92px rgba(255, 214, 132, 0.12),
    inset 0 0 0 1px rgba(255, 248, 232, 0.1);
  animation: memoryHallConstellationReturnGlow 1480ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-constellation-visited-glow.is-return-memory::after {
  position: absolute;
  inset: -18px -16px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.16), transparent 68%),
    linear-gradient(38deg, transparent 22%, rgba(196, 224, 211, 0.08), transparent 64%);
  content: "";
  filter: blur(8px);
  opacity: 0.72;
  animation: none;
}

.memory-hall-constellation-visited-glow i {
  position: absolute;
  display: block;
  width: clamp(5px, 0.6vw, 8px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 36%, #fff8e8 0 24%, rgba(255, 236, 182, 0.82) 46%, rgba(255, 236, 182, 0) 72%),
    radial-gradient(circle, rgba(196, 224, 211, 0.42), transparent 68%);
  box-shadow:
    0 0 12px rgba(255, 248, 232, 0.74),
    0 0 28px rgba(255, 214, 132, 0.26);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.42);
}

.memory-hall-constellation-visited-glow.is-return-memory i {
  animation: none;
}

.memory-hall-constellation-visited-glow.is-return-memory i.is-petal-1 {
  top: 4%;
  left: 52%;
  animation-delay: 240ms;
}

.memory-hall-constellation-visited-glow.is-return-memory i.is-petal-2 {
  top: 30%;
  left: 103%;
  animation-delay: 640ms;
}

.memory-hall-constellation-visited-glow.is-return-memory i.is-petal-3 {
  top: 74%;
  left: 91%;
  animation-delay: 1120ms;
}

.memory-hall-constellation-visited-glow.is-return-memory i.is-petal-4 {
  top: 90%;
  left: 19%;
  animation-delay: 1480ms;
}

.memory-hall-constellation-visited-glow.is-return-memory i.is-petal-5 {
  top: 37%;
  left: -5%;
  animation-delay: 1880ms;
}

.memory-hall-constellation-visited-glow.is-memory-1 {
  --memory-hall-visited-glow-filter: saturate(0.9) brightness(0.88);
  --memory-hall-visited-glow-opacity: 0.3;
  --memory-hall-visited-glow-rotate: calc(var(--memory-hall-constellation-rotate) * 0.2);
  --memory-hall-visited-glow-scale: calc(var(--memory-hall-constellation-scale) + 0.06);
}

.memory-hall-constellation-visited-glow.is-memory-2 {
  --memory-hall-visited-glow-filter: saturate(0.82) brightness(0.76) blur(0.4px);
  --memory-hall-visited-glow-opacity: 0.22;
  --memory-hall-visited-glow-rotate: calc(var(--memory-hall-constellation-rotate) * 0.16);
  --memory-hall-visited-glow-scale: calc(var(--memory-hall-constellation-scale) + 0.02);
}

.memory-hall-constellation-visited-glow.is-memory-3,
.memory-hall-constellation-visited-glow.is-memory-4 {
  --memory-hall-visited-glow-filter: saturate(0.74) brightness(0.66) blur(0.8px);
  --memory-hall-visited-glow-opacity: 0.15;
  --memory-hall-visited-glow-rotate: calc(var(--memory-hall-constellation-rotate) * 0.12);
  --memory-hall-visited-glow-scale: calc(var(--memory-hall-constellation-scale) - 0.02);
}

.memory-hall-constellation-visited-glow.is-return-memory {
  --memory-hall-visited-glow-filter: saturate(1.06) brightness(1.02);
  --memory-hall-visited-glow-opacity: 0.54;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-vista-image {
  filter: saturate(1.18) contrast(1.1) brightness(0.98);
  opacity: 1;
  transform:
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
    scale(1.3);
  transition:
    opacity 620ms ease,
    transform 920ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 760ms ease;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 248, 232, 0.04), transparent 26%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.58) 88%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.04) 34%, rgba(0, 0, 0, 0.04) 66%, rgba(0, 0, 0, 0.7)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 44%, rgba(0, 0, 0, 0.58));
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-sky {
  transform:
    translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
    translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
    scale(1.3);
  transition:
    inset 260ms ease,
    transform 860ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-away,
.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-ghost-card,
.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-echo-node,
.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-star {
  opacity: 0.18 !important;
  filter: blur(3px) saturate(0.68) brightness(0.7);
  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target {
  z-index: 22;
  opacity: 1;
  filter: brightness(1.18) saturate(1.08);
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(calc(var(--memory-hall-constellation-scale) + 0.72));
  transition:
    transform 820ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 520ms ease,
    opacity 420ms ease;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target .memory-hall-constellation-node-name {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-spatial-feature.is-watson-center {
  box-shadow: none;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before,
.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  position: absolute;
  display: block !important;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before {
  inset: -58%;
  z-index: -2;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 232, 0.34), rgba(255, 236, 182, 0.13) 18%, rgba(196, 224, 211, 0.07) 34%, transparent 66%),
    conic-gradient(from 18deg, transparent 0 12%, rgba(255, 248, 232, 0.16) 13%, transparent 16% 34%, rgba(196, 224, 211, 0.12) 36%, transparent 40% 62%, rgba(223, 210, 241, 0.1) 64%, transparent 68% 100%);
  filter: blur(0.2px);
  opacity: 0.68;
  transform:
    translate3d(calc(var(--memory-hall-pointer-card-x) * -0.45), calc(var(--memory-hall-pointer-card-y) * -0.45), -20px)
    rotate(-4deg);
  transition: transform 220ms ease, opacity 220ms ease;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  inset: -26%;
  z-index: -1;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.18), transparent),
    linear-gradient(28deg, transparent 20%, rgba(196, 224, 211, 0.16), transparent 58%),
    linear-gradient(142deg, transparent 18%, rgba(223, 210, 241, 0.12), transparent 60%);
  box-shadow:
    0 0 46px rgba(255, 236, 182, 0.12),
    inset 0 0 44px rgba(255, 248, 232, 0.04);
  opacity: 0.72;
  transform:
    translate3d(calc(var(--memory-hall-pointer-card-x) * -0.24), calc(var(--memory-hall-pointer-card-y) * -0.24), -10px)
    rotate(7deg);
  transition: transform 220ms ease, opacity 220ms ease;
}

.memory-hall-constellation-focus {
  position: absolute;
  bottom: clamp(10px, 2.6vh, 28px);
  left: 50%;
  z-index: 11;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  max-width: min(260px, 72vw);
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.028),
    0 18px 48px rgba(0, 0, 0, 0.44),
    0 0 32px rgba(255, 236, 182, 0.1);
  color: rgba(255, 248, 232, 0.92);
  pointer-events: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, 10px);
  animation: memoryHallConstellationFocusIn 240ms ease forwards;
  backdrop-filter: blur(16px);
}

.memory-hall-card-only .memory-hall-constellation-focus {
  display: none;
}

.memory-hall-card-only .memory-hall-constellation-focus-card {
  position: absolute;
  right: clamp(18px, 5vw, 86px);
  bottom: clamp(128px, 19vh, 226px);
  left: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  width: clamp(118px, 13vw, 212px);
  max-width: min(34vw, 212px);
  aspect-ratio: 3 / 4;
  z-index: 18;
  padding: 0;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.06), rgba(255, 248, 232, 0.016)),
    #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 28px 86px rgba(0, 0, 0, 0.68),
    0 0 82px rgba(255, 236, 182, 0.22);
  overflow: visible;
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
  transform: translate3d(18px, 16px, 120px) scale(0.92);
  transition:
    opacity 240ms ease,
    transform 360ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 260ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease;
  animation: none;
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:disabled {
  cursor: default;
}

.memory-hall-card-only.is-constellation-zoomed :is(a, button).memory-hall-constellation-focus-card,
.memory-hall-card-only.has-constellation-preview :is(a, button).memory-hall-constellation-focus-card,
.memory-hall-card-only:has(.memory-hall-constellation-node:is(:hover, :focus-visible)) :is(a, button).memory-hall-constellation-focus-card {
  pointer-events: auto;
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible) {
  outline: none;
  border-color: rgba(255, 248, 232, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 38px 112px rgba(0, 0, 0, 0.74),
    0 0 126px rgba(255, 236, 182, 0.38);
  transform: translate3d(0, -12px, 180px) scale(1.07);
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible)::after {
  border-color: rgba(255, 248, 232, 0.34);
  box-shadow:
    0 0 64px rgba(255, 236, 182, 0.3),
    inset 0 0 32px rgba(255, 248, 232, 0.07);
}

.memory-hall-card-only.is-constellation-zoomed .memory-hall-constellation-focus-card,
.memory-hall-card-only.has-constellation-preview .memory-hall-constellation-focus-card,
.memory-hall-card-only:has(.memory-hall-constellation-node:is(:hover, :focus-visible)) .memory-hall-constellation-focus-card {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 120px) scale(1);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card {
  right: clamp(28px, 7vw, 118px);
  bottom: clamp(132px, 21vh, 242px);
  width: clamp(176px, 21vw, 318px);
  max-width: min(46vw, 318px);
  border-color: rgba(255, 248, 232, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 42px 122px rgba(0, 0, 0, 0.76),
    0 0 128px rgba(255, 236, 182, 0.38),
    0 0 220px rgba(255, 248, 232, 0.08);
  transform: translate3d(0, -12px, 190px) scale(1.065);
  animation: memoryHallConstellationFocusCardArrive 860ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-gentle-tour:not(.is-opening-room) .memory-hall-constellation-focus-card {
  border-color: rgba(255, 248, 232, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 42px 122px rgba(0, 0, 0, 0.74),
    0 0 136px rgba(255, 236, 182, 0.42),
    0 0 238px rgba(196, 224, 211, 0.1);
  animation:
    memoryHallConstellationFocusCardArrive 860ms cubic-bezier(0.18, 0.82, 0.24, 1) both,
    memoryHallConstellationGentleTourCard 2600ms ease-in-out both;
}

.memory-hall-card-only.is-constellation-arriving:not(.is-opening-room) .memory-hall-constellation-focus-card {
  animation: memoryHallConstellationFocusCardDeepArrive 980ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-gentle-tour:not(.is-opening-room) .memory-hall-constellation-focus-sanctuary {
  animation: memoryHallConstellationGentleTourSanctuary 2600ms ease-in-out both;
}

.memory-hall-card-only.is-constellation-gentle-tour:not(.is-opening-room) .memory-hall-constellation-thread.is-active,
.memory-hall-card-only.is-constellation-gentle-tour:not(.is-opening-room) .memory-hall-constellation-thread.is-near-active {
  opacity: 0.34;
  filter: blur(0);
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-focus-card {
  opacity: 0;
  transform: translate3d(26px, 18px, 80px) scale(0.88);
}

.memory-hall-card-only .memory-hall-constellation-room-aura {
  position: absolute;
  inset: -24%;
  z-index: -1;
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 8px, -18px) scale(0.86);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only .memory-hall-constellation-room-aura::before,
.memory-hall-card-only .memory-hall-constellation-room-aura::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-constellation-room-aura::before {
  inset: 20% 16% 12%;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 236, 182, 0.3), rgba(255, 248, 232, 0.08) 30%, transparent 72%),
    linear-gradient(180deg, transparent 18%, rgba(255, 248, 232, 0.12), transparent 76%);
  filter: blur(10px);
  opacity: 0.82;
}

.memory-hall-card-only .memory-hall-constellation-room-aura::after {
  right: 18%;
  bottom: 15%;
  left: 18%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.76), transparent);
  box-shadow:
    0 0 18px rgba(255, 236, 182, 0.34),
    0 0 52px rgba(255, 248, 232, 0.16);
  opacity: 0.82;
}

.memory-hall-card-only .memory-hall-constellation-room-aura i {
  position: absolute;
  inset: calc(9% + var(--memory-hall-room-aura-inset, 0%));
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 18px;
  box-shadow:
    0 0 28px rgba(255, 236, 182, 0.1),
    inset 0 0 28px rgba(255, 248, 232, 0.035);
  opacity: 0;
  transform: scale(0.88);
}

.memory-hall-card-only .memory-hall-constellation-room-aura i:nth-child(1) {
  --memory-hall-room-aura-inset: 0%;
}

.memory-hall-card-only .memory-hall-constellation-room-aura i:nth-child(2) {
  --memory-hall-room-aura-inset: 7%;
  border-color: rgba(196, 224, 211, 0.11);
  animation-delay: 120ms;
}

.memory-hall-card-only .memory-hall-constellation-room-aura i:nth-child(3) {
  --memory-hall-room-aura-inset: 14%;
  border-color: rgba(223, 210, 241, 0.1);
  animation-delay: 240ms;
}

.memory-hall-card-only .memory-hall-constellation-room-aura i:nth-child(4) {
  --memory-hall-room-aura-inset: 22%;
  border-color: rgba(255, 236, 182, 0.14);
  animation-delay: 360ms;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-room-aura {
  opacity: 1;
  transform: translate3d(0, 0, -18px) scale(1);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-room-aura i {
  animation: none;
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible) .memory-hall-constellation-room-aura {
  opacity: 1;
  transform: translate3d(0, -3px, -18px) scale(1.04);
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible) .memory-hall-constellation-room-aura::after {
  box-shadow:
    0 0 24px rgba(255, 236, 182, 0.46),
    0 0 72px rgba(255, 248, 232, 0.22);
  opacity: 1;
}

.memory-hall-card-only .memory-hall-constellation-enter-cue {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-grid;
  width: clamp(34px, 3.4vw, 44px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.18), transparent 42%),
    rgba(0, 0, 0, 0.34);
  color: rgba(255, 248, 232, 0.88);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 236, 182, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  opacity: 0;
  transform: translate3d(7px, -7px, 20px) scale(0.88);
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.18, 0.82, 0.24, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
  backdrop-filter: blur(14px);
}

.memory-hall-card-only .memory-hall-constellation-enter-cue::before,
.memory-hall-card-only .memory-hall-constellation-enter-cue::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-constellation-enter-cue::before {
  inset: -36%;
  background: conic-gradient(from 18deg, transparent 0 26%, rgba(255, 248, 232, 0.22) 31%, transparent 37% 68%, rgba(196, 224, 211, 0.16) 73%, transparent 80% 100%);
  opacity: 0.66;
  animation: none;
}

.memory-hall-card-only .memory-hall-constellation-enter-cue::after {
  inset: 22% 18%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.34), transparent);
  filter: blur(2px);
  opacity: 0;
  transform: rotate(-18deg) translateX(-22%);
}

.memory-hall-card-only .memory-hall-constellation-enter-cue svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.5));
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-enter-cue {
  opacity: 1;
  transform: translate3d(0, 0, 42px) scale(1);
  animation: memoryHallEnterCueArrive 680ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible) .memory-hall-constellation-enter-cue {
  border-color: rgba(255, 248, 232, 0.36);
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.46),
    0 0 54px rgba(255, 236, 182, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform: translate3d(0, -3px, 58px) scale(1.06);
}

.memory-hall-card-only :is(a, button).memory-hall-constellation-focus-card:is(:hover, :focus-visible) .memory-hall-constellation-enter-cue::after {
  animation: memoryHallEnterCueGlimmer 980ms ease both;
}

.memory-hall-card-only .memory-hall-constellation-side-card {
  appearance: none;
  position: absolute;
  z-index: 20;
  display: grid;
  width: clamp(58px, 7vw, 104px);
  aspect-ratio: 3 / 4;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: blur(6px) saturate(0.82) brightness(0.74);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(18px, 16px, 96px) scale(0.82);
  transition:
    opacity 260ms ease,
    filter 260ms ease,
    transform 420ms cubic-bezier(0.18, 0.82, 0.24, 1);
}

.memory-hall-card-only .memory-hall-constellation-side-card.is-previous {
  right: clamp(190px, 27vw, 382px);
  bottom: clamp(194px, 29vh, 318px);
}

.memory-hall-card-only .memory-hall-constellation-side-card.is-next {
  right: clamp(154px, 22vw, 326px);
  bottom: clamp(98px, 17vh, 198px);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-side-card {
  filter: blur(0.4px) saturate(0.92) brightness(0.88);
  opacity: 0.74;
  pointer-events: auto;
  animation: memoryHallConstellationSideCardArrive 620ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-side-card::before {
  animation: none;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-side-card i::after {
  animation: none;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-side-card.is-next {
  animation-delay: 72ms;
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-side-card {
  opacity: 0;
  transform: translate3d(20px, 18px, 70px) scale(0.78);
}

.memory-hall-card-only .memory-hall-constellation-side-card::before,
.memory-hall-card-only .memory-hall-constellation-side-card::after {
  position: absolute;
  border-radius: 12px;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-constellation-side-card::before {
  inset: -46%;
  z-index: -2;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.14), rgba(255, 236, 182, 0.055) 36%, transparent 72%),
    conic-gradient(from 32deg, transparent 0 18%, rgba(255, 248, 232, 0.11) 20%, transparent 25% 54%, rgba(196, 224, 211, 0.08) 58%, transparent 66% 100%);
  opacity: 0.72;
}

.memory-hall-card-only .memory-hall-constellation-side-card.is-cat::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.12), rgba(223, 210, 241, 0.07) 38%, transparent 72%),
    conic-gradient(from 32deg, transparent 0 18%, rgba(255, 248, 232, 0.1) 20%, transparent 25% 54%, rgba(223, 210, 241, 0.1) 58%, transparent 66% 100%);
}

.memory-hall-card-only .memory-hall-constellation-side-card::after {
  inset: -9%;
  z-index: 0;
  border: 1px solid rgba(255, 248, 232, 0.14);
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.14), transparent),
    linear-gradient(34deg, transparent 24%, rgba(196, 224, 211, 0.08), transparent 64%);
  box-shadow:
    0 0 28px rgba(255, 236, 182, 0.14),
    inset 0 0 20px rgba(255, 248, 232, 0.035);
  transform: rotate(10deg);
}

.memory-hall-card-only .memory-hall-constellation-side-card i {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.18);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.16), transparent 34%),
    #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 18px 48px rgba(0, 0, 0, 0.54),
    0 0 38px rgba(255, 236, 182, 0.16);
}

.memory-hall-card-only .memory-hall-constellation-side-card i::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.26) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 38% 70%, rgba(0, 0, 0, 0.42));
  content: "";
}

.memory-hall-card-only .memory-hall-constellation-side-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-card-only .memory-hall-constellation-side-card:is(:hover, :focus-visible) {
  outline: none;
  filter: blur(0) saturate(1.04) brightness(1.06);
  opacity: 1;
  transform: translate3d(0, -8px, 132px) scale(1.08);
}

.memory-hall-card-only .memory-hall-constellation-side-card:is(:hover, :focus-visible)::after {
  border-color: rgba(255, 248, 232, 0.28);
  box-shadow:
    0 0 52px rgba(255, 236, 182, 0.26),
    inset 0 0 26px rgba(255, 248, 232, 0.055);
}

.memory-hall-card-only .memory-hall-constellation-side-card-trace {
  position: absolute;
  top: 48%;
  left: 68%;
  z-index: -3;
  width: clamp(92px, 10vw, 166px);
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, 0.42), rgba(255, 236, 182, 0.14), rgba(255, 248, 232, 0));
  box-shadow:
    0 0 16px rgba(255, 236, 182, 0.2),
    0 0 42px rgba(255, 248, 232, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: rotate(14deg);
  transform-origin: left center;
}

.memory-hall-card-only .memory-hall-constellation-side-card.is-next .memory-hall-constellation-side-card-trace {
  top: 36%;
  width: clamp(76px, 8.8vw, 138px);
  transform: rotate(-24deg);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-side-card-trace {
  animation: memoryHallConstellationSideTrace 760ms ease 120ms both;
}

.memory-hall-card-only .memory-hall-constellation-side-card:is(:hover, :focus-visible) .memory-hall-constellation-side-card-trace {
  background:
    linear-gradient(90deg, rgba(255, 248, 232, 0), rgba(255, 248, 232, 0.68), rgba(255, 236, 182, 0.24), rgba(255, 248, 232, 0));
  box-shadow:
    0 0 22px rgba(255, 236, 182, 0.28),
    0 0 58px rgba(255, 248, 232, 0.12);
  opacity: 0.88;
}

.memory-hall-card-only .memory-hall-constellation-focus-card::before,
.memory-hall-card-only .memory-hall-constellation-focus-card::after {
  position: absolute;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-constellation-focus-card::before {
  inset: -44%;
  z-index: -2;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 232, 0.2), rgba(255, 236, 182, 0.08) 34%, transparent 70%),
    conic-gradient(from 12deg, transparent 0 14%, rgba(255, 248, 232, 0.14) 15%, transparent 18% 44%, rgba(196, 224, 211, 0.11) 47%, transparent 52% 72%, rgba(223, 210, 241, 0.09) 75%, transparent 80% 100%);
  opacity: 0.82;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card::before {
  inset: -54%;
  opacity: 0.98;
  animation: none;
}

.memory-hall-card-only .memory-hall-constellation-focus-card::after {
  inset: -10%;
  z-index: 0;
  border: 1px solid rgba(255, 248, 232, 0.16);
  background:
    linear-gradient(90deg, transparent, rgba(255, 248, 232, 0.16), transparent),
    linear-gradient(38deg, transparent 26%, rgba(196, 224, 211, 0.1), transparent 62%);
  box-shadow:
    0 0 34px rgba(255, 236, 182, 0.18),
    inset 0 0 24px rgba(255, 248, 232, 0.04);
  transform: rotate(10deg);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card::after {
  border-color: rgba(255, 248, 232, 0.24);
  box-shadow:
    0 0 52px rgba(255, 236, 182, 0.22),
    inset 0 0 28px rgba(255, 248, 232, 0.06);
  opacity: 0.9;
  animation: none;
}

.memory-hall-constellation-focus i {
  position: relative;
  grid-row: 1 / 3;
  display: block;
  width: clamp(28px, 3.4vw, 42px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.2);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 248, 232, 0.2), transparent 30%),
    #070707;
}

.memory-hall-card-only .memory-hall-constellation-focus-card i {
  z-index: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  border-color: rgba(255, 248, 232, 0.24);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.2), transparent 32%),
    #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 -72px 86px rgba(0, 0, 0, 0.34);
}

.memory-hall-constellation-focus i::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.03), rgba(255, 248, 232, 0.12));
  content: "";
}

.memory-hall-card-only .memory-hall-constellation-focus-card i::after {
  background:
    radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.09) 66%, rgba(0, 0, 0, 0.24) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 34% 70%, rgba(0, 0, 0, 0.44));
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card i::after {
  animation: none;
}

.memory-hall-constellation-focus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memory-hall-card-only .memory-hall-constellation-focus-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-constellation-focus strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.84rem, 0.96vw, 1rem);
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memory-hall-card-only .memory-hall-constellation-focus-card strong {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  padding: 3px 10px 5px;
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(0.74rem, 0.9vw, 0.96rem);
  font-weight: 720;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.72);
  transform: none;
  backdrop-filter: blur(14px);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card strong {
  right: 12px;
  bottom: 12px;
  left: 12px;
  min-height: 32px;
  border-color: rgba(255, 248, 232, 0.2);
  background: rgba(0, 0, 0, 0.48);
  font-size: clamp(0.82rem, 1vw, 1.04rem);
}

.memory-hall-constellation-focus small {
  color: rgba(255, 248, 232, 0.58);
  font-size: clamp(0.58rem, 0.68vw, 0.72rem);
  font-weight: 640;
  letter-spacing: 0.02em;
  line-height: 1;
}

.memory-hall-card-only .memory-hall-constellation-focus-card small {
  display: none;
}

@keyframes memoryHallConstellationFocusIn {
  from {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes memoryHallConstellationFocusCardIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(22px, 18px, 80px) scale(0.86);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 120px) scale(1);
  }
}

@keyframes memoryHallConstellationRoomAuraRing {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  24% {
    opacity: 0.62;
  }

  58% {
    opacity: 0.28;
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes memoryHallConstellationFocusSanctuary {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, 34%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.06));
  }

  56% {
    opacity: 0.78;
    filter: blur(0);
    transform:
      translate(-50%, 27%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.36));
  }

  100% {
    opacity: 0.58;
    filter: blur(0);
    transform:
      translate(-50%, 28%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.28));
  }
}

@keyframes memoryHallConstellationFocusSanctuaryBreathe {
  0%,
  100% {
    opacity: 0.54;
    filter: blur(0.2px);
    box-shadow:
      0 0 0 1px rgba(255, 248, 232, 0.05),
      0 0 38px rgba(255, 236, 182, 0.16),
      0 0 84px rgba(255, 248, 232, 0.07);
  }

  48% {
    opacity: 0.68;
    filter: blur(0);
    box-shadow:
      0 0 0 1px rgba(255, 248, 232, 0.075),
      0 0 58px rgba(255, 236, 182, 0.23),
      0 0 124px rgba(255, 248, 232, 0.105);
  }
}

@keyframes memoryHallConstellationFocusHush {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.985);
  }

  48% {
    opacity: 0.82;
    filter: blur(0.2px);
    transform: scale(1.006);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.1px);
    transform: scale(1);
  }
}

@keyframes memoryHallConstellationFocusHushNode {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(0.38) rotate(-18deg);
  }

  54% {
    opacity: 0.9;
    filter: blur(0.2px);
    transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
  }

  100% {
    opacity: 0.64;
    filter: blur(0.6px);
    transform: translate(-50%, -50%) scale(0.86) rotate(0deg);
  }
}

@keyframes memoryHallConstellationFocusHushNodeBreathe {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.84) rotate(0deg);
  }

  50% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.92) rotate(5deg);
  }
}

@keyframes memoryHallConstellationFocusHushCard {
  0% {
    opacity: 0;
    filter: blur(26px);
    transform: translate3d(18px, 26px, 0) scale(0.74);
  }

  58% {
    opacity: 0.82;
    filter: blur(14px);
    transform: translate3d(-2px, 2px, 0) scale(0.98);
  }

  100% {
    opacity: 0.64;
    filter: blur(16px);
    transform: translate3d(4px, 10px, 0) scale(0.86);
  }
}

@keyframes memoryHallConstellationFocusWitnesses {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.1), calc(var(--memory-hall-pointer-card-y) * -0.1), 0)
      scale(0.82);
  }

  62% {
    opacity: 0.92;
    filter: blur(0.2px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.18), calc(var(--memory-hall-pointer-card-y) * -0.18), 0)
      scale(1.02);
  }

  100% {
    opacity: 0.74;
    filter: blur(0.3px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.18), calc(var(--memory-hall-pointer-card-y) * -0.18), 0)
      scale(0.96);
  }
}

@keyframes memoryHallConstellationFocusWitnessCard {
  0% {
    opacity: 0;
    filter: blur(7px) saturate(0.7) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-witness-rotate) - 10deg))
      scale(calc(var(--memory-hall-witness-scale) * 0.36));
  }

  68% {
    opacity: 0.86;
    filter: blur(0) saturate(1.04) brightness(1.04);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-witness-rotate) + 3deg))
      scale(calc(var(--memory-hall-witness-scale) * 1.08));
  }

  100% {
    opacity: 0.58;
    filter: blur(0.3px) saturate(0.92) brightness(0.9);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-witness-rotate))
      scale(var(--memory-hall-witness-scale));
  }
}

@keyframes memoryHallConstellationFocusWitnessBreathe {
  0%,
  100% {
    opacity: 0.48;
    filter: blur(0.4px) brightness(0.88);
  }

  48% {
    opacity: 0.72;
    filter: blur(0) brightness(1.08);
  }
}

@keyframes memoryHallConstellationFocusDust {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(0.36);
  }

  28% {
    opacity: 0.78;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0.32;
    filter: blur(0.4px);
    transform: translate(-50%, -50%) scale(0.84);
  }
}

@keyframes memoryHallConstellationCompanionHalo {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.06))
      scale(calc(var(--memory-hall-constellation-scale) + 0.02));
  }

  62% {
    opacity: 0.78;
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.06))
      scale(calc(var(--memory-hall-constellation-scale) + 0.28));
  }

  100% {
    opacity: 0.64;
    filter: blur(0.4px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.22));
  }
}

@keyframes memoryHallConstellationCompanionHaloBreathe {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.82;
  }
}

@keyframes memoryHallConstellationCompanionThreads {
  0%,
  100% {
    opacity: 0.22;
    transform: rotate(-2deg) scale(0.98);
  }

  48% {
    opacity: 0.52;
    transform: rotate(3deg) scale(1.015);
  }
}

@keyframes memoryHallConstellationCompanionHaloCard {
  0% {
    opacity: 0;
    filter: blur(6px) saturate(0.76) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -0.58))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(calc(var(--memory-hall-companion-halo-scale) * 0.52));
  }

  68% {
    opacity: 0.76;
    filter: blur(0) saturate(0.98) brightness(0.94);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -1.04))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(calc(var(--memory-hall-companion-halo-scale) * 1.04));
  }

  100% {
    opacity: 0.64;
    filter: blur(0.4px) saturate(0.9) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -1))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(var(--memory-hall-companion-halo-scale));
  }
}

@keyframes memoryHallConstellationCompanionHaloCardLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.28) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 34% 70%, rgba(0, 0, 0, 0.42));
  }

  46% {
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.06), transparent 34%, rgba(255, 248, 232, 0.14) 68%, rgba(0, 0, 0, 0.22) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.13), transparent 38% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationFocusBeacon {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) + 0.1));
  }

  28% {
    opacity: 0.96;
  }

  100% {
    opacity: 0.34;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.16))
      scale(calc(var(--memory-hall-constellation-scale) + 0.52));
  }
}

@keyframes memoryHallConstellationDepthLens {
  0% {
    opacity: 0;
    filter: blur(14px) saturate(0.76) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.03))
      scale(calc(var(--memory-hall-constellation-scale) - 0.02));
  }

  46% {
    opacity: 0.82;
    filter: blur(0.2px) saturate(1.1) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.58));
  }

  100% {
    opacity: 0.44;
    filter: blur(1px) saturate(0.96) brightness(0.9);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.05))
      scale(calc(var(--memory-hall-constellation-scale) + 0.36));
  }
}

@keyframes memoryHallConstellationDepthLensBreathe {
  0%,
  100% {
    opacity: 0.38;
    filter: blur(1.2px) saturate(0.96) brightness(0.88);
  }

  48% {
    opacity: 0.54;
    filter: blur(0.4px) saturate(1.04) brightness(1.02);
  }
}

@keyframes memoryHallConstellationDepthLensRing {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-depth-lens-rotate)) scale(0.48);
  }

  42% {
    opacity: 0.62;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-depth-lens-rotate) + 5deg)) scale(1.02);
  }

  100% {
    opacity: 0.22;
    filter: blur(1.1px);
    transform: rotate(calc(var(--memory-hall-depth-lens-rotate) + 9deg)) scale(0.94);
  }
}

@keyframes memoryHallConstellationApproachAperture {
  0% {
    opacity: 0;
    filter: blur(18px) saturate(0.74) brightness(0.58);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  }

  42% {
    opacity: 0.86;
    filter: blur(0.2px) saturate(1.12) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) + 0.92));
  }

  100% {
    opacity: 0.22;
    filter: blur(3px) saturate(0.92) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.62));
  }
}

@keyframes memoryHallConstellationApproachApertureArc {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-aperture-rotate)) scale(0.54);
  }

  44% {
    opacity: 0.74;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-aperture-rotate) + 6deg)) scale(1.03);
  }

  100% {
    opacity: 0.14;
    filter: blur(1.6px);
    transform: rotate(calc(var(--memory-hall-aperture-rotate) + 12deg)) scale(1.22);
  }
}

@keyframes memoryHallConstellationApproach {
  0% {
    opacity: 0;
    filter: blur(16px) saturate(0.64) brightness(0.5);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.42), calc(var(--memory-hall-pointer-card-y) * -0.42), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  }

  56% {
    opacity: 0.48;
    filter: blur(1.2px) saturate(0.96) brightness(0.92);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.5), calc(var(--memory-hall-pointer-card-y) * -0.5), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.15))
      scale(calc(var(--memory-hall-constellation-scale) + 0.54));
  }

  100% {
    opacity: 0.36;
    filter: blur(2.2px) saturate(0.9) brightness(0.82);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.46), calc(var(--memory-hall-pointer-card-y) * -0.46), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.14))
      scale(calc(var(--memory-hall-constellation-scale) + 0.44));
  }
}

@keyframes memoryHallConstellationApproachRing {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: rotate(var(--memory-hall-approach-ring-rotate)) scale(0.72);
  }

  42% {
    opacity: 0.54;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-approach-ring-rotate) + 7deg)) scale(1.02);
  }

  100% {
    opacity: 0.2;
    filter: blur(1.2px);
    transform: rotate(calc(var(--memory-hall-approach-ring-rotate) + 12deg)) scale(0.94);
  }
}

@keyframes memoryHallConstellationFocusCardArrive {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(24px, 24px, 90px) scale(0.86);
  }

  64% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-4px, -18px, 210px) scale(1.09);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -12px, 190px) scale(1.065);
  }
}

@keyframes memoryHallConstellationDepthApproach {
  0% {
    opacity: 0.18;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.18), calc(var(--memory-hall-pointer-depth-y) * 0.18), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.18), 0)
      scale(0.98);
  }

  46% {
    opacity: 0.48;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.38), calc(var(--memory-hall-pointer-depth-y) * 0.38), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.76), calc(var(--memory-hall-orbit-pan-y) * 0.76), 0)
      scale(1.14);
  }

  100% {
    opacity: 0.34;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.45), calc(var(--memory-hall-pointer-depth-y) * 0.45), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.58), calc(var(--memory-hall-orbit-pan-y) * 0.58), 0)
      scale(1.08);
  }
}

@keyframes memoryHallConstellationFloorApproach {
  0% {
    opacity: 0.12;
    filter: blur(1.4px);
    transform:
      perspective(1200px)
      rotateX(75deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.04), calc(var(--memory-hall-orbit-pan-y) * 0.04), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(0.92);
  }

  48% {
    opacity: 0.34;
    filter: blur(0);
    transform:
      perspective(1200px)
      rotateX(72deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.28), calc(var(--memory-hall-orbit-pan-y) * 0.28), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1.16);
  }

  100% {
    opacity: 0.24;
    filter: blur(0.2px);
    transform:
      perspective(1200px)
      rotateX(73deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.2), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1.08);
  }
}

@keyframes memoryHallConstellationVistaApproach {
  0% {
    filter: saturate(1.04) contrast(1.06) brightness(0.74);
    opacity: 0.94;
    transform:
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.34), calc(var(--memory-hall-orbit-pan-y) * 0.34), 0)
      scale(1.08);
  }

  52% {
    filter: saturate(1.22) contrast(1.12) brightness(0.98);
    opacity: 1;
    transform:
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 1.06), calc(var(--memory-hall-orbit-pan-y) * 1.06), 0)
      scale(1.36);
  }

  100% {
    filter: saturate(1.18) contrast(1.1) brightness(0.88);
    opacity: 0.98;
    transform:
      translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
      scale(1.28);
  }
}

@keyframes memoryHallConstellationSkyApproach {
  0% {
    filter: blur(2.2px) saturate(0.68) brightness(0.58);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.26), calc(var(--memory-hall-orbit-pan-y) * 0.26), 0)
      scale(1.06);
  }

  52% {
    filter: blur(0.1px) saturate(1.1) brightness(1.04);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 1.06), calc(var(--memory-hall-orbit-pan-y) * 1.06), 0)
      scale(1.42);
  }

  100% {
    filter: blur(0) saturate(1) brightness(1);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
      scale(1.28);
  }
}

@keyframes memoryHallConstellationActiveNodeApproach {
  0% {
    opacity: 0.5;
    filter: blur(4px) saturate(0.68) brightness(0.58);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.64))
      scale(calc(var(--memory-hall-constellation-scale) + 0.12));
  }

  50% {
    opacity: 1;
    filter: blur(0) brightness(1.34) saturate(1.2);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(calc(var(--memory-hall-constellation-scale) + 1.02));
  }

  100% {
    opacity: 1;
    filter: brightness(1.22) saturate(1.12);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(calc(var(--memory-hall-constellation-scale) + 0.82));
  }
}

@keyframes memoryHallConstellationFocusCardDeepArrive {
  0% {
    opacity: 0;
    filter: blur(14px) saturate(0.72) brightness(0.62);
    transform: translate3d(-36px, 28px, 54px) rotate(-2deg) scale(0.74);
  }

  48% {
    opacity: 1;
    filter: blur(0.2px) saturate(1.12) brightness(1.08);
    transform: translate3d(-8px, -24px, 238px) rotate(0.4deg) scale(1.13);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1) brightness(1);
    transform: translate3d(0, -12px, 190px) rotate(0deg) scale(1.065);
  }
}

@keyframes memoryHallConstellationFocusCardHaloBreathe {
  0%,
  100% {
    opacity: 0.82;
    filter: blur(0.8px);
  }

  48% {
    opacity: 1;
    filter: blur(0.2px);
  }
}

@keyframes memoryHallConstellationFocusCardFrameBreathe {
  0%,
  100% {
    opacity: 0.82;
    filter: blur(0.1px);
  }

  50% {
    opacity: 0.98;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationFocusCardImageLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.09) 66%, rgba(0, 0, 0, 0.24) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 34% 70%, rgba(0, 0, 0, 0.44));
  }

  46% {
    opacity: 0.92;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.07), transparent 36%, rgba(255, 248, 232, 0.16) 68%, rgba(0, 0, 0, 0.2) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.16), transparent 40% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationFocusPull {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(0.04);
  }

  42% {
    opacity: 0.82;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(0.88);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.2px);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(1);
  }
}

@keyframes memoryHallConstellationFocusPullSpark {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  26% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }

  62% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.76);
  }
}

@keyframes memoryHallConstellationFocusTrail {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(0.74) brightness(0.66);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(0.08)
      scaleY(0.58);
  }

  48% {
    opacity: 0.88;
    filter: blur(0.2px) saturate(1.06) brightness(1.08);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(0.96)
      scaleY(1.02);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.4px) saturate(0.94) brightness(0.9);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(1)
      scaleY(0.84);
  }
}

@keyframes memoryHallConstellationFocusTrailCard {
  0% {
    opacity: 0;
    filter: blur(5px) saturate(0.68) brightness(0.56);
    transform:
      translate(-80%, -50%)
      rotate(var(--memory-hall-focus-trail-counter-angle))
      scale(0.34);
  }

  58% {
    opacity: 0.84;
    filter: blur(0) saturate(1.04) brightness(1.06);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-focus-trail-counter-angle) + 2deg))
      scale(1.06);
  }

  100% {
    opacity: 0.48;
    filter: blur(0.3px) saturate(0.9) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-focus-trail-counter-angle))
      scale(0.86);
  }
}

@keyframes memoryHallConstellationFocusMotesIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) - 0.08));
  }

  62% {
    opacity: 0.86;
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.14))
      scale(calc(var(--memory-hall-constellation-scale) + 0.2));
  }

  to {
    opacity: 0.72;
    filter: blur(0.2px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.12))
      scale(calc(var(--memory-hall-constellation-scale) + 0.16));
  }
}

@keyframes memoryHallConstellationFocusMote {
  0%,
  100% {
    opacity: 0.16;
    transform:
      translate(-50%, -50%)
      translate(calc(var(--memory-hall-focus-mote-dx) * 0.22), calc(var(--memory-hall-focus-mote-dy) * 0.22))
      scale(0.54);
  }

  34% {
    opacity: 0.9;
    transform:
      translate(-50%, -50%)
      translate(var(--memory-hall-focus-mote-dx), var(--memory-hall-focus-mote-dy))
      scale(1);
  }

  72% {
    opacity: 0.34;
    transform:
      translate(-50%, -50%)
      translate(calc(var(--memory-hall-focus-mote-dx) * 0.58), calc(var(--memory-hall-focus-mote-dy) * 0.58))
      scale(0.74);
  }
}

@keyframes memoryHallConstellationCardLightBreath {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.09) 66%, rgba(0, 0, 0, 0.25) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.07), transparent 36% 70%, rgba(0, 0, 0, 0.36));
  }

  46% {
    opacity: 0.88;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 248, 232, 0.07), transparent 38%, rgba(255, 248, 232, 0.14) 70%, rgba(0, 0, 0, 0.18) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.14), transparent 40% 70%, rgba(0, 0, 0, 0.28));
  }
}

@keyframes memoryHallConstellationActiveCardBreath {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 18px 46px rgba(0, 0, 0, 0.6),
      0 0 38px rgba(255, 236, 182, 0.24);
  }

  48% {
    filter: brightness(1.08) saturate(1.04);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 22px 58px rgba(0, 0, 0, 0.62),
      0 0 58px rgba(255, 236, 182, 0.36);
  }
}

@keyframes memoryHallConstellationOpenReadyDoor {
  0%,
  100% {
    opacity: 0.42;
    filter: blur(0.8px) saturate(0.96) brightness(0.9);
    transform: translate3d(5px, 7px, 18px) scale(0.7);
  }

  45% {
    opacity: 0.94;
    filter: blur(0) saturate(1.12) brightness(1.16);
    transform: translate3d(0, 0, 32px) scale(1.05);
  }
}

@keyframes memoryHallConstellationOpenReadyHalo {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(0.6px) saturate(0.96) brightness(0.92);
    transform: scale(0.96) rotate(-2deg);
  }

  46% {
    opacity: 0.92;
    filter: blur(0) saturate(1.08) brightness(1.08);
    transform: scale(1.08) rotate(5deg);
  }
}

@keyframes memoryHallConstellationOpenReadyFrame {
  0%,
  100% {
    border-color: rgba(255, 248, 232, 0.2);
    box-shadow:
      0 0 22px rgba(255, 236, 182, 0.14),
      inset 0 0 18px rgba(255, 248, 232, 0.04);
    opacity: 0.68;
    transform: rotate(10deg) scale(0.98);
  }

  48% {
    border-color: rgba(255, 248, 232, 0.46);
    box-shadow:
      0 0 46px rgba(255, 236, 182, 0.34),
      0 0 108px rgba(255, 248, 232, 0.12),
      inset 0 0 28px rgba(255, 248, 232, 0.075);
    opacity: 0.96;
    transform: rotate(0deg) scale(1.06);
  }
}

@keyframes memoryHallConstellationDistantCardBreath {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.94);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.06);
  }
}

@keyframes memoryHallEnterCueArrive {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(10px, -10px, 20px) scale(0.82);
  }

  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-1px, 1px, 52px) scale(1.04);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 42px) scale(1);
  }
}

@keyframes memoryHallEnterCueHalo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes memoryHallEnterCueGlimmer {
  0% {
    opacity: 0;
    transform: rotate(-18deg) translateX(-32%);
  }

  42% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: rotate(-18deg) translateX(34%);
  }
}

@keyframes memoryHallConstellationGentleTourCard {
  0%,
  100% {
    filter: blur(0) saturate(1.02) brightness(1);
    transform: translate3d(0, -12px, 190px) scale(1.065);
  }

  48% {
    filter: blur(0) saturate(1.1) brightness(1.08);
    transform: translate3d(0, -16px, 206px) scale(1.088);
  }
}

@keyframes memoryHallConstellationGentleTourSanctuary {
  0% {
    opacity: 0.28;
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(0.76);
  }

  42% {
    opacity: 0.62;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1.02);
  }

  100% {
    opacity: 0.38;
    filter: blur(1px);
    transform: translate(-50%, -50%) scale(0.88);
  }
}

@keyframes memoryHallConstellationSideCardArrive {
  0% {
    opacity: 0;
    filter: blur(7px) saturate(0.72) brightness(0.62);
    transform: translate3d(20px, 18px, 76px) scale(0.76);
  }

  70% {
    opacity: 0.82;
    filter: blur(0.2px) saturate(0.96) brightness(0.94);
    transform: translate3d(-2px, -6px, 126px) scale(1.035);
  }

  100% {
    opacity: 0.74;
    filter: blur(0.4px) saturate(0.92) brightness(0.88);
    transform: translate3d(0, 0, 112px) scale(1);
  }
}

@keyframes memoryHallConstellationSideTrace {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(4px);
  }

  40% {
    opacity: 0.78;
    filter: blur(0);
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0.46;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationSideHaloBreathe {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(0.8px);
    transform: scale(0.96);
  }

  48% {
    opacity: 0.82;
    filter: blur(0.2px);
    transform: scale(1.04);
  }
}

@keyframes memoryHallConstellationSideCardLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.26) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 38% 70%, rgba(0, 0, 0, 0.42));
  }

  46% {
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.06), transparent 36%, rgba(255, 248, 232, 0.14) 68%, rgba(0, 0, 0, 0.22) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.13), transparent 40% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationSideTraceBreathe {
  0%,
  100% {
    opacity: 0.38;
    filter: blur(0.2px);
    box-shadow:
      0 0 14px rgba(255, 236, 182, 0.16),
      0 0 34px rgba(255, 248, 232, 0.06);
  }

  50% {
    opacity: 0.62;
    filter: blur(0);
    box-shadow:
      0 0 24px rgba(255, 236, 182, 0.26),
      0 0 62px rgba(255, 248, 232, 0.12);
  }
}

@keyframes memoryHallConstellationTravelPath {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(5px);
  }

  22% {
    opacity: 0.92;
    filter: blur(0);
  }

  72% {
    clip-path: inset(0 0 0 0);
    opacity: 0.76;
  }

  100% {
    clip-path: inset(0 0 0 88%);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes memoryHallConstellationTravelSpark {
  0% {
    left: 0;
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(0.34);
  }

  18% {
    opacity: 0.92;
    filter: blur(0);
  }

  70% {
    left: var(--memory-hall-travel-spark-end);
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: 100%;
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(0.5);
  }
}

@keyframes memoryHallConstellationArrivalBloom {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(1);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) - 0.05));
  }

  28% {
    opacity: 0.92;
    filter: blur(0) saturate(1.1);
  }

  68% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    filter: blur(8px) saturate(0.9);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.42));
  }
}

@keyframes memoryHallConstellationArrivalRing {
  0% {
    opacity: 0;
    transform: scale(0.42);
  }

  24% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes memoryHallConstellationReturnTrail {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(5px);
  }

  38% {
    opacity: calc(var(--memory-hall-return-trail-opacity) + 0.18);
    filter: blur(var(--memory-hall-return-trail-blur));
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: var(--memory-hall-return-trail-opacity);
    filter: blur(var(--memory-hall-return-trail-blur));
  }
}

@keyframes memoryHallConstellationReturnTrailBreathe {
  0%,
  100% {
    opacity: 0.46;
    filter: blur(6px);
  }

  50% {
    opacity: 0.82;
    filter: blur(4px);
  }
}

@keyframes memoryHallConstellationReturnEndpointBreathe {
  0%,
  100% {
    opacity: 0.38;
    box-shadow:
      0 0 12px rgba(255, 236, 182, 0.24),
      0 0 26px rgba(196, 224, 211, 0.1);
    transform: translate(-50%, -50%) scale(0.88);
  }

  48% {
    opacity: 0.82;
    box-shadow:
      0 0 18px rgba(255, 236, 182, 0.38),
      0 0 42px rgba(196, 224, 211, 0.18);
    transform: translate(-50%, -50%) scale(1.14);
  }
}

@keyframes memoryHallConstellationVisitedGlow {
  from {
    opacity: 0;
    filter: blur(6px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.12))
      scale(calc(var(--memory-hall-constellation-scale) - 0.02));
  }

  to {
    opacity: var(--memory-hall-visited-glow-opacity);
    filter: var(--memory-hall-visited-glow-filter);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(var(--memory-hall-visited-glow-scale));
  }
}

@keyframes memoryHallConstellationVisitedGlowBreathe {
  0%,
  100% {
    opacity: 0.34;
    filter: blur(8px);
    transform: scale(0.96);
  }

  50% {
    opacity: 0.62;
    filter: blur(6px);
    transform: scale(1.04);
  }
}

@keyframes memoryHallConstellationReturnGlow {
  from {
    opacity: 0;
    filter: blur(9px) saturate(1.1) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) - 0.1));
  }

  58% {
    opacity: 0.68;
    filter: blur(0) saturate(1.12) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(calc(var(--memory-hall-visited-glow-scale) + 0.08));
  }

  to {
    opacity: var(--memory-hall-visited-glow-opacity);
    filter: var(--memory-hall-visited-glow-filter);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(var(--memory-hall-visited-glow-scale));
  }
}

@keyframes memoryHallConstellationReturnMemoryBreathe {
  0%,
  100% {
    opacity: 0.52;
    filter: blur(9px);
    transform: scale(0.96);
  }

  50% {
    opacity: 0.84;
    filter: blur(7px);
    transform: scale(1.05);
  }
}

@keyframes memoryHallConstellationReturnPetal {
  0%,
  100% {
    opacity: 0;
    filter: blur(1.4px);
    transform: translate(-50%, -50%) scale(0.48);
  }

  18% {
    opacity: 0.88;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }

  54% {
    opacity: 0.52;
    filter: blur(0.2px);
    transform: translate(-50%, -68%) scale(0.86);
  }

  74% {
    opacity: 0.18;
    filter: blur(0.8px);
    transform: translate(-50%, -78%) scale(0.68);
  }
}

@keyframes memoryHallConstellationThreadAppear {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 0.16;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationThreadPulse {
  0%,
  100% {
    opacity: 0;
    filter: blur(0.8px);
    transform: scaleX(0.12);
  }

  44% {
    opacity: var(--memory-hall-thread-pulse-opacity, 0.28);
    filter: blur(0.2px);
    transform: scaleX(0.78);
  }

  68% {
    opacity: var(--memory-hall-thread-pulse-opacity, 0.28);
    filter: blur(0.4px);
    transform: scaleX(1);
  }
}

@keyframes memoryHallConstellationThreadEndpointPulse {
  0%,
  100% {
    opacity: 0.34;
    box-shadow: 0 0 12px rgba(255, 236, 182, 0.14);
    transform: translateY(-50%) scale(0.84);
  }

  46% {
    opacity: var(--memory-hall-thread-end-opacity, 0.58);
    box-shadow:
      0 0 18px rgba(255, 236, 182, 0.28),
      0 0 36px rgba(255, 248, 232, 0.12);
    transform: translateY(-50%) scale(1.16);
  }
}

@keyframes memoryHallConstellationEchoIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, -50%)
      scale(calc(var(--memory-hall-echo-scale) * 0.62));
  }

  to {
    opacity: var(--memory-hall-echo-opacity, 0.74);
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      scale(var(--memory-hall-echo-scale));
  }
}

@keyframes memoryHallConstellationGhostAppear {
  from {
    opacity: 0;
    filter: blur(5px);
  }

  to {
    opacity: 0.6;
    filter: blur(0.15px);
  }
}

@keyframes memoryHallConstellationAppear {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.memory-hall-card-only .memory-hall-card-depth-field .memory-hall-public-continuation-tile {
  border-color: rgba(255, 248, 232, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.07), rgba(255, 248, 232, 0.018)),
    radial-gradient(circle at 50% 20%, rgba(255, 248, 232, 0.18), transparent 34%),
    #0e0e0e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.018),
    0 12px 32px rgba(0, 0, 0, 0.52);
  opacity: 0.72 !important;
}

.memory-hall-card-only .memory-hall-card-depth-field .memory-hall-public-continuation-tile i {
  background: rgba(255, 248, 232, 0.72);
  box-shadow:
    0 0 0 3px rgba(255, 236, 182, 0.035),
    0 0 16px rgba(255, 223, 145, 0.18);
}

.memory-hall-card-carousel {
  position: relative;
  z-index: 6;
  display: flex;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  padding: clamp(8px, 2vh, 18px) clamp(24px, 4vw, 68px) clamp(8px, 2vh, 18px);
  scroll-padding-inline: clamp(26px, 5vw, 80px);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  transform-style: preserve-3d;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.memory-hall-card-only .memory-hall-card-carousel {
  opacity: 0;
  pointer-events: none;
  transform: translateY(46px) scale(0.72);
  transform-origin: center bottom;
}

.memory-hall-card-only .memory-hall-card-carousel:focus-within {
  opacity: 0.3;
  pointer-events: auto;
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-roaming-placeholder-card {
  display: none;
}

.memory-hall-card-carousel::-webkit-scrollbar {
  display: none;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: absolute;
  left: 50%;
  bottom: clamp(142px, 18vh, 232px);
  justify-self: auto;
  align-self: auto;
  z-index: 34;
  width: var(--memory-hall-fixed-card-size) !important;
  max-width: none;
  min-height: 0 !important;
  aspect-ratio: 3 / 4 !important;
  overflow: visible;
  border: 1px solid rgba(255, 248, 232, 0.36);
  border-radius: 18px;
  background: #060606;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 36px 112px rgba(0, 0, 0, 0.78),
    0 0 92px rgba(255, 236, 182, 0.38),
    0 0 180px rgba(255, 248, 232, 0.11);
  backdrop-filter: none;
  transform: translate(-50%, 0) translateZ(80px) !important;
  filter: none;
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    filter 220ms ease;
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-spatial-feature.is-watson-center {
  transform:
    translate(-50%, 0)
    translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 80px) !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center.is-command-focused {
  z-index: 20;
  border-color: rgba(255, 248, 232, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 236, 182, 0.14),
    0 36px 116px rgba(0, 0, 0, 0.76),
    0 0 118px rgba(255, 236, 182, 0.36);
  transform: translate(-50%, -10px) translateZ(120px) scale(1.035) !important;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused) {
  left: clamp(142px, 22vw, 320px);
  bottom: clamp(134px, 18vh, 218px);
  z-index: 19;
  width: clamp(166px, 16vw, 250px) !important;
  border-color: rgba(255, 248, 232, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 24px 74px rgba(0, 0, 0, 0.62),
    0 0 72px rgba(255, 236, 182, 0.24);
  opacity: 0.94;
  filter: saturate(0.96) brightness(0.96);
  transform:
    translate(-50%, 2px)
    translate3d(calc(var(--memory-hall-pointer-card-x) * 0.18), calc(var(--memory-hall-pointer-card-y) * 0.16), 82px)
    scale(1) !important;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused)::before {
  inset: -48% -38%;
  opacity: 0.58;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused)::after {
  inset: -10%;
  border-color: rgba(255, 248, 232, 0.24);
  opacity: 0.48;
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused) .memory-hall-spatial-generated {
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 232, 0.06),
    inset 0 -54px 64px rgba(0, 0, 0, 0.38);
}

.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused) .memory-hall-spatial-plaque {
  opacity: 0.9;
  transform: translateX(50%) translateY(0);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center.is-command-focused::before {
  inset: -70% -56%;
  opacity: 0.98;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center.is-command-focused::after {
  border-color: rgba(255, 248, 232, 0.32);
  opacity: 0.86;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center.is-command-focused .memory-hall-spatial-plaque {
  opacity: 1;
  transform: translateX(50%) translateY(0);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before,
.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  display: block !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before {
  inset: -68% -56%;
  opacity: 0.9;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  inset: -20%;
  border-radius: 24px;
  opacity: 0.66;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-glass,
.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated {
  border-radius: inherit;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-glass {
  opacity: 1;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 232, 0.12),
    inset 0 -86px 98px rgba(0, 0, 0, 0.34);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 36%, transparent 0 34%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 28% 72%, rgba(0, 0, 0, 0.22));
  content: "";
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche {
  flex: 0 0 clamp(72px, 7vw, 112px);
  width: clamp(72px, 7vw, 112px) !important;
  min-height: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 10px;
  scroll-snap-align: center;
  transform: rotateY(-8deg) translateZ(0);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche:nth-child(3n + 2) {
  transform: rotateY(5deg) translateY(10px);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche:nth-child(4n + 3) {
  transform: rotateY(-3deg) translateY(-8px);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche:is(:hover, :focus-visible) {
  z-index: 8;
  transform: translateY(-10px) scale(1.025) translateZ(42px);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche .memory-hall-spatial-generated img {
  transition: transform 260ms ease, filter 260ms ease;
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche .memory-hall-spatial-plaque {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 5;
  gap: 3px;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(5, 6, 5, 0.72), rgba(3, 4, 3, 0.84)),
    radial-gradient(circle at 12% 0%, rgba(255, 236, 182, 0.16), transparent 42%);
  padding: 8px 9px;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.46),
    0 0 32px rgba(255, 236, 182, 0.1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transition:
    border-color 180ms ease,
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.18, 0.82, 0.24, 1);
  backdrop-filter: blur(16px);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche .memory-hall-spatial-plaque strong {
  color: rgba(255, 248, 232, 0.96);
  font-size: clamp(0.7rem, 0.78vw, 0.86rem);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche .memory-hall-spatial-plaque small {
  color: rgba(255, 236, 182, 0.66);
  font-size: 0.56rem;
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche .memory-hall-spatial-plaque em {
  display: none;
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche:is(:hover, :focus-visible) .memory-hall-spatial-generated img {
  filter: brightness(1.12) saturate(1.08);
  transform: scale(1.055);
}

.memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche:is(:hover, :focus-visible) .memory-hall-spatial-plaque {
  border-color: rgba(255, 248, 232, 0.28);
  opacity: 1;
  transform: translateY(0) scale(1);
}

.memory-hall-roaming-placeholder-card {
  position: relative;
  display: block;
  flex: 0 0 clamp(128px, 13vw, 206px);
  width: clamp(128px, 13vw, 206px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.07), rgba(255, 248, 232, 0.018)),
    radial-gradient(circle at 50% 18%, rgba(255, 248, 232, 0.18), transparent 34%),
    #0b0b0b;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.026),
    0 20px 58px rgba(0, 0, 0, 0.58);
  opacity: 0.68;
  scroll-snap-align: center;
  transform: rotateY(-6deg) translateY(4px);
}

.memory-hall-roaming-placeholder-card::before {
  position: absolute;
  inset: 8px;
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 248, 232, 0.2), transparent 18%),
    linear-gradient(180deg, transparent 0 70%, rgba(255, 248, 232, 0.08));
  content: "";
}

.memory-hall-roaming-placeholder-card::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 182, 0.24), transparent);
  content: "";
}

.memory-hall-roaming-placeholder-card i {
  position: absolute;
  top: 32%;
  left: 50%;
  width: clamp(7px, 0.8vw, 12px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.78);
  box-shadow:
    0 0 0 5px rgba(255, 236, 182, 0.04),
    0 0 24px rgba(255, 223, 145, 0.18);
  transform: translate(-50%, -50%);
}

.memory-hall-roaming-placeholder-card.is-depth-1,
.memory-hall-roaming-placeholder-card.is-depth-4 {
  opacity: 0.54;
  transform: rotateY(5deg) translateY(16px) scale(0.94);
}

.memory-hall-roaming-placeholder-card.is-depth-2,
.memory-hall-roaming-placeholder-card.is-depth-5 {
  opacity: 0.42;
  transform: rotateY(-3deg) translateY(-10px) scale(0.88);
}

.memory-hall-card-only .memory-hall-spatial-niche,
.memory-hall-card-only .memory-hall-public-room-card {
  overflow: hidden;
  border-color: rgba(255, 248, 232, 0.18);
  background: #050505;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 24px 74px rgba(0, 0, 0, 0.72);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
  overflow: visible;
}

.memory-hall-card-only .memory-hall-spatial-niche.has-niche-image,
.memory-hall-card-only .memory-hall-spatial-feature.has-niche-image {
  grid-template-rows: 1fr;
}

.memory-hall-card-only .memory-hall-spatial-glass,
.memory-hall-card-only .memory-hall-spatial-feature .memory-hall-spatial-glass,
.memory-hall-card-only .memory-hall-spatial-feature.has-niche-image .memory-hall-spatial-glass {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.memory-hall-card-only .memory-hall-spatial-generated,
.memory-hall-card-only .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-generated {
  inset: 0;
  border: 0;
  border-radius: inherit;
}

.memory-hall-card-only .memory-hall-spatial-generated img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-card-only .memory-hall-spatial-niche::after,
.memory-hall-card-only .memory-hall-spatial-glass::after,
.memory-hall-card-only .memory-hall-spatial-feature > svg {
  display: none;
}

.memory-hall-card-only .memory-hall-spatial-niche::before,
.memory-hall-card-only .memory-hall-spatial-glass::before {
  opacity: 0.18;
}

.memory-hall-card-only .memory-hall-spatial-plaque,
.memory-hall-card-only .memory-hall-spatial-feature .memory-hall-spatial-plaque,
.memory-hall-card-only .memory-hall-spatial-niche.has-niche-image .memory-hall-spatial-plaque {
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 10px;
  left: 10px;
  width: auto;
  max-width: calc(100% - 20px);
  border: 1px solid rgba(255, 248, 232, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.46);
  padding: 7px 10px 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(14px);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque,
.memory-hall-card-only .memory-hall-spatial-niche:is(:hover, :focus-visible) .memory-hall-spatial-plaque {
  opacity: 1;
  transform: translateY(0);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  opacity: 0;
  pointer-events: none;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  right: 50%;
  bottom: -38px;
  left: auto;
  width: fit-content;
  min-width: 0;
  max-width: min(210px, 68vw);
  border-color: rgba(255, 248, 232, 0.24);
  background: rgba(0, 0, 0, 0.26);
  padding: 5px 13px 6px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.026),
    0 0 34px rgba(255, 236, 182, 0.16);
  opacity: 0.86;
  transform: translateX(50%);
}

.memory-hall-card-only .memory-hall-spatial-plaque strong {
  color: rgba(255, 248, 232, 0.94);
  font-size: clamp(0.72rem, 0.86vw, 0.96rem);
  line-height: 1;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque strong {
  font-size: clamp(0.82rem, 1vw, 1.06rem);
  font-weight: 720;
  letter-spacing: 0;
}

.memory-hall-card-only .memory-hall-spatial-plaque small,
.memory-hall-card-only .memory-hall-spatial-plaque em {
  display: none;
}

.memory-hall-card-only .memory-hall-public-room-river {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 7;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: stretch;
  width: 100%;
  margin: clamp(8px, 2vh, 22px) auto 0;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

.memory-hall-card-only .memory-hall-public-room-river-glow {
  display: none;
}

.memory-hall-card-only .memory-hall-public-room-river-track {
  gap: clamp(7px, 0.9vw, 12px);
  padding: 7px clamp(4px, 1vw, 10px);
  scroll-snap-type: x proximity;
}

.memory-hall-card-only .memory-hall-public-room-card {
  flex-basis: clamp(54px, 5vw, 82px);
  border-radius: 6px;
}

.memory-hall-card-only .memory-hall-public-room-label {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.memory-hall-card-only .memory-hall-public-room-card:is(:hover, :focus-visible) .memory-hall-public-room-label {
  opacity: 1;
  transform: translateY(0);
}

.memory-hall-card-only.is-opening-room {
  --memory-hall-opening-breath: 1;
}

.memory-hall-card-only.is-opening-room::before {
  background:
    radial-gradient(ellipse at 38% 50%, rgba(255, 248, 232, 0.34), rgba(255, 236, 182, 0.12) 20%, transparent 48%),
    radial-gradient(ellipse at 62% 36%, rgba(196, 224, 211, 0.12), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 42%, rgba(0, 0, 0, 0.68));
  opacity: 0.78;
  mix-blend-mode: screen;
}

.memory-hall-card-only.is-opening-public-room::before {
  background:
    radial-gradient(circle at var(--memory-hall-opening-source-x) var(--memory-hall-opening-source-y), rgba(255, 248, 232, 0.46), rgba(255, 236, 182, 0.18) 14%, transparent 34%),
    radial-gradient(ellipse at 50% 52%, rgba(255, 248, 232, 0.28), rgba(255, 236, 182, 0.09) 22%, transparent 46%),
    radial-gradient(ellipse at 62% 36%, rgba(196, 224, 211, 0.12), transparent 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.72), transparent 42%, rgba(0, 0, 0, 0.76));
  opacity: 0.88;
}

.memory-hall-card-only.is-opening-room::after {
  right: -12%;
  bottom: -8%;
  left: -12%;
  height: 48%;
  background:
    radial-gradient(ellipse at 36% 18%, rgba(255, 248, 232, 0.42), transparent 34%),
    linear-gradient(90deg, transparent 14%, rgba(255, 236, 182, 0.48) 36%, rgba(255, 248, 232, 0.24) 52%, transparent 74%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(255, 248, 232, 0.08) 72px 73px, transparent 73px 144px);
  filter: blur(0.1px);
  opacity: 0.5;
  animation: memoryHallOpeningPath 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-room .memory-hall-vista-image {
  filter: saturate(0.98) contrast(1.08) brightness(0.7);
  opacity: 0.88;
  transform:
    translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.76), calc(var(--memory-hall-orbit-pan-y) * 0.76), 0)
    scale(1.16);
}

.memory-hall-card-only.is-opening-room .memory-hall-vista-shade {
  background:
    radial-gradient(circle at 38% 50%, rgba(255, 248, 232, 0.08), transparent 24%),
    radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.32) 52%, rgba(0, 0, 0, 0.76) 94%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.1) 36%, rgba(0, 0, 0, 0.22) 68%, rgba(0, 0, 0, 0.86)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34), transparent 42%, rgba(0, 0, 0, 0.72));
  opacity: 0.78;
}

.memory-hall-card-only.is-opening-room .memory-hall-room-opening {
  bottom: clamp(124px, 18vh, 206px);
  z-index: 34;
  width: min(420px, calc(100vw - 42px));
  gap: 8px;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-room-opening {
  top: var(--memory-hall-opening-source-y);
  right: auto;
  bottom: auto;
  left: var(--memory-hall-opening-source-x);
  width: min(380px, calc(100vw - 42px));
  animation: memoryHallPublicRoomOpeningFromConstellation 1280ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-room .memory-hall-room-opening-card {
  width: clamp(118px, 15vw, 198px);
  animation: memoryHallOpeningCardPortal 1080ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-room-opening-card {
  width: clamp(142px, 17vw, 238px);
  border-color: rgba(255, 248, 232, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 34px 112px rgba(0, 0, 0, 0.72),
    0 0 112px rgba(255, 236, 182, 0.4);
  animation: memoryHallPublicOpeningCardFromNode 1320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-room-opening-card-gate {
  animation: memoryHallPublicOpeningCardGate 1320ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-room-opening-card-gate i {
  animation: memoryHallPublicOpeningCardGateArc 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
  animation-delay: var(--memory-hall-gate-delay);
}

.memory-hall-card-only.is-opening-room .memory-hall-room-opening > span:not(.memory-hall-room-opening-veil):not(.memory-hall-room-opening-sanctuary):not(.memory-hall-room-opening-source-aura):not(.memory-hall-room-opening-depth-tunnel):not(.memory-hall-room-opening-starway):not(.memory-hall-room-opening-horizon):not(.memory-hall-room-opening-threshold):not(.memory-hall-room-opening-sparks):not(.memory-hall-room-opening-card-gate):not(.memory-hall-room-opening-memory-iris),
.memory-hall-card-only.is-opening-room .memory-hall-room-opening small {
  display: none;
}

.memory-hall-card-only.is-opening-room .memory-hall-room-opening strong {
  position: relative;
  z-index: 2;
  margin-top: -26px;
  border: 1px solid rgba(255, 248, 232, 0.22);
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.34);
  padding: 10px 22px 12px;
  font-size: clamp(1.8rem, 4.2vw, 3.7rem);
  line-height: 1;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.024),
    0 24px 72px rgba(0, 0, 0, 0.42),
    0 0 58px rgba(255, 236, 182, 0.24);
  backdrop-filter: blur(18px);
}

.memory-hall-card-only.is-opening-public-room .memory-hall-room-opening strong {
  position: absolute;
  right: auto;
  bottom: clamp(-54px, -5vh, -38px);
  left: 50%;
  z-index: 3;
  margin: 0;
  max-width: min(260px, 58vw);
  min-height: 0;
  border-color: rgba(255, 248, 232, 0.18);
  background: rgba(5, 5, 5, 0.3);
  padding: 8px 18px 10px;
  color: rgba(255, 248, 232, 0.8);
  font-size: clamp(1rem, 2vw, 1.55rem);
  font-weight: 820;
  opacity: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.64);
  transform: translateX(-50%) translateY(8px) scale(0.92);
  white-space: nowrap;
  animation: memoryHallPublicOpeningNameWhisper 960ms ease 220ms both;
}

.memory-hall-card-only.is-opening-room .memory-hall-constellation-ring,
.memory-hall-card-only.is-opening-room .memory-hall-constellation-line,
.memory-hall-card-only.is-opening-room .memory-hall-constellation-ghost-card,
.memory-hall-card-only.is-opening-room .memory-hall-constellation-star {
  opacity: 0.12 !important;
  filter: blur(2px) saturate(0.68) brightness(0.68);
  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

.memory-hall-card-only.is-opening-watson .memory-hall-constellation-node {
  opacity: 0.18 !important;
  filter: blur(3px) saturate(0.7) brightness(0.66);
}

.memory-hall-card-only.is-opening-watson .memory-hall-spatial-feature.is-watson-center {
  z-index: 28;
  border-color: rgba(255, 248, 232, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 223, 145, 0.28),
    0 0 96px rgba(255, 236, 182, 0.44),
    0 42px 126px rgba(0, 0, 0, 0.72);
  filter: brightness(1.12) saturate(1.04);
  transform:
    translate(-50%, -7vh)
    scale(1.18)
    translateZ(180px) !important;
  transition:
    transform 980ms cubic-bezier(0.18, 0.82, 0.24, 1),
    filter 620ms ease,
    box-shadow 620ms ease,
    border-color 420ms ease;
}

.memory-hall-card-only.is-opening-watson .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  opacity: 0.96;
  transform: translateX(50%) translateY(-4px);
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target::before {
  opacity: 0.94;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target::after {
  border-color: rgba(255, 248, 232, 0.74);
  box-shadow:
    0 0 0 1px rgba(255, 248, 232, 0.12),
    0 0 62px rgba(255, 236, 182, 0.46),
    inset 0 0 30px rgba(255, 248, 232, 0.08);
  opacity: 1;
}

.memory-hall-card-only.is-opening-public-room .memory-hall-constellation-node.is-room-opening-target .memory-hall-constellation-node-image {
  border-color: rgba(255, 248, 232, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 26px 82px rgba(0, 0, 0, 0.68),
    0 0 72px rgba(255, 236, 182, 0.5);
  transform: scale(1.12) translateZ(80px);
  animation: memoryHallOpeningTargetPulse 1180ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

@keyframes memoryHallOpeningSourceAura {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: scale(0.38) rotate(-8deg);
  }

  36% {
    opacity: 0.86;
    filter: blur(0);
    transform: scale(1.02) rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.68) rotate(12deg);
  }
}

@keyframes memoryHallOpeningSanctuaryVeil {
  0% {
    opacity: 0;
    filter: blur(22px) saturate(0.8);
    transform: translate(-50%, -50%) scale(0.54);
  }

  42% {
    opacity: 0.78;
    filter: blur(5px) saturate(1.14);
    transform: translate(-50%, -50%) scale(1.02);
  }

  72% {
    opacity: 0.58;
    filter: blur(8px) saturate(1.06);
    transform: translate(-50%, -50%) scale(1.12);
  }

  100% {
    opacity: 0;
    filter: blur(24px) saturate(0.92);
    transform: translate(-50%, -50%) scale(1.24);
  }
}

@keyframes memoryHallOpeningSanctuaryArc {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-opening-arc-rotate, 0deg)) scale(0.52);
  }

  38% {
    opacity: 0.72;
    filter: blur(0);
    transform: rotate(var(--memory-hall-opening-arc-rotate, 0deg)) scale(1.04);
  }

  78% {
    opacity: 0.42;
    filter: blur(0.8px);
    transform: rotate(calc(var(--memory-hall-opening-arc-rotate, 0deg) + 5deg)) scale(1.14);
  }

  100% {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-opening-arc-rotate, 0deg) + 10deg)) scale(1.28);
  }
}

@keyframes memoryHallOpeningDepthTunnel {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.06);
  }

  32% {
    opacity: 0.72;
    filter: blur(0);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.84);
  }

  72% {
    opacity: 0.54;
    filter: blur(0.4px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.03);
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.12);
  }
}

@keyframes memoryHallOpeningHorizon {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -50%) scaleX(0.16);
  }

  38% {
    opacity: 0.74;
    filter: blur(0);
    transform: translate(-50%, -50%) scaleX(1.02);
  }

  74% {
    opacity: 0.46;
    filter: blur(0.6px);
    transform: translate(-50%, -50%) scaleX(1.16);
  }

  100% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, -50%) scaleX(1.28);
  }
}

@keyframes memoryHallOpeningHorizonSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(12px) scale(0.36);
  }

  36% {
    opacity: 0.94;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-26px) scale(1.3);
  }
}

@keyframes memoryHallOpeningTunnelDust {
  0% {
    opacity: 0;
    transform: translate(-120%, -50%) scale(0.28);
  }

  34% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(240%, -50%) scale(1.4);
  }
}

@keyframes memoryHallPublicOpeningNameWhisper {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%) translateY(12px) scale(0.9);
  }

  48% {
    opacity: 0.78;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0.56;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
}

@keyframes memoryHallOpeningPath {
  from {
    opacity: 0;
    transform:
      perspective(1200px)
      rotateX(76deg)
      translate3d(-9%, 20px, 0)
      scaleX(0.86);
  }

  to {
    opacity: 0.5;
    transform:
      perspective(1200px)
      rotateX(74deg)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1);
  }
}

@keyframes memoryHallPublicRoomOpeningFromConstellation {
  from {
    top: var(--memory-hall-opening-source-y);
    left: var(--memory-hall-opening-source-x);
    opacity: 0.92;
    filter: saturate(1.12) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.66);
  }

  46% {
    top: 48%;
    left: 50%;
    opacity: 1;
    filter: saturate(1.2) brightness(1.22);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.08);
  }

  76% {
    top: 50%;
    left: 50%;
    opacity: 1;
    filter: saturate(1.08) brightness(1.12);
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  to {
    top: 50%;
    left: 50%;
    opacity: 0.98;
    filter: saturate(1.02) brightness(1.04);
    transform:
      translate(-50%, -50%)
      scale(0.96);
  }
}

@keyframes memoryHallOpeningCardPortal {
  from {
    opacity: 0;
    filter: blur(12px) saturate(1.18) brightness(1.24);
    transform:
      translateY(36px)
      scale(0.68)
      rotate(-4deg);
  }

  42% {
    opacity: 1;
    filter: blur(0) saturate(1.16) brightness(1.18);
    transform:
      translateY(-18px)
      scale(1.16)
      rotate(0deg);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1.08) brightness(1.08);
    transform:
      translateY(-4px)
      scale(1.06)
      rotate(0deg);
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1.04) brightness(1);
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }
}

@keyframes memoryHallPublicOpeningCardFromNode {
  from {
    opacity: 0.72;
    filter: blur(5px) saturate(1.18) brightness(1.26);
    transform:
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.46)
      translateZ(0);
  }

  38% {
    opacity: 1;
    filter: blur(0) saturate(1.24) brightness(1.26);
    transform:
      rotate(0deg)
      scale(1.12)
      translateZ(160px);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1.1) brightness(1.12);
    transform:
      rotate(0deg)
      scale(1.32)
      translateZ(220px);
  }

  to {
    opacity: 0.98;
    filter: blur(0.3px) saturate(1.04) brightness(1.06);
    transform:
      rotate(0deg)
      scale(1.22)
      translateZ(180px);
  }
}

@keyframes memoryHallPublicOpeningCardGate {
  from {
    opacity: 0;
    filter: blur(18px) saturate(0.86) brightness(0.72);
    transform: translate(-50%, -50%) scale(0.36) rotate(var(--memory-hall-opening-source-rotate));
  }

  34% {
    opacity: 0.9;
    filter: blur(1px) saturate(1.16) brightness(1.18);
    transform: translate(-50%, -50%) scale(1.02) rotate(0deg);
  }

  68% {
    opacity: 0.74;
    filter: blur(0.2px) saturate(1.08) brightness(1.08);
    transform: translate(-50%, -50%) scale(1.18) rotate(0deg);
  }

  to {
    opacity: 0;
    filter: blur(16px) saturate(0.92) brightness(0.88);
    transform: translate(-50%, -50%) scale(1.36) rotate(2deg);
  }
}

@keyframes memoryHallPublicOpeningCardGateArc {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-gate-rotate)) scale(0.46);
  }

  42% {
    opacity: 0.78;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 4deg)) scale(1.02);
  }

  76% {
    opacity: 0.42;
    filter: blur(0.8px);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 8deg)) scale(1.18);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 12deg)) scale(1.32);
  }
}

@keyframes memoryHallPublicOpeningMemoryIris {
  from {
    top: var(--memory-hall-opening-source-y);
    left: var(--memory-hall-opening-source-x);
    opacity: 0;
    filter: blur(12px) saturate(1.08) brightness(1.18);
    clip-path: inset(19% 16% round 28px);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.28);
  }

  32% {
    top: 49%;
    left: 50%;
    opacity: 0.5;
    filter: blur(1px) saturate(1.22) brightness(1.2);
    clip-path: inset(3% 3% round 30px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.02);
  }

  64% {
    top: 50%;
    left: 50%;
    opacity: 0.34;
    filter: blur(0) saturate(1.12) brightness(1.12);
    clip-path: inset(0 round 30px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.36);
  }

  to {
    top: 50%;
    left: 50%;
    opacity: 0;
    filter: blur(9px) saturate(1.02) brightness(0.86);
    clip-path: inset(0 round 34px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.78);
  }
}

@keyframes memoryHallPublicOpeningMemoryIrisRing {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: rotate(var(--memory-hall-iris-rotate)) scale(0.58);
  }

  42% {
    opacity: 0.76;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 3deg)) scale(1.02);
  }

  76% {
    opacity: 0.38;
    filter: blur(0.7px);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 8deg)) scale(1.16);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 13deg)) scale(1.32);
  }
}

@keyframes memoryHallOpeningThresholdRing {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.42) rotate(-10deg);
  }

  42% {
    opacity: 0.72;
    filter: blur(0);
    transform: scale(1.03) rotate(0deg);
  }

  to {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.24) rotate(7deg);
  }
}

@keyframes memoryHallOpeningStarway {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.04);
  }

  34% {
    opacity: 0.92;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.72);
  }

  72% {
    opacity: 0.64;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.08);
  }
}

@keyframes memoryHallOpeningStarwayDust {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.36);
  }

  36% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.44);
  }
}

@keyframes memoryHallOpeningSpark {
  from {
    opacity: 0;
    transform:
      rotate(var(--memory-hall-opening-spark-angle))
      translateX(0)
      scale(0.56);
  }

  36% {
    opacity: 0.94;
  }

  to {
    opacity: 0;
    transform:
      rotate(var(--memory-hall-opening-spark-angle))
      translateX(var(--memory-hall-opening-spark-distance))
      scale(1);
  }
}

@keyframes memoryHallOpeningTargetPulse {
  from {
    filter: brightness(1) saturate(1);
    transform: scale(1.03) translateZ(0);
  }

  54% {
    filter: brightness(1.22) saturate(1.12);
    transform: scale(1.18) translateZ(120px);
  }

  to {
    filter: brightness(1.08) saturate(1.04);
    transform: scale(1.12) translateZ(80px);
  }
}

body:has(.memory-hall-card-only) .memorial-command-hall-start-row {
  display: none !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command {
  top: auto !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(640px, calc(100vw - 44px)) !important;
  min-height: 88px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(63, 63, 60, 0.72), rgba(27, 27, 26, 0.82)),
    rgba(34, 34, 32, 0.78) !important;
  opacity: 0.94 !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
  top: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(640px, calc(100vw - 44px)) !important;
  min-height: 92px !important;
  border-radius: 18px !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command {
  grid-template-columns: 38px minmax(0, 1fr) max-content !important;
  grid-template-rows: auto 34px auto !important;
  gap: 3px 7px !important;
  align-items: end !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context {
  grid-template-rows: auto auto 34px auto !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command > textarea {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-height: 30px !important;
  max-height: min(44vh, 440px) !important;
  padding: 6px 12px 0 !important;
  font-size: 0.88rem !important;
  font-weight: 620 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-context-row {
  grid-row: 1 !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context > textarea {
  grid-row: 2 !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: 34px !important;
  height: 34px !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions {
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;
  min-height: 34px !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-add-menu-wrap,
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context > .studio-minis-character-picker-wrap,
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-command-actions {
  grid-row: 3 !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command .memorial-command-status {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command.has-context .memorial-command-status {
  grid-row: 4 !important;
}

@media (max-width: 900px) {
  .memory-hall-card-only {
    --memory-hall-fixed-card-size: min(76vw, 350px);
    --memory-hall-roaming-card-size: min(58vw, 232px);
    --memory-hall-constellation-card-size: clamp(46px, 13vw, 82px);
  }

  .memory-hall-card-only .memory-hall-spatial-niche-stage {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(16px, 3vh, 30px) !important;
    padding: clamp(76px, 9vh, 94px) 14px clamp(136px, 17vh, 174px) !important;
  }

  .memory-hall-constellation-sky {
    inset: clamp(60px, 9vh, 96px) 0 clamp(170px, 23vh, 220px);
  }

  .memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-sky {
    inset: clamp(44px, 7vh, 78px) -18px clamp(150px, 21vh, 202px);
  }

  .memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
    left: 50%;
    bottom: clamp(136px, 19vh, 196px);
    align-self: center;
    width: var(--memory-hall-fixed-card-size) !important;
    max-width: 350px;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-spatial-feature.is-watson-center:not(.is-command-focused) {
    left: clamp(88px, 24vw, 146px);
    bottom: clamp(146px, 22vh, 210px);
    z-index: 19;
    width: clamp(126px, 34vw, 176px) !important;
    max-width: 176px;
    opacity: 0.88;
    filter: saturate(0.96) brightness(0.94);
  }

	  .memory-hall-card-only .memory-hall-constellation-focus-card {
    right: max(14px, env(safe-area-inset-right));
    bottom: clamp(154px, 25vh, 224px);
    width: clamp(108px, 33vw, 158px);
    max-width: 38vw;
    border-radius: 12px;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card {
    right: max(14px, env(safe-area-inset-right));
    bottom: clamp(158px, 26vh, 230px);
    width: clamp(118px, 36vw, 170px);
    max-width: 42vw;
  }

  .memory-hall-constellation-focus-hush::before {
    width: clamp(150px, 48vw, 270px);
  }

  .memory-hall-constellation-focus-hush::after {
    right: max(0px, env(safe-area-inset-right));
    bottom: clamp(130px, 21vh, 206px);
    width: clamp(158px, 46vw, 250px);
    border-radius: 20px;
  }

  .memory-hall-constellation-focus-witnesses {
    right: max(-4px, env(safe-area-inset-right));
    bottom: clamp(128px, 21vh, 204px);
    width: clamp(168px, 52vw, 284px);
  }

  .memory-hall-constellation-focus-witnesses i {
    width: clamp(8px, 3.2vw, 15px);
    border-radius: 4px;
  }

  .memory-hall-card-only .memory-hall-constellation-side-card {
    width: clamp(48px, 15vw, 74px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card.is-previous {
    right: clamp(138px, 45vw, 238px);
    bottom: clamp(218px, 35vh, 310px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card.is-next {
    right: clamp(126px, 41vw, 224px);
    bottom: clamp(148px, 25vh, 230px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card-trace {
    left: 62%;
    width: clamp(54px, 16vw, 96px);
  }

  .memory-hall-card-only .memory-hall-constellation-focus-sanctuary {
    width: clamp(116px, 34vw, 172px);
  }

  .memory-hall-card-only .memory-hall-constellation-focus-dust {
    width: clamp(134px, 42vw, 212px);
  }

  .memory-hall-card-only .memory-hall-constellation-companion-halo {
    width: clamp(156px, 46vw, 238px);
  }

  .memory-hall-card-only .memory-hall-constellation-companion-halo button {
    width: clamp(25px, 7vw, 38px);
  }

  .memory-hall-card-only .memory-hall-constellation-approach {
    width: clamp(172px, 54vw, 292px);
  }

  .memory-hall-card-carousel {
    width: 100%;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 0;
    align-items: center;
    padding: 6px 22vw 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .memory-hall-card-only .memory-hall-card-carousel .memory-hall-spatial-niche {
    flex-basis: var(--memory-hall-roaming-card-size);
    width: var(--memory-hall-roaming-card-size) !important;
  }

  .memory-hall-roaming-placeholder-card {
    flex-basis: min(44vw, 184px);
    width: min(44vw, 184px);
  }

  .memory-hall-card-only .memory-hall-public-room-river {
    flex: 0 0 auto;
    margin-top: 0;
  }

  .memory-hall-card-depth-field {
    inset: clamp(74px, 8vh, 94px) 0 clamp(118px, 15vh, 154px);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    opacity: 0.38;
  }

  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command,
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    width: min(560px, calc(100vw - 24px)) !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}

@media (max-width: 520px) {
  .memory-hall-card-only {
    --memory-hall-fixed-card-size: min(78vw, 320px);
    --memory-hall-constellation-card-size: clamp(40px, 12vw, 66px);
  }

  .memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
    bottom: clamp(126px, 18vh, 168px);
    max-width: 320px;
  }

  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-room) .memory-hall-constellation-focus-card {
    bottom: clamp(172px, 24vh, 218px);
    width: clamp(112px, 40vw, 158px);
    max-width: 44vw;
  }

  .memory-hall-constellation-focus-hush::after {
    bottom: clamp(148px, 22vh, 204px);
    width: clamp(148px, 48vw, 224px);
  }

  .memory-hall-constellation-focus-witnesses {
    right: -8px;
    bottom: clamp(148px, 23vh, 208px);
    width: clamp(154px, 54vw, 238px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card {
    width: clamp(42px, 13.6vw, 58px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card.is-previous {
    right: clamp(154px, 48vw, 198px);
    bottom: clamp(230px, 33vh, 284px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card.is-next {
    right: clamp(146px, 45vw, 184px);
    bottom: clamp(150px, 22vh, 196px);
  }

  .memory-hall-card-only .memory-hall-constellation-side-card-trace {
    width: clamp(42px, 13vw, 68px);
  }
}

html:has(.memorial-letter-story),
body:has(.memorial-letter-story) {
  background: #e9e9e9;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scroll-behavior: auto;
}

.site-shell-fullscreen-memorial-letter,
.site-main-memorial-letter {
  min-height: 100svh;
  background: #e9e9e9;
}

.site-main-memorial-letter {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.memorial-letter-story {
  --letter-story-progress: 0;
  --letter-story-scroll-wave: 0;
  --letter-story-scroll-wind: 0;
  --letter-story-ink: rgba(24, 23, 20, 0.92);
  --letter-story-muted-ink: rgba(36, 33, 29, 0.24);
  --letter-story-roller-line-step: 82px;
  --letter-story-roller-y: 50svh;
  --letter-story-wave-blue: #2d5fa7;
  --letter-story-wave-rose: #c66b5d;
  position: relative;
  min-height: calc(var(--letter-story-steps, 5) * 100svh);
  overflow: visible;
  background: #e9e9e9;
  color: #1d1a17;
  font-family: var(--font-sans), "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

.memorial-letter-story::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #e9e9e9;
  content: "";
  pointer-events: none;
}

.memorial-letter-story::after {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 34vh;
  background: linear-gradient(180deg, transparent, rgba(231, 231, 231, 0.72));
  content: "";
  pointer-events: none;
}

.memorial-letter-story-canvas {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.memorial-letter-story-roller-veil {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.memorial-letter-story-topbar {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: clamp(16px, 3vw, 34px);
  left: clamp(16px, 3vw, 34px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.memorial-letter-story-topbar a,
.memorial-letter-story-topbar > span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(42, 33, 23, 0.12);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.72);
  color: rgba(36, 29, 22, 0.82);
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 830;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 38px rgba(92, 72, 48, 0.12);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.memorial-letter-story-topbar > span {
  border-color: rgba(106, 88, 68, 0.08);
  background: rgba(255, 255, 255, 0.2);
  color: rgba(82, 72, 60, 0.48);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.memorial-letter-story-topbar a:is(:hover, :focus-visible) {
  border-color: rgba(151, 103, 48, 0.24);
  background: rgba(255, 255, 255, 0.84);
  outline: none;
  transform: translateY(-1px);
}

.memorial-letter-story-copy-stack {
  position: fixed;
  top: 0;
  bottom: 0;
  left: clamp(22px, 10vw, 132px);
  z-index: 4;
  display: none;
  width: min(560px, calc(100vw - 44px));
  align-items: center;
  pointer-events: none;
}

.memorial-letter-story-roller {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.memorial-letter-story-roller-veil::before,
.memorial-letter-story-roller-veil::after {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 34vh;
  content: "";
  pointer-events: none;
  background-repeat: no-repeat;
  border: 0;
  box-shadow: none;
  transform: translateZ(0);
  will-change: opacity, transform, background-position;
}

.memorial-letter-story-roller-veil::before {
  top: -2px;
  background:
    radial-gradient(ellipse at 20% 2%, rgba(233, 233, 233, 0.92), rgba(233, 233, 233, 0.12) 66%, transparent 78%),
    radial-gradient(ellipse at 78% 8%, rgba(233, 233, 233, 0.78), rgba(233, 233, 233, 0.08) 68%, transparent 82%),
    linear-gradient(180deg, #e9e9e9 0%, rgba(233, 233, 233, 0.98) 28%, rgba(233, 233, 233, 0.74) 58%, rgba(233, 233, 233, 0.2) 86%, rgba(233, 233, 233, 0) 100%);
  background-position:
    var(--letter-story-scroll-wave-x-reverse, 0) -3vh,
    var(--letter-story-scroll-wave-x, 0) 0,
    0 0;
  background-size:
    146% 100%,
    152% 100%,
    100% 100%;
}

.memorial-letter-story-roller-veil::after {
  bottom: -2px;
  background:
    radial-gradient(ellipse at 72% 98%, rgba(233, 233, 233, 0.9), rgba(233, 233, 233, 0.12) 66%, transparent 78%),
    radial-gradient(ellipse at 18% 92%, rgba(233, 233, 233, 0.78), rgba(233, 233, 233, 0.08) 68%, transparent 82%),
    linear-gradient(0deg, #e9e9e9 0%, rgba(233, 233, 233, 0.98) 28%, rgba(233, 233, 233, 0.74) 58%, rgba(233, 233, 233, 0.2) 86%, rgba(233, 233, 233, 0) 100%);
  background-position:
    var(--letter-story-scroll-wave-x, 0) 3vh,
    var(--letter-story-scroll-wave-x-reverse, 0) 0,
    0 0;
  background-size:
    148% 100%,
    154% 100%,
    100% 100%;
}

.memorial-letter-story[data-scroll-direction="down"] .memorial-letter-story-roller-veil::before {
  animation: memorial-letter-story-roller-veil-down 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

.memorial-letter-story[data-scroll-direction="down"] .memorial-letter-story-roller-veil::after {
  animation: memorial-letter-story-roller-veil-follow 940ms cubic-bezier(0.19, 1, 0.22, 1);
}

.memorial-letter-story[data-scroll-direction="up"] .memorial-letter-story-roller-veil::before {
  animation: memorial-letter-story-roller-veil-follow 940ms cubic-bezier(0.19, 1, 0.22, 1) reverse;
}

.memorial-letter-story[data-scroll-direction="up"] .memorial-letter-story-roller-veil::after {
  animation: memorial-letter-story-roller-veil-up 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

.memorial-letter-story-roller-track {
  position: absolute;
  top: 0;
  left: clamp(26px, 14vw, 250px);
  display: grid;
  width: min(720px, calc(100vw - 52px));
  transform: translate3d(0, var(--letter-story-roller-y, 50svh), 0);
  will-change: transform;
}

.memorial-letter-story-roller-line {
  display: flex;
  min-height: var(--letter-story-roller-line-step, 82px);
  align-items: center;
  color: var(--letter-story-roller-line-color, rgba(24, 23, 20, 0.88));
  font-size: clamp(1.12rem, 1.92vw, 1.62rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.72;
  opacity: var(--letter-story-roller-line-opacity, 0);
  filter: blur(var(--letter-story-roller-line-blur, 8px));
  transform:
    translate3d(var(--letter-story-roller-line-x, 0px), var(--letter-story-roller-line-y, 0px), 0)
    skewX(var(--letter-story-roller-line-skew-x, 0deg))
    skewY(var(--letter-story-roller-line-skew, 0deg))
    scale(var(--letter-story-roller-line-scale, 0.94));
  transform-origin: left center;
  transition:
    color 120ms linear,
    filter 120ms linear,
    opacity 120ms linear,
    transform 120ms linear;
  will-change: color, filter, opacity, transform;
}

.memorial-letter-story-roller-line.is-title {
  max-width: 720px;
  font-size: clamp(1.55rem, 3.35vw, 3.05rem);
  font-weight: 430;
  line-height: 1.24;
}

.memorial-letter-story-roller-line.is-soft {
  font-size: clamp(1rem, 1.48vw, 1.24rem);
  font-weight: 430;
  letter-spacing: 0.02em;
}

.memorial-letter-story-copy {
  position: absolute;
  display: grid;
  max-width: 620px;
  gap: clamp(11px, 1.65vw, 18px);
  opacity: 0;
  transform: translate3d(0, 54px, 0);
  transition:
    opacity 920ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 1060ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 920ms ease;
  filter: blur(14px);
}

.memorial-letter-story-copy.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.memorial-letter-story-copy.is-past {
  opacity: 0;
  transform: translate3d(0, -52px, 0);
  filter: blur(12px);
}

.memorial-letter-story-copy > span {
  width: fit-content;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(120, 91, 56, 0.58);
  padding: 0;
  font-size: 0.62rem;
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: none;
  backdrop-filter: none;
}

.memorial-letter-story-copy h1,
.memorial-letter-story-copy h2 {
  max-width: 700px;
  margin: 0;
  color: var(--letter-story-ink);
  font-size: clamp(2.15rem, 5.35vw, 4.8rem);
  font-weight: 430;
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.memorial-letter-story-copy h2 {
  max-width: 760px;
  color: rgba(25, 24, 21, 0.88);
  font-size: clamp(1.72rem, 3.8vw, 3.45rem);
  font-weight: 410;
  line-height: 1.08;
}

.memorial-letter-story-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(36, 33, 29, 0.78);
  font-size: clamp(1.08rem, 1.72vw, 1.42rem);
  font-weight: 430;
  line-height: 2.02;
  letter-spacing: 0.01em;
}

.memorial-letter-story-copy.is-hero p,
.memorial-letter-story-copy.is-ending p {
  max-width: 500px;
  color: rgba(58, 49, 40, 0.64);
  font-size: clamp(1rem, 1.34vw, 1.14rem);
  line-height: 1.92;
}

.memorial-letter-story-lines {
  display: grid;
  gap: clamp(0.38em, 0.74vw, 0.72em);
  perspective: 900px;
}

.memorial-letter-story-line {
  --letter-story-line-focus-opacity: 0.84;
  --letter-story-line-final-color: rgba(29, 27, 24, 0.84);
  display: block;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transform-origin: left center;
  transition:
    color 520ms ease,
    opacity 760ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 860ms cubic-bezier(0.19, 1, 0.22, 1),
    filter 760ms ease;
  transition-delay: calc(var(--letter-story-line-index, 0) * 105ms + 150ms);
  filter: blur(10px);
  will-change: color, filter, opacity, transform;
}

.memorial-letter-story-copy.is-active .memorial-letter-story-line {
  color: var(--letter-story-line-final-color);
  opacity: var(--letter-story-line-focus-opacity);
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.memorial-letter-story-copy.is-active .memorial-letter-story-line:first-child {
  --letter-story-line-focus-opacity: 0.74;
  --letter-story-line-final-color: rgba(43, 39, 34, 0.62);
  color: var(--letter-story-line-final-color);
  filter: blur(0.9px);
}

.memorial-letter-story-copy.is-active .memorial-letter-story-line:nth-child(2),
.memorial-letter-story-copy.is-active .memorial-letter-story-line:nth-child(3) {
  --letter-story-line-focus-opacity: 1;
  --letter-story-line-final-color: rgba(21, 20, 18, 0.94);
  color: var(--letter-story-line-final-color);
  filter: blur(0);
}

.memorial-letter-story-copy.is-active .memorial-letter-story-line:nth-child(n + 4) {
  --letter-story-line-focus-opacity: 0.34;
  --letter-story-line-final-color: var(--letter-story-muted-ink);
  color: var(--letter-story-line-final-color);
  filter: blur(2.6px);
}

.memorial-letter-story[data-scroll-direction="down"] .memorial-letter-story-copy.is-active .memorial-letter-story-line {
  animation: memorial-letter-line-wave-down 820ms cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--letter-story-line-index, 0) * 72ms);
}

.memorial-letter-story[data-scroll-direction="up"] .memorial-letter-story-copy.is-active .memorial-letter-story-line {
  animation: memorial-letter-line-wave-up 820ms cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--letter-story-line-reverse-index, 0) * 72ms);
}

.memorial-letter-story-copy.is-past .memorial-letter-story-line {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
  transition-delay: calc(var(--letter-story-line-index, 0) * 42ms);
  filter: blur(8px);
}

.memorial-letter-story-breath {
  display: flex;
  width: min(280px, 55vw);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.memorial-letter-story-breath i {
  display: block;
  flex: 1;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(190, 137, 65, 0.44), rgba(190, 137, 65, 0.06));
  transform-origin: left center;
  animation: memorial-letter-story-breath 2800ms ease-in-out infinite;
}

.memorial-letter-story-breath i:nth-child(2) {
  animation-delay: 220ms;
}

.memorial-letter-story-breath i:nth-child(3) {
  animation-delay: 440ms;
}

.memorial-letter-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 6px;
  pointer-events: auto;
}

.memorial-letter-story-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(45, 37, 27, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: rgba(36, 29, 22, 0.84);
  padding: 0 14px;
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 16px 44px rgba(92, 72, 48, 0.12);
  backdrop-filter: blur(16px);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-letter-story-actions a:is(:hover, :focus-visible) {
  border-color: rgba(151, 103, 48, 0.26);
  background: rgba(255, 255, 255, 0.86);
  outline: none;
  transform: translateY(-1px);
}

.memorial-letter-story-photo {
  position: fixed;
  right: clamp(18px, 9vw, 132px);
  bottom: clamp(74px, 10vh, 116px);
  z-index: 5;
  display: grid;
  width: clamp(94px, 15vw, 188px);
  aspect-ratio: 4 / 5;
  place-items: center;
  border: 1px solid rgba(93, 74, 49, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.32);
  padding: 8px;
  box-shadow:
    0 24px 70px rgba(84, 62, 38, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
  opacity: clamp(0.22, calc(var(--letter-story-progress) * 2), 0.88);
  transform: translateY(calc((1 - var(--letter-story-progress)) * 24px));
  backdrop-filter: blur(16px);
  pointer-events: none;
}

.memorial-letter-story-photo img {
  width: 100%;
  height: 100%;
  border-radius: 7px;
  object-fit: cover;
}

.memorial-letter-story-photo svg {
  position: absolute;
  right: 14px;
  bottom: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(137, 91, 35, 0.84);
  padding: 5px;
  box-sizing: content-box;
}

.memorial-letter-story-progress {
  position: fixed;
  top: 50%;
  right: clamp(14px, 3vw, 30px);
  z-index: 6;
  display: grid;
  gap: 7px;
  transform: translateY(-50%);
  pointer-events: auto;
}

.memorial-letter-story-progress button {
  display: grid;
  width: 28px;
  min-height: 24px;
  appearance: none;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.memorial-letter-story-progress button span {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(56, 49, 40, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition:
    width 240ms ease,
    height 240ms ease,
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.memorial-letter-story-progress button.is-active span {
  border-color: rgba(198, 107, 93, 0.24);
  background: rgba(198, 107, 93, 0.34);
}

.memorial-letter-story-progress button.is-current span {
  height: 20px;
  border-color: rgba(45, 95, 167, 0.3);
  background: rgba(45, 95, 167, 0.58);
  box-shadow: 0 10px 28px rgba(45, 95, 167, 0.18);
}

.memorial-letter-story-progress button:is(:hover, :focus-visible) {
  outline: none;
}

.memorial-letter-story-progress button:is(:hover, :focus-visible) span {
  border-color: rgba(45, 95, 167, 0.38);
  background: rgba(45, 95, 167, 0.5);
  transform: scale(1.16);
}

.memorial-letter-story-scroll {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.memorial-letter-story-scroll section {
  min-height: 100svh;
}

.memorial-photo-letter-story-open {
  display: inline-flex;
  width: fit-content;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 236, 182, 0.22);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.1);
  color: rgba(255, 248, 232, 0.92);
  padding: 0 13px;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.memorial-photo-letter-story-open:is(:hover, :focus-visible) {
  border-color: rgba(255, 236, 182, 0.36);
  background: rgba(255, 236, 182, 0.15);
  outline: none;
  transform: translateY(-1px);
}

@keyframes memorial-letter-line-wave-down {
  0% {
    color: rgba(166, 171, 178, 0.3);
    opacity: 0.2;
    transform: translate3d(0, -18px, 0) rotateX(12deg) skewY(-0.8deg);
    filter: blur(7px);
  }

  36% {
    color: var(--letter-story-wave-blue);
    opacity: 1;
    transform: translate3d(0, 6px, 0) rotateX(-5deg) skewY(0.45deg);
    filter: blur(0.8px);
  }

  68% {
    color: rgba(39, 64, 105, 0.86);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, -2px, 0) rotateX(2deg);
    filter: blur(0);
  }

  100% {
    color: var(--letter-story-line-final-color);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes memorial-letter-line-wave-up {
  0% {
    color: rgba(166, 171, 178, 0.3);
    opacity: 0.2;
    transform: translate3d(0, 18px, 0) rotateX(-12deg) skewY(0.8deg);
    filter: blur(7px);
  }

  36% {
    color: var(--letter-story-wave-rose);
    opacity: 1;
    transform: translate3d(0, -6px, 0) rotateX(5deg) skewY(-0.45deg);
    filter: blur(0.8px);
  }

  68% {
    color: rgba(112, 54, 47, 0.78);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 2px, 0) rotateX(-2deg);
    filter: blur(0);
  }

  100% {
    color: var(--letter-story-line-final-color);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-breath {
  0%,
  100% {
    opacity: 0.32;
    transform: scaleX(0.72);
  }

  45% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes memorial-letter-story-roller-veil-down {
  0% {
    opacity: 0.88;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -3vh,
      var(--letter-story-scroll-wave-x, 0) 0,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x-reverse, 0), -7px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(0.965);
    filter: blur(0);
  }

  38% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 1vh,
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 5px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.07);
    filter: blur(0.75px);
  }

  68% {
    opacity: 0.96;
    background-position:
      0 -1vh,
      var(--letter-story-scroll-wave-x, 0) 1vh,
      0 0;
    transform: translate3d(0, 1px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(1.018);
    filter: blur(0.35px);
  }

  100% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -3vh,
      var(--letter-story-scroll-wave-x, 0) 0,
      0 0;
    transform: translate3d(0, 0, 0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-roller-veil-up {
  0% {
    opacity: 0.88;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 3vh,
      var(--letter-story-scroll-wave-x-reverse, 0) 0,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 7px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(0.965);
    filter: blur(0);
  }

  38% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      var(--letter-story-scroll-wave-x, 0) 1vh,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x-reverse, 0), -5px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(1.07);
    filter: blur(0.75px);
  }

  68% {
    opacity: 0.96;
    background-position:
      0 1vh,
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      0 0;
    transform: translate3d(0, -1px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.018);
    filter: blur(0.35px);
  }

  100% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 3vh,
      var(--letter-story-scroll-wave-x-reverse, 0) 0,
      0 0;
    transform: translate3d(0, 0, 0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-roller-veil-follow {
  0% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) skewX(0deg) scaleY(1);
    filter: blur(0);
  }

  52% {
    opacity: 1;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 4px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.035);
    filter: blur(0.5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg) scaleY(1);
    filter: blur(0);
  }
}

@media (max-width: 760px) {
  .memorial-letter-story-roller-veil::before,
  .memorial-letter-story-roller-veil::after {
    height: 23vh;
  }

  .memorial-letter-story-roller-track {
    right: 18px;
    left: 18px;
    width: auto;
  }

  .memorial-letter-story-roller-line {
    font-size: clamp(1.02rem, 5.1vw, 1.34rem);
    line-height: 1.76;
  }

  .memorial-letter-story-roller-line.is-title {
    font-size: clamp(1.42rem, 7.8vw, 2.36rem);
  }

  .memorial-letter-story-copy-stack {
    right: 18px;
    left: 18px;
    width: auto;
    align-items: end;
    padding-bottom: 17svh;
  }

  .memorial-letter-story-copy h1 {
    font-size: clamp(2.1rem, 12vw, 3.6rem);
  }

  .memorial-letter-story-copy h2 {
    font-size: clamp(1.65rem, 9vw, 3rem);
  }

  .memorial-letter-story-copy p {
    font-size: 1rem;
    line-height: 1.78;
  }

  .memorial-letter-story-lines {
    gap: 0.22em;
  }

  .memorial-letter-story-photo {
    right: 18px;
    bottom: 76px;
    width: 86px;
    opacity: clamp(0.16, calc(var(--letter-story-progress) * 1.6), 0.62);
  }

  .memorial-letter-story-progress {
    top: auto;
    right: 18px;
    bottom: 22px;
    display: flex;
    transform: none;
  }

  .memorial-letter-story-progress button.is-current span {
    width: 18px;
    height: 7px;
  }

  .memorial-letter-story-topbar > span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-letter-story-copy,
  .memorial-letter-story-line,
  .memorial-letter-story-breath i,
  .memorial-letter-story-actions a,
  .memorial-letter-story-progress button span,
  .memorial-photo-letter-story-open {
    animation: none;
    transition: none;
  }
}

/* Image-first public memorial rooms keep the letter readable while moving guidance copy out of the visual layer. */
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-room-arrival-copy > p,
  .memorial-photo-room-arrival-name-ritual small,
  .memorial-photo-room-arrival-breath small,
  .memorial-photo-room-symbol-card p,
  .memorial-photo-room-intro-copy h2,
  .memorial-photo-room-intro-copy > p:last-of-type,
  .memorial-photo-room-intro-letter small,
  .memorial-photo-special-day-copy p,
  .memorial-photo-special-day-action small,
  .memorial-photo-today-copy p,
  .memorial-photo-favorites-copy p,
  .memorial-photo-community-copy p,
  .memorial-photo-comfort-door p,
  .memorial-photo-letter-pause-copy p,
  .memorial-photo-letter-memory-copy > p,
  .memorial-photo-letter-film-seed p,
  .memorial-photo-film-bridge-copy p,
  .memorial-photo-film-bridge-film > p,
  .memorial-photo-film-bridge-steps p,
  .memorial-photo-room-closing-copy p,
  .memorial-photo-room-closing-grid article p,
  .memorial-photo-room-return-card p,
  .memorial-photo-room-return-ritual-copy p
) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-today-copy h2,
  .memorial-photo-special-day-copy h2,
  .memorial-photo-film-bridge-copy h2,
  .memorial-photo-room-closing-copy h2
) {
  max-width: 560px;
  font-size: clamp(1.16rem, 2.25vw, 2.28rem);
  line-height: 1.08;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-today-card :where(p, small) {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: max-height 220ms ease, opacity 180ms ease, transform 220ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-today-card:is(:hover, :focus-visible) :where(p, small) {
  max-height: 5em;
  opacity: 1;
  transform: translateY(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-film-bridge-steps article,
  .memorial-photo-room-closing-grid article
) {
  min-height: 96px;
  align-content: center;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body p {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-head span,
  .memorial-photo-favorites-copy > span
) {
  width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0;
  font-size: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-head span svg,
  .memorial-photo-favorites-copy > span svg
) {
  width: 16px;
  height: 16px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) .memorial-photo-favorites-copy strong {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-card.has-image > div,
  .memorial-photo-favorites-card.has-image > div
) {
  grid-template-columns: auto;
  align-content: end;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(10px, 1.2vw, 14px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-card.has-image .memorial-photo-object-icon,
  .memorial-photo-favorites-card.has-image .memorial-photo-object-icon
) {
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.3);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-card.has-image .memorial-photo-object-label,
  .memorial-photo-favorites-card.has-image .memorial-photo-object-label
) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 220ms ease;
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-card.has-image:is(:hover, :focus-visible),
  .memorial-photo-favorites-card.has-image:is(:hover, :focus-visible)
) > div {
  grid-template-columns: auto minmax(0, auto);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode):not(.is-quiet-memory-room) :where(
  .memorial-photo-presence-card.has-image:is(:hover, :focus-visible) .memorial-photo-object-label,
  .memorial-photo-favorites-card.has-image:is(:hover, :focus-visible) .memorial-photo-object-label
) {
  position: static;
  width: auto;
  height: auto;
  max-width: min(170px, 52vw);
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  color: rgba(255, 248, 232, 0.84);
  padding: 7px 9px;
  clip: auto;
  clip-path: none;
  opacity: 1;
  text-overflow: ellipsis;
  transform: translateY(0);
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
  gap: clamp(10px, 1.6vw, 20px);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 236, 182, 0.06), transparent 32%),
    radial-gradient(circle at 86% 18%, rgba(176, 213, 197, 0.045), transparent 34%),
    linear-gradient(180deg, #040404 0%, #070807 100%);
  padding-top: clamp(18px, 3vw, 34px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year {
  gap: clamp(8px, 1.2vw, 14px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  align-items: center;
  gap: 8px;
  padding-inline: 2px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(255, 236, 182, 0.14);
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.055);
  color: rgba(255, 248, 232, 0.78);
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-grid {
  grid-auto-rows: clamp(112px, 12vw, 164px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(116px, 11vw, 170px), 1fr));
  gap: clamp(4px, 0.7vw, 8px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  border: 1px solid rgba(255, 248, 232, 0.06);
  border-radius: 7px;
  background: rgba(255, 248, 232, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 18px 54px rgba(0, 0, 0, 0.22);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.045), transparent 22% 72%, rgba(0, 0, 0, 0.18)),
    radial-gradient(circle at 50% 12%, rgba(255, 236, 182, 0.08), transparent 32%);
  content: "";
  opacity: 0.52;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile span {
  right: 8px;
  bottom: 8px;
  left: 8px;
  gap: 1px;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.38), rgba(4, 5, 4, 0.72)),
    rgba(0, 0, 0, 0.32);
  padding: 8px 9px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms ease;
  backdrop-filter: blur(12px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile:is(:hover, :focus-visible) span {
  opacity: 1;
  transform: translateY(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile:is(:hover, :focus-visible) {
  outline-color: rgba(255, 236, 182, 0.82);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings {
  grid-template-columns: minmax(188px, 0.5fr) minmax(0, 1.5fr);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 239, 211, 0.11), transparent 34%),
    radial-gradient(circle at 84% 58%, rgba(176, 213, 197, 0.07), transparent 32%),
    linear-gradient(180deg, #060706 0%, #040404 100%);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy {
  gap: 8px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy > span {
  width: 34px;
  height: 34px;
  overflow: hidden;
  padding: 0;
  font-size: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy > strong {
  max-width: 320px;
  font-size: clamp(1.16rem, 2vw, 2.12rem);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy button {
  width: 40px;
  min-height: 40px;
  padding: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-form {
  gap: 10px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 236, 182, 0.08), transparent 34%),
    rgba(12, 13, 12, 0.88);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 0.8vw, 9px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid button {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  gap: 0;
  border-radius: 8px;
  background: rgba(255, 248, 232, 0.035);
  padding: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid img {
  height: 100%;
  border-radius: inherit;
  filter: saturate(0.94) contrast(1.02);
  transform: scale(1.01);
  transition: filter 180ms ease, transform 220ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid button:is(:hover, :focus-visible, .is-selected) img {
  filter: saturate(1) contrast(1.05) brightness(1.03);
  transform: scale(1.045);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  left: 6px;
  z-index: 2;
  max-width: none;
  border: 1px solid rgba(255, 248, 232, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: rgba(255, 248, 232, 0.82);
  padding: 6px 7px;
  opacity: 0;
  text-align: center;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 220ms ease;
  backdrop-filter: blur(10px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid button:is(:hover, :focus-visible, .is-selected) span {
  opacity: 1;
  transform: translateY(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-selected {
  grid-template-columns: minmax(120px, 0.36fr) minmax(0, 1fr);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-ritual-line span {
  font-size: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-ritual-line span::before {
  content: "";
  display: block;
  width: 6px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.46);
  box-shadow: 0 0 14px rgba(255, 236, 182, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 236, 182, 0.06), transparent 30%),
    linear-gradient(180deg, #040404 0%, #070807 100%);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card {
  padding: clamp(9px, 1.1vw, 13px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card span {
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0;
  font-size: 0;
  transition: width 180ms ease, padding 180ms ease, font-size 180ms ease, background 180ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card span svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card strong {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  z-index: 2;
  display: block;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(6, 7, 6, 0.38), rgba(4, 5, 4, 0.76)),
    rgba(0, 0, 0, 0.34);
  padding: 8px 9px;
  opacity: 0;
  text-overflow: ellipsis;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms ease;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-line-clamp: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card:is(:hover, :focus-visible) span {
  width: fit-content;
  max-width: calc(100% - 20px);
  justify-content: flex-start;
  padding: 0 10px;
  font-size: 0.62rem;
  background: rgba(0, 0, 0, 0.42);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card:is(:hover, :focus-visible) strong {
  opacity: 1;
  transform: translateY(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door {
  grid-template-columns: minmax(0, 1fr) minmax(136px, 188px);
  align-items: stretch;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 226, 174, 0.07), transparent 32%),
    radial-gradient(circle at 88% 42%, rgba(176, 213, 197, 0.055), transparent 34%),
    linear-gradient(180deg, #040404 0%, #070807 100%);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door > div {
  align-content: center;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door > div > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  font-size: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door > div > span::before {
  content: "";
  display: block;
  width: 8px;
  aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 236, 182, 0.58);
  box-shadow: 0 0 18px rgba(255, 236, 182, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door > div > strong {
  max-width: 520px;
  font-size: clamp(1.08rem, 2vw, 2rem);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(188px, 22vw);
  min-width: 136px;
  min-height: 214px;
  aspect-ratio: 3 / 4;
  align-content: end;
  justify-items: start;
  overflow: hidden;
  border-radius: 8px;
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 22px 68px rgba(0, 0, 0, 0.28);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.24) 42%, rgba(0, 0, 0, 0.82)),
    radial-gradient(circle at 50% 16%, rgba(255, 236, 182, 0.11), transparent 34%);
  content: "";
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02) brightness(0.9);
  transform: scale(1.01);
  transition: filter 220ms ease, transform 260ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card:is(:hover, :focus-visible) img {
  filter: saturate(1) contrast(1.05) brightness(0.98);
  transform: scale(1.045);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card > svg:first-of-type {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 7px;
  border: 1px solid rgba(255, 248, 232, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
  padding: 9px;
  color: rgba(255, 236, 182, 0.82);
  backdrop-filter: blur(10px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card > svg:last-child {
  position: absolute;
  top: 10px;
  right: 10px;
  opacity: 0.72;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card strong {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 248, 232, 0.13);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.36);
  color: rgba(255, 248, 232, 0.86);
  padding: 7px 9px;
  font-size: 0.7rem;
  text-overflow: ellipsis;
  backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
    padding-top: 14px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-grid {
    grid-auto-rows: clamp(112px, 31vw, 146px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile {
    border-radius: 5px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-offerings-copy {
    position: static;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-flower-choice-grid span {
    right: 4px;
    bottom: 4px;
    left: 4px;
    padding: 5px 4px;
    font-size: 0.58rem;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card span {
    width: 34px;
    height: 34px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-visual-path-card:is(:hover, :focus-visible) span {
    font-size: 0.58rem;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-comfort-door-card {
    width: 100%;
    min-height: 164px;
    aspect-ratio: 16 / 9;
  }
}

/* Luminous gallery pivot for the Memorial Hall: keep room logic, replace the night-sky mood. */
.memory-hall-bridge-experience.memory-hall-card-only {
  --memory-hall-fixed-card-size: clamp(224px, 20vw, 344px);
  --memory-hall-constellation-card-size: clamp(62px, 5.6vw, 104px);
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.72), transparent 34%),
    linear-gradient(180deg, #f8efe1 0%, #ead9bf 58%, #d5c09f 100%);
  color: #3f2d1d;
}

.memory-hall-bridge-experience.memory-hall-card-only::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(93, 63, 34, 0.18), transparent 18% 82%, rgba(93, 63, 34, 0.18)),
    radial-gradient(ellipse at 50% 7%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.18) 28%, transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 44%, rgba(93, 63, 34, 0.08));
  opacity: 0.72;
  mix-blend-mode: screen;
  transform:
    translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.28), calc(var(--memory-hall-pointer-depth-y) * 0.18), 0)
    translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.12), 0);
  -webkit-mask-image: none;
  mask-image: none;
}

.memory-hall-bridge-experience.memory-hall-card-only::after {
  right: -8%;
  bottom: -16%;
  left: -8%;
  height: 42%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.36), transparent 28%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(108, 76, 46, 0.08) 96px 98px, transparent 98px 192px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(146, 112, 72, 0.18));
  opacity: 0.52;
  filter: blur(0.1px);
  transform:
    perspective(1200px)
    rotateX(72deg)
    translate3d(calc(var(--memory-hall-pointer-card-x) * 0.2), calc(var(--memory-hall-pointer-card-y) * 0.2), 0);
}

.memory-hall-card-only .memory-hall-vista {
  display: block !important;
  background: #f2e4cf;
}

.memory-hall-card-only .memory-hall-vista-image,
.memory-hall-card-only.is-inside .memory-hall-vista-image,
.memory-hall-card-only.is-threshold .memory-hall-vista-image,
.memory-hall-card-only.is-constellation-exploring .memory-hall-vista-image,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-vista-image {
  inset: 0;
  opacity: 1;
  filter: saturate(0.96) contrast(0.98) brightness(1.04);
  mix-blend-mode: normal;
  transform:
    scale(1.018)
    translate3d(calc(var(--memory-hall-pointer-depth-x) * -0.06), calc(var(--memory-hall-pointer-depth-y) * -0.04), 0);
}

.memory-hall-card-only .memory-hall-vista-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.memory-hall-card-only .memory-hall-vista-shade,
.memory-hall-card-only.is-inside .memory-hall-vista-shade,
.memory-hall-card-only.is-threshold .memory-hall-vista-shade,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-vista-shade {
  display: block !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(ellipse at 50% 78%, rgba(107, 75, 43, 0.14), transparent 54%),
    linear-gradient(90deg, rgba(74, 47, 25, 0.18), transparent 20% 80%, rgba(74, 47, 25, 0.18)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 56%, rgba(70, 44, 24, 0.1));
  opacity: 1;
}

.memory-hall-card-only .memory-hall-threshold-card-path,
.memory-hall-card-only .memory-hall-constellation-atlas,
.memory-hall-card-only .memory-hall-constellation-ring,
.memory-hall-card-only .memory-hall-constellation-line,
.memory-hall-card-only .memory-hall-constellation-thread,
.memory-hall-card-only .memory-hall-constellation-star,
.memory-hall-card-only .memory-hall-constellation-ghost-card,
.memory-hall-card-only .memory-hall-constellation-echo-node,
.memory-hall-card-only .memory-hall-constellation-focus-pull,
.memory-hall-card-only .memory-hall-constellation-focus-trail,
.memory-hall-card-only .memory-hall-constellation-focus-motes,
.memory-hall-card-only .memory-hall-constellation-focus-sanctuary,
.memory-hall-card-only .memory-hall-constellation-focus-dust,
.memory-hall-card-only .memory-hall-constellation-companion-halo,
.memory-hall-card-only .memory-hall-constellation-focus-beacon,
.memory-hall-card-only .memory-hall-constellation-depth-lens,
.memory-hall-card-only .memory-hall-constellation-approach-aperture,
.memory-hall-card-only .memory-hall-constellation-approach,
.memory-hall-card-only .memory-hall-constellation-focus-hush,
.memory-hall-card-only .memory-hall-constellation-focus-witnesses,
.memory-hall-card-only .memory-hall-constellation-side-card,
.memory-hall-card-only .memory-hall-card-carousel,
.memory-hall-card-only .memory-hall-public-room-river {
  display: none !important;
}

.memory-hall-card-only .memory-hall-spatial-niche-stage {
  padding:
    clamp(72px, 8vh, 110px)
    clamp(16px, 4vw, 76px)
    clamp(118px, 15vh, 178px) !important;
  perspective: 1700px;
}

.memory-hall-card-only .memory-hall-spatial-niche-stage::before {
  inset: clamp(74px, 9vh, 118px) clamp(10px, 2vw, 44px) clamp(124px, 15vh, 190px);
  border: 1px solid rgba(151, 112, 67, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.42), transparent 34%),
    linear-gradient(90deg, rgba(116, 78, 42, 0.12), transparent 18% 82%, rgba(116, 78, 42, 0.12));
  box-shadow:
    inset 0 0 80px rgba(255, 255, 255, 0.18),
    0 0 110px rgba(106, 74, 43, 0.08);
  opacity: 0.36;
  transform:
    perspective(1400px)
    rotateX(0.6deg)
    translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.28), calc(var(--memory-hall-pointer-depth-y) * 0.18), 0);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.84) 78%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.84) 78%, transparent);
}

.memory-hall-card-only .memory-hall-constellation-sky,
.memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-sky,
.memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-sky {
  inset: clamp(96px, 12vh, 156px) clamp(18px, 4vw, 92px) clamp(150px, 20vh, 230px);
  z-index: 8;
  -webkit-mask-image: none;
  mask-image: none;
  transform:
    translate3d(calc(var(--memory-hall-pointer-drift-x) * 0.42), calc(var(--memory-hall-pointer-drift-y) * 0.32), 0)
    translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.28), calc(var(--memory-hall-orbit-pan-y) * 0.22), 0);
}

.memory-hall-card-only .memory-hall-constellation-node {
  width: var(--memory-hall-constellation-card-size);
  color: #5a3f27;
  filter: drop-shadow(0 20px 18px rgba(84, 55, 29, 0.2));
}

.memory-hall-card-only .memory-hall-constellation-node::before {
  inset: -12px;
  border: 1px solid rgba(129, 88, 43, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(115, 74, 34, 0.92), rgba(246, 221, 170, 0.96) 28%, rgba(184, 139, 75, 0.96) 58%, rgba(255, 239, 197, 0.9)),
    #c9a66d;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.32),
    inset 0 0 18px rgba(95, 58, 26, 0.22),
    0 10px 26px rgba(70, 42, 20, 0.16);
  opacity: 1;
}

.memory-hall-card-only .memory-hall-constellation-node::after {
  inset: -5px;
  border: 1px solid rgba(255, 249, 232, 0.78);
  border-radius: 5px;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(120, 82, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 1;
  transform: none;
}

.memory-hall-card-only .memory-hall-constellation-node-orbit {
  inset: -8px;
  border-color: rgba(255, 249, 232, 0.6);
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(116, 76, 34, 0.22),
    0 0 20px rgba(255, 242, 203, 0.28);
  opacity: 0.9;
}

.memory-hall-card-only .memory-hall-constellation-node-image,
.memory-hall-card-only .memory-hall-constellation-node.is-image-deferred .memory-hall-constellation-node-image {
  border: 4px solid rgba(247, 233, 205, 0.96);
  border-radius: 3px;
  background:
    linear-gradient(180deg, #fff8e8, #e9d5b3),
    #f2e2c5;
  box-shadow:
    inset 0 0 0 1px rgba(96, 62, 29, 0.18),
    0 12px 24px rgba(67, 43, 23, 0.18);
  opacity: 1;
}

.memory-hall-card-only .memory-hall-constellation-node-image::before {
  display: none;
}

.memory-hall-card-only .memory-hall-constellation-node-image::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 36% 78%, rgba(80, 48, 23, 0.12)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.2), transparent 38%);
}

.memory-hall-card-only .memory-hall-constellation-node-name {
  top: calc(100% + 13px);
  max-width: min(116px, 14vw);
  border: 1px solid rgba(145, 104, 57, 0.22);
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.86);
  color: #5a3f27;
  padding: 5px 8px 6px;
  text-shadow: none;
  box-shadow: 0 10px 24px rgba(77, 49, 25, 0.12);
}

.memory-hall-card-only .memory-hall-constellation-node:is(:hover, :focus-visible) {
  filter:
    drop-shadow(0 24px 24px rgba(84, 55, 29, 0.24))
    brightness(1.04);
}

.memory-hall-card-only .memory-hall-constellation-node:is(:hover, :focus-visible)::before,
.memory-hall-card-only .memory-hall-constellation-node.is-active::before {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 0 0 18px rgba(95, 58, 26, 0.2),
    0 16px 34px rgba(70, 42, 20, 0.2),
    0 0 40px rgba(255, 231, 178, 0.34);
}

.memory-hall-card-only .memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-image,
.memory-hall-card-only .memory-hall-constellation-node.is-active .memory-hall-constellation-node-image {
  border-color: rgba(255, 245, 219, 1);
  box-shadow:
    inset 0 0 0 1px rgba(96, 62, 29, 0.16),
    0 18px 36px rgba(67, 43, 23, 0.22),
    0 0 44px rgba(255, 232, 184, 0.4);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
  top: clamp(244px, 52vh, 540px);
  bottom: auto !important;
  left: 50%;
  width: var(--memory-hall-fixed-card-size) !important;
  border: clamp(9px, 0.8vw, 14px) solid rgba(188, 145, 77, 0.98);
  border-radius: 8px;
  background: #f8ebd2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.58),
    0 28px 70px rgba(79, 52, 28, 0.28),
    0 0 58px rgba(255, 236, 197, 0.32);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--memory-hall-pointer-card-x) * 0.24), calc(var(--memory-hall-pointer-card-y) * 0.18), 90px) !important;
}

.memory-hall-card-only.is-constellation-exploring .memory-hall-spatial-feature.is-watson-center {
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--memory-hall-pointer-card-x) * 0.28), calc(var(--memory-hall-pointer-card-y) * 0.2), 100px) !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before {
  inset: -22%;
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 241, 205, 0.42), transparent 64%);
  opacity: 0.84;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  inset: -6%;
  border: 1px solid rgba(255, 248, 232, 0.72);
  border-radius: 10px;
  opacity: 0.88;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated {
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(85, 54, 27, 0.16),
    inset 0 -56px 84px rgba(74, 44, 21, 0.16);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32% 76%, rgba(74, 44, 21, 0.14)),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.18), transparent 38%);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  right: 50%;
  bottom: -44px;
  left: auto;
  border-color: rgba(145, 104, 57, 0.26);
  background: rgba(255, 248, 232, 0.92);
  box-shadow: 0 12px 28px rgba(78, 50, 25, 0.12);
  opacity: 0.94;
  transform: translateX(50%);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque strong,
.memory-hall-card-only .memory-hall-spatial-plaque strong {
  color: #553a22;
  text-shadow: none;
}

.memory-hall-card-only.has-constellation-preview .memory-hall-constellation-focus-card,
.memory-hall-card-only .memory-hall-constellation-focus-card {
  top: clamp(138px, 22vh, 238px);
  right: clamp(18px, 4vw, 76px);
  bottom: auto;
  width: clamp(132px, 13vw, 224px);
  max-width: min(28vw, 224px);
  border: 8px solid rgba(190, 147, 78, 0.98);
  border-radius: 8px;
  background: #f8ebd2;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 26px 66px rgba(70, 45, 24, 0.24),
    0 0 42px rgba(255, 235, 191, 0.3);
  color: #553a22;
  text-shadow: none;
}

.memory-hall-card-only.has-constellation-preview .memory-hall-constellation-focus-card {
  opacity: 1;
}

.memory-hall-card-only .memory-hall-constellation-focus-card i {
  border-radius: 2px;
  background: #f7ead0;
  box-shadow:
    inset 0 0 0 1px rgba(82, 53, 28, 0.14),
    inset 0 -36px 58px rgba(72, 45, 22, 0.12);
}

.memory-hall-card-only .memory-hall-constellation-focus-card i::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 34% 74%, rgba(74, 44, 21, 0.14)),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.16), transparent 38%);
}

.memory-hall-card-only .memory-hall-constellation-focus-card strong {
  color: #553a22;
  text-shadow: none;
}

.memory-hall-card-only .memory-hall-constellation-enter-cue {
  border-color: rgba(143, 99, 49, 0.24);
  background: rgba(255, 248, 232, 0.9);
  color: #5a3f27;
  box-shadow: 0 10px 24px rgba(79, 51, 25, 0.12);
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command,
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
  border-color: rgba(126, 88, 45, 0.22) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.94), rgba(239, 226, 204, 0.9)) !important;
  box-shadow:
    0 26px 70px rgba(67, 43, 22, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command {
  border-radius: 20px !important;
  color: #3f2d1d;
}

body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-form.is-hall-command > textarea {
  color: #3f2d1d !important;
}

@media (max-width: 760px) {
  .memory-hall-bridge-experience.memory-hall-card-only {
    --memory-hall-fixed-card-size: min(58vw, 242px);
    --memory-hall-constellation-card-size: clamp(44px, 11vw, 72px);
  }

  .memory-hall-card-only .memory-hall-vista-image img {
    object-position: center center;
  }

  .memory-hall-card-only .memory-hall-constellation-sky,
  .memory-hall-card-only.is-constellation-exploring .memory-hall-constellation-sky,
  .memory-hall-card-only.is-constellation-zoomed:not(.is-opening-public-room) .memory-hall-constellation-sky {
    inset: clamp(88px, 12vh, 126px) 8px clamp(132px, 19vh, 186px);
  }

  .memory-hall-card-only .memory-hall-constellation-node-name {
    max-width: 78px;
    padding: 4px 7px 5px;
    font-size: 0.56rem;
  }

  .memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
    top: clamp(236px, 48vh, 390px);
    width: var(--memory-hall-fixed-card-size) !important;
  }

  .memory-hall-card-only.has-constellation-preview .memory-hall-constellation-focus-card,
  .memory-hall-card-only .memory-hall-constellation-focus-card {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: clamp(116px, 18vh, 168px);
    width: clamp(104px, 30vw, 146px);
    max-width: 34vw;
    border-width: 6px;
  }

  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command,
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
  body:has(.memory-hall-bridge-experience.memory-hall-card-only.is-inside) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
    border-radius: 20px !important;
  }
}

.memory-hall-card-only .memory-hall-constellation-node-image img,
.memory-hall-card-only .memory-hall-constellation-focus-card img {
  filter: sepia(0.16) saturate(0.84) brightness(1.15) contrast(0.95);
}

.memory-hall-card-only .memory-hall-constellation-node:is(:hover, :focus-visible) .memory-hall-constellation-node-image img,
.memory-hall-card-only .memory-hall-constellation-node.is-active .memory-hall-constellation-node-image img,
.memory-hall-card-only .memory-hall-constellation-focus-card:is(:hover, :focus-visible) img {
  filter: sepia(0.1) saturate(0.96) brightness(1.18) contrast(0.98);
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center {
  width: clamp(220px, 24vw, 390px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 34px 46px rgba(93, 58, 28, 0.22));
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::before {
  inset: 8% -8% -4% !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255, 221, 154, 0.5), rgba(255, 221, 154, 0.16) 38%, transparent 68%) !important;
  opacity: 0.72 !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center::after {
  display: none !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-glass,
.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated {
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated::after {
  display: none !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated img {
  object-fit: contain !important;
  filter:
    sepia(0.06)
    saturate(1.02)
    brightness(1.05)
    contrast(0.98)
    drop-shadow(0 22px 20px rgba(78, 47, 22, 0.18)) !important;
}

.memory-hall-card-only .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-plaque {
  display: none !important;
  bottom: -34px !important;
  border-color: rgba(145, 104, 57, 0.18) !important;
  background: rgba(255, 248, 232, 0.82) !important;
  opacity: 0.82 !important;
  transform: translateX(50%) translateY(0) !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center {
  top: clamp(206px, 41vh, 384px) !important;
  width: clamp(204px, 23vw, 334px) !important;
  border-radius: 6px !important;
  filter:
    drop-shadow(0 3px 2px rgba(255, 255, 255, 0.36))
    drop-shadow(0 32px 36px rgba(78, 48, 23, 0.28)) !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center::before {
  inset: -10% -14% -10% !important;
  border-radius: 12px !important;
  background:
    radial-gradient(ellipse at 50% 84%, rgba(184, 127, 48, 0.2), transparent 62%),
    radial-gradient(ellipse at 50% 42%, rgba(255, 236, 188, 0.26), transparent 64%) !important;
  opacity: 0.88 !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated {
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  box-shadow:
    0 22px 42px rgba(85, 52, 24, 0.2),
    0 0 0 1px rgba(255, 248, 232, 0.22) !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated::before {
  display: none !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated::after {
  display: none !important;
}

.memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center .memory-hall-spatial-generated img {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  object-fit: cover !important;
  object-position: center center !important;
  filter:
    saturate(1.03)
    brightness(1.03)
    contrast(0.98) !important;
}

@media (max-width: 900px) {
  .memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center {
    top: clamp(204px, 42vh, 382px) !important;
    width: clamp(184px, 52vw, 288px) !important;
  }
}

@media (max-width: 520px) {
  .memory-hall-card-only[data-watson-hall-artwork="framed"] .memory-hall-spatial-feature.is-watson-center {
    top: clamp(188px, 40vh, 328px) !important;
    width: min(58vw, 236px) !important;
  }
}

.memorial-book-voyage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 70px) calc(154px + env(safe-area-inset-bottom));
  color: #392719;
  background:
    radial-gradient(circle at 52% 78%, rgba(255, 224, 154, 0.54), transparent 34%),
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(180deg, #f4ead8 0%, #ead9be 54%, #d7b883 100%);
}

.memorial-book-voyage.is-folding {
  color: rgba(255, 247, 228, 0.92);
  background: #000;
}

.memorial-book-voyage.is-folding::before,
.memorial-book-voyage.is-folding::after,
.memorial-book-voyage.is-folding .memorial-book-voyage-light {
  opacity: 0;
}

.memorial-book-voyage::before,
.memorial-book-voyage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.memorial-book-voyage::before {
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 19%, rgba(96, 65, 35, 0.13) 19.4% 23%, transparent 23.3% 54%, rgba(96, 65, 35, 0.1) 54.5% 58.4%, transparent 58.8%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(255, 252, 244, 0.12) 45%, transparent 72%);
  opacity: 0.74;
}

.memorial-book-voyage::after {
  right: -8vw;
  bottom: -14vh;
  width: min(38vw, 520px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 38%, rgba(92, 117, 76, 0.26), transparent 0 7%, rgba(95, 118, 78, 0.15) 7.4% 13%, transparent 13.5%),
    radial-gradient(circle at 56% 54%, rgba(104, 126, 83, 0.2), transparent 0 8%, transparent 8.2%);
  filter: blur(0.5px);
  opacity: 0.72;
}

.memorial-book-voyage-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 46% 20%, rgba(255, 255, 255, 0.96), transparent 34%),
    radial-gradient(ellipse at 51% 91%, rgba(255, 241, 204, 0.42), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.92;
}

.memorial-book-voyage-serenity,
.memorial-book-voyage-letter-stage,
.memorial-book-voyage-canal,
.memorial-book-voyage-hall {
  position: absolute;
  inset: 0;
}

.memorial-book-voyage-serenity {
  z-index: 1;
  transition: opacity 720ms ease, transform 920ms ease;
  transform-style: preserve-3d;
}

.memorial-book-voyage.is-hall .memorial-book-voyage-serenity {
  opacity: 0;
  transform: scale(1.04);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-serenity {
  background: #000;
  animation: none;
}

.memorial-book-voyage.is-voyage .memorial-book-voyage-serenity {
  opacity: 0;
  filter: blur(2px);
  transform: perspective(900px) rotateX(16deg) translateY(18vh) scale(0.42);
}

.memorial-book-voyage-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.12), rgba(234, 194, 137, 0.04)),
    url("/memorial/book-voyage/serenity-marble-water-wall-v3.webp") center center / cover no-repeat;
  filter: saturate(1.08) brightness(1.08);
}

.memorial-book-voyage-wall::before,
.memorial-book-voyage-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memorial-book-voyage-wall::before {
  background:
    linear-gradient(106deg, transparent 0 18%, rgba(255, 255, 255, 0.46) 23%, transparent 34%),
    linear-gradient(112deg, transparent 0 45%, rgba(255, 255, 255, 0.32) 50%, transparent 61%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.42), transparent 42%);
  mix-blend-mode: screen;
  opacity: 0.72;
}

.memorial-book-voyage-wall::after {
  top: auto;
  height: 36%;
  background:
    radial-gradient(ellipse at 48% 100%, rgba(255, 255, 255, 0.62), transparent 48%),
    linear-gradient(180deg, transparent, rgba(170, 213, 205, 0.24) 42%, rgba(255, 250, 228, 0.4));
  mix-blend-mode: screen;
  opacity: 0.7;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-wall {
  animation: memorial-book-voyage-wall-becomes-paper 760ms ease forwards;
}

.memorial-book-voyage-shadow {
  display: none;
}

.memorial-book-voyage-shadow.is-left {
  left: 20%;
  transform: skewX(-18deg);
}

.memorial-book-voyage-shadow.is-right {
  right: 24%;
  transform: skewX(14deg);
}

.memorial-book-voyage-tree {
  display: none;
}

.memorial-book-voyage-paper-sheet {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  perspective: 1500px;
  perspective-origin: 50% 52%;
  transform-style: preserve-3d;
}

.memorial-book-voyage-paper-sheet::before,
.memorial-book-voyage-paper-sheet::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.memorial-book-voyage-paper-sheet::before {
  inset: 0;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 8px),
    radial-gradient(ellipse at 50% 50%, rgba(255, 252, 235, 0.18), transparent 58%);
  opacity: 0;
  mix-blend-mode: screen;
}

.memorial-book-voyage-paper-sheet::after {
  left: 50%;
  top: 57%;
  z-index: 5;
  width: clamp(108px, 14vw, 188px);
  height: clamp(56px, 7vw, 96px);
  background:
    linear-gradient(145deg, rgba(255, 252, 239, 0.98), rgba(226, 203, 164, 0.95));
  clip-path: polygon(0 58%, 50% 18%, 100% 58%, 77% 100%, 23% 100%);
  filter: drop-shadow(0 24px 24px rgba(65, 45, 28, 0.18));
  opacity: 0;
  transform: translate(-50%, -50%) translateY(22vh) scale(0.52) rotate(-5deg);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-paper-sheet {
  opacity: 1;
  animation: memorial-book-voyage-paper-sheet-contract 1640ms cubic-bezier(0.28, 0.72, 0.14, 1) forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-paper-sheet::before {
  animation: memorial-book-voyage-paper-grain-in 420ms ease forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-paper-sheet::after {
  animation: memorial-book-voyage-paper-boat-forms 1640ms cubic-bezier(0.28, 0.72, 0.14, 1) forwards;
}

.memorial-book-voyage-world-fold {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255, 251, 239, 0.1), rgba(213, 174, 118, 0.1)),
    url("/memorial/book-voyage/serenity-marble-water-wall-v3.webp") center center / cover no-repeat;
  backface-visibility: hidden;
  filter: saturate(1.05) brightness(1.08);
  transform-origin: 50% 62%;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.memorial-book-voyage-world-fold::before,
.memorial-book-voyage-world-fold::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memorial-book-voyage-world-fold::before {
  background: var(--book-voyage-fold-shade, linear-gradient(90deg, transparent, rgba(80, 54, 31, 0.16), transparent));
  opacity: 0;
}

.memorial-book-voyage-world-fold::after {
  background:
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse at var(--book-voyage-fold-glow-x, 50%) var(--book-voyage-fold-glow-y, 52%), rgba(255, 255, 255, 0.4), transparent 34%);
  opacity: 0;
  mix-blend-mode: screen;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold::before {
  animation: memorial-book-voyage-fold-shade 1550ms ease forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold::after {
  animation: memorial-book-voyage-fold-paper-fiber 1550ms ease forwards;
}

.memorial-book-voyage-world-fold.is-left {
  --book-voyage-fold-glow-x: 54%;
  --book-voyage-fold-glow-y: 52%;
  --book-voyage-fold-shade:
    linear-gradient(83deg, rgba(74, 48, 27, 0.3), transparent 24%, rgba(255, 255, 255, 0.42) 49%, rgba(71, 48, 28, 0.24) 52%, transparent 68%);
  clip-path: polygon(0 0, 50% 52%, 0 100%);
  transform-origin: 50% 52%;
}

.memorial-book-voyage-world-fold.is-right {
  --book-voyage-fold-glow-x: 46%;
  --book-voyage-fold-glow-y: 52%;
  --book-voyage-fold-shade:
    linear-gradient(277deg, rgba(74, 48, 27, 0.3), transparent 24%, rgba(255, 255, 255, 0.42) 49%, rgba(71, 48, 28, 0.24) 52%, transparent 68%);
  clip-path: polygon(100% 0, 50% 52%, 100% 100%);
  transform-origin: 50% 52%;
}

.memorial-book-voyage-world-fold.is-top {
  --book-voyage-fold-glow-x: 50%;
  --book-voyage-fold-glow-y: 58%;
  --book-voyage-fold-shade:
    linear-gradient(180deg, rgba(74, 48, 27, 0.26), transparent 30%, rgba(255, 255, 255, 0.46) 51%, rgba(71, 48, 28, 0.22) 54%, transparent 72%);
  clip-path: polygon(0 0, 100% 0, 50% 52%);
  transform-origin: 50% 52%;
}

.memorial-book-voyage-world-fold.is-bottom {
  --book-voyage-fold-glow-x: 50%;
  --book-voyage-fold-glow-y: 44%;
  --book-voyage-fold-shade:
    linear-gradient(0deg, rgba(74, 48, 27, 0.28), transparent 30%, rgba(255, 255, 255, 0.48) 51%, rgba(71, 48, 28, 0.24) 54%, transparent 72%);
  clip-path: polygon(0 100%, 50% 52%, 100% 100%);
  transform-origin: 50% 52%;
}

.memorial-book-voyage-world-fold.is-center {
  --book-voyage-fold-glow-x: 50%;
  --book-voyage-fold-glow-y: 52%;
  --book-voyage-fold-shade:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.58), transparent 34%),
    linear-gradient(90deg, rgba(71, 48, 28, 0.16), transparent 44%, rgba(71, 48, 28, 0.18));
  clip-path: polygon(33% 35%, 67% 35%, 70% 66%, 50% 79%, 30% 66%);
  opacity: 0;
  filter: saturate(1.08) brightness(1.14) drop-shadow(0 20px 34px rgba(76, 51, 29, 0.16));
  transform-origin: 50% 56%;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold.is-left {
  animation: memorial-book-voyage-fold-left 1550ms cubic-bezier(0.28, 0.72, 0.14, 1) forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold.is-right {
  animation: memorial-book-voyage-fold-right 1550ms cubic-bezier(0.28, 0.72, 0.14, 1) forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold.is-top {
  animation: memorial-book-voyage-fold-top 1550ms cubic-bezier(0.3, 0.74, 0.16, 1) forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold.is-bottom {
  animation: memorial-book-voyage-fold-bottom 1550ms cubic-bezier(0.3, 0.74, 0.16, 1) forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold.is-center {
  animation: memorial-book-voyage-fold-center 1580ms cubic-bezier(0.28, 0.72, 0.14, 1) forwards;
}

.memorial-book-voyage.is-voyage .memorial-book-voyage-paper-sheet {
  opacity: 0;
  transition: opacity 360ms ease;
}

.memorial-book-voyage-three-fold {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.memorial-book-voyage-three-fold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  transition: opacity 220ms ease;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-three-fold {
  opacity: 1;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-three-fold::before {
  opacity: 1;
}

.memorial-book-voyage-three-fold-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

.memorial-book-voyage-comfort-stream {
  position: absolute;
  left: 50%;
  bottom: max(148px, calc(138px + env(safe-area-inset-bottom)));
  z-index: 2;
  display: block;
  width: min(1120px, calc(100vw - 28px));
  color: rgba(53, 37, 25, 0.74);
  pointer-events: auto;
  transform: translateX(-50%);
  transition: opacity 460ms ease, transform 620ms ease;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-comfort-stream,
.memorial-book-voyage.is-voyage .memorial-book-voyage-comfort-stream,
.memorial-book-voyage.is-hall .memorial-book-voyage-comfort-stream {
  opacity: 0;
  transform: translateX(-50%) translateY(18px);
}

.memorial-book-voyage-comfort-rail {
  overflow: hidden;
  padding: 1px 0 6px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.memorial-book-voyage-comfort-track {
  display: flex;
  width: max-content;
  gap: 12px;
  animation: memorial-book-voyage-comfort-flow 76s linear infinite;
}

.memorial-book-voyage-comfort-rail:is(:hover, :focus-within) .memorial-book-voyage-comfort-track {
  animation-play-state: paused;
}

.memorial-book-voyage-comfort-note {
  display: grid;
  flex: 0 0 clamp(248px, 29vw, 410px);
  min-height: 98px;
  gap: 8px;
  padding: 13px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  color: rgba(47, 33, 23, 0.76);
  background:
    linear-gradient(180deg, rgba(255, 253, 246, 0.64), rgba(247, 231, 204, 0.44)),
    rgba(255, 250, 236, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 16px 38px rgba(86, 55, 27, 0.09);
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(122%);
  animation: memorial-book-voyage-comfort-note-breathe 9s ease-in-out infinite;
  animation-delay: var(--book-voyage-voice-delay);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.memorial-book-voyage-comfort-note.is-cat {
  background:
    linear-gradient(180deg, rgba(251, 253, 244, 0.65), rgba(224, 232, 202, 0.42)),
    rgba(255, 251, 237, 0.48);
}

.memorial-book-voyage-comfort-note:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 20px 46px rgba(86, 55, 27, 0.14);
  outline: 0;
  transform: translateY(-2px);
}

.memorial-book-voyage-comfort-note span {
  color: rgba(100, 68, 33, 0.58);
  font-size: 0.72rem;
  font-weight: 760;
  line-height: 1.15;
}

.memorial-book-voyage-comfort-note p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: rgba(49, 35, 24, 0.76);
  font-size: clamp(0.82rem, 1vw, 0.95rem);
  line-height: 1.42;
  letter-spacing: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.memorial-book-voyage-comfort-reader {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  place-items: center;
  padding: clamp(20px, 4vw, 56px);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 252, 242, 0.5), transparent 42%),
    rgba(54, 37, 23, 0.12);
  backdrop-filter: blur(8px) saturate(108%);
}

.memorial-book-voyage-comfort-reader:target {
  display: grid;
}

body:has(.memorial-book-voyage-comfort-reader:target) .memorial-research-floating-link {
  opacity: 0;
  pointer-events: none;
}

.memorial-book-voyage-comfort-reader-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: default;
}

.memorial-book-voyage-comfort-reader-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  width: min(720px, calc(100vw - 36px));
  max-height: min(72vh, 620px);
  padding: clamp(22px, 4vw, 44px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 12px;
  color: rgba(48, 34, 24, 0.84);
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.88), rgba(246, 232, 206, 0.78)),
    rgba(255, 251, 238, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 28px 84px rgba(72, 45, 23, 0.22);
}

.memorial-book-voyage-comfort-reader-card.is-cat {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.9), rgba(229, 236, 210, 0.78)),
    rgba(255, 251, 238, 0.9);
}

.memorial-book-voyage-comfort-reader-card span {
  color: rgba(105, 70, 31, 0.62);
  font-size: 0.78rem;
  font-weight: 780;
  line-height: 1.2;
}

.memorial-book-voyage-comfort-reader-card p {
  margin: 0;
  color: rgba(43, 31, 22, 0.82);
  font-size: clamp(1.05rem, 1.65vw, 1.34rem);
  line-height: 1.62;
  letter-spacing: 0;
}

.memorial-book-voyage-comfort-reader-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  color: rgba(58, 40, 26, 0.72);
  background: rgba(255, 252, 242, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 14px 36px rgba(70, 44, 22, 0.12);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(14px) saturate(120%);
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}

.memorial-book-voyage-comfort-reader-close:is(:hover, :focus-visible) {
  color: rgba(42, 29, 20, 0.94);
  background: rgba(255, 253, 247, 0.88);
  outline: 0;
  transform: translateY(-1px);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-paper-sheet {
  opacity: 0;
  animation: none;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-wall {
  opacity: 0;
  animation: none;
  filter: none;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-world-fold,
.memorial-book-voyage.is-folding .memorial-book-voyage-fold-crease {
  display: none;
}

.memorial-book-voyage-fold-crease {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: 1px;
  height: 118vmax;
  background:
    linear-gradient(180deg, transparent, rgba(92, 65, 38, 0.18) 18%, rgba(255, 255, 255, 0.48) 50%, rgba(92, 65, 38, 0.14) 82%, transparent);
  opacity: 0;
  transform-origin: 50% 50%;
}

.memorial-book-voyage-fold-crease.is-horizontal {
  transform: translate(-50%, -50%) rotate(90deg);
}

.memorial-book-voyage-fold-crease.is-vertical {
  transform: translate(-50%, -50%);
}

.memorial-book-voyage-fold-crease.is-diagonal-left {
  transform: translate(-50%, -50%) rotate(-43deg);
}

.memorial-book-voyage-fold-crease.is-diagonal-right {
  transform: translate(-50%, -50%) rotate(43deg);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-fold-crease {
  animation: memorial-book-voyage-crease-flash 1000ms ease forwards;
}

.memorial-book-voyage-letter-stage {
  z-index: 3;
  display: block;
  padding: clamp(18px, 5vw, 72px);
  pointer-events: none;
  transition: opacity 520ms ease, transform 760ms ease;
}

.memorial-book-voyage.is-hall .memorial-book-voyage-letter-stage {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-26px) scale(0.92);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-letter-stage,
.memorial-book-voyage.is-voyage .memorial-book-voyage-letter-stage {
  pointer-events: none;
}

.memorial-book-voyage-letter {
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  width: min(760px, 82vw);
  min-height: clamp(198px, 30vh, 318px);
  padding: clamp(10px, 2.2vw, 26px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: inherit;
  cursor: default;
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: transform 520ms ease, opacity 620ms ease;
  backdrop-filter: none;
}

.memorial-book-voyage-letter:hover,
.memorial-book-voyage-letter:focus-within {
  transform: translate(-50%, -52%);
}

.memorial-book-voyage.is-voyage .memorial-book-voyage-letter {
  opacity: 0;
  transform: translate(-50%, 34%) scale(0.12) rotate(18deg);
  transition-duration: 760ms;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-letter {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  animation: none;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-letter-copy > :not(.memorial-book-voyage-start-fields) {
  animation: none;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-memory-card {
  animation: none;
}

.memorial-book-voyage-paper-grain {
  display: none;
}

.memorial-book-voyage-letter-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.25vw, 16px);
  width: min(680px, 100%);
  text-align: center;
}

.memorial-book-voyage-mark {
  display: grid;
  place-items: center;
  width: clamp(26px, 3vw, 38px);
  height: clamp(26px, 3vw, 38px);
  border-radius: 999px;
  color: #8a5d28;
  background: rgba(255, 246, 218, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(135, 91, 38, 0.1),
    0 8px 20px rgba(111, 76, 35, 0.08);
}

.memorial-book-voyage-letter-copy strong {
  max-width: min(650px, 100%);
  color: rgba(47, 34, 25, 0.76);
  font-size: clamp(1.55rem, 3.1vw, 3.08rem);
  font-weight: 440;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.52),
    0 14px 34px rgba(73, 49, 27, 0.08);
}

.memorial-book-voyage-letter-copy small,
.memorial-book-voyage-letter-copy em {
  max-width: min(560px, 96%);
  color: rgba(61, 43, 30, 0.52);
  font-size: clamp(0.84rem, 1vw, 0.98rem);
  font-style: normal;
  line-height: 1.45;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.44);
}

.memorial-book-voyage-letter-copy em {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 249, 232, 0.42);
}

.memorial-book-voyage-start-fields {
  display: block;
  width: min(520px, 96%);
  margin-top: 8px;
}

.memorial-book-voyage-memory-card {
  display: grid;
  grid-template-columns: minmax(164px, 0.82fr) minmax(220px, 1.18fr);
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 24px;
  background: rgba(255, 252, 242, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 16px 42px rgba(75, 48, 25, 0.08);
  backdrop-filter: blur(20px) saturate(132%);
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.memorial-book-voyage-start-fields.has-photo.has-name .memorial-book-voyage-memory-card {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 253, 246, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    0 18px 50px rgba(75, 48, 25, 0.11),
    0 0 44px rgba(255, 238, 194, 0.2);
}

.memorial-book-voyage-start-fields:focus-within .memorial-book-voyage-memory-card,
.memorial-book-voyage-memory-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 253, 246, 0.46);
}

.memorial-book-voyage-photo-drop,
.memorial-book-voyage-name-field {
  display: grid;
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.memorial-book-voyage-photo-drop {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  min-height: 76px;
  padding: 9px 14px 9px 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.38);
  color: rgba(53, 38, 27, 0.64);
  font-size: 0.88rem;
  font-weight: 680;
  cursor: pointer;
}

.memorial-book-voyage-photo-drop input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.memorial-book-voyage-photo-preview {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 16px;
  color: rgba(117, 80, 35, 0.66);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 234, 178, 0.5), transparent 48%),
    rgba(255, 249, 234, 0.42);
  box-shadow: inset 0 0 0 1px rgba(111, 76, 35, 0.1);
}

.memorial-book-voyage-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02) brightness(1.04);
}

.memorial-book-voyage-name-field {
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 76px;
  padding: 12px 17px;
}

.memorial-book-voyage-name-field > span {
  color: rgba(56, 40, 28, 0.48);
  font-size: 0.76rem;
  font-weight: 680;
}

.memorial-book-voyage-name-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: rgba(45, 32, 23, 0.78);
  background: transparent;
  font: inherit;
  font-size: clamp(1.08rem, 1.55vw, 1.32rem);
  line-height: 1.1;
}

.memorial-book-voyage-name-field input::placeholder {
  color: rgba(61, 42, 25, 0.34);
}

.memorial-book-voyage-start-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 19px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  color: rgba(51, 36, 25, 0.74);
  background:
    linear-gradient(180deg, rgba(255, 252, 243, 0.68), rgba(238, 220, 187, 0.54));
  box-shadow:
    0 12px 28px rgba(80, 52, 25, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.46);
  backdrop-filter: blur(18px) saturate(126%);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.memorial-book-voyage-start-button:hover,
.memorial-book-voyage-start-button:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 16px 34px rgba(80, 52, 25, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.memorial-book-voyage-start-button:disabled {
  color: rgba(51, 36, 25, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 252, 243, 0.46), rgba(238, 220, 187, 0.36));
  box-shadow:
    0 8px 22px rgba(80, 52, 25, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  cursor: default;
}

.memorial-book-voyage-start-button:disabled:hover,
.memorial-book-voyage-start-button:disabled:focus-visible {
  transform: none;
}

.memorial-book-voyage-test-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  color: rgba(58, 41, 29, 0.48);
  background: transparent;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
}

.memorial-book-voyage-test-button:hover,
.memorial-book-voyage-test-button:focus-visible {
  color: rgba(58, 41, 29, 0.72);
  background: rgba(255, 252, 242, 0.34);
}

.memorial-book-voyage-fold {
  display: none;
}

.memorial-book-voyage-fold.is-fold-2 {
  background: linear-gradient(45deg, transparent 49.7%, rgba(255, 255, 255, 0.34) 50%, transparent 50.5%);
}

.memorial-book-voyage-canal {
  z-index: 4;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px);
  overflow: hidden;
  background: #0d0a07;
  transition: opacity 520ms ease, transform 720ms ease;
}

.memorial-book-voyage.is-voyage .memorial-book-voyage-canal {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.memorial-book-voyage-film {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #0d0a07;
}

.memorial-book-voyage-film-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d0a07;
  filter: saturate(1.03) contrast(1.02);
}

.memorial-book-voyage-film-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 34%, rgba(21, 14, 9, 0.2) 72%, rgba(8, 6, 4, 0.52)),
    linear-gradient(180deg, rgba(8, 6, 4, 0.26), transparent 24%, transparent 68%, rgba(8, 6, 4, 0.46));
  pointer-events: none;
}

.memorial-book-voyage-sound {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(255, 252, 242, 0.28);
  border-radius: 17px;
  color: rgba(255, 250, 240, 0.88);
  background: rgba(20, 14, 9, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(118%);
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.memorial-book-voyage-sound:hover,
.memorial-book-voyage-sound:focus-visible {
  border-color: rgba(255, 252, 242, 0.42);
  background: rgba(32, 23, 15, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 18px 42px rgba(0, 0, 0, 0.24);
  outline: 0;
  transform: translateY(-1px);
}

.memorial-book-voyage-sound.needs-gesture {
  border-color: rgba(245, 210, 142, 0.54);
  color: rgba(255, 247, 225, 0.96);
  background: rgba(60, 39, 19, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(245, 210, 142, 0.1),
    0 18px 44px rgba(120, 78, 34, 0.26);
}

.memorial-book-voyage-sound span {
  line-height: 1;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.memorial-book-voyage-film-caption {
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(76px, 11vh, 128px);
  display: grid;
  max-width: min(440px, calc(100vw - 44px));
  gap: 7px;
  padding: 14px 16px 15px;
  border: 1px solid rgba(255, 252, 242, 0.2);
  border-radius: 18px;
  color: rgba(255, 251, 242, 0.88);
  background: rgba(20, 14, 9, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 22px 60px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(116%);
}

.memorial-book-voyage-film-caption strong,
.memorial-book-voyage-film-caption small {
  display: block;
  line-height: 1.35;
  letter-spacing: 0;
}

.memorial-book-voyage-film-caption strong {
  font-size: clamp(0.92rem, 1.3vw, 1.12rem);
  font-weight: 650;
}

.memorial-book-voyage-film-caption small {
  color: rgba(255, 248, 234, 0.66);
  font-size: clamp(0.74rem, 1vw, 0.88rem);
  font-weight: 500;
}

.memorial-book-voyage-water {
  position: absolute;
  bottom: 18%;
  left: 12%;
  width: 76%;
  height: 28%;
  border-radius: 999px 999px 34% 34%;
  background:
    radial-gradient(ellipse at 42% 18%, rgba(255, 250, 221, 0.72), transparent 20%),
    repeating-linear-gradient(165deg, rgba(255, 255, 255, 0.36) 0 2px, transparent 2px 15px),
    linear-gradient(160deg, rgba(68, 134, 135, 0.76), rgba(55, 117, 111, 0.52));
  box-shadow:
    inset 0 1px 22px rgba(255, 255, 255, 0.42),
    0 28px 64px rgba(72, 50, 28, 0.18);
  transform: scaleX(0.34) translateY(12px);
  transform-origin: 50% 50%;
  animation: memorial-book-voyage-water-open 900ms cubic-bezier(0.24, 0.7, 0.18, 1) 120ms forwards;
}

.memorial-book-voyage-book-town {
  position: absolute;
  inset: 11% 6% 28%;
}

.memorial-book-voyage-village-book {
  position: absolute;
  bottom: 0;
  width: clamp(64px, 8vw, 118px);
  height: clamp(138px, 18vw, 248px);
  border-radius: 5px 10px 8px 5px;
  background:
    linear-gradient(90deg, rgba(59, 38, 24, 0.2) 0 6px, transparent 6px),
    linear-gradient(180deg, #b9854b, #6f4328);
  box-shadow: 0 24px 44px rgba(65, 42, 23, 0.22);
}

.memorial-book-voyage-village-book::before {
  content: "";
  position: absolute;
  inset: 18% 18% auto;
  height: 18%;
  border-radius: 4px;
  background: rgba(255, 229, 159, 0.88);
  box-shadow: 0 42px 0 rgba(255, 229, 159, 0.58);
}

.memorial-book-voyage-village-book.is-1 { left: 4%; height: clamp(142px, 16vw, 230px); }
.memorial-book-voyage-village-book.is-2 { left: 18%; height: clamp(188px, 22vw, 292px); background: linear-gradient(180deg, #806343, #463323); }
.memorial-book-voyage-village-book.is-3 { left: 34%; height: clamp(132px, 15vw, 220px); background: linear-gradient(180deg, #b66e42, #704127); }
.memorial-book-voyage-village-book.is-4 { right: 34%; height: clamp(202px, 24vw, 312px); background: linear-gradient(180deg, #9d7a4c, #59402a); }
.memorial-book-voyage-village-book.is-5 { right: 19%; height: clamp(154px, 17vw, 238px); background: linear-gradient(180deg, #b99154, #614327); }
.memorial-book-voyage-village-book.is-6 { right: 4%; height: clamp(192px, 23vw, 302px); background: linear-gradient(180deg, #70513b, #35271f); }
.memorial-book-voyage-village-book.is-7 { left: 50%; height: clamp(110px, 12vw, 172px); background: linear-gradient(180deg, #d09a55, #7d4f2b); transform: translateX(-50%); }

.memorial-book-voyage-boat {
  position: absolute;
  left: 15%;
  bottom: 28%;
  width: clamp(88px, 12vw, 152px);
  height: clamp(42px, 6vw, 74px);
  filter: drop-shadow(0 18px 22px rgba(56, 43, 31, 0.26));
  animation: memorial-book-voyage-sail 3150ms cubic-bezier(0.28, 0.68, 0.18, 1) both;
}

.memorial-book-voyage-boat::before,
.memorial-book-voyage-boat::after,
.memorial-book-voyage-boat-sail {
  content: "";
  position: absolute;
  bottom: 0;
  background: linear-gradient(145deg, #fff9ec, #ead7b5);
}

.memorial-book-voyage-boat::before {
  left: 0;
  width: 56%;
  height: 100%;
  clip-path: polygon(0 48%, 100% 0, 86% 100%);
}

.memorial-book-voyage-boat::after {
  right: 0;
  width: 56%;
  height: 100%;
  clip-path: polygon(0 0, 100% 48%, 14% 100%);
}

.memorial-book-voyage-boat-sail {
  left: 42%;
  bottom: 45%;
  width: 28%;
  height: 72%;
  clip-path: polygon(0 100%, 100% 100%, 10% 0);
  opacity: 0.92;
}

.memorial-book-voyage-boat-name {
  position: absolute;
  right: 17%;
  bottom: 16%;
  z-index: 3;
  max-width: 48%;
  overflow: hidden;
  color: rgba(82, 55, 33, 0.58);
  font-size: clamp(0.48rem, 0.8vw, 0.74rem);
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: rotate(5deg);
}

.memorial-book-voyage-voyage-message {
  position: absolute;
  bottom: clamp(110px, 18vh, 180px);
  left: 50%;
  width: min(520px, calc(100vw - 48px));
  margin: 0;
  color: rgba(56, 39, 25, 0.78);
  font-size: clamp(1rem, 1.8vw, 1.34rem);
  text-align: center;
  transform: translateX(-50%);
}

.memorial-book-voyage-skip {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px 0 16px;
  border: 1px solid rgba(255, 252, 242, 0.28);
  border-radius: 17px;
  color: rgba(255, 250, 240, 0.82);
  background: rgba(20, 14, 9, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px) saturate(118%);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  animation: memorial-book-voyage-skip-in 420ms ease 760ms forwards;
}

.memorial-book-voyage.is-folding .memorial-book-voyage-skip {
  color: rgba(55, 39, 26, 0.72);
  background: rgba(255, 252, 242, 0.54);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 14px 34px rgba(75, 48, 25, 0.08);
}

.memorial-book-voyage-skip:hover,
.memorial-book-voyage-skip:focus-visible {
  color: rgba(255, 253, 247, 0.96);
  background: rgba(20, 14, 9, 0.5);
  transform: translateY(6px);
}

.memorial-book-voyage.is-folding .memorial-book-voyage-skip:hover,
.memorial-book-voyage.is-folding .memorial-book-voyage-skip:focus-visible {
  color: rgba(55, 39, 26, 0.86);
  background: rgba(255, 253, 246, 0.68);
}

.memorial-book-voyage-hall {
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 760ms ease, transform 860ms ease;
}

.memorial-book-voyage.is-hall .memorial-book-voyage-hall {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.memorial-book-voyage-atrium {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 58% 28%, rgba(255, 248, 241, 0.36), transparent 36%),
    linear-gradient(180deg, #d9c6b7 0%, #e2cbbb 55%, #ead0bf 100%);
}

.memorial-book-voyage-hall-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 720ms ease;
}

.memorial-book-voyage-hall-3d.is-loading {
  pointer-events: none;
}

.memorial-book-voyage-hall-3d.is-ready {
  opacity: 1;
}

.memorial-book-voyage-hall-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.memorial-book-voyage.is-hall .memorial-book-voyage-skylight,
.memorial-book-voyage.is-hall .memorial-book-voyage-stair,
.memorial-book-voyage.is-hall .memorial-book-voyage-arch,
.memorial-book-voyage.is-hall .memorial-book-voyage-floor-light,
.memorial-book-voyage.is-hall .memorial-book-voyage-spark {
  display: none;
}

.memorial-book-voyage-hall-3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.memorial-book-voyage-hall-3d-canvas:active {
  cursor: grabbing;
}

.memorial-book-voyage-skylight {
  position: absolute;
  top: -17%;
  left: 50%;
  width: min(78vw, 1180px);
  height: 38%;
  border: 1px solid rgba(104, 82, 58, 0.2);
  border-radius: 0 0 54% 54%;
  background:
    repeating-linear-gradient(90deg, rgba(92, 75, 58, 0.18) 0 2px, transparent 2px 54px),
    repeating-linear-gradient(0deg, rgba(92, 75, 58, 0.12) 0 2px, transparent 2px 38px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(216, 233, 232, 0.36));
  box-shadow: 0 32px 110px rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
}

.memorial-book-voyage-stair,
.memorial-book-voyage-arch {
  position: absolute;
  pointer-events: none;
}

.memorial-book-voyage-stair {
  bottom: 0;
  width: 34%;
  height: 31%;
  background:
    repeating-linear-gradient(180deg, rgba(104, 78, 47, 0.16) 0 2px, rgba(255, 255, 255, 0.24) 2px 18px),
    linear-gradient(180deg, rgba(235, 207, 165, 0.62), rgba(180, 132, 76, 0.22));
  opacity: 0.66;
}

.memorial-book-voyage-stair.is-left {
  left: -5%;
  transform: skewX(-18deg);
}

.memorial-book-voyage-stair.is-right {
  right: -5%;
  transform: skewX(18deg);
}

.memorial-book-voyage-arch {
  top: 18%;
  width: 18%;
  height: 46%;
  border: 1px solid rgba(104, 76, 42, 0.14);
  border-radius: 45% 45% 10px 10px;
  background: linear-gradient(180deg, rgba(255, 252, 243, 0.48), rgba(216, 177, 123, 0.11));
}

.memorial-book-voyage-arch.is-left {
  left: 6%;
}

.memorial-book-voyage-arch.is-right {
  right: 6%;
}

.memorial-book-voyage-floor-light {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: min(64vw, 860px);
  height: 28%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 240, 197, 0.74), transparent 66%);
  transform: translateX(-50%);
}

.memorial-book-voyage-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(179, 112, 40, 0.46);
  box-shadow: 0 0 18px rgba(255, 212, 128, 0.88);
  animation: memorial-book-voyage-sparkle 3400ms ease-in-out infinite;
}

.memorial-book-voyage-spark.is-1 { left: 16%; top: 24%; animation-delay: 120ms; }
.memorial-book-voyage-spark.is-2 { left: 28%; top: 18%; animation-delay: 260ms; }
.memorial-book-voyage-spark.is-3 { left: 46%; top: 30%; animation-delay: 420ms; }
.memorial-book-voyage-spark.is-4 { left: 62%; top: 18%; animation-delay: 100ms; }
.memorial-book-voyage-spark.is-5 { left: 82%; top: 28%; animation-delay: 560ms; }
.memorial-book-voyage-spark.is-6 { left: 14%; top: 64%; animation-delay: 720ms; }
.memorial-book-voyage-spark.is-7 { left: 33%; top: 74%; animation-delay: 320ms; }
.memorial-book-voyage-spark.is-8 { left: 70%; top: 70%; animation-delay: 780ms; }
.memorial-book-voyage-spark.is-9 { left: 88%; top: 58%; animation-delay: 920ms; }
.memorial-book-voyage-spark.is-10 { left: 52%; top: 12%; animation-delay: 460ms; }
.memorial-book-voyage-spark.is-11 { left: 20%; top: 48%; animation-delay: 620ms; }
.memorial-book-voyage-spark.is-12 { left: 76%; top: 44%; animation-delay: 140ms; }
.memorial-book-voyage-spark.is-13 { left: 42%; top: 58%; animation-delay: 840ms; }
.memorial-book-voyage-spark.is-14 { left: 58%; top: 82%; animation-delay: 380ms; }

.memorial-book-voyage-floating-books {
  position: absolute;
  inset: 8% 4% 16%;
  z-index: 3;
  perspective: 1200px;
}

.memorial-book-voyage-floating-book {
  position: absolute;
  top: var(--book-voyage-y);
  left: var(--book-voyage-x);
  width: clamp(56px, 6.4vw, 104px);
  aspect-ratio: 0.68;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 18px 24px rgba(83, 52, 25, 0.18));
  opacity: 0;
  transform:
    translate(-50%, -50%)
    rotate(var(--book-voyage-rotate))
    scale(var(--book-voyage-scale))
    translateY(22px)
    rotateY(-10deg);
  transform-style: preserve-3d;
  animation: memorial-book-voyage-book-in 760ms ease forwards;
  animation-delay: var(--book-voyage-delay);
  transition: transform 280ms ease, filter 280ms ease, z-index 0s linear;
}

.memorial-book-voyage-floating-book:hover,
.memorial-book-voyage-floating-book:focus-visible,
.memorial-book-voyage-floating-book.is-active {
  z-index: 9;
  filter: drop-shadow(0 26px 34px rgba(83, 52, 25, 0.28));
  transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(calc(var(--book-voyage-scale) * 1.24))
    translateY(-10px)
    rotateY(0deg);
}

.memorial-book-voyage-book-cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 5px 10px 10px 5px;
  background:
    radial-gradient(ellipse at 62% 18%, rgba(255, 237, 187, 0.42), transparent 34%),
    linear-gradient(90deg, rgba(73, 44, 20, 0.24) 0 8px, transparent 8px 13px),
    linear-gradient(145deg, #d8a461 0%, #ad7136 50%, #7d4c27 100%);
  box-shadow:
    inset 4px 0 0 rgba(65, 39, 20, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.memorial-book-voyage-floating-book.is-cat .memorial-book-voyage-book-cover {
  background:
    radial-gradient(ellipse at 58% 18%, rgba(255, 243, 206, 0.48), transparent 34%),
    linear-gradient(90deg, rgba(68, 50, 31, 0.24) 0 8px, transparent 8px 13px),
    linear-gradient(145deg, #dccd9d 0%, #b38d5b 54%, #74563a 100%);
}

.memorial-book-voyage-book-cover::before,
.memorial-book-voyage-book-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.memorial-book-voyage-book-cover::before {
  inset: 10% 15% auto 20%;
  height: 16%;
  border-top: 1px solid rgba(255, 244, 210, 0.48);
  border-bottom: 1px solid rgba(72, 44, 20, 0.18);
  opacity: 0.7;
}

.memorial-book-voyage-book-cover::after {
  left: 50%;
  top: 56%;
  width: 46%;
  height: 20%;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 244, 209, 0.42), rgba(139, 88, 41, 0.18));
  box-shadow: inset 0 0 0 1px rgba(255, 244, 210, 0.28);
  transform: translateX(-50%);
}

.memorial-book-voyage-book-cover img {
  position: absolute;
  left: 50%;
  top: 34%;
  z-index: 2;
  width: 58%;
  height: 40%;
  object-fit: cover;
  border-radius: 999px;
  box-shadow:
    0 8px 16px rgba(54, 31, 13, 0.2),
    0 0 0 2px rgba(255, 241, 205, 0.5);
  filter: saturate(0.88) contrast(0.92) brightness(1.12);
  opacity: 0.62;
  transform: translate(-50%, -50%);
  transition: width 260ms ease, height 260ms ease, opacity 260ms ease, filter 260ms ease;
}

.memorial-book-voyage-floating-book:hover .memorial-book-voyage-book-cover img,
.memorial-book-voyage-floating-book:focus-visible .memorial-book-voyage-book-cover img,
.memorial-book-voyage-floating-book.is-active .memorial-book-voyage-book-cover img {
  width: 78%;
  height: 56%;
  opacity: 0.92;
  filter: saturate(0.94) contrast(0.96) brightness(1.08);
}

.memorial-book-voyage-book-pages {
  position: absolute;
  right: -7%;
  top: 7%;
  width: 12%;
  height: 89%;
  border-radius: 0 8px 8px 0;
  background: repeating-linear-gradient(180deg, #fff6dd 0 2px, #d9bb88 2px 3px);
  transform: translateZ(-4px) rotateY(-16deg);
}

.memorial-book-voyage-book-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 149, 0.44), transparent 64%);
  opacity: 0;
  transition: opacity 260ms ease;
}

.memorial-book-voyage-floating-book:hover .memorial-book-voyage-book-glow,
.memorial-book-voyage-floating-book:focus-visible .memorial-book-voyage-book-glow,
.memorial-book-voyage-floating-book.is-active .memorial-book-voyage-book-glow {
  opacity: 1;
}

.memorial-book-voyage-hero-wrap {
  position: absolute;
  left: 50%;
  bottom: clamp(116px, 16vh, 164px);
  z-index: 7;
  width: min(560px, 58vw);
  transform: translateX(-50%);
}

.memorial-book-voyage-open-book {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: clamp(300px, 44vh, 520px);
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(0 36px 42px rgba(78, 50, 25, 0.22));
}

.memorial-book-voyage-book-spread {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(100%, 540px);
  aspect-ratio: 1.52;
  border-radius: 12px 12px 42% 42%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.74), transparent 44%),
    linear-gradient(90deg, #f0d7a7 0 48%, #b98247 48.4% 51.6%, #f5dfb2 52% 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.44),
    0 24px 70px rgba(115, 76, 38, 0.22);
  transform: translateX(-50%) perspective(680px) rotateX(54deg);
  transform-origin: bottom;
}

.memorial-book-voyage-book-spread i {
  position: absolute;
  bottom: 11%;
  left: 50%;
  width: 42%;
  height: 1px;
  background: rgba(112, 78, 42, 0.14);
  transform-origin: left center;
}

.memorial-book-voyage-book-spread .is-page-1 { transform: translateX(-98%) rotate(-9deg); }
.memorial-book-voyage-book-spread .is-page-2 { transform: translateX(-98%) rotate(-5deg); bottom: 20%; }
.memorial-book-voyage-book-spread .is-page-3 { transform: translateX(-98%) rotate(-2deg); bottom: 29%; }
.memorial-book-voyage-book-spread .is-page-4 { transform: translateX(-98%) rotate(1deg); bottom: 38%; }
.memorial-book-voyage-book-spread .is-page-5 { transform: translateX(6%) rotate(9deg); }
.memorial-book-voyage-book-spread .is-page-6 { transform: translateX(6%) rotate(5deg); bottom: 20%; }
.memorial-book-voyage-book-spread .is-page-7 { transform: translateX(6%) rotate(2deg); bottom: 29%; }
.memorial-book-voyage-book-spread .is-page-8 { transform: translateX(6%) rotate(-1deg); bottom: 38%; }

.memorial-book-voyage-pet-portrait {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(178px, 20vw, 292px);
  aspect-ratio: 0.9;
  overflow: hidden;
  border-radius: 38% 38% 30% 30%;
  background: rgba(255, 246, 222, 0.42);
  box-shadow:
    0 20px 48px rgba(80, 50, 22, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.36);
}

.memorial-book-voyage-pet-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(242, 213, 157, 0.36));
}

.memorial-book-voyage-pet-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(1.02) brightness(1.04) contrast(0.98);
}

.memorial-book-voyage-hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(360px, 86%);
  margin-top: -14px;
  padding: 12px 16px;
  border-radius: 18px;
  color: rgba(58, 39, 24, 0.82);
  text-align: center;
  background: rgba(255, 248, 233, 0.7);
  box-shadow: inset 0 0 0 1px rgba(125, 83, 38, 0.12);
  backdrop-filter: blur(14px) saturate(124%);
}

.memorial-book-voyage-hero-copy strong {
  font-size: clamp(1.02rem, 1.6vw, 1.34rem);
  font-weight: 760;
  line-height: 1.1;
}

.memorial-book-voyage-hero-copy small {
  display: none;
}

.memorial-book-voyage-room-peek {
  position: absolute;
  right: clamp(18px, 4vw, 70px);
  bottom: clamp(154px, 18vh, 206px);
  z-index: 9;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: min(318px, calc(100vw - 36px));
  padding: 10px 12px;
  border: 1px solid rgba(111, 75, 36, 0.14);
  border-radius: 20px;
  color: #442c1a;
  text-decoration: none;
  background: rgba(255, 249, 234, 0.72);
  box-shadow: 0 20px 48px rgba(78, 50, 26, 0.16);
  backdrop-filter: blur(18px) saturate(128%);
  transform: translateY(0);
  transition: transform 260ms ease, background 260ms ease;
}

.memorial-book-voyage-room-peek:hover,
.memorial-book-voyage-room-peek:focus-visible {
  background: rgba(255, 251, 240, 0.9);
  transform: translateY(-4px);
}

.memorial-book-voyage-room-peek-image {
  display: block;
  width: 64px;
  aspect-ratio: 0.72;
  overflow: hidden;
  border-radius: 10px;
  background: #d3a76a;
}

.memorial-book-voyage-room-peek-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.memorial-book-voyage-room-peek-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.memorial-book-voyage-room-peek-copy strong,
.memorial-book-voyage-room-peek-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-book-voyage-room-peek-copy strong {
  font-weight: 760;
}

.memorial-book-voyage-room-peek-copy small {
  color: rgba(68, 44, 26, 0.58);
  font-size: 0.78rem;
}

body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command,
body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
  top: auto !important;
  right: auto !important;
  bottom: calc(22px + env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(760px, calc(100vw - 34px)) !important;
  min-height: 58px !important;
  padding: 7px 8px !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg, rgba(32, 32, 31, 0.88), rgba(16, 16, 15, 0.9)),
    rgba(18, 18, 17, 0.86) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  backdrop-filter: blur(24px) saturate(128%) !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command {
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  grid-template-rows: 40px !important;
  gap: 0 8px !important;
  align-items: center !important;
  border-radius: 18px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command > textarea {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 4px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.92rem !important;
  line-height: 36px !important;
  white-space: nowrap !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command > textarea::placeholder {
  color: rgba(255, 255, 255, 0.46) !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-add-menu-wrap,
body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command > .studio-minis-character-picker-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 40px !important;
  height: 40px !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command > .admin-studio-flow-command-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context,
body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command.has-tray-items .memorial-ai-command-form.is-hall-command.has-context {
  grid-template-rows: auto 40px auto !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-context-row {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > textarea,
body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-add-menu-wrap,
body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > .studio-minis-character-picker-wrap,
body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > .admin-studio-flow-command-actions {
  grid-row: 2 !important;
}

body:has(.memorial-book-voyage) .memorial-ai-command-form.is-hall-command.has-context > .memorial-command-status {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  color: rgba(255, 255, 255, 0.58) !important;
}

body:has(.memorial-book-voyage.is-letter) .memorial-ai-command-dock.is-hall-command,
body:has(.memorial-book-voyage.is-folding) .memorial-ai-command-dock.is-hall-command,
body:has(.memorial-book-voyage.is-voyage) .memorial-ai-command-dock.is-hall-command {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(18px) scale(0.96) !important;
}

@keyframes memorial-book-voyage-paper-lift {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  34% {
    filter: saturate(0.96) brightness(1.16);
    transform: perspective(1100px) rotateX(0deg) translateY(0) scale(1.005);
  }
  100% {
    opacity: 0.02;
    filter: saturate(0.76) brightness(1.22) blur(0.8px);
    transform: perspective(1100px) rotateX(11deg) translateY(13vh) scale(0.56);
  }
}

@keyframes memorial-book-voyage-wall-becomes-paper {
  0% {
    opacity: 1;
    filter: saturate(1.08) brightness(1.08);
  }
  45% {
    opacity: 0.62;
    filter: saturate(0.94) brightness(1.18);
  }
  100% {
    opacity: 0.18;
    filter: saturate(0.72) brightness(1.22);
  }
}

@keyframes memorial-book-voyage-paper-sheet-contract {
  0% {
    filter: drop-shadow(0 0 0 rgba(65, 45, 28, 0));
    transform: perspective(1500px) translate3d(0, 0, 0) scale(1);
  }
  54% {
    filter: drop-shadow(0 22px 38px rgba(65, 45, 28, 0.12));
    transform: perspective(1500px) translate3d(0, 0, 0) scale(0.98);
  }
  100% {
    filter: drop-shadow(0 32px 42px rgba(65, 45, 28, 0.18));
    transform: perspective(1500px) translate3d(0, 16vh, 0) scale(0.54);
  }
}

@keyframes memorial-book-voyage-paper-grain-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.72;
  }
}

@keyframes memorial-book-voyage-crease-flash {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
  }
}

@keyframes memorial-book-voyage-paper-boat-forms {
  0%, 56% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(22vh) scale(0.52) rotate(-5deg);
  }
  78% {
    opacity: 0.76;
    transform: translate(-50%, -50%) translateY(20vh) scale(0.76) rotate(-2deg);
  }
  100% {
    opacity: 0.98;
    transform: translate(-50%, -50%) translateY(18vh) scale(0.98) rotate(0deg);
  }
}

@keyframes memorial-book-voyage-letter-absorbs {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
  62% {
    opacity: 0.54;
    filter: blur(1px);
    transform: translate(-50%, -49%) scale(0.9);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translate(-50%, -48%) scale(0.72);
  }
}

@keyframes memorial-book-voyage-ink-fade {
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-6px);
  }
}

@keyframes memorial-book-voyage-memory-stamp {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  70% {
    opacity: 0.72;
    filter: blur(0.4px) saturate(0.78);
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    filter: blur(2px) saturate(0.62);
    transform: scale(0.46) translateY(20px);
  }
}

@keyframes memorial-book-voyage-water-open {
  0% {
    opacity: 0.24;
    transform: scaleX(0.34) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) translateY(0);
  }
}

@keyframes memorial-book-voyage-sail {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(-8deg) scale(0.46);
  }
  14% {
    opacity: 1;
    transform: translate3d(9vw, 3px, 0) rotate(-4deg) scale(0.82);
  }
  46% {
    opacity: 1;
    transform: translate3d(28vw, -3vh, 0) rotate(2deg) scale(0.98);
  }
  100% {
    opacity: 0.88;
    transform: translate3d(60vw, -10vh, 0) rotate(5deg) scale(1.04);
  }
}

@keyframes memorial-book-voyage-skip-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes memorial-book-voyage-fold-left {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateY(68deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateY(88deg) translate3d(0, 0, 72px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-right {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateY(-68deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateY(-88deg) translate3d(0, 0, 72px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-top {
  0% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.94;
    transform: rotateX(-64deg) translate3d(0, 0, 40px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateX(-86deg) translate3d(0, 0, 70px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-bottom {
  0% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateX(66deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.12;
    transform: rotateX(88deg) translate3d(0, 0, 74px) scale(0.36);
  }
}

@keyframes memorial-book-voyage-fold-center {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(0.98);
  }
  18% {
    opacity: 0.96;
  }
  56% {
    opacity: 0.98;
    transform: translate3d(0, 0, 76px) rotateX(30deg) rotateZ(0deg) scale(0.62);
  }
  100% {
    opacity: 0.04;
    transform: translate3d(0, 0, 108px) rotateX(46deg) rotateZ(2deg) scale(0.3);
  }
}

@keyframes memorial-book-voyage-book-in {
  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--book-voyage-rotate))
      scale(var(--book-voyage-scale))
      translateY(0)
      rotateY(-10deg);
  }
}

@keyframes memorial-book-voyage-sparkle {
  0%, 100% {
    opacity: 0.36;
    transform: scale(0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1.24);
  }
}

@keyframes memorial-book-voyage-comfort-flow {
  to {
    transform: translateX(-50%);
  }
}

@keyframes memorial-book-voyage-comfort-note-breathe {
  0%, 100% {
    opacity: 0.86;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .memorial-book-voyage {
    padding-inline: 14px;
  }

  .memorial-book-voyage-letter {
    top: 43%;
    width: min(680px, 84vw);
    min-height: clamp(176px, 27vh, 284px);
    padding: 22px;
  }

  .memorial-book-voyage-start-fields {
    width: min(430px, 100%);
  }

  .memorial-book-voyage-comfort-stream {
    bottom: max(124px, calc(112px + env(safe-area-inset-bottom)));
    width: min(760px, calc(100vw - 20px));
  }

  .memorial-book-voyage-comfort-note {
    flex-basis: clamp(230px, 58vw, 330px);
    min-height: 90px;
  }

  .memorial-book-voyage-hero-wrap {
    bottom: clamp(136px, 18vh, 184px);
    width: min(560px, 88vw);
  }

  .memorial-book-voyage-floating-books {
    inset: 10% 0 24%;
  }

  .memorial-book-voyage-floating-book {
    width: clamp(46px, 12vw, 82px);
  }

  .memorial-book-voyage-room-peek {
    right: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom));
    transform: translateX(50%);
  }

  .memorial-book-voyage-room-peek:hover,
  .memorial-book-voyage-room-peek:focus-visible {
    transform: translateX(50%) translateY(-4px);
  }

  .memorial-book-voyage-hero-copy small {
    display: none;
  }
}

@media (max-width: 560px) {
  .memorial-book-voyage-letter-copy {
    width: min(92%, 360px);
  }

  .memorial-book-voyage-letter-copy strong {
    font-size: clamp(1.5rem, 6.4vw, 2.28rem);
    line-height: 1.1;
  }

  .memorial-book-voyage-letter-copy small {
    display: none;
  }

  .memorial-book-voyage-comfort-note {
    flex-basis: 252px;
    min-height: 82px;
    padding: 11px 12px 12px;
  }

  .memorial-book-voyage-comfort-note p {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
  }

  .memorial-book-voyage-comfort-reader {
    padding: 16px;
  }

  .memorial-book-voyage-comfort-reader-card {
    max-height: min(74vh, 610px);
    padding: 22px;
  }

  .memorial-book-voyage-comfort-reader-card p {
    font-size: 1rem;
    line-height: 1.56;
  }

  .memorial-book-voyage-photo-drop,
  .memorial-book-voyage-name-field {
    min-height: 54px;
  }

  .memorial-book-voyage-memory-card {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .memorial-book-voyage-photo-drop {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  }

  .memorial-book-voyage-voyage-message {
    bottom: 104px;
    font-size: 0.94rem;
  }

  .memorial-book-voyage-sound {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    min-width: 42px;
    padding-inline: 11px;
    border-radius: 15px;
  }

  .memorial-book-voyage-sound:not(.needs-gesture) span {
    display: none;
  }

  .memorial-book-voyage-hero-wrap {
    bottom: 152px;
  }

  .memorial-book-voyage-open-book {
    min-height: 318px;
  }

  .memorial-book-voyage-pet-portrait {
    width: min(54vw, 210px);
  }

  .memorial-book-voyage-room-peek {
    display: none;
  }

  body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command,
  body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
  body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-status),
  body:has(.memorial-book-voyage) .memorial-ai-command-dock.is-hall-command:has(.memorial-command-add-menu) {
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    width: min(520px, calc(100vw - 20px)) !important;
    border-radius: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-book-voyage *,
  .memorial-book-voyage *::before,
  .memorial-book-voyage *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .memorial-book-voyage-comfort-track,
  .memorial-book-voyage-comfort-note {
    animation: none !important;
  }
}

/* Watson room v2: editorial private sanctuary above the photo album. */
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) {
  --memorial-private-ink: #1a170f;
  --memorial-private-green: #253a21;
  --memorial-private-sage: #92a879;
  --memorial-private-cream: #e6d7c8;
  --memorial-private-gold: #b98339;
  --memorial-private-copper: #e2761c;
  --memorial-private-smoke: #11140d;
  background: var(--memorial-private-cream);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode):has(.memorial-photo-private-sanctuary.is-watson-portal) {
  background: #000000 !important;
  scrollbar-color: rgba(255, 247, 236, 0.26) #000000;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode):has(.memorial-photo-private-sanctuary.is-watson-portal)::-webkit-scrollbar {
  width: 12px;
  background: #000000;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode):has(.memorial-photo-private-sanctuary.is-watson-portal)::-webkit-scrollbar-track {
  background: #000000;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode):has(.memorial-photo-private-sanctuary.is-watson-portal)::-webkit-scrollbar-thumb {
  border: 3px solid #000000;
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.3);
}

.memorial-photo-room-palette-switcher {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 18px));
  left: 50%;
  z-index: 84;
  display: inline-flex;
  gap: 6px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  border: 1px solid rgba(246, 234, 219, 0.28);
  border-radius: 999px;
  background: rgba(24, 29, 18, 0.28);
  box-shadow:
    0 18px 54px rgba(23, 19, 14, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  padding: 5px;
  scrollbar-width: none;
  transform: translateX(-50%);
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(20px) saturate(1.15);
}

.memorial-photo-room-palette-switcher::-webkit-scrollbar {
  display: none;
}

.memorial-photo-room-palette-switcher button {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(246, 234, 219, 0.72);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  padding: 0 10px;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.memorial-photo-room-palette-switcher button:hover,
.memorial-photo-room-palette-switcher button:focus-visible,
.memorial-photo-room-palette-switcher button.is-active {
  border-color: rgba(246, 234, 219, 0.26);
  background: rgba(246, 234, 219, 0.18);
  color: #fff4dd;
}

.memorial-photo-room-palette-switcher button:focus-visible {
  outline: 2px solid rgba(226, 118, 28, 0.44);
  outline-offset: 2px;
}

.memorial-photo-room-palette-switcher button.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.memorial-photo-room-palette-switcher i {
  --swatch: #fff;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

@media (max-width: 720px) {
  .memorial-photo-room-palette-switcher {
    top: max(62px, calc(env(safe-area-inset-top) + 12px));
  }

  .memorial-photo-room-palette-switcher button {
    min-height: 31px;
    padding-inline: 8px;
  }

  .memorial-photo-room-palette-switcher span {
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) {
  background: #d6bb80;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library {
  background:
    radial-gradient(circle at 13% 6%, rgba(24, 42, 58, 0.2), transparent 32%),
    radial-gradient(circle at 83% 10%, rgba(214, 187, 128, 0.32), transparent 34%),
    radial-gradient(circle at 76% 74%, rgba(66, 91, 111, 0.24), transparent 40%),
    linear-gradient(135deg, #f2e1ba 0%, #d6bb80 42%, #a08348 68%, #425b6f 100%);
  color: #111922;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-top {
  border-color: rgba(24, 42, 58, 0.18);
  background:
    linear-gradient(180deg, rgba(242, 225, 186, 0.84), rgba(160, 131, 72, 0.22)),
    rgba(122, 126, 116, 0.12);
  box-shadow: 0 16px 44px rgba(24, 42, 58, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) :where(
  .memorial-photo-viewer-icon.is-back,
  .memorial-photo-library-search,
  .memorial-photo-public-actions a,
  .memorial-photo-public-actions button
) {
  border-color: rgba(24, 42, 58, 0.22);
  background: rgba(242, 225, 186, 0.34);
  color: rgba(24, 42, 58, 0.86);
  box-shadow: 0 10px 28px rgba(24, 42, 58, 0.11);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) :where(
  .memorial-photo-public-actions a:hover,
  .memorial-photo-public-actions button:hover,
  .memorial-photo-public-actions a:focus-visible,
  .memorial-photo-public-actions button:focus-visible,
  .memorial-photo-viewer-icon.is-back:hover,
  .memorial-photo-viewer-icon.is-back:focus-visible
) {
  border-color: rgba(214, 187, 128, 0.42);
  background: rgba(242, 225, 186, 0.64);
  color: #182a3a;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary {
  --sanctuary-bg: #d6bb80;
  --sanctuary-paper: #f2e1ba;
  --sanctuary-ink: #111922;
  --sanctuary-muted: rgba(17, 25, 34, 0.58);
  --sanctuary-line: rgba(24, 42, 58, 0.18);
  --sanctuary-sage: #7a7e74;
  --sanctuary-olive: #425b6f;
  --sanctuary-lime: #d6bb80;
  --sanctuary-orange: #a08348;
  --sanctuary-bronze: #182a3a;
  background:
    radial-gradient(ellipse at 16% 10%, rgba(242, 225, 186, 0.72), transparent 34%),
    radial-gradient(ellipse at 88% 16%, rgba(24, 42, 58, 0.19), transparent 31%),
    radial-gradient(ellipse at 70% 80%, rgba(66, 91, 111, 0.36), transparent 44%),
    linear-gradient(140deg, #efe2c2 0%, #d6bb80 34%, #7a7e74 70%, #425b6f 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(242, 225, 186, 0.72), rgba(214, 187, 128, 0.24) 46%, transparent 72%),
    radial-gradient(ellipse at 58% 40%, rgba(24, 42, 58, 0.14), transparent 56%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::after {
  background:
    linear-gradient(90deg, rgba(24, 42, 58, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(214, 187, 128, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 248, 226, 0.26), transparent 30%, rgba(24, 42, 58, 0.14) 100%),
    radial-gradient(ellipse at 50% 118%, rgba(17, 25, 34, 0.2), transparent 55%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-portrait::before {
  border-color: rgba(242, 225, 186, 0.32);
  background:
    linear-gradient(135deg, rgba(242, 225, 186, 0.34), rgba(242, 225, 186, 0.08) 48%, rgba(24, 42, 58, 0.14)),
    radial-gradient(circle at 70% 26%, rgba(214, 187, 128, 0.16), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    0 36px 96px rgba(24, 42, 58, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image {
  background:
    radial-gradient(circle at 18% 16%, rgba(214, 187, 128, 0.16), transparent 32%),
    linear-gradient(135deg, #425b6f, #182a3a 58%, #0e1721);
  box-shadow:
    0 62px 128px rgba(24, 42, 58, 0.26),
    0 24px 54px rgba(160, 131, 72, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 244, 219, 0.22);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::before {
  border-color: rgba(242, 225, 186, 0.34);
  background:
    linear-gradient(135deg, rgba(242, 225, 186, 0.16), rgba(255, 255, 255, 0.01) 48%, rgba(214, 187, 128, 0.08)),
    radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(14, 23, 33, 0.16) 100%),
    radial-gradient(circle at 78% 20%, rgba(214, 187, 128, 0.2), transparent 22%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::after {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(14, 23, 33, 0.12) 60%, rgba(14, 23, 33, 0.32) 100%),
    linear-gradient(90deg, rgba(24, 42, 58, 0.4), transparent 35%, rgba(24, 42, 58, 0.34)),
    linear-gradient(180deg, rgba(24, 42, 58, 0.02), transparent 34%, rgba(24, 42, 58, 0.42)),
    radial-gradient(ellipse at 34% 84%, rgba(255, 250, 230, 0.13), transparent 38%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name h1 {
  color: #f7e6ba;
  text-shadow: 0 18px 46px rgba(14, 23, 33, 0.32);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name p {
  color: rgba(247, 230, 186, 0.8);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dt {
  color: rgba(24, 42, 58, 0.66);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea {
  border-color: rgba(24, 42, 58, 0.24);
  color: rgba(17, 25, 34, 0.84);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea::placeholder {
  color: rgba(24, 42, 58, 0.44);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea:focus-visible {
  border-color: rgba(160, 131, 72, 0.58);
  box-shadow: 0 8px 0 -7px rgba(160, 131, 72, 0.36);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div {
  border-color: rgba(242, 225, 186, 0.3);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 248, 226, 0.72), transparent 44%),
    linear-gradient(145deg, rgba(242, 225, 186, 0.48), rgba(160, 131, 72, 0.2) 44%, rgba(66, 91, 111, 0.2));
  box-shadow:
    0 18px 48px rgba(24, 42, 58, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2),
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(3) {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 248, 226, 0.66), transparent 42%),
    linear-gradient(145deg, rgba(242, 225, 186, 0.44), rgba(214, 187, 128, 0.17) 48%, rgba(66, 91, 111, 0.16));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(1) .memorial-photo-private-sanctuary-date-value {
  color: rgba(24, 42, 58, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2) .memorial-photo-private-sanctuary-date-value {
  color: rgba(160, 131, 72, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat {
  border-color: rgba(242, 225, 186, 0.38);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 248, 226, 0.78) 0 10%, transparent 11%),
    radial-gradient(circle at 28% 12%, rgba(255, 248, 226, 0.54) 0 6%, transparent 7%),
    radial-gradient(circle at 39% 16%, rgba(255, 248, 226, 0.46) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(242, 225, 186, 0.46), rgba(160, 131, 72, 0.2) 54%, rgba(66, 91, 111, 0.24));
  box-shadow:
    0 22px 58px rgba(24, 42, 58, 0.18),
    0 8px 24px rgba(160, 131, 72, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat svg {
  color: rgba(160, 131, 72, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(214, 187, 128, 0.5);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 248, 226, 0.96), rgba(214, 187, 128, 0.42) 42%, transparent 64%),
    linear-gradient(135deg, rgba(160, 131, 72, 0.22), rgba(66, 91, 111, 0.42));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat.is-kept {
  border-color: rgba(24, 42, 58, 0.34);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 253, 241, 0.88), rgba(214, 187, 128, 0.32) 42%, transparent 64%),
    linear-gradient(135deg, rgba(66, 91, 111, 0.2), rgba(160, 131, 72, 0.15));
  color: rgba(24, 42, 58, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-content {
  background:
    radial-gradient(circle at 84px 96px, rgba(214, 187, 128, 0.2), transparent 190px),
    linear-gradient(180deg, #182a3a 0 240px, #efe2c2 240px 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
  color: rgba(242, 225, 186, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary) {
  border-color: rgba(242, 225, 186, 0.24);
  background:
    linear-gradient(180deg, rgba(242, 225, 186, 0.16), rgba(242, 225, 186, 0.04)),
    rgba(24, 42, 58, 0.8);
  color: rgba(242, 225, 186, 0.9);
  box-shadow: 0 18px 46px rgba(24, 42, 58, 0.22);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary):is(:hover, :focus-visible) {
  border-color: rgba(214, 187, 128, 0.42);
  background:
    linear-gradient(180deg, rgba(242, 225, 186, 0.24), rgba(214, 187, 128, 0.08)),
    rgba(24, 42, 58, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
  border-color: rgba(24, 42, 58, 0.18);
  background:
    linear-gradient(180deg, rgba(242, 225, 186, 0.97), rgba(214, 187, 128, 0.94));
  box-shadow: 0 24px 68px rgba(24, 42, 58, 0.2);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:is(:hover, :focus-visible) {
  background: rgba(66, 91, 111, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  border-top-color: rgba(24, 42, 58, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  color: rgba(17, 25, 34, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  background: #182a3a;
  box-shadow: 0 22px 62px rgba(24, 42, 58, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-rail a {
  color: rgba(24, 42, 58, 0.62);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) .memorial-photo-library-rail a:is(:hover, :focus-visible) {
  color: rgba(160, 131, 72, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) {
  background: #a6a08f;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library {
  background:
    radial-gradient(circle at 14% 8%, rgba(18, 64, 55, 0.22), transparent 31%),
    radial-gradient(circle at 82% 8%, rgba(242, 193, 102, 0.28), transparent 34%),
    radial-gradient(circle at 74% 74%, rgba(166, 116, 55, 0.24), transparent 42%),
    linear-gradient(135deg, #edf0dc 0%, #cdd0bd 34%, #a6a08f 58%, #124037 100%);
  color: #10231d;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-top {
  border-color: rgba(18, 64, 55, 0.16);
  background:
    linear-gradient(180deg, rgba(237, 240, 220, 0.84), rgba(166, 160, 143, 0.26)),
    rgba(242, 193, 102, 0.1);
  box-shadow: 0 16px 44px rgba(18, 64, 55, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) :where(
  .memorial-photo-viewer-icon.is-back,
  .memorial-photo-library-search,
  .memorial-photo-public-actions a,
  .memorial-photo-public-actions button
) {
  border-color: rgba(18, 64, 55, 0.2);
  background: rgba(237, 240, 220, 0.36);
  color: rgba(18, 64, 55, 0.88);
  box-shadow: 0 10px 28px rgba(18, 64, 55, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) :where(
  .memorial-photo-public-actions a:hover,
  .memorial-photo-public-actions button:hover,
  .memorial-photo-public-actions a:focus-visible,
  .memorial-photo-public-actions button:focus-visible,
  .memorial-photo-viewer-icon.is-back:hover,
  .memorial-photo-viewer-icon.is-back:focus-visible
) {
  border-color: rgba(242, 193, 102, 0.46);
  background: rgba(237, 240, 220, 0.66);
  color: #124037;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary {
  --sanctuary-bg: #a6a08f;
  --sanctuary-paper: #edf0dc;
  --sanctuary-ink: #10231d;
  --sanctuary-muted: rgba(16, 35, 29, 0.58);
  --sanctuary-line: rgba(18, 64, 55, 0.18);
  --sanctuary-sage: #a6a08f;
  --sanctuary-olive: #124037;
  --sanctuary-lime: #f2c166;
  --sanctuary-orange: #a67437;
  --sanctuary-bronze: #592202;
  background:
    radial-gradient(ellipse at 14% 10%, rgba(237, 240, 220, 0.78), transparent 36%),
    radial-gradient(ellipse at 82% 18%, rgba(242, 193, 102, 0.26), transparent 30%),
    radial-gradient(ellipse at 70% 80%, rgba(18, 64, 55, 0.34), transparent 46%),
    linear-gradient(140deg, #edf0dc 0%, #c9c8b5 36%, #a6a08f 62%, #124037 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(237, 240, 220, 0.76), rgba(242, 193, 102, 0.18) 44%, transparent 72%),
    radial-gradient(ellipse at 58% 40%, rgba(18, 64, 55, 0.16), transparent 56%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::after {
  background:
    linear-gradient(90deg, rgba(18, 64, 55, 0.07) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(242, 193, 102, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 249, 224, 0.25), transparent 32%, rgba(18, 64, 55, 0.16) 100%),
    radial-gradient(ellipse at 50% 118%, rgba(16, 35, 29, 0.22), transparent 55%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-portrait::before {
  border-color: rgba(237, 240, 220, 0.34);
  background:
    linear-gradient(135deg, rgba(237, 240, 220, 0.36), rgba(237, 240, 220, 0.1) 48%, rgba(18, 64, 55, 0.15)),
    radial-gradient(circle at 70% 26%, rgba(242, 193, 102, 0.18), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    0 36px 96px rgba(18, 64, 55, 0.19);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image {
  background:
    radial-gradient(circle at 18% 16%, rgba(242, 193, 102, 0.16), transparent 32%),
    linear-gradient(135deg, #124037, #1c574b 48%, #592202);
  box-shadow:
    0 62px 128px rgba(18, 64, 55, 0.27),
    0 24px 54px rgba(166, 116, 55, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 244, 219, 0.22);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::before {
  border-color: rgba(237, 240, 220, 0.34);
  background:
    linear-gradient(135deg, rgba(237, 240, 220, 0.16), rgba(255, 255, 255, 0.01) 48%, rgba(242, 193, 102, 0.1)),
    radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(16, 35, 29, 0.17) 100%),
    radial-gradient(circle at 78% 20%, rgba(242, 193, 102, 0.2), transparent 22%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::after {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(16, 35, 29, 0.12) 60%, rgba(16, 35, 29, 0.34) 100%),
    linear-gradient(90deg, rgba(18, 64, 55, 0.4), transparent 35%, rgba(89, 34, 2, 0.3)),
    linear-gradient(180deg, rgba(18, 64, 55, 0.02), transparent 34%, rgba(18, 64, 55, 0.42)),
    radial-gradient(ellipse at 34% 84%, rgba(255, 250, 230, 0.12), transparent 38%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name h1 {
  color: #fff1bd;
  text-shadow: 0 18px 46px rgba(16, 35, 29, 0.34);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name p {
  color: rgba(255, 241, 189, 0.82);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dt {
  color: rgba(18, 64, 55, 0.68);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea {
  border-color: rgba(18, 64, 55, 0.24);
  color: rgba(16, 35, 29, 0.86);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea::placeholder {
  color: rgba(18, 64, 55, 0.44);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea:focus-visible {
  border-color: rgba(242, 193, 102, 0.62);
  box-shadow: 0 8px 0 -7px rgba(242, 193, 102, 0.4);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div {
  border-color: rgba(237, 240, 220, 0.34);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 249, 224, 0.74), transparent 44%),
    linear-gradient(145deg, rgba(237, 240, 220, 0.5), rgba(166, 160, 143, 0.22) 44%, rgba(18, 64, 55, 0.22));
  box-shadow:
    0 18px 48px rgba(18, 64, 55, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2),
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(3) {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 249, 224, 0.66), transparent 42%),
    linear-gradient(145deg, rgba(237, 240, 220, 0.44), rgba(242, 193, 102, 0.17) 48%, rgba(18, 64, 55, 0.17));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(1) .memorial-photo-private-sanctuary-date-value {
  color: rgba(18, 64, 55, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2) .memorial-photo-private-sanctuary-date-value {
  color: rgba(89, 34, 2, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat {
  border-color: rgba(237, 240, 220, 0.4);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 249, 224, 0.82) 0 10%, transparent 11%),
    radial-gradient(circle at 28% 12%, rgba(255, 249, 224, 0.56) 0 6%, transparent 7%),
    radial-gradient(circle at 39% 16%, rgba(255, 249, 224, 0.46) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(237, 240, 220, 0.48), rgba(242, 193, 102, 0.2) 54%, rgba(18, 64, 55, 0.24));
  box-shadow:
    0 22px 58px rgba(18, 64, 55, 0.18),
    0 8px 24px rgba(166, 116, 55, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat svg {
  color: rgba(166, 116, 55, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(242, 193, 102, 0.52);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 249, 224, 0.96), rgba(242, 193, 102, 0.42) 42%, transparent 64%),
    linear-gradient(135deg, rgba(166, 116, 55, 0.2), rgba(18, 64, 55, 0.42));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat.is-kept {
  border-color: rgba(18, 64, 55, 0.34);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 253, 241, 0.88), rgba(242, 193, 102, 0.34) 42%, transparent 64%),
    linear-gradient(135deg, rgba(18, 64, 55, 0.22), rgba(166, 116, 55, 0.16));
  color: rgba(18, 64, 55, 0.95);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-content {
  background:
    radial-gradient(circle at 84px 96px, rgba(242, 193, 102, 0.22), transparent 190px),
    linear-gradient(180deg, #124037 0 240px, #edf0dc 240px 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
  color: rgba(237, 240, 220, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary) {
  border-color: rgba(237, 240, 220, 0.24);
  background:
    linear-gradient(180deg, rgba(237, 240, 220, 0.16), rgba(237, 240, 220, 0.04)),
    rgba(18, 64, 55, 0.8);
  color: rgba(237, 240, 220, 0.9);
  box-shadow: 0 18px 46px rgba(18, 64, 55, 0.22);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary):is(:hover, :focus-visible) {
  border-color: rgba(242, 193, 102, 0.44);
  background:
    linear-gradient(180deg, rgba(237, 240, 220, 0.24), rgba(242, 193, 102, 0.08)),
    rgba(18, 64, 55, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
  border-color: rgba(18, 64, 55, 0.18);
  background:
    linear-gradient(180deg, rgba(237, 240, 220, 0.97), rgba(166, 160, 143, 0.94));
  box-shadow: 0 24px 68px rgba(18, 64, 55, 0.2);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:is(:hover, :focus-visible) {
  background: rgba(18, 64, 55, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  border-top-color: rgba(18, 64, 55, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  color: rgba(16, 35, 29, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  background: #124037;
  box-shadow: 0 22px 62px rgba(18, 64, 55, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-rail a {
  color: rgba(18, 64, 55, 0.62);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) .memorial-photo-library-rail a:is(:hover, :focus-visible) {
  color: rgba(166, 116, 55, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) {
  background: #e7e5d7;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library {
  background:
    radial-gradient(circle at 14% 6%, rgba(101, 170, 194, 0.28), transparent 32%),
    radial-gradient(circle at 78% 10%, rgba(173, 186, 94, 0.26), transparent 34%),
    radial-gradient(circle at 76% 76%, rgba(134, 154, 105, 0.24), transparent 42%),
    linear-gradient(135deg, #f7f5ea 0%, #e7e5d7 34%, #d4d9b4 58%, #65aac2 100%);
  color: #20342f;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-top {
  border-color: rgba(101, 170, 194, 0.18);
  background:
    linear-gradient(180deg, rgba(247, 245, 234, 0.86), rgba(231, 229, 215, 0.28)),
    rgba(173, 186, 94, 0.1);
  box-shadow: 0 16px 44px rgba(91, 124, 99, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) :where(
  .memorial-photo-viewer-icon.is-back,
  .memorial-photo-library-search,
  .memorial-photo-public-actions a,
  .memorial-photo-public-actions button
) {
  border-color: rgba(83, 105, 78, 0.2);
  background: rgba(247, 245, 234, 0.38);
  color: rgba(32, 52, 47, 0.88);
  box-shadow: 0 10px 28px rgba(91, 124, 99, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) :where(
  .memorial-photo-public-actions a:hover,
  .memorial-photo-public-actions button:hover,
  .memorial-photo-public-actions a:focus-visible,
  .memorial-photo-public-actions button:focus-visible,
  .memorial-photo-viewer-icon.is-back:hover,
  .memorial-photo-viewer-icon.is-back:focus-visible
) {
  border-color: rgba(101, 170, 194, 0.44);
  background: rgba(247, 245, 234, 0.7);
  color: #35513a;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary {
  --sanctuary-bg: #e7e5d7;
  --sanctuary-paper: #f7f5ea;
  --sanctuary-ink: #20342f;
  --sanctuary-muted: rgba(32, 52, 47, 0.58);
  --sanctuary-line: rgba(101, 170, 194, 0.2);
  --sanctuary-sage: #869a69;
  --sanctuary-olive: #536d4d;
  --sanctuary-lime: #adba5e;
  --sanctuary-orange: #65aac2;
  --sanctuary-bronze: #384b38;
  background:
    radial-gradient(ellipse at 14% 9%, rgba(247, 245, 234, 0.88), transparent 36%),
    radial-gradient(ellipse at 78% 18%, rgba(101, 170, 194, 0.26), transparent 31%),
    radial-gradient(ellipse at 70% 82%, rgba(134, 154, 105, 0.34), transparent 45%),
    linear-gradient(140deg, #f8f6eb 0%, #e7e5d7 36%, #cfd8ad 62%, #65aac2 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(247, 245, 234, 0.78), rgba(173, 186, 94, 0.16) 44%, transparent 72%),
    radial-gradient(ellipse at 58% 40%, rgba(101, 170, 194, 0.16), transparent 56%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::after {
  background:
    linear-gradient(90deg, rgba(101, 170, 194, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(173, 186, 94, 0.09) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 253, 244, 0.28), transparent 32%, rgba(83, 109, 77, 0.14) 100%),
    radial-gradient(ellipse at 50% 118%, rgba(32, 52, 47, 0.16), transparent 55%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-portrait::before {
  border-color: rgba(247, 245, 234, 0.38);
  background:
    linear-gradient(135deg, rgba(247, 245, 234, 0.4), rgba(247, 245, 234, 0.12) 48%, rgba(101, 170, 194, 0.16)),
    radial-gradient(circle at 70% 26%, rgba(173, 186, 94, 0.18), transparent 32%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 36px 96px rgba(83, 109, 77, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image {
  background:
    radial-gradient(circle at 18% 16%, rgba(173, 186, 94, 0.16), transparent 32%),
    linear-gradient(135deg, #35513a, #65aac2 50%, #869a69);
  box-shadow:
    0 62px 128px rgba(83, 109, 77, 0.22),
    0 24px 54px rgba(101, 170, 194, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.54),
    inset 0 0 0 1px rgba(255, 253, 244, 0.24);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::before {
  border-color: rgba(247, 245, 234, 0.38);
  background:
    linear-gradient(135deg, rgba(247, 245, 234, 0.18), rgba(255, 255, 255, 0.01) 48%, rgba(173, 186, 94, 0.1)),
    radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(32, 52, 47, 0.14) 100%),
    radial-gradient(circle at 78% 20%, rgba(101, 170, 194, 0.2), transparent 22%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::after {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(32, 52, 47, 0.1) 60%, rgba(32, 52, 47, 0.28) 100%),
    linear-gradient(90deg, rgba(53, 81, 58, 0.35), transparent 35%, rgba(101, 170, 194, 0.24)),
    linear-gradient(180deg, rgba(53, 81, 58, 0.02), transparent 34%, rgba(53, 81, 58, 0.34)),
    radial-gradient(ellipse at 34% 84%, rgba(255, 253, 244, 0.16), transparent 38%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name h1 {
  color: #fdf9e9;
  text-shadow: 0 18px 46px rgba(32, 52, 47, 0.28);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-name p {
  color: rgba(253, 249, 233, 0.84);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line span,
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dt {
  color: rgba(32, 52, 47, 0.68);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea {
  border-color: rgba(83, 105, 78, 0.24);
  color: rgba(32, 52, 47, 0.86);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea::placeholder {
  color: rgba(83, 105, 78, 0.44);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line textarea:focus-visible {
  border-color: rgba(101, 170, 194, 0.58);
  box-shadow: 0 8px 0 -7px rgba(101, 170, 194, 0.38);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div {
  border-color: rgba(247, 245, 234, 0.38);
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 253, 244, 0.78), transparent 44%),
    linear-gradient(145deg, rgba(247, 245, 234, 0.56), rgba(173, 186, 94, 0.2) 44%, rgba(101, 170, 194, 0.18));
  box-shadow:
    0 18px 48px rgba(83, 109, 77, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2),
.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(3) {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 253, 244, 0.7), transparent 42%),
    linear-gradient(145deg, rgba(247, 245, 234, 0.48), rgba(173, 186, 94, 0.19) 48%, rgba(101, 170, 194, 0.16));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(1) .memorial-photo-private-sanctuary-date-value {
  color: rgba(32, 52, 47, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2) .memorial-photo-private-sanctuary-date-value {
  color: rgba(65, 97, 75, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat {
  border-color: rgba(247, 245, 234, 0.42);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 253, 244, 0.86) 0 10%, transparent 11%),
    radial-gradient(circle at 28% 12%, rgba(255, 253, 244, 0.58) 0 6%, transparent 7%),
    radial-gradient(circle at 39% 16%, rgba(255, 253, 244, 0.48) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(247, 245, 234, 0.52), rgba(173, 186, 94, 0.2) 54%, rgba(101, 170, 194, 0.24));
  box-shadow:
    0 22px 58px rgba(83, 109, 77, 0.16),
    0 8px 24px rgba(101, 170, 194, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat svg {
  color: rgba(83, 105, 78, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(101, 170, 194, 0.5);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 253, 244, 0.98), rgba(173, 186, 94, 0.42) 42%, transparent 64%),
    linear-gradient(135deg, rgba(134, 154, 105, 0.2), rgba(101, 170, 194, 0.38));
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat.is-kept {
  border-color: rgba(83, 105, 78, 0.34);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 253, 244, 0.9), rgba(173, 186, 94, 0.34) 42%, transparent 64%),
    linear-gradient(135deg, rgba(101, 170, 194, 0.2), rgba(134, 154, 105, 0.16));
  color: rgba(32, 52, 47, 0.95);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-content {
  background:
    radial-gradient(circle at 84px 96px, rgba(173, 186, 94, 0.24), transparent 190px),
    linear-gradient(180deg, #65aac2 0 240px, #f7f5ea 240px 100%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
  color: rgba(247, 245, 234, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary) {
  border-color: rgba(247, 245, 234, 0.28);
  background:
    linear-gradient(180deg, rgba(247, 245, 234, 0.18), rgba(247, 245, 234, 0.05)),
    rgba(83, 109, 77, 0.78);
  color: rgba(247, 245, 234, 0.92);
  box-shadow: 0 18px 46px rgba(83, 109, 77, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary):is(:hover, :focus-visible) {
  border-color: rgba(173, 186, 94, 0.46);
  background:
    linear-gradient(180deg, rgba(247, 245, 234, 0.26), rgba(173, 186, 94, 0.08)),
    rgba(83, 109, 77, 0.9);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
  border-color: rgba(83, 105, 78, 0.18);
  background:
    linear-gradient(180deg, rgba(247, 245, 234, 0.98), rgba(231, 229, 215, 0.94));
  box-shadow: 0 24px 68px rgba(83, 109, 77, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:is(:hover, :focus-visible) {
  background: rgba(101, 170, 194, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  border-top-color: rgba(83, 105, 78, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  color: rgba(32, 52, 47, 0.92);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  background: #35513a;
  box-shadow: 0 22px 62px rgba(83, 109, 77, 0.14);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-rail a {
  color: rgba(83, 105, 78, 0.64);
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) .memorial-photo-library-rail a:is(:hover, :focus-visible) {
  color: rgba(101, 170, 194, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library {
  background:
    radial-gradient(circle at 12% 4%, rgba(83, 114, 55, 0.24), transparent 32%),
    radial-gradient(circle at 82% 9%, rgba(226, 118, 28, 0.18), transparent 34%),
    radial-gradient(circle at 74% 74%, rgba(146, 168, 121, 0.2), transparent 40%),
    linear-gradient(135deg, #f6eadb 0%, #e6d7c8 46%, #cdb9b0 100%);
  color: var(--memorial-private-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-top {
  border-color: rgba(83, 114, 55, 0.18);
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.82), rgba(205, 185, 176, 0.3)),
    rgba(146, 168, 121, 0.1);
  box-shadow: 0 16px 44px rgba(83, 114, 55, 0.12);
  backdrop-filter: blur(22px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-viewer-icon.is-back,
  .memorial-photo-library-search,
  .memorial-photo-public-actions a,
  .memorial-photo-public-actions button
) {
  border-color: rgba(83, 114, 55, 0.2);
  background: rgba(246, 234, 219, 0.34);
  color: rgba(37, 58, 33, 0.82);
  box-shadow: 0 10px 28px rgba(83, 114, 55, 0.1);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-public-actions a:hover,
  .memorial-photo-public-actions button:hover,
  .memorial-photo-public-actions a:focus-visible,
  .memorial-photo-public-actions button:focus-visible,
  .memorial-photo-viewer-icon.is-back:hover,
  .memorial-photo-viewer-icon.is-back:focus-visible
) {
  border-color: rgba(226, 118, 28, 0.32);
  background: rgba(246, 234, 219, 0.64);
  color: var(--memorial-private-copper);
}

.memorial-photo-private-sanctuary {
  --sanctuary-bg: #e4d2c7;
  --sanctuary-paper: #f6eadb;
  --sanctuary-ink: #1d1a12;
  --sanctuary-muted: rgba(29, 26, 18, 0.56);
  --sanctuary-line: rgba(83, 114, 55, 0.18);
  --sanctuary-sage: #92a879;
  --sanctuary-olive: #537237;
  --sanctuary-lime: #c7d7b0;
  --sanctuary-orange: #e2761c;
  --sanctuary-bronze: #8b6235;
  position: relative;
  display: grid;
  min-height: calc(100svh - 56px);
  grid-template-areas:
    "portrait"
    "side";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, auto) auto;
  gap: clamp(11px, 1.4vw, 18px);
  align-items: center;
  align-content: center;
  isolation: isolate;
  overflow: clip;
  padding: clamp(78px, 6.5vw, 110px) clamp(22px, 4.8vw, 78px) clamp(214px, 22vh, 292px);
  background:
    radial-gradient(ellipse at 16% 10%, rgba(246, 234, 219, 0.74), transparent 34%),
    radial-gradient(ellipse at 87% 17%, rgba(226, 118, 28, 0.22), transparent 31%),
    radial-gradient(ellipse at 72% 80%, rgba(83, 114, 55, 0.42), transparent 44%),
    linear-gradient(140deg, #e7d4c8 0%, #cdb9b0 31%, #92a879 68%, #537237 100%);
  color: var(--sanctuary-ink);
}

.memorial-photo-private-sanctuary::before {
  position: absolute;
  inset: clamp(64px, 7vw, 110px) clamp(8px, 5vw, 88px) auto auto;
  width: min(58vw, 680px);
  height: min(44vw, 500px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(246, 234, 219, 0.72), rgba(246, 234, 219, 0.22) 46%, transparent 72%),
    radial-gradient(ellipse at 58% 40%, rgba(226, 118, 28, 0.16), transparent 56%);
  content: "";
  filter: blur(2px);
  pointer-events: none;
  z-index: 0;
}

.memorial-photo-private-sanctuary::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(83, 114, 55, 0.09) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(226, 118, 28, 0.06) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 251, 239, 0.26), transparent 30%, rgba(83, 114, 55, 0.18) 100%),
    radial-gradient(ellipse at 50% 118%, rgba(29, 26, 18, 0.2), transparent 55%);
  background-size: 10.5vw 100%, 100% 15svh, auto, auto;
  content: "";
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

.memorial-photo-private-sanctuary-light {
  display: none;
}

.memorial-photo-private-sanctuary-portrait {
  position: relative;
  z-index: 2;
  grid-area: portrait;
  width: 100%;
  max-width: min(100%, 1160px);
  align-self: center;
  isolation: isolate;
  justify-self: center;
}

.memorial-photo-private-sanctuary-portrait::before {
  position: absolute;
  inset: clamp(18px, 2.6vw, 34px) clamp(12px, 2.2vw, 30px) clamp(18px, 2.4vw, 34px) clamp(12px, 2.2vw, 30px);
  border: 1px solid rgba(246, 234, 219, 0.42);
  border-radius: clamp(22px, 2.8vw, 36px);
  background:
    linear-gradient(135deg, rgba(246, 234, 219, 0.38), rgba(246, 234, 219, 0.08) 48%, rgba(83, 114, 55, 0.15)),
    radial-gradient(circle at 70% 26%, rgba(226, 118, 28, 0.14), transparent 32%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 36px 96px rgba(47, 65, 39, 0.18);
  content: "";
  pointer-events: none;
  z-index: -1;
}

.memorial-photo-private-sanctuary-image {
  position: relative;
  width: 100%;
  max-height: min(68svh, 690px);
  aspect-ratio: 2.08 / 1;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(246, 234, 219, 0.5);
  border-radius: clamp(20px, 2.5vw, 32px);
  background:
    radial-gradient(circle at 18% 16%, rgba(226, 118, 28, 0.18), transparent 32%),
    linear-gradient(135deg, #537237, #253a21 58%, #11140d);
  box-shadow:
    0 62px 128px rgba(37, 58, 33, 0.26),
    0 24px 54px rgba(226, 118, 28, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 0 0 1px rgba(255, 244, 219, 0.24);
}

.memorial-photo-private-sanctuary-image::before {
  position: absolute;
  inset: clamp(12px, 1.55vw, 22px);
  border: 1px solid rgba(255, 247, 225, 0.28);
  border-radius: clamp(16px, 2vw, 24px);
  background:
    linear-gradient(135deg, rgba(255, 250, 235, 0.16), rgba(255, 255, 255, 0.01) 48%, rgba(226, 118, 28, 0.08)),
    radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(17, 13, 9, 0.15) 100%),
    radial-gradient(circle at 78% 20%, rgba(255, 247, 224, 0.2), transparent 22%);
  content: "";
  opacity: 0.78;
  pointer-events: none;
  z-index: 1;
}

.memorial-photo-private-sanctuary-image::after {
  position: absolute;
  inset: 0;
  height: auto;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 35%, rgba(12, 15, 9, 0.12) 60%, rgba(12, 15, 9, 0.34) 100%),
    linear-gradient(90deg, rgba(16, 22, 13, 0.38), transparent 35%, rgba(16, 22, 13, 0.32)),
    linear-gradient(180deg, rgba(16, 22, 13, 0.02), transparent 34%, rgba(16, 22, 13, 0.42)),
    radial-gradient(ellipse at 34% 84%, rgba(255, 250, 230, 0.15), transparent 38%);
  content: "";
  pointer-events: none;
  z-index: 2;
}

.memorial-photo-private-sanctuary-image img {
  display: block;
}

.memorial-photo-private-sanctuary-image-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: blur(20px) saturate(0.9) contrast(0.96);
  opacity: 0.72;
  transform: scale(1.08);
}

.memorial-photo-private-sanctuary-image-primary {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: clamp(18px, 3vw, 42px) clamp(22px, 4vw, 66px);
  filter: saturate(1.02) contrast(1.01);
}

.memorial-photo-private-sanctuary-name {
  position: absolute;
  inset: auto auto clamp(38px, 4.7vw, 72px) clamp(30px, 4.8vw, 70px);
  z-index: 3;
  width: min(52%, 560px);
  max-width: calc(100vw - clamp(52px, 8vw, 120px));
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  box-shadow: none;
  pointer-events: none;
}

.memorial-photo-private-sanctuary-name span {
  display: inline-flex;
  color: rgba(250, 240, 218, 0.76);
  font-size: clamp(0.58rem, 0.76vw, 0.68rem);
  font-weight: 850;
  letter-spacing: 0.24em;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-name h1 {
  margin: 0.02em 0 0.03em;
  color: #fff3dc;
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: clamp(4.2rem, 9.2vw, 9.2rem);
  font-weight: 520;
  letter-spacing: -0.068em;
  line-height: 0.74;
  text-shadow:
    0 28px 60px rgba(7, 12, 5, 0.44),
    0 2px 0 rgba(226, 118, 28, 0.1);
}

.memorial-photo-private-sanctuary-name p {
  max-width: 370px;
  margin: 0;
  color: rgba(250, 240, 218, 0.8);
  font-size: clamp(0.68rem, 0.82vw, 0.82rem);
  font-weight: 550;
  line-height: 1.44;
  text-shadow: none;
}

.memorial-photo-private-sanctuary-side {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  z-index: 5;
  display: grid;
  grid-area: side;
  width: min(100%, 1160px);
  max-width: 1160px;
  grid-template-areas:
    "treat facts"
    "line line";
  grid-template-columns: minmax(168px, 0.38fr) minmax(320px, 0.62fr);
  align-self: auto;
  align-items: end;
  gap: clamp(10px, 1.3vw, 18px) clamp(18px, 2.4vw, 36px);
  justify-self: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 clamp(34px, 5vw, 78px);
  margin-top: clamp(-86px, -6vw, -44px);
  color: rgba(29, 26, 18, 0.82);
  text-align: left;
  backdrop-filter: none;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

.memorial-photo-private-sanctuary-side::before {
  display: none;
}

.memorial-photo-private-sanctuary-side-heading {
  display: none;
  gap: 0;
  max-width: 320px;
}

.memorial-photo-private-sanctuary-side-heading span {
  color: rgba(23, 32, 24, 0.52);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.28em;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-side-heading strong {
  display: block;
  max-width: 280px;
  color: rgba(17, 23, 19, 0.74);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 1.62vw, 1.66rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.memorial-photo-private-sanctuary-line {
  display: grid;
  grid-area: line;
  order: 3;
  width: min(100%, 560px);
  gap: 6px;
  margin-top: 0;
  justify-self: center;
  border-left: 0;
  padding: clamp(10px, 1vw, 14px) 0 0;
  text-align: center;
  pointer-events: auto;
}

.memorial-photo-private-sanctuary-line span {
  justify-content: center;
}

.memorial-photo-private-sanctuary-line span,
.memorial-photo-private-sanctuary-facts dt,
.memorial-photo-private-sanctuary-memory-list span {
  color: rgba(69, 89, 49, 0.68);
  font-size: 0.52rem;
  font-weight: 860;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-line textarea {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(83, 114, 55, 0.24);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: rgba(29, 26, 18, 0.82);
  padding: 5px 0 4px;
  font: inherit;
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: clamp(0.76rem, 0.84vw, 0.9rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.18;
  resize: none;
  text-align: center;
  text-shadow: none;
  box-shadow: none;
}

.memorial-photo-private-sanctuary-line textarea::placeholder {
  color: rgba(69, 89, 49, 0.46);
}

.memorial-photo-private-sanctuary-line textarea:focus-visible {
  border-color: rgba(226, 118, 28, 0.5);
  box-shadow: 0 8px 0 -7px rgba(226, 118, 28, 0.32);
}

.memorial-photo-private-sanctuary-line small {
  display: none;
}

.memorial-photo-private-sanctuary-facts {
  display: grid;
  grid-area: facts;
  order: 1;
  width: min(100%, 520px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 0.75vw, 10px);
  justify-self: end;
  border-block: 0;
  margin: 0;
  padding-block: 0;
  pointer-events: auto;
}

.memorial-photo-private-sanctuary-facts div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: clamp(58px, 5.2vw, 72px);
  align-items: center;
  border: 1px solid rgba(246, 234, 219, 0.3);
  border-radius: 999px 999px 999px 18px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 249, 235, 0.72), transparent 44%),
    linear-gradient(145deg, rgba(246, 234, 219, 0.48), rgba(205, 185, 176, 0.22) 44%, rgba(83, 114, 55, 0.2));
  gap: 4px;
  justify-items: center;
  padding: 9px 12px;
  text-align: center;
  backdrop-filter: blur(16px) saturate(1.08);
  box-shadow:
    0 18px 48px rgba(31, 45, 27, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.memorial-photo-private-sanctuary-facts div:nth-child(2n) {
  border-radius: 999px 999px 18px 999px;
}

.memorial-photo-private-sanctuary-facts div:nth-child(2),
.memorial-photo-private-sanctuary-facts div:nth-child(3) {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 249, 235, 0.66), transparent 42%),
    linear-gradient(145deg, rgba(246, 234, 219, 0.44), rgba(226, 118, 28, 0.15) 48%, rgba(83, 114, 55, 0.16));
}

.memorial-photo-private-sanctuary-facts div::before {
  display: none;
}

.memorial-photo-private-sanctuary-facts div:last-child {
  border-bottom: 0;
}

.memorial-photo-private-sanctuary-facts dt {
  flex: none;
  width: auto;
  align-self: start;
  padding-top: 2px;
  text-align: center;
}

.memorial-photo-private-sanctuary-facts dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  align-items: center;
  gap: 3px;
  justify-items: center;
  margin: 0;
  color: rgba(29, 26, 18, 0.64);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.62rem, 0.68vw, 0.7rem);
  font-weight: 620;
  letter-spacing: 0;
  line-height: 1.24;
  text-align: center;
  text-shadow: none;
}

.memorial-photo-private-sanctuary-date-value {
  color: rgba(29, 26, 18, 0.86);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.82rem, 0.94vw, 0.98rem);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 1;
}

.memorial-photo-private-sanctuary-facts div:nth-child(1) .memorial-photo-private-sanctuary-date-value {
  color: rgba(83, 114, 55, 0.94);
}

.memorial-photo-private-sanctuary-facts div:nth-child(2) .memorial-photo-private-sanctuary-date-value {
  color: rgba(171, 82, 22, 0.92);
}

.memorial-photo-private-sanctuary-facts small {
  grid-column: 1 / -1;
  max-width: 12ch;
  color: rgba(29, 26, 18, 0.42);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.48rem;
  font-weight: 720;
  letter-spacing: 0.055em;
  line-height: 1.18;
  text-transform: none;
}

.memorial-photo-private-sanctuary-date-input {
  width: min(100%, 124px);
  border: 0;
  border-bottom: 1px solid rgba(83, 114, 55, 0.22);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: rgba(29, 26, 18, 0.5);
  color-scheme: light;
  opacity: 0;
  padding: 0;
  font: inherit;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: 720;
  line-height: 1.2;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.memorial-photo-private-sanctuary-facts .is-date-fact:is(:hover, :focus-within) .memorial-photo-private-sanctuary-date-input {
  opacity: 1;
  padding: 1px 0 3px;
  pointer-events: auto;
  transform: translateY(0);
}

.memorial-photo-private-sanctuary-date-input:focus-visible {
  border-color: rgba(226, 118, 28, 0.5);
  color: rgba(29, 26, 18, 0.88);
}

.memorial-photo-private-sanctuary-date-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.42;
}

.memorial-photo-private-sanctuary-memory-list {
  display: none;
  gap: 8px;
  border-bottom: 0;
  margin-top: 1px;
  padding-bottom: 0;
  opacity: 0.58;
}

.memorial-photo-private-sanctuary-memory-list div {
  min-width: min(148px, 100%);
}

.memorial-photo-private-sanctuary-memory-list p {
  margin: 4px 0 0;
  color: rgba(23, 19, 14, 0.36);
  font-size: 0.62rem;
  line-height: 1.36;
}

.memorial-photo-private-sanctuary-treat {
  position: relative;
  display: grid;
  grid-area: treat;
  order: 2;
  width: clamp(146px, 14vw, 184px);
  min-width: 0;
  min-height: clamp(56px, 5vw, 68px);
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  justify-self: start;
  border: 1px solid rgba(246, 234, 219, 0.36);
  border-radius: 999px 999px 999px 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 247, 225, 0.76) 0 10%, transparent 11%),
    radial-gradient(circle at 28% 12%, rgba(255, 247, 225, 0.54) 0 6%, transparent 7%),
    radial-gradient(circle at 39% 16%, rgba(255, 247, 225, 0.46) 0 5%, transparent 6%),
    linear-gradient(135deg, rgba(246, 234, 219, 0.46), rgba(226, 118, 28, 0.18) 54%, rgba(83, 114, 55, 0.24));
  color: rgba(34, 30, 20, 0.88);
  cursor: pointer;
  padding: 8px 16px 8px 12px;
  pointer-events: auto;
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow:
    0 22px 58px rgba(31, 45, 27, 0.18),
    0 8px 24px rgba(226, 118, 28, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.memorial-photo-private-sanctuary-treat svg {
  grid-row: 1 / 3;
  justify-self: center;
  color: rgba(226, 118, 28, 0.9);
  filter: drop-shadow(0 8px 12px rgba(226, 118, 28, 0.16));
}

.memorial-photo-private-sanctuary-treat span {
  font-size: 0.62rem;
  font-weight: 860;
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-treat small {
  color: rgba(29, 26, 18, 0.48);
  font-size: 0.48rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(226, 118, 28, 0.46);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 247, 225, 0.96), rgba(255, 235, 205, 0.42) 42%, transparent 64%),
    linear-gradient(135deg, rgba(226, 118, 28, 0.22), rgba(146, 168, 121, 0.46));
  box-shadow:
    0 24px 62px rgba(83, 114, 55, 0.2),
    0 8px 22px rgba(226, 118, 28, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: rgba(37, 49, 30, 0.94);
  transform: translateY(-2px);
}

.memorial-photo-private-sanctuary-treat.is-kept {
  border-color: rgba(83, 114, 55, 0.34);
  background:
    radial-gradient(circle at 25% 24%, rgba(255, 253, 241, 0.88), rgba(255, 231, 204, 0.32) 42%, transparent 64%),
    linear-gradient(135deg, rgba(83, 114, 55, 0.2), rgba(226, 118, 28, 0.15));
  color: rgba(83, 114, 55, 0.94);
}

.memorial-photo-private-sanctuary-actions {
  display: none;
  grid-area: actions;
  order: 4;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.memorial-photo-private-sanctuary-actions a {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(23, 32, 24, 0.48);
  padding: 0;
  font-size: 0.52rem;
  font-weight: 860;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: none;
}

.memorial-photo-private-sanctuary-actions a:is(:hover, :focus-visible) {
  background: transparent;
  color: rgba(83, 108, 88, 0.92);
}

/* Flatten public-room palettes while keeping the pet image color-neutral. */
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) {
  --room-flat-bg: #cdb9b0;
  --room-flat-surface: #e6d7c8;
  --room-flat-panel: rgba(246, 234, 219, 0.58);
  --room-flat-panel-alt: rgba(229, 205, 184, 0.58);
  --room-flat-ink: #1d1a12;
  --room-flat-muted: rgba(29, 26, 18, 0.62);
  --room-flat-accent: #537237;
  --room-flat-accent-two: #e2761c;
  --room-flat-line: rgba(29, 26, 18, 0.14);
  --room-flat-wash: rgba(255, 255, 255, 0.14);
  --room-flat-shadow: rgba(31, 45, 27, 0.16);
  --room-fact-born-bg: #537237;
  --room-fact-born-ink: #fff7e8;
  --room-fact-passed-bg: #e2761c;
  --room-fact-passed-ink: #23160d;
  --room-fact-place-bg: #92a879;
  --room-fact-place-ink: #172112;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-two:not(.has-admin-edit-mode) {
  --room-flat-bg: #d6bb80;
  --room-flat-surface: #e2cf9e;
  --room-flat-panel: rgba(242, 225, 186, 0.62);
  --room-flat-panel-alt: rgba(214, 187, 128, 0.56);
  --room-flat-ink: #111922;
  --room-flat-muted: rgba(24, 42, 58, 0.66);
  --room-flat-accent: #182a3a;
  --room-flat-accent-two: #a08348;
  --room-flat-line: rgba(24, 42, 58, 0.14);
  --room-flat-wash: rgba(242, 225, 186, 0.16);
  --room-flat-shadow: rgba(24, 42, 58, 0.14);
  --room-fact-born-bg: #182a3a;
  --room-fact-born-ink: #f7e6ba;
  --room-fact-passed-bg: #a08348;
  --room-fact-passed-ink: #fff6df;
  --room-fact-place-bg: #425b6f;
  --room-fact-place-ink: #f8ead1;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-three:not(.has-admin-edit-mode) {
  --room-flat-bg: #a6a08f;
  --room-flat-surface: #d8d0ba;
  --room-flat-panel: rgba(237, 240, 220, 0.58);
  --room-flat-panel-alt: rgba(166, 160, 143, 0.52);
  --room-flat-ink: #10231d;
  --room-flat-muted: rgba(18, 64, 55, 0.64);
  --room-flat-accent: #124037;
  --room-flat-accent-two: #a67437;
  --room-flat-line: rgba(18, 64, 55, 0.14);
  --room-flat-wash: rgba(242, 193, 102, 0.13);
  --room-flat-shadow: rgba(18, 64, 55, 0.13);
  --room-fact-born-bg: #124037;
  --room-fact-born-ink: #f7ecd6;
  --room-fact-passed-bg: #a67437;
  --room-fact-passed-ink: #fff0ca;
  --room-fact-place-bg: #f2c166;
  --room-fact-place-ink: #12342d;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-four:not(.has-admin-edit-mode) {
  --room-flat-bg: #e7e5d7;
  --room-flat-surface: #dce0c9;
  --room-flat-panel: rgba(247, 245, 234, 0.62);
  --room-flat-panel-alt: rgba(173, 186, 94, 0.32);
  --room-flat-ink: #20342f;
  --room-flat-muted: rgba(32, 52, 47, 0.64);
  --room-flat-accent: #869a69;
  --room-flat-accent-two: #65aac2;
  --room-flat-line: rgba(83, 105, 78, 0.14);
  --room-flat-wash: rgba(101, 170, 194, 0.13);
  --room-flat-shadow: rgba(83, 109, 77, 0.13);
  --room-fact-born-bg: #869a69;
  --room-fact-born-ink: #fffdf1;
  --room-fact-passed-bg: #65aac2;
  --room-fact-passed-ink: #14313a;
  --room-fact-place-bg: #adba5e;
  --room-fact-place-ink: #253319;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-five:not(.has-admin-edit-mode) {
  --room-flat-bg: #5c4637;
  --room-flat-surface: #7b6250;
  --room-flat-panel: rgba(255, 246, 231, 0.14);
  --room-flat-panel-alt: rgba(152, 122, 97, 0.34);
  --room-flat-ink: #fff6e7;
  --room-flat-muted: rgba(255, 246, 231, 0.7);
  --room-flat-accent: #908b84;
  --room-flat-accent-two: #a46c1d;
  --room-flat-line: rgba(255, 246, 231, 0.16);
  --room-flat-wash: rgba(255, 246, 231, 0.08);
  --room-flat-shadow: rgba(12, 18, 15, 0.24);
  --room-fact-born-bg: #a46c1d;
  --room-fact-born-ink: #fff6e7;
  --room-fact-passed-bg: #5c4637;
  --room-fact-passed-ink: #fff6e7;
  --room-fact-place-bg: #908b84;
  --room-fact-place-ink: #171512;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-six:not(.has-admin-edit-mode) {
  --room-flat-bg: #101742;
  --room-flat-surface: #ee5a1b;
  --room-flat-panel: rgba(15, 23, 66, 0.24);
  --room-flat-panel-alt: rgba(255, 242, 224, 0.18);
  --room-flat-ink: #fff2df;
  --room-flat-muted: rgba(255, 242, 223, 0.72);
  --room-flat-accent: #111943;
  --room-flat-accent-two: #ff7a2e;
  --room-flat-line: rgba(255, 242, 223, 0.18);
  --room-flat-wash: rgba(255, 242, 223, 0.1);
  --room-flat-shadow: rgba(5, 9, 34, 0.28);
  --room-fact-born-bg: #111943;
  --room-fact-born-ink: #fff2df;
  --room-fact-passed-bg: #ee5a1b;
  --room-fact-passed-ink: #101742;
  --room-fact-place-bg: #26336a;
  --room-fact-place-ink: #fff2df;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-seven:not(.has-admin-edit-mode) {
  --room-flat-bg: #e0e0e0;
  --room-flat-surface: #a38560;
  --room-flat-panel: rgba(224, 224, 224, 0.58);
  --room-flat-panel-alt: rgba(163, 133, 96, 0.46);
  --room-flat-ink: #03110d;
  --room-flat-muted: rgba(3, 17, 13, 0.66);
  --room-flat-accent: #16302b;
  --room-flat-accent-two: #390517;
  --room-flat-line: rgba(3, 17, 13, 0.16);
  --room-flat-wash: rgba(224, 224, 224, 0.14);
  --room-flat-shadow: rgba(3, 17, 13, 0.22);
  --room-fact-born-bg: #16302b;
  --room-fact-born-ink: #e0e0e0;
  --room-fact-passed-bg: #390517;
  --room-fact-passed-ink: #f2e3cf;
  --room-fact-place-bg: #a38560;
  --room-fact-place-ink: #03110d;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-eight:not(.has-admin-edit-mode) {
  --room-flat-bg: #eadec7;
  --room-flat-surface: #9cbbb7;
  --room-flat-panel: rgba(234, 224, 199, 0.62);
  --room-flat-panel-alt: rgba(192, 98, 38, 0.24);
  --room-flat-ink: #2e211c;
  --room-flat-muted: rgba(46, 33, 28, 0.66);
  --room-flat-accent: #984619;
  --room-flat-accent-two: #c06226;
  --room-flat-line: rgba(46, 33, 28, 0.16);
  --room-flat-wash: rgba(255, 247, 231, 0.16);
  --room-flat-shadow: rgba(46, 33, 28, 0.2);
  --room-fact-born-bg: #2e211c;
  --room-fact-born-ink: #eadec7;
  --room-fact-passed-bg: #984619;
  --room-fact-passed-ink: #fff1df;
  --room-fact-place-bg: #9cbbb7;
  --room-fact-place-ink: #2e211c;
}

.memorial-photo-viewer-page.is-public-memory-room.is-room-palette-nine:not(.has-admin-edit-mode) {
  --room-flat-bg: #fbe1b5;
  --room-flat-surface: #d8c18b;
  --room-flat-panel: rgba(251, 225, 181, 0.68);
  --room-flat-panel-alt: rgba(141, 162, 73, 0.3);
  --room-flat-ink: #1f281a;
  --room-flat-muted: rgba(31, 40, 26, 0.68);
  --room-flat-accent: #2e434f;
  --room-flat-accent-two: #f89254;
  --room-flat-line: rgba(31, 40, 26, 0.16);
  --room-flat-wash: rgba(141, 162, 73, 0.12);
  --room-flat-shadow: rgba(31, 40, 26, 0.18);
  --room-fact-born-bg: #1f281a;
  --room-fact-born-ink: #fbe1b5;
  --room-fact-passed-bg: #f89254;
  --room-fact-passed-ink: #1f281a;
  --room-fact-place-bg: #8da249;
  --room-fact-place-ink: #1f281a;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library {
  background: var(--room-flat-bg) !important;
  color: var(--room-flat-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-top {
  border-color: var(--room-flat-line) !important;
  background: var(--room-flat-panel) !important;
  box-shadow: 0 16px 44px var(--room-flat-shadow) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-room-palette-switcher {
  background: rgba(29, 26, 18, 0.28);
  box-shadow: 0 12px 32px rgba(23, 19, 14, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-room-palette-switcher button:is(:hover, :focus-visible, .is-active) {
  background: rgba(246, 234, 219, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary {
  background: var(--room-flat-surface) !important;
  color: var(--room-flat-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::before {
  background: var(--room-flat-wash) !important;
  opacity: 0.32 !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary::after {
  background:
    linear-gradient(90deg, var(--room-flat-line) 0 1px, transparent 1px 100%),
    var(--room-flat-wash) !important;
  opacity: 0.16 !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image {
  background: var(--room-flat-accent) !important;
  box-shadow:
    0 52px 110px var(--room-flat-shadow),
    0 16px 34px rgba(12, 14, 10, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::before {
  background: transparent !important;
  opacity: 1 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 247, 225, 0.22),
    inset 0 0 42px rgba(0, 0, 0, 0.08) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image::after {
  display: none !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-image-primary {
  z-index: 3;
  filter: none !important;
  mix-blend-mode: normal;
  opacity: 1 !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts {
  width: min(100%, 406px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 0.82vw, 10px);
  align-items: stretch;
  perspective: 1100px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-line span,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dt {
  color: var(--room-flat-muted);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div {
  --room-fact-bg: var(--room-flat-accent);
  --room-fact-ink: var(--room-flat-ink);
  position: relative;
  min-height: clamp(68px, 5.1vw, 86px);
  border-color: color-mix(in srgb, var(--room-fact-bg) 82%, #ffffff 18%) !important;
  border-radius: clamp(17px, 1.35vw, 23px) !important;
  background: var(--room-fact-bg, var(--room-flat-panel)) !important;
  color: var(--room-fact-ink, var(--room-flat-ink));
  isolation: isolate;
  overflow: hidden;
  align-content: space-between;
  padding: clamp(9px, 0.85vw, 12px);
  backdrop-filter: none;
  transform-style: preserve-3d;
  box-shadow:
    0 15px 26px color-mix(in srgb, var(--room-flat-shadow) 72%, transparent),
    0 3px 0 color-mix(in srgb, var(--room-fact-bg) 64%, #ffffff 36%),
    inset 7px 7px 14px rgba(0, 0, 0, 0.2),
    inset -7px -7px 14px rgba(255, 255, 255, 0.12) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(1) {
  --room-fact-bg: var(--room-fact-born-bg);
  --room-fact-ink: var(--room-fact-born-ink);
  background: var(--room-fact-bg) !important;
  border-color: var(--room-fact-bg) !important;
  border-radius: 22px 18px 21px 18px !important;
  transform: rotate(-0.35deg) translateZ(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(2) {
  --room-fact-bg: var(--room-fact-passed-bg);
  --room-fact-ink: var(--room-fact-passed-ink);
  background: var(--room-fact-bg) !important;
  border-color: var(--room-fact-bg) !important;
  border-radius: 18px 22px 18px 21px !important;
  transform: rotate(0.45deg) translateZ(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div:nth-child(3) {
  --room-fact-bg: var(--room-fact-place-bg);
  --room-fact-ink: var(--room-fact-place-ink);
  background: var(--room-fact-bg) !important;
  border-color: var(--room-fact-bg) !important;
  border-radius: 19px 19px 23px 18px !important;
  transform: rotate(-0.18deg) translateZ(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: clamp(7px, 0.68vw, 9px);
  border-radius: inherit;
  background:
    radial-gradient(circle at 55% 48%, rgba(255, 255, 255, 0.08), transparent 42%),
    color-mix(in srgb, var(--room-fact-bg) 78%, #000000 22%);
  box-shadow:
    inset 6px 6px 12px rgba(0, 0, 0, 0.24),
    inset -6px -6px 12px rgba(255, 255, 255, 0.09),
    0 1px 0 color-mix(in srgb, var(--room-fact-bg) 48%, #ffffff 52%);
  opacity: 0.72;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts div::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  opacity: 1;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dt,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts small {
  position: relative;
  z-index: 1;
  color: var(--room-fact-ink, var(--room-flat-muted)) !important;
  opacity: 0.7;
  text-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dd,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts .memorial-photo-private-sanctuary-date-value {
  position: relative;
  z-index: 1;
  color: var(--room-fact-ink, var(--room-flat-ink)) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts dd {
  align-self: end;
  gap: 2px;
  transform: translateZ(18px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-date-value {
  display: inline-block;
  max-width: 100%;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.08),
    0 12px 18px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px) translateZ(18px) scale(1.02);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts .is-place-fact .memorial-photo-private-sanctuary-date-value {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: clamp(0.72rem, 0.86vw, 0.84rem);
  letter-spacing: 0;
  line-height: 1.04;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-facts .memorial-photo-private-sanctuary-place-select {
  position: relative;
  z-index: 2;
  border-bottom-color: currentColor;
  color: var(--room-fact-ink, var(--room-flat-ink));
  text-shadow: none;
}

.memorial-photo-private-sanctuary-place-select {
  width: min(100%, 132px);
  border: 0;
  border-bottom: 1px solid rgba(83, 114, 55, 0.22);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: rgba(29, 26, 18, 0.5);
  color-scheme: light;
  opacity: 0;
  padding: 0;
  font: inherit;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.6rem;
  font-weight: 720;
  line-height: 1.2;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.memorial-photo-private-sanctuary-facts .is-place-fact:is(:hover, :focus-within) .memorial-photo-private-sanctuary-place-select {
  opacity: 1;
  padding: 1px 0 3px;
  pointer-events: auto;
  transform: translateY(0);
}

.memorial-photo-private-sanctuary-place-select:focus-visible {
  border-color: rgba(226, 118, 28, 0.5);
  color: rgba(29, 26, 18, 0.88);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat {
  border-color: rgba(255, 255, 255, 0.76) !important;
  background:
    radial-gradient(ellipse at 18% 14%, rgba(255, 255, 255, 0.98) 0 9%, transparent 30%),
    radial-gradient(circle at 94% 88%, color-mix(in srgb, var(--room-flat-accent-two) 48%, rgba(255, 255, 255, 0)) 0 22%, transparent 46%),
    radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--room-flat-accent) 22%, rgba(255, 255, 255, 0)) 0 18%, transparent 44%),
    linear-gradient(142deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.3) 42%, rgba(255, 255, 255, 0.12) 70%),
    color-mix(in srgb, var(--room-flat-panel-alt) 36%, rgba(255, 255, 255, 0.36)) !important;
  overflow: hidden;
  color: var(--room-flat-ink);
  backdrop-filter: blur(28px) saturate(1.72);
  transform: translateY(-2px) translateZ(0);
  box-shadow:
    0 36px 76px color-mix(in srgb, var(--room-flat-shadow) 86%, transparent),
    0 14px 0 color-mix(in srgb, var(--room-flat-accent-two) 16%, transparent),
    0 11px 28px rgba(255, 255, 255, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.88),
    inset 11px 12px 22px rgba(255, 255, 255, 0.2),
    inset -12px -18px 32px color-mix(in srgb, var(--room-flat-accent) 16%, rgba(3, 17, 13, 0.04)) !important;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.88), transparent 31%),
    linear-gradient(315deg, rgba(255, 255, 255, 0.24), transparent 42%),
    radial-gradient(circle at 74% 34%, rgba(255, 255, 255, 0.4), transparent 42%);
  opacity: 0.9;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: inherit;
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.22),
    inset 0 -10px 18px rgba(0, 0, 0, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat :where(svg, span, small) {
  position: relative;
  z-index: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat svg {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--room-flat-accent-two) 38%, rgba(255, 255, 255, 0.62));
  border-radius: 999px;
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.82), transparent 38%),
    radial-gradient(circle at 72% 78%, color-mix(in srgb, var(--room-flat-accent-two) 38%, transparent), transparent 48%),
    color-mix(in srgb, var(--room-flat-accent-two) 30%, rgba(255, 255, 255, 0.56));
  color: var(--room-flat-accent-two);
  fill: color-mix(in srgb, var(--room-flat-accent-two) 32%, rgba(255, 255, 255, 0.38)) !important;
  padding: 5.5px;
  filter:
    drop-shadow(0 12px 16px color-mix(in srgb, var(--room-flat-accent-two) 38%, rgba(0, 0, 0, 0)))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.62));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -6px 12px color-mix(in srgb, var(--room-flat-accent-two) 22%, transparent),
    0 8px 16px color-mix(in srgb, var(--room-flat-shadow) 28%, transparent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.92) !important;
  transform: translateY(-5px) scale(1.018) translateZ(0);
  box-shadow:
    0 44px 84px color-mix(in srgb, var(--room-flat-shadow) 88%, transparent),
    0 18px 0 color-mix(in srgb, var(--room-flat-accent-two) 18%, transparent),
    0 13px 32px rgba(255, 255, 255, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.94),
    inset 11px 12px 22px rgba(255, 255, 255, 0.24),
    inset -12px -18px 34px color-mix(in srgb, var(--room-flat-accent) 18%, rgba(3, 17, 13, 0.04)) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat:active {
  transform: translateY(1px) scale(0.992) translateZ(0);
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--room-flat-shadow) 76%, transparent),
    0 4px 0 color-mix(in srgb, var(--room-flat-accent-two) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 12px 24px rgba(3, 17, 13, 0.08) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat.is-kept {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.24) 46%, rgba(255, 255, 255, 0.14)),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--room-flat-accent) 34%, rgba(255, 255, 255, 0)) 0 24%, transparent 44%),
    color-mix(in srgb, var(--room-flat-panel-alt) 62%, rgba(255, 255, 255, 0.28)) !important;
  color: var(--room-flat-accent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary-treat.is-kept svg {
  fill: currentColor !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
  background: var(--room-flat-surface) !important;
  color: var(--room-flat-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
  background: var(--room-flat-wash) !important;
  opacity: 0.16 !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary),
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
  border-color: var(--room-flat-line) !important;
  background: var(--room-flat-panel) !important;
  color: var(--room-flat-ink);
  box-shadow: 0 12px 28px var(--room-flat-shadow) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary):is(:hover, :focus-visible),
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:is(:hover, :focus-visible) {
  background: var(--room-flat-panel-alt) !important;
  color: var(--room-flat-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  border-color: var(--room-flat-line) !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a {
  color: var(--room-flat-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  border-color: var(--room-flat-line) !important;
  background: var(--room-flat-panel) !important;
  box-shadow: 0 18px 42px var(--room-flat-shadow) !important;
}

.memorial-photo-private-sanctuary-story {
  display: none;
}

.memorial-photo-private-sanctuary-story span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(23, 19, 14, 0.44);
  font-size: 0.56rem;
  font-weight: 860;
  letter-spacing: 0.2em;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary-story strong {
  display: block;
  margin-top: 9px;
  color: var(--memorial-private-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.22rem, 1.9vw, 1.82rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.memorial-photo-private-sanctuary-story p {
  max-width: 520px;
  margin: 8px 0 0;
  color: rgba(23, 19, 14, 0.52);
  font-size: 0.78rem;
  line-height: 1.58;
}

.memorial-photo-private-sanctuary-story :where(a, button) {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(239, 224, 197, 0.18);
  border-radius: 999px 999px 999px 2px;
  background:
    linear-gradient(180deg, rgba(255, 244, 218, 0.08), rgba(255, 244, 218, 0)),
    var(--memorial-private-smoke);
  color: #f7ead0;
  cursor: pointer;
  padding: 0 17px;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 860;
  text-decoration: none;
  box-shadow: 0 18px 48px rgba(18, 24, 15, 0.22);
}

.memorial-photo-private-sanctuary-story :where(a, button):is(:hover, :focus-visible) {
  border-color: rgba(239, 224, 197, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 244, 218, 0.14), rgba(255, 244, 218, 0.02)),
    var(--memorial-private-smoke);
  color: #fff2d3;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-visual-path,
  .memorial-photo-room-intro,
  .memorial-photo-special-day,
  .memorial-photo-today,
  .memorial-photo-presence,
  .memorial-photo-favorites,
  .memorial-photo-community,
  .memorial-flower-offerings,
  .memorial-photo-room-closing,
  .memorial-photo-room-return-card,
  .memorial-photo-room-return-ritual
) {
  display: none !important;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
  background:
    radial-gradient(circle at 17% 20%, rgba(44, 89, 66, 0.12), transparent 30%),
    linear-gradient(180deg, #f9f3e9 0%, #eef4ea 100%);
  color: var(--memorial-private-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge {
  background:
    radial-gradient(circle at 82% 8%, rgba(180, 123, 66, 0.16), transparent 34%),
    linear-gradient(180deg, #eef4ea 0%, #f8f1e6 100%);
  color: var(--memorial-private-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-panel {
  border-color: rgba(33, 75, 57, 0.14);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 28px 84px rgba(33, 75, 57, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(
  .memorial-photo-letter-memory-bridge,
  .memorial-photo-letter-film-seed
) {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
  position: relative;
  display: grid;
  min-height: min(940px, 92svh);
  grid-template-columns: minmax(170px, 0.44fr) minmax(300px, 560px) minmax(180px, 0.5fr);
  gap: clamp(24px, 4.8vw, 72px);
  align-items: center;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 86% 17%, rgba(121, 61, 40, 0.09), transparent 30%),
    radial-gradient(circle at 12% 86%, rgba(33, 75, 57, 0.09), transparent 34%),
    linear-gradient(180deg, #ebdfc6 0%, #f3e8cf 52%, #dfcfac 100%);
  padding: clamp(80px, 10vw, 136px) clamp(22px, 6vw, 92px);
  color: var(--memorial-private-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::before {
  content: "EVERY\A LINE\A TELLS A\A STORY";
  white-space: pre-line;
  align-self: center;
  color: rgba(23, 19, 14, 0.94);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.05rem, 4.8vw, 5.45rem);
  font-weight: 500;
  letter-spacing: -0.075em;
  line-height: 0.82;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::after {
  position: absolute;
  right: clamp(22px, 5vw, 78px);
  bottom: clamp(28px, 6vw, 86px);
  width: clamp(86px, 13vw, 184px);
  aspect-ratio: 1.45;
  border: 1px solid rgba(23, 19, 14, 0.14);
  background:
    linear-gradient(90deg, rgba(23, 19, 14, 0.36) 0 3px, transparent 3px 100%),
    linear-gradient(180deg, rgba(250, 242, 224, 0.52), rgba(33, 75, 57, 0.13)),
    rgba(255, 255, 255, 0.18);
  content: "";
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet {
  grid-column: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake {
  grid-template-columns: minmax(190px, 0.86fr) minmax(220px, 1fr);
  gap: clamp(18px, 3vw, 34px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-keepsake {
  min-height: clamp(300px, 40vw, 520px);
  border: 0;
  border-radius: 0;
  background: #17130e;
  box-shadow: 0 24px 64px rgba(23, 19, 14, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-keepsake::after {
  background:
    linear-gradient(180deg, rgba(23, 19, 14, 0.02), rgba(23, 19, 14, 0.62)),
    radial-gradient(circle at 82% 12%, rgba(239, 224, 197, 0.18), transparent 38%);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-keepsake span {
  border-color: rgba(239, 224, 197, 0.2);
  background: rgba(23, 19, 14, 0.42);
  color: rgba(239, 224, 197, 0.78);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-keepsake strong {
  color: #f6ead0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body {
  align-content: center;
  gap: clamp(18px, 3vw, 30px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body p {
  max-width: 34ch;
  color: rgba(23, 19, 14, 0.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.18rem, 2.35vw, 2.28rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-open {
  width: fit-content;
  min-height: 42px;
  border: 1px solid rgba(23, 19, 14, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(23, 19, 14, 0.78);
  padding: 0 14px;
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause {
  grid-column: 3;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 280px);
  margin: 0;
  border-width: 0 0 0 1px;
  border-color: rgba(23, 19, 14, 0.16);
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 clamp(16px, 2vw, 24px);
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause > svg {
  width: 28px;
  height: 28px;
  padding: 7px;
  border: 1px solid rgba(121, 61, 40, 0.16);
  border-radius: 999px;
  color: rgba(121, 61, 40, 0.7);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy span {
  color: rgba(121, 61, 40, 0.66);
  letter-spacing: 0.16em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy strong {
  color: rgba(23, 19, 14, 0.9);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.02rem, 1.5vw, 1.42rem);
  font-weight: 520;
  letter-spacing: -0.035em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy p {
  color: rgba(23, 19, 14, 0.5);
  font-size: 0.76rem;
  line-height: 1.55;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause button {
  width: fit-content;
  min-width: 0;
  min-height: 28px;
  border-width: 0 0 1px;
  border-color: rgba(23, 19, 14, 0.22);
  border-radius: 0;
  background: transparent;
  color: rgba(23, 19, 14, 0.7);
  padding: 0 0 4px;
  box-shadow: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause button:is(:hover, :focus-visible) {
  border-color: rgba(121, 61, 40, 0.42);
  background: transparent;
  color: rgba(23, 19, 14, 0.92);
  transform: translateY(-1px);
  outline: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause button svg {
  width: 13px;
  height: 13px;
  color: rgba(121, 61, 40, 0.68);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge {
  position: relative;
  display: grid;
  min-height: min(980px, 94svh);
  grid-template-columns: minmax(220px, 0.42fr) minmax(360px, 0.82fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: center;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 68% 24%, rgba(239, 224, 197, 0.18), transparent 29%),
    radial-gradient(circle at 16% 74%, rgba(121, 61, 40, 0.26), transparent 34%),
    linear-gradient(145deg, #080a08 0%, #15150f 48%, #2b2018 100%);
  padding: clamp(82px, 10vw, 140px) clamp(22px, 6vw, 92px);
  color: #f6ead0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 244, 218, 0.06) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, rgba(255, 244, 218, 0.04) 0 1px, transparent 1px 100%);
  background-size: 25vw 100%, 100% 42vh;
  content: "";
  opacity: 0.42;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-panel {
  position: relative;
  z-index: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy > span {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(239, 224, 197, 0.62);
  padding: 0;
  letter-spacing: 0.2em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy h2 {
  max-width: 540px;
  color: #f7ead0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.82;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy p {
  max-width: 320px;
  color: rgba(246, 234, 208, 0.58);
  font-size: 0.8rem;
  line-height: 1.68;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-panel::before {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film {
  min-height: clamp(360px, 46vw, 620px);
  border: 1px solid rgba(246, 234, 208, 0.16);
  border-radius: 0;
  background: rgba(8, 10, 8, 0.9);
  padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.36);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film > img {
  filter: saturate(0.86) contrast(1.06) brightness(0.62);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film > span {
  border-color: rgba(246, 234, 208, 0.18);
  background: rgba(8, 10, 8, 0.38);
  color: rgba(246, 234, 208, 0.78);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film > strong {
  max-width: 560px;
  color: #fff0d1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(246, 234, 208, 0.16);
  border-bottom: 1px solid rgba(246, 234, 208, 0.12);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps article {
  min-height: auto;
  border: 0;
  border-right: 1px solid rgba(246, 234, 208, 0.12);
  border-radius: 0;
  background: transparent;
  padding: 14px 12px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps article:last-child {
  border-right: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps span {
  color: rgba(246, 234, 208, 0.52);
  letter-spacing: 0.16em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps strong {
  color: rgba(246, 234, 208, 0.86);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 520;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps p {
  color: rgba(246, 234, 208, 0.46);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-actions :is(button, a) {
  border-radius: 0;
  border-color: rgba(246, 234, 208, 0.18);
  background: rgba(246, 234, 208, 0.06);
  color: rgba(246, 234, 208, 0.86);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: clamp(14px, 2vw, 24px);
  overflow: hidden;
  background:
    radial-gradient(circle at 84px 96px, rgba(226, 118, 28, 0.17), transparent 190px),
    linear-gradient(180deg, #253a21 0 240px, #e6d7c8 240px 100%);
  padding: clamp(92px, 11vw, 150px) clamp(14px, 4.8vw, 72px) 178px clamp(14px, 4.8vw, 72px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
  position: absolute;
  top: clamp(42px, 7vw, 96px);
  left: clamp(24px, 6vw, 92px);
  content: "SAVED\A DAYS";
  white-space: pre-line;
  color: rgba(246, 234, 208, 0.92);
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 8vw, 8.2rem);
  font-weight: 500;
  letter-spacing: -0.085em;
  line-height: 0.82;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls {
  position: relative;
  z-index: 3;
  display: flex;
  grid-column: 1 / -1;
  align-self: start;
  justify-self: end;
  width: fit-content;
  height: fit-content;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  margin-top: clamp(104px, 11vw, 170px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary) {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(246, 234, 219, 0.24);
  border-radius: 999px 999px 999px 3px;
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.16), rgba(246, 234, 219, 0.04)),
    rgba(37, 58, 33, 0.78);
  color: rgba(246, 234, 219, 0.9);
  cursor: pointer;
  padding: 0 14px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 18px 46px rgba(37, 58, 33, 0.22);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary):is(:hover, :focus-visible) {
  border-color: rgba(226, 118, 28, 0.42);
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.24), rgba(226, 118, 28, 0.08)),
    rgba(37, 58, 33, 0.92);
  color: #f6eadb;
  transform: translateY(-1px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu {
  position: relative;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu summary {
  list-style: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu summary::-webkit-details-marker {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 8;
  display: grid;
  min-width: 190px;
  overflow: hidden;
  border: 1px solid rgba(83, 114, 55, 0.18);
  border-radius: 18px 18px 18px 3px;
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.97), rgba(205, 185, 176, 0.94));
  box-shadow: 0 24px 68px rgba(37, 58, 33, 0.2);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu:not([open]) > div {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a {
  display: grid;
  gap: 3px;
  border-bottom: 1px solid rgba(83, 114, 55, 0.12);
  color: rgba(29, 26, 18, 0.84);
  padding: 11px 14px;
  text-decoration: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:last-child {
  border-bottom: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a:is(:hover, :focus-visible) {
  background: rgba(146, 168, 121, 0.18);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a span {
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
  letter-spacing: -0.04em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu a small {
  color: rgba(23, 19, 14, 0.44);
  font-size: 0.63rem;
  line-height: 1.25;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-years {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  gap: clamp(24px, 4vw, 52px);
  margin-top: clamp(20px, 3vw, 44px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year {
  gap: clamp(12px, 2vw, 22px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  justify-content: space-between;
  border-top: 1px solid rgba(83, 114, 55, 0.18);
  padding-top: 12px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(23, 19, 14, 0.9);
  padding: 0;
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: clamp(1.38rem, 2.6vw, 2.8rem);
  font-weight: 520;
  letter-spacing: -0.06em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-grid {
  grid-auto-rows: clamp(120px, 13vw, 176px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(126px, 13vw, 206px), 1fr));
  gap: clamp(6px, 0.9vw, 10px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-years {
  grid-template-columns: repeat(auto-fit, minmax(min(188px, 100%), 1fr));
  align-items: start;
  gap: clamp(18px, 2.6vw, 34px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-year {
  gap: clamp(9px, 1.4vw, 15px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-year-head {
  display: grid;
  gap: 3px;
  padding-top: 9px;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-year-head strong {
  font-size: clamp(1.08rem, 1.7vw, 1.46rem);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-year-head span {
  font-size: 0.62rem;
  line-height: 1.25;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-grid {
  grid-auto-rows: clamp(74px, 7vw, 110px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(4px, 0.62vw, 8px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile,
.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile.is-large,
.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile.is-wide,
.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile.is-tall {
  grid-column: span 1;
  grid-row: span 1;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile span {
  opacity: 0;
  transform: translateY(8px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-tile:is(:hover, :focus-visible) span {
  opacity: 1;
  transform: translateY(0);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile {
  border: 0;
  border-radius: 0;
  background: #11140d;
  box-shadow: 0 22px 62px rgba(37, 58, 33, 0.16);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile::after {
  background:
    linear-gradient(180deg, rgba(255, 244, 218, 0.05), transparent 34% 72%, rgba(23, 19, 14, 0.34)),
    radial-gradient(circle at 78% 10%, rgba(239, 224, 197, 0.08), transparent 28%);
  opacity: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-tile span {
  right: 10px;
  bottom: 10px;
  left: 10px;
  border-color: rgba(246, 234, 208, 0.18);
  border-radius: 0;
  background: rgba(23, 19, 14, 0.54);
  color: #f6ead0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-rail {
  z-index: 2;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-rail a {
  color: rgba(37, 58, 33, 0.62);
  font-family: "Iowan Old Style", "Bodoni 72", Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  letter-spacing: -0.02em;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-rail a:is(:hover, :focus-visible) {
  color: rgba(226, 118, 28, 0.9);
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-dock {
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  left: 50% !important;
  width: min(540px, calc(100vw - 40px)) !important;
  min-height: 58px !important;
  border-color: rgba(83, 114, 55, 0.2) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.72), rgba(205, 185, 176, 0.46)),
    rgba(146, 168, 121, 0.2) !important;
  box-shadow:
    0 18px 54px rgba(37, 58, 33, 0.18),
    0 4px 18px rgba(226, 118, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  opacity: 0.82 !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(18px) saturate(1.02);
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-dock:is(:focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-dock:has(.memorial-command-status),
body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-dock:has(.memorial-command-add-menu) {
  min-height: 86px !important;
  border-color: rgba(226, 118, 28, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(246, 234, 219, 0.84), rgba(205, 185, 176, 0.62)),
    rgba(146, 168, 121, 0.26) !important;
  opacity: 0.98 !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-form {
  grid-template-rows: 30px auto !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-form > textarea {
  min-height: 30px !important;
  color: rgba(29, 26, 18, 0.78) !important;
  font-size: 0.82rem !important;
  -webkit-text-fill-color: rgba(29, 26, 18, 0.78) !important;
  caret-color: rgba(226, 118, 28, 0.9) !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) .memorial-ai-command-form > textarea::placeholder {
  color: rgba(23, 19, 14, 0.38) !important;
  -webkit-text-fill-color: rgba(23, 19, 14, 0.38) !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)) :where(
  .memorial-command-companion-row > span,
  .memorial-command-companion-row button,
  .memorial-command-style-row > span,
  .memorial-command-style-row button
) {
  border-color: rgba(83, 114, 55, 0.16) !important;
  background: rgba(246, 234, 219, 0.38) !important;
  color: rgba(37, 58, 33, 0.76) !important;
}

@media (max-width: 960px) {
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(22px, 6vw, 42px);
    padding: clamp(72px, 14vw, 108px) clamp(18px, 6vw, 52px);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::before {
    max-width: 9ch;
    font-size: clamp(3.8rem, 13vw, 6.8rem);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::after {
    top: clamp(72px, 12vw, 112px);
    right: clamp(18px, 6vw, 52px);
    bottom: auto;
    width: clamp(74px, 19vw, 138px);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause {
    grid-column: auto;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause {
    width: min(100%, 520px);
    border-width: 1px 0 0;
    padding: 18px 0 0;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 8vw, 56px);
    padding: clamp(72px, 14vw, 112px) clamp(18px, 6vw, 52px);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy h2 {
    max-width: 9.4ch;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy p {
    max-width: 54ch;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film {
    min-height: clamp(340px, 62vw, 560px);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
    grid-template-columns: minmax(0, 1fr);
    padding: clamp(84px, 16vw, 126px) clamp(14px, 5vw, 38px) 172px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
    left: clamp(18px, 5vw, 38px);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-rail {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    overflow-x: auto;
    gap: 8px;
    padding: 10px 0 0;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-rail a {
    flex: 0 0 auto;
    border: 1px solid rgba(83, 114, 55, 0.16);
    padding: 7px 10px;
  }
}

@media (max-width: 620px) {
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
    padding: 62px 16px 72px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::before {
    font-size: clamp(3rem, 18vw, 5rem);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::after {
    display: none;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-keepsake {
    min-height: 340px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body p {
    max-width: 30ch;
    font-size: clamp(1.15rem, 6.4vw, 1.84rem);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge {
    padding: 68px 16px 74px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-copy h2 {
    font-size: clamp(2.7rem, 16vw, 4.8rem);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-film {
    min-height: 420px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps article {
    border-right: 0;
    border-bottom: 1px solid rgba(246, 234, 208, 0.12);
    padding: 13px 0;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-film-bridge-steps article:last-child {
    border-bottom: 0;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content {
    background:
      radial-gradient(circle at 54px 84px, rgba(226, 118, 28, 0.16), transparent 150px),
      linear-gradient(180deg, #253a21 0 210px, #e6d7c8 210px 100%);
    padding: 76px 12px 166px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-content::before {
    top: 42px;
    font-size: clamp(3.1rem, 19vw, 5.6rem);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 118px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-controls :where(button, summary) {
    min-height: 36px;
    padding-inline: 12px;
    font-size: 0.68rem;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-date-menu > div {
    right: auto;
    left: 0;
    min-width: min(210px, calc(100vw - 24px));
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-years {
    margin-top: 18px;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-years {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 8px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-library-grid {
    grid-auto-rows: clamp(112px, 34vw, 156px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library-condensed:not(.has-admin-edit-mode) .memorial-photo-library-grid {
    grid-auto-rows: clamp(74px, 24vw, 104px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
  --letter-paper: color-mix(in srgb, var(--room-flat-bg, #efe5cf) 86%, var(--room-flat-surface, #fff6e7));
  --letter-panel: color-mix(in srgb, var(--room-flat-panel, #f4ead7) 76%, var(--room-flat-surface, #fff6e7));
  --letter-ink: var(--room-flat-ink, #17130e);
  --letter-muted: color-mix(in srgb, var(--letter-ink) 50%, transparent);
  --letter-line: color-mix(in srgb, var(--letter-ink) 15%, transparent);
  --letter-accent: var(--room-flat-accent, #e2761c);
  --letter-accent-two: var(--room-flat-accent-two, #537237);
  position: relative;
  display: grid;
  min-height: min(1040px, 100svh);
  grid-template-columns: minmax(150px, 0.36fr) minmax(600px, 1.06fr) minmax(210px, 0.4fr);
  gap: clamp(28px, 5.4vw, 96px);
  align-items: center;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--letter-ink) 7%, transparent);
  border-bottom: 0;
  background: var(--letter-paper);
  padding: clamp(96px, 11vw, 156px) clamp(24px, 6.6vw, 108px);
  color: var(--letter-ink);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::before {
  position: absolute;
  inset: clamp(34px, 4.4vw, 66px) clamp(20px, 5vw, 82px);
  border: 1px solid var(--letter-line);
  border-radius: 0;
  background: none;
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::after {
  position: absolute;
  right: clamp(24px, 5.4vw, 92px);
  top: clamp(72px, 9vw, 142px);
  width: min(18vw, 240px);
  height: min(66vh, 620px);
  border-right: 1px solid color-mix(in srgb, var(--letter-accent) 32%, transparent);
  content: "";
  opacity: 0.32;
  pointer-events: none;
  transform: skewX(-8deg);
  transform-origin: top right;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  align-self: center;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head span {
  width: fit-content;
  border-bottom: 1px solid color-mix(in srgb, var(--letter-accent) 50%, transparent);
  color: color-mix(in srgb, var(--letter-ink) 60%, var(--letter-accent) 40%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head h2 {
  max-width: 7.8ch;
  margin: 0;
  color: var(--letter-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.62rem, 5.6vw, 6.45rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head p {
  max-width: 25ch;
  margin: 0;
  color: var(--letter-muted);
  font-size: clamp(0.76rem, 1.06vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.72;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake {
  position: relative;
  z-index: 1;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(300px, 0.98fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media {
  --letter-pen-nib-shape: polygon(
    2% 95%,
    6% 91%,
    11% 84%,
    17% 74%,
    24% 61%,
    32% 48%,
    42% 35%,
    54% 24%,
    67% 16%,
    80% 11%,
    91% 12%,
    98% 19%,
    98% 29%,
    92% 42%,
    80% 58%,
    65% 73%,
    47% 86%,
    27% 96%,
    11% 99%
  );
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: clamp(390px, 48vw, 650px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--letter-ink) 88%, black);
  box-shadow:
    0 38px 100px color-mix(in srgb, var(--room-flat-shadow, rgba(43, 33, 22, 0.18)) 72%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--room-flat-surface, #fff6e7) 28%, transparent);
  clip-path: var(--letter-pen-nib-shape);
  cursor: pointer;
  padding: 0;
  text-align: left;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media::before {
  position: absolute;
  inset: clamp(9px, 1.1vw, 16px);
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--room-flat-surface, #fff6e7) 48%, transparent);
  border-radius: 0;
  clip-path: var(--letter-pen-nib-shape);
  content: "";
  opacity: 0.62;
  pointer-events: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media::after {
  position: absolute;
  left: 5%;
  bottom: 8.2%;
  z-index: 3;
  width: 67%;
  height: 1px;
  background: color-mix(in srgb, var(--room-flat-surface, #fff6e7) 70%, transparent);
  content: "";
  opacity: 0.82;
  pointer-events: none;
  transform: rotate(-35deg);
  transform-origin: left center;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-detail {
  position: absolute;
  left: 50.5%;
  top: 56.5%;
  z-index: 4;
  width: clamp(16px, 2.2vw, 30px);
  height: clamp(16px, 2.2vw, 30px);
  border: 1px solid color-mix(in srgb, var(--room-flat-surface, #fff6e7) 76%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--room-flat-surface, #fff6e7) 78%, transparent) 0 28%, transparent 31%),
    color-mix(in srgb, var(--letter-ink) 30%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--letter-ink) 18%, transparent),
    0 0 28px color-mix(in srgb, var(--room-flat-surface, #fff6e7) 24%, transparent);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-detail::before,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-detail::after {
  position: absolute;
  top: 50%;
  width: clamp(74px, 9vw, 142px);
  height: 1px;
  background: color-mix(in srgb, var(--room-flat-surface, #fff6e7) 54%, transparent);
  content: "";
  opacity: 0.5;
  pointer-events: none;
  transform-origin: left center;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-detail::before {
  left: 52%;
  transform: rotate(-53deg);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-detail::after {
  left: 42%;
  transform: rotate(-24deg);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media:is(:hover, :focus-visible) {
  box-shadow:
    0 40px 106px color-mix(in srgb, var(--room-flat-shadow, rgba(43, 33, 22, 0.18)) 84%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--room-flat-surface, #fff6e7) 34%, transparent);
  outline: none;
  transform: translateY(-4px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none !important;
  transform: scale(1.04);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media span,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media strong {
  position: relative;
  z-index: 3;
  justify-self: start;
  margin-left: clamp(20px, 4vw, 54px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media span {
  margin-top: auto;
  border: 1px solid color-mix(in srgb, var(--room-flat-surface, #fff6e7) 28%, transparent);
  background: color-mix(in srgb, var(--letter-ink) 62%, transparent);
  color: color-mix(in srgb, var(--room-flat-surface, #fff6e7) 80%, transparent);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media strong {
  max-width: 23ch;
  margin-bottom: clamp(22px, 3.5vw, 48px);
  color: color-mix(in srgb, var(--room-flat-surface, #fff6e7) 92%, white);
  letter-spacing: 0;
  text-shadow: 0 2px 22px color-mix(in srgb, black 76%, transparent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body {
  display: grid;
  align-content: center;
  gap: clamp(16px, 2.5vw, 28px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--letter-accent) 42%, transparent);
  color: color-mix(in srgb, var(--letter-ink) 70%, var(--letter-accent) 30%);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-body p {
  max-width: 29ch;
  color: color-mix(in srgb, var(--letter-ink) 84%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2.1vw, 1.96rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-actions {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(.memorial-photo-letter-story-open, .memorial-photo-letter-compose-open) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  min-height: 68px;
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--letter-ink) 18%, transparent);
  border-radius: 999px 999px 999px 16px;
  background: color-mix(in srgb, var(--room-flat-panel, #f6ecd8) 76%, var(--letter-paper));
  color: var(--letter-ink);
  padding: 10px 16px;
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--room-flat-shadow, rgba(43, 33, 22, 0.18)) 46%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 34%, transparent);
  text-align: left;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-open {
  border-color: color-mix(in srgb, var(--letter-ink) 28%, transparent);
  background: color-mix(in srgb, var(--letter-ink) 84%, var(--letter-accent) 16%);
  color: color-mix(in srgb, var(--letter-paper) 92%, white);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-compose-open {
  background: var(--letter-panel);
  cursor: pointer;
  font: inherit;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-compose-open {
  cursor: pointer;
  font: inherit;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(.memorial-photo-letter-story-open, .memorial-photo-letter-compose-open) svg {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  padding: 9px;
  background: color-mix(in srgb, var(--letter-accent) 14%, transparent);
  color: color-mix(in srgb, var(--letter-accent) 80%, var(--letter-ink));
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-open svg {
  background: color-mix(in srgb, var(--letter-paper) 16%, transparent);
  color: color-mix(in srgb, var(--letter-paper) 82%, white);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(.memorial-photo-letter-story-open, .memorial-photo-letter-compose-open) span {
  color: var(--letter-ink);
  font-size: 0.82rem;
  font-weight: 820;
  letter-spacing: 0;
  line-height: 1.1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-open span {
  color: color-mix(in srgb, var(--letter-paper) 94%, white);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(.memorial-photo-letter-story-open, .memorial-photo-letter-compose-open) small {
  color: color-mix(in srgb, var(--letter-ink) 52%, transparent);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.1;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-story-open small {
  color: color-mix(in srgb, var(--letter-paper) 68%, transparent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) :where(.memorial-photo-letter-story-open, .memorial-photo-letter-compose-open):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--letter-accent) 54%, transparent);
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--room-flat-shadow, rgba(43, 33, 22, 0.18)) 58%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause {
  position: relative;
  z-index: 1;
  grid-column: 3;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
  width: min(100%, 286px);
  margin: 0;
  border-width: 0 0 0 1px;
  border-color: color-mix(in srgb, var(--letter-ink) 15%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 clamp(16px, 2vw, 24px);
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--letter-accent) 30%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--letter-accent) 72%, var(--letter-ink));
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy span {
  color: color-mix(in srgb, var(--letter-accent) 68%, var(--letter-ink));
  font-size: 0.66rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy strong {
  color: color-mix(in srgb, var(--letter-ink) 90%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1rem, 1.42vw, 1.34rem);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.12;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy p,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause-copy small {
  color: color-mix(in srgb, var(--letter-ink) 52%, transparent);
  font-size: 0.72rem;
  line-height: 1.55;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause button {
  width: fit-content;
  min-width: 0;
  min-height: 31px;
  border: 1px solid color-mix(in srgb, var(--letter-ink) 15%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--room-flat-surface, #fff6e7) 46%, transparent);
  color: color-mix(in srgb, var(--letter-ink) 74%, transparent);
  padding: 0 12px;
  box-shadow: none;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply {
  position: relative;
  z-index: 1;
  grid-column: 2 / 4;
  justify-self: end;
  display: grid;
  grid-template-columns: auto minmax(200px, 0.44fr) minmax(340px, 0.92fr) auto;
  gap: 12px 18px;
  align-items: center;
  width: min(100%, 920px);
  margin-top: clamp(24px, 4vw, 52px);
  border-width: 1px 0;
  border-color: color-mix(in srgb, var(--letter-ink) 14%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 16px 0;
  box-shadow: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply > svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--letter-accent) 34%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--letter-accent) 80%, var(--letter-ink));
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-copy {
  gap: 4px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-copy > span,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-input > span {
  color: color-mix(in srgb, var(--letter-ink) 50%, transparent);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-copy strong {
  color: var(--letter-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  letter-spacing: 0;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-copy p {
  color: color-mix(in srgb, var(--letter-ink) 62%, transparent);
  font-size: 0.74rem;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-input {
  gap: 6px;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-input textarea {
  min-height: 68px;
  border: 1px solid color-mix(in srgb, var(--letter-ink) 13%, transparent);
  border-radius: 22px 22px 22px 8px;
  background: var(--letter-panel);
  color: var(--letter-ink);
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 13px 14px;
  resize: vertical;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-input textarea::placeholder {
  color: color-mix(in srgb, var(--letter-ink) 34%, transparent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-input textarea:focus {
  border-color: color-mix(in srgb, var(--letter-accent) 45%, transparent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--letter-accent) 12%, transparent);
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-suggestions {
  display: none;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-actions {
  display: flex;
  justify-content: flex-end;
}

.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-actions button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--letter-ink) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--letter-accent) 82%, var(--letter-ink));
  color: color-mix(in srgb, white 92%, var(--room-flat-surface, #fff6e7));
  padding: 0 14px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--room-flat-shadow, rgba(43, 33, 22, 0.18)) 45%, transparent);
}

@media (max-width: 1080px) {
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 6vw, 54px);
    min-height: auto;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head,
	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet,
	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake,
	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause,
	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply {
	    grid-column: auto;
	  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head h2 {
    max-width: 10ch;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pause {
    width: min(100%, 620px);
    border-width: 1px 0 0;
    padding: 18px 0 0;
  }

	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply {
	    justify-self: stretch;
	  }

	}

@media (max-width: 720px) {
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section {
    padding: 70px 16px 76px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::before {
    inset: 16px;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-section::after {
    display: none;
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-sheet.has-keepsake {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-editorial-head h2 {
    font-size: clamp(2.8rem, 16vw, 5.2rem);
  }

	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-pen-media {
	    min-height: 390px;
	  }

	  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply {
	    grid-template-columns: minmax(0, 1fr);
	    border-radius: 26px 26px 26px 10px;
	  }

  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-letter-reply-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 960px) {
  .memorial-photo-private-sanctuary {
    min-height: auto;
    grid-template-areas:
      "portrait"
      "side";
    grid-template-columns: minmax(0, 1fr);
    padding-top: clamp(76px, 18vw, 118px);
    padding-bottom: clamp(198px, 27vh, 264px);
  }

  .memorial-photo-private-sanctuary::before {
    inset: clamp(70px, 14vw, 118px) 10px auto auto;
    width: min(82vw, 560px);
    height: min(58vw, 420px);
  }

  .memorial-photo-private-sanctuary-portrait {
    max-width: 720px;
    justify-self: center;
  }

  .memorial-photo-private-sanctuary-portrait::before {
    inset: clamp(42px, 8vw, 70px) clamp(6px, 3vw, 24px) clamp(26px, 5vw, 48px) clamp(48px, 9vw, 94px);
  }

  .memorial-photo-private-sanctuary-image {
    width: min(84%, 560px);
    margin-inline: auto;
  }

  .memorial-photo-private-sanctuary-name {
    left: clamp(2px, 2vw, 18px);
    width: min(76%, 520px);
  }

  .memorial-photo-private-sanctuary-side {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    grid-template-areas:
      "treat"
      "facts"
      "line";
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 620px);
    max-width: 620px;
    align-items: stretch;
    gap: 12px;
    justify-self: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 clamp(16px, 4vw, 28px);
    margin-top: clamp(-48px, -7vw, -24px);
    color: rgba(23, 32, 24, 0.82);
    text-align: center;
    transform: none;
    pointer-events: auto;
  }

  .memorial-photo-private-sanctuary-side::before {
    display: none;
  }

  .memorial-photo-private-sanctuary-line {
    width: min(100%, 520px);
    justify-self: center;
    padding-top: 4px;
  }

  .memorial-photo-private-sanctuary-line span,
  .memorial-photo-private-sanctuary-facts dt,
  .memorial-photo-private-sanctuary-memory-list span {
    color: rgba(23, 32, 24, 0.48);
  }

  .memorial-photo-private-sanctuary-line textarea {
    border-bottom-color: rgba(23, 32, 24, 0.18);
    color: rgba(23, 32, 24, 0.78);
    text-shadow: none;
  }

  .memorial-photo-private-sanctuary-line textarea::placeholder {
    color: rgba(23, 32, 24, 0.38);
  }

  .memorial-photo-private-sanctuary-facts {
    width: min(100%, 520px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    justify-self: center;
  }

  .memorial-photo-private-sanctuary-facts .is-place-fact {
    grid-column: 1 / -1;
  }

  .memorial-photo-private-sanctuary-facts div,
  .memorial-photo-private-sanctuary-facts dd {
    justify-items: center;
    text-align: center;
  }

  .memorial-photo-private-sanctuary-facts dd,
  .memorial-photo-private-sanctuary-date-value {
    color: rgba(23, 32, 24, 0.78);
    text-shadow: none;
  }

  .memorial-photo-private-sanctuary-facts div:nth-child(1) .memorial-photo-private-sanctuary-date-value {
    color: rgba(83, 114, 55, 0.94);
  }

  .memorial-photo-private-sanctuary-facts div:nth-child(2) .memorial-photo-private-sanctuary-date-value {
    color: rgba(226, 118, 28, 0.92);
  }

  .memorial-photo-private-sanctuary-facts small {
    color: rgba(23, 32, 24, 0.42);
  }

  .memorial-photo-private-sanctuary-date-input {
    border-bottom-color: rgba(23, 32, 24, 0.18);
    color: rgba(23, 32, 24, 0.48);
  }

  .memorial-photo-private-sanctuary-place-select {
    border-bottom-color: rgba(23, 32, 24, 0.18);
    color: rgba(23, 32, 24, 0.48);
    opacity: 1;
    padding: 1px 0 3px;
    pointer-events: auto;
    transform: none;
  }

  .memorial-photo-private-sanctuary-treat,
  .memorial-photo-private-sanctuary-treat.is-kept {
    justify-self: center;
    width: fit-content;
    min-width: min(100%, 214px);
    border-left: 1px solid rgba(246, 234, 219, 0.36);
    border-top: 1px solid rgba(246, 234, 219, 0.36);
    padding: 8px 16px 8px 12px;
    color: rgba(45, 36, 25, 0.86);
  }

  .memorial-photo-private-sanctuary-treat small,
  .memorial-photo-private-sanctuary-actions a {
    color: rgba(23, 32, 24, 0.48);
  }

  .memorial-photo-private-sanctuary-actions {
    justify-content: flex-start;
  }

  .memorial-photo-private-sanctuary-story {
    display: none;
  }
}

@media (max-width: 620px) {
  .memorial-photo-private-sanctuary {
    gap: 28px;
    padding-inline: 16px;
    padding-bottom: 210px;
  }

  .memorial-photo-private-sanctuary::after {
    opacity: 0.9;
  }

  .memorial-photo-private-sanctuary-light {
    display: none;
  }

  .memorial-photo-private-sanctuary-portrait::before {
    inset: 48px 0 34px 24px;
    border-radius: 34px;
  }

  .memorial-photo-private-sanctuary-image {
    width: min(92%, 420px);
    border-radius: 34px;
  }

  .memorial-photo-private-sanctuary-name {
    left: 0;
    bottom: 16px;
    width: 84%;
  }

  .memorial-photo-private-sanctuary-name h1 {
    font-size: clamp(4.1rem, 21vw, 7.2rem);
  }

  .memorial-photo-private-sanctuary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .memorial-photo-private-sanctuary-side-heading strong {
    font-size: clamp(1.1rem, 6vw, 1.42rem);
  }

  .memorial-photo-private-sanctuary-story {
    display: none;
  }
}

/* User Studio project rooms stay dark even when the public site theme is light. */
html body:has(main.studio-user-project-room) {
  --sidebar-rail-width: 74px;
  color-scheme: dark;
  --studio-minis-canvas: #050505;
  --studio-minis-surface: #0d0d0d;
  --studio-minis-stage: #080808;
  background: #050505 !important;
  background-color: #050505 !important;
  color: #f5f5f4 !important;
}

html body:has(main.studio-user-project-room) :is(
  .site-main-shell,
  .site-main,
  .site-main-shell-admin-studio,
  .site-main-admin-studio,
  main.studio-user-project-room
) {
  background: #050505 !important;
  background-color: #050505 !important;
  background-image: none !important;
  color: #f5f5f4 !important;
  box-shadow: none !important;
}

html body:has(main.studio-user-project-room) main.studio-user-project-room.studio-user-minis-project-page {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #f5f5f4 !important;
  padding-top: 80px !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-console {
  padding-top: 0 !important;
}

@media (min-width: 1180px) {
  html body:has(main.studio-user-project-room) {
    --studio-user-project-wide-gutter: clamp(18px, 2.1vw, 40px);
    --studio-user-project-content-left: calc(var(--sidebar-rail-width, 74px) + var(--studio-user-project-wide-gutter));
  }

  html body:has(main.studio-user-project-room) main.studio-user-project-room.studio-user-minis-project-page,
  html body:has(main.studio-user-project-room) .studio-user-project-room {
    width: 100vw !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  html body:has(main.studio-user-project-room) main.studio-user-minis-project-page > .studio-user-minis-console,
  html body:has(main.studio-user-project-room) .studio-user-minis-console {
    width: calc(100vw - var(--studio-user-project-content-left) - var(--studio-user-project-wide-gutter)) !important;
    max-width: none !important;
    margin-right: var(--studio-user-project-wide-gutter) !important;
    margin-left: var(--studio-user-project-content-left) !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-photo-library {
    padding-right: 0;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-deliverables header,
  html body:has(main.studio-user-project-room) .studio-user-project-deliverable-list {
    max-width: min(1180px, 100%);
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status {
    max-width: min(960px, 100%);
  }
}

html body:has(main.studio-user-project-room) .site-sidebar.is-studio-console.studio-user-minis-sidebar,
html body:has(main.studio-user-project-room) .site-sidebar.is-studio-console.studio-user-minis-sidebar.is-desktop-expanded,
html body:has(main.studio-user-project-room) .site-sidebar.is-studio-console.studio-user-minis-sidebar.is-desktop-pinned,
html body:has(main.studio-user-project-room) .site-sidebar.is-studio-console.studio-user-minis-sidebar:not(.is-desktop-expanded) {
  width: var(--sidebar-rail-width) !important;
  min-width: var(--sidebar-rail-width) !important;
  max-width: var(--sidebar-rail-width) !important;
  padding: 20px 12px 18px !important;
  border-right-color: transparent !important;
  background: #000000 !important;
  background-color: #000000 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-nav {
  align-content: start;
  justify-items: center;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar :is(
  .sidebar-link,
  .sidebar-link-secondary
) {
  justify-content: center !important;
  padding-inline: 0 !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-link-label {
  display: none !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar button.sidebar-link {
  appearance: none;
  width: 100%;
  margin: 0;
  border-color: transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar.is-icon-rail .sidebar-studio-link {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 18px !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar.is-icon-rail .sidebar-link-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar :is(
  .sidebar-studio-link,
  .sidebar-link,
  .sidebar-link-secondary,
  .sidebar-link-icon,
  .sidebar-link-label,
  .sidebar-link-label span,
  .sidebar-link-label small
) {
  color: rgba(255, 255, 255, 0.68) !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-studio-link:is(:hover, :focus-visible),
html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-studio-link.is-active {
  background: #0a0a0a !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-studio-link:is(:hover, :focus-visible) :is(
  .sidebar-link-icon,
  .sidebar-link-label,
  .sidebar-link-label span,
  .sidebar-link-label small
),
html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-studio-link.is-active :is(
  .sidebar-link-icon,
  .sidebar-link-label,
  .sidebar-link-label span,
  .sidebar-link-label small
) {
  color: #ffffff !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-sidebar .sidebar-studio-link.is-active .sidebar-link-icon {
  background: #111111 !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar.admin-studio-topbar {
  --admin-studio-topbar-canvas: #080808;
  --admin-studio-topbar-text: #ffffff;
  --admin-studio-topbar-muted: rgba(255, 255, 255, 0.58);
  grid-template-columns: minmax(0, 1fr) minmax(260px, 580px) minmax(0, 1fr) !important;
  padding-right: max(var(--studio-minis-page-gutter, 22px), 22px) !important;
  border-color: transparent !important;
  background: rgba(0, 0, 0, 0.86) !important;
  background-color: rgba(0, 0, 0, 0.86) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(118%);
}

@media (min-width: 1180px) {
  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar.admin-studio-topbar {
    --admin-studio-topbar-gutter: clamp(18px, 2.1vw, 40px);
    padding-left: var(--admin-studio-topbar-gutter) !important;
    padding-right: var(--admin-studio-topbar-gutter) !important;
  }
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar :is(
  .studio-minis-room-heading,
  .studio-minis-room-heading strong,
  .studio-minis-room-back-button,
  .studio-user-minis-avatar
) {
  color: #ffffff !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-back-button {
  border: 0 !important;
  background: #0b0b0b !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-back-button:is(:hover, :focus-visible) {
  border: 0 !important;
  background: #151515 !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search {
  width: min(100%, 580px);
  grid-column: 2;
  justify-self: center;
  min-height: 44px;
  border: 0 !important;
  border-radius: 999px;
  background: #0b0b0b !important;
  box-shadow: none !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search > svg {
  color: rgba(255, 255, 255, 0.48) !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search input {
  color: #ffffff !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search input::placeholder {
  color: rgba(255, 255, 255, 0.44) !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search-clear {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.58);
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search-clear:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-user-minis-toolbar-actions {
  grid-column: 3;
  justify-self: end;
  margin-left: auto;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-profile-menu {
  justify-self: end;
}

html[data-theme="light"] body:has(main.studio-user-project-room.studio-minis-page:not(.is-mini-flow-workspace)),
html[data-theme="dark"] body:has(main.studio-user-project-room.studio-minis-page:not(.is-mini-flow-workspace)),
html body:has(main.studio-user-project-room.studio-minis-page:not(.is-mini-flow-workspace)) {
  color-scheme: dark;
  --studio-minis-canvas: #000000;
  --studio-minis-surface: #0a0a0a;
  --studio-minis-stage: #000000;
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  color: #f5f5f4 !important;
}

html[data-theme="light"] body:has(main.studio-user-project-room.admin-studio-page.studio-minis-page) .site-sidebar.is-studio-console.studio-user-minis-sidebar .sidebar-link.sidebar-studio-link.is-active .sidebar-link-icon,
html[data-theme="dark"] body:has(main.studio-user-project-room.admin-studio-page.studio-minis-page) .site-sidebar.is-studio-console.studio-user-minis-sidebar .sidebar-link.sidebar-studio-link.is-active .sidebar-link-icon,
html body:has(main.studio-user-project-room.admin-studio-page.studio-minis-page) .site-sidebar.is-studio-console.studio-user-minis-sidebar .sidebar-link.sidebar-studio-link.is-active .sidebar-link-icon {
  border-color: transparent !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-dock.admin-studio-flow-command-dock {
  border: 0 !important;
  background: #111111 !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.42) !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-dock.admin-studio-flow-command-dock.is-drop-active {
  border: 0 !important;
  background: #151515 !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-dock.admin-studio-flow-command-dock::before {
  display: none !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-form.admin-studio-flow-command-form textarea {
  background: transparent !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-form.admin-studio-flow-command-form.has-context {
  row-gap: 3px !important;
}

html body:has(main.studio-user-project-room) .studio-minis-quick-form.admin-studio-flow-command-form.has-context > textarea {
  min-height: 45px !important;
  padding-top: 3px !important;
  line-height: 1.28 !important;
}

html body:has(main.studio-user-project-room) .studio-user-command-story-context {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px 1px;
  color: rgba(255, 255, 255, 0.68);
}

html body:has(main.studio-user-project-room) .studio-user-command-story-context span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(152, 255, 196, 0.1);
  padding: 0 9px;
  color: rgba(203, 255, 225, 0.94);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-command-story-context small {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .admin-studio-flow-command-action-chip {
  border: 0 !important;
  background: #1a1a1a !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body:has(main.studio-user-project-room) .studio-user-command-free-preview {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: #ffc800;
  padding: 0 12px;
  color: #141006;
  font-size: 0.74rem;
  font-weight: 930;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.24),
    0 0 24px rgba(255, 200, 0, 0.18);
  cursor: pointer;
  animation: studio-user-free-preview-glow 2.2s ease-in-out infinite;
}

html body:has(main.studio-user-project-room) .studio-user-command-free-preview:disabled {
  cursor: wait;
  opacity: 0.64;
  animation: none;
}

html body:has(main.studio-user-project-room) .studio-user-command-free-preview.is-quota-closed {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  animation: none;
}

html body:has(main.studio-user-project-room) .studio-user-command-free-preview.is-quota-closed:disabled {
  cursor: not-allowed;
  opacity: 1;
}

html body:has(main.studio-user-project-room) .studio-user-command-free-preview:is(:hover, :focus-visible):not(:disabled) {
  background: #ffd84a;
  color: #100c04;
  outline: none;
  transform: translateY(-1px);
}

html body:has(main.studio-user-project-room) .studio-user-command-create-preview {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: #ffc800;
  padding: 0 13px;
  color: #141006;
  font-size: 0.74rem;
  font-weight: 930;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 200, 0, 0.24),
    0 14px 30px rgba(255, 200, 0, 0.18);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

html body:has(main.studio-user-project-room) .studio-user-command-create-preview:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  box-shadow: none;
}

html body:has(main.studio-user-project-room) .studio-user-command-create-preview:is(:hover, :focus-visible):not(:disabled) {
  background: #ffd84a;
  color: #100c04;
  outline: none;
  transform: translateY(-1px);
}

html body:has(main.studio-user-project-room) .studio-user-command-production {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0 12px;
  color: #080808;
  font-size: 0.74rem;
  font-weight: 930;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

html body:has(main.studio-user-project-room) .studio-user-command-production:disabled {
  cursor: wait;
  opacity: 0.64;
}

html body:has(main.studio-user-project-room) .studio-user-command-production:is(:hover, :focus-visible):not(:disabled) {
  background: #ffffff;
  color: #000000;
  outline: none;
  transform: translateY(-1px);
}

@keyframes studio-user-free-preview-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 200, 0, 0.2),
      0 0 18px rgba(255, 200, 0, 0.14);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 200, 0, 0.42),
      0 0 30px rgba(255, 200, 0, 0.32);
  }
}

html body:has(main.studio-user-project-room) .studio-user-project-command.admin-studio-flow-command-dock.is-submitting .admin-studio-flow-command-form,
html body:has(main.studio-user-project-room) .studio-user-project-command.admin-studio-flow-command-dock.is-submitting .studio-user-project-command-form {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body:has(main.studio-user-project-room) .studio-user-project-command-form :is(textarea, button, span):focus,
html body:has(main.studio-user-project-room) .studio-user-project-command-form :is(textarea, button, span):focus-visible {
  outline: 0 !important;
}

html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-heading {
  display: grid;
  grid-column: 1;
  grid-template-columns: 38px minmax(0, 1fr);
  width: min(100%, 360px);
  min-width: 0;
  max-width: 360px;
  overflow: visible;
  gap: 8px;
  justify-self: start;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  width: min(100%, 314px);
  min-width: 0;
  align-items: center;
  gap: 3px;
  overflow: visible;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu.is-editing {
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 314px);
}

html body:has(main.studio-user-project-room) .studio-user-project-title-text,
html body:has(main.studio-user-project-room) .studio-user-project-title-trigger,
html body:has(main.studio-user-project-room) .studio-user-project-title-form button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-text {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  padding: 0;
  text-align: left;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-text strong {
  display: block;
  width: 100%;
  max-width: 100% !important;
  overflow: hidden;
  color: #ffffff !important;
  font-size: 0.94rem !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-trigger {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
}

html body:has(main.studio-user-project-room) .studio-user-project-title-trigger:is(:hover, :focus-visible),
html body:has(main.studio-user-project-room) .studio-user-project-title-menu.is-open .studio-user-project-title-trigger {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 980px;
  margin: 2px 0 18px;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-step {
  appearance: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  min-height: 104px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.035);
  padding: 13px;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-step:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.052);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
  outline: none;
  transform: translateY(-1px);
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-step.is-complete {
  border-color: rgba(143, 255, 190, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(143, 255, 190, 0.13), transparent 38%),
    rgba(143, 255, 190, 0.045);
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-step.is-active {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.15), transparent 38%),
    rgba(255, 255, 255, 0.052);
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-index {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.78rem;
  font-weight: 920;
  line-height: 1;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-step.is-complete .studio-user-room-progress-index {
  background: linear-gradient(135deg, #8fffbf, #2ee687);
  color: #021a0c;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-copy small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.66rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-copy strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-room-progress-copy em {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 650;
  line-height: 1.3;
}

@media (max-width: 860px) {
  html body:has(main.studio-user-project-room) .studio-user-room-progress {
    grid-template-columns: minmax(0, 1fr);
  }

  html body:has(main.studio-user-project-room) .studio-user-room-progress-step {
    min-height: 86px;
  }
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables {
  display: grid;
  gap: 16px;
  padding: 10px 0 18px;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables header {
  display: grid;
  max-width: 920px;
  border: 1px solid rgba(143, 255, 190, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(143, 255, 190, 0.075), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.04);
  padding: 15px 16px;
  color: #ffffff;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables header div {
  display: grid;
  gap: 5px;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables header span {
  width: fit-content;
  border: 1px solid rgba(143, 255, 190, 0.18);
  border-radius: 999px;
  background: rgba(143, 255, 190, 0.1);
  padding: 5px 9px;
  color: rgba(210, 255, 226, 0.94);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables header strong {
  color: #ffffff;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.05;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverables header small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
  font-weight: 620;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
  gap: 14px;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.115);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(143, 255, 190, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.035);
  padding: 14px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-player {
  display: grid;
  min-height: min(58vh, 520px);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    #000000;
  overflow: hidden;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card video {
  width: min(100%, 285px);
  max-height: min(58vh, 520px);
  aspect-ratio: 9 / 16;
  justify-self: center;
  border-radius: 12px;
  background: #000000;
  object-fit: contain;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-info {
  position: relative;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: start;
  gap: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 8px;
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-info::before {
  content: "";
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, rgba(143, 255, 190, 0.62), transparent);
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(203, 255, 225, 0.72);
  font-size: 0.68rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card strong {
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.04;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-action-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-date {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.68rem;
  font-weight: 760;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card p {
  margin: 0;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.5;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card a {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  gap: 7px;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.78rem;
  font-weight: 840;
  text-decoration: none;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card a.studio-user-project-deliverable-download {
  border-color: rgba(255, 255, 255, 0.88);
  background: #ffffff;
  color: #111111;
  box-shadow: 0 14px 30px rgba(255, 255, 255, 0.12);
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card a.studio-user-project-deliverable-help {
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 760;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.22);
  text-underline-offset: 3px;
  box-shadow: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card a.studio-user-project-deliverable-help:is(:hover, :focus-visible) {
  color: rgba(255, 255, 255, 0.82);
  outline: none;
  text-decoration-color: rgba(255, 255, 255, 0.56);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 15px;
  max-width: 760px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.032);
  padding: 20px;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  list-style: none;
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop {
  justify-self: center;
  max-width: 860px;
  margin-inline: auto;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.026);
  overflow: hidden;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop .studio-user-project-order-status-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

html body:has(main.studio-user-project-room) .studio-user-project-production-loop {
  position: relative;
  grid-column: 1 / -1;
  width: calc(100% + 40px);
  aspect-ratio: 16 / 9;
  max-height: none;
  margin: -20px -20px 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.08), transparent 42%),
    #050505;
  justify-self: start;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.28);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop.is-ready-for-production,
html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop.is-in_production {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.026);
}

html body:has(main.studio-user-project-room) .studio-user-project-production-loop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-status {
  position: relative;
  display: grid;
  justify-self: center;
  width: min(100%, 860px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 200, 0, 0.12), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.024)),
    #080808;
  color: #ffffff;
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-status::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.055) 22%, transparent 46%);
  opacity: 0.7;
  transform: translateX(-110%);
  animation: studio-free-preview-production-sheen 4.6s ease-in-out infinite;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-status .studio-user-project-production-loop {
  justify-self: center;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-status .studio-user-project-production-loop video {
  object-fit: cover;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 22px;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-copy small {
  color: rgba(255, 200, 0, 0.9);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-copy strong {
  color: #ffffff;
  font-size: clamp(1.38rem, 4vw, 2.25rem);
  font-weight: 950;
  line-height: 1;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-copy p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.46;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 5px;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-step {
  display: inline-flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.72rem;
  font-weight: 880;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-step.is-ready {
  border-color: rgba(143, 255, 190, 0.2);
  background: rgba(143, 255, 190, 0.08);
  color: rgba(214, 255, 229, 0.88);
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-step.is-active {
  border-color: rgba(255, 200, 0, 0.24);
  background: rgba(255, 200, 0, 0.12);
  color: #ffe58c;
  box-shadow: 0 0 0 1px rgba(255, 200, 0, 0.08) inset;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-steps svg {
  flex: 0 0 auto;
}

html body:has(main.studio-user-project-room) .studio-user-free-preview-production-step.is-active svg {
  animation: spin 900ms linear infinite;
}

@keyframes studio-free-preview-production-sheen {
  0% {
    transform: translateX(-115%);
  }

  46%,
  100% {
    transform: translateX(115%);
  }
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-head::-webkit-details-marker {
  display: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-toggle {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.7);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 860;
  pointer-events: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-toggle .is-open {
  display: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-toggle .is-closed {
  display: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-toggle .is-open {
  display: inline;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-toggle svg {
  transition: transform 160ms ease;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-toggle svg {
  transform: rotate(180deg);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-toggle:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-summary {
  display: block;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
  font-weight: 710;
  line-height: 1.38;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-summary {
  display: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status:not([open]) {
  gap: 0;
  padding: 14px 16px;
  border-radius: 16px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status:not([open]) .studio-user-project-order-status-copy {
  gap: 4px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status:not([open]) .studio-user-project-order-status-copy strong {
  display: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status:not([open]) .studio-user-project-order-status-copy small {
  font-size: 0.68rem;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status:not([open]) .studio-user-project-order-status-summary {
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop:not([open]) {
  gap: 12px;
  padding: 16px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop:not([open]) .studio-user-project-production-loop {
  width: calc(100% + 32px);
  max-height: none;
  margin: -16px -16px 0;
  border-radius: 16px 16px 0 0;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop:not([open]) .studio-user-project-order-status-copy {
  gap: 5px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-paid,
html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-in_production {
  border-color: rgba(143, 255, 190, 0.16);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-needs-intake {
  border-color: rgba(251, 191, 36, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(251, 191, 36, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(251, 191, 36, 0.075), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.034);
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.05) inset,
    0 22px 58px rgba(0, 0, 0, 0.3);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-ready-for-production {
  border-color: rgba(143, 255, 190, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(143, 255, 190, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(143, 255, 190, 0.065), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.034);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-checkout-cancelled {
  border-color: rgba(251, 191, 36, 0.16);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.055), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-pending {
  border-color: rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
    rgba(255, 255, 255, 0.034);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-checkout-issue,
html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-cancelled,
html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-failed,
html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-refunded {
  border-color: rgba(251, 113, 133, 0.2);
  background:
    linear-gradient(135deg, rgba(251, 113, 133, 0.07), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status.is-checkout-success {
  border-color: rgba(143, 255, 190, 0.16);
  background:
    linear-gradient(135deg, rgba(143, 255, 190, 0.06), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.03);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy strong {
  color: #ffffff;
  max-width: 560px;
  font-size: clamp(1.28rem, 2.2vw, 1.86rem);
  font-weight: 940;
  letter-spacing: 0;
  line-height: 1.04;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy p,
html body:has(main.studio-user-project-room) .studio-user-project-order-status-details > p {
  max-width: 560px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.52;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-details {
  display: none;
  gap: 8px;
  min-width: 0;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: center;
  gap: 7px 12px;
  width: min(100%, 540px);
  margin-top: 13px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 3px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span {
  position: relative;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  padding: 0 11px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.72rem;
  font-weight: 790;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span.is-ready {
  border-color: rgba(143, 255, 190, 0.18);
  background:
    linear-gradient(180deg, rgba(143, 255, 190, 0.085), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.035);
  color: rgba(238, 255, 244, 0.9);
  box-shadow: inset 0 1px 0 rgba(143, 255, 190, 0.09);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span.is-needed {
  border-color: rgba(251, 191, 36, 0.26);
  background:
    linear-gradient(180deg, rgba(251, 191, 36, 0.14), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.035);
  color: rgba(254, 243, 199, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(254, 243, 199, 0.13),
    0 0 20px rgba(251, 191, 36, 0.1);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span.is-needed::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.2) 42%, transparent 68%);
  content: "";
  opacity: 0.62;
  transform: translateX(-120%);
  animation: studioUserStoryBasicShine 1900ms ease-in-out infinite;
  pointer-events: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span.is-recommended {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-notes > span svg {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(143, 255, 190, 0.14);
  color: rgba(143, 255, 190, 0.96);
  padding: 3px;
  stroke-width: 3;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a,
html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 880;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button {
  grid-column: 1 / -1;
  width: min(100%, 520px);
  min-height: 64px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.95), transparent 35%),
    linear-gradient(180deg, #ffffff, #e8e8e8);
  color: #050505;
  padding-inline: 24px;
  font-size: 1.02rem;
  font-weight: 960;
  letter-spacing: 0;
  box-shadow:
    0 24px 62px rgba(255, 255, 255, 0.16),
    0 18px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.76rem;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions .studio-user-project-checkout-subcopy {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
  font-weight: 690;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button svg {
  width: 16px;
  height: 16px;
  animation: spin 800ms linear infinite;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a:is(:hover, :focus-visible),
html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button:is(:hover, :focus-visible):not(:disabled) {
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a:is(:hover, :focus-visible) {
  color: rgba(255, 255, 255, 0.86);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button:is(:hover, :focus-visible):not(:disabled) {
  background:
    linear-gradient(180deg, #ffffff, #f3f3f3);
  box-shadow:
    0 28px 68px rgba(255, 255, 255, 0.2),
    0 20px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline,
.studio-orders-timeline {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-details,
html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-timeline,
.studio-orders-timeline {
  display: grid;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-status-details[hidden],
html body:has(main.studio-user-project-room) .studio-user-project-order-timeline[hidden] {
  display: none !important;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline li,
.studio-orders-timeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  opacity: 0.58;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline li > span,
.studio-orders-timeline li > span {
  display: inline-grid;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline li.is-complete > span,
.studio-orders-timeline li.is-complete > span {
  background: #8fffbf;
  box-shadow: 0 0 0 3px rgba(143, 255, 191, 0.08);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline li.is-current > span,
.studio-orders-timeline li.is-current > span {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.08);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline li.is-issue > span,
.studio-orders-timeline li.is-issue > span {
  background: #fb7185;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.08);
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline div,
.studio-orders-timeline div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline strong,
.studio-orders-timeline strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.68rem;
  font-weight: 760;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-order-timeline small,
.studio-orders-timeline small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.64rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-filter-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: min(42svh, 420px);
  place-content: center;
  padding: 48px 18px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

html body:has(main.studio-user-project-room) .studio-user-project-filter-empty > svg {
  width: 34px;
  height: 34px;
  color: rgba(255, 255, 255, 0.42);
}

html body:has(main.studio-user-project-room) .studio-user-project-filter-empty strong {
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 860;
  line-height: 1.18;
}

html body:has(main.studio-user-project-room) .studio-user-project-filter-empty p {
  max-width: 430px;
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.86rem;
  font-weight: 620;
  line-height: 1.5;
}

html body:has(main.studio-membership-page) {
  color-scheme: dark;
  background: #050505 !important;
}

html body:has(main.studio-membership-page) .studio-global-header {
  display: none !important;
}

html body:has(main.studio-membership-page) .studio-standalone-main {
  padding-top: 0 !important;
}

.studio-membership-page {
  min-height: 100svh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.055), transparent 34%),
    #050505;
  color: #ffffff;
}

.studio-membership-shell {
  display: grid;
  width: min(1040px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 100px 0 120px;
  gap: 26px;
}

.studio-membership-hero {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.studio-membership-hero > span {
  display: inline-grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.studio-membership-hero svg {
  width: 22px;
  height: 22px;
}

.studio-membership-hero h1 {
  max-width: 760px;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.2rem, 6vw, 5.8rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.96;
}

.studio-membership-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 1rem;
  line-height: 1.6;
}

.studio-membership-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 16px;
}

.studio-membership-card {
  display: grid;
  gap: 18px;
  align-content: start;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 22px;
}

.studio-membership-card small {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.78rem;
  font-weight: 760;
  text-transform: uppercase;
}

.studio-membership-card > strong {
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 880;
  line-height: 1.15;
}

.studio-membership-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.studio-membership-card dl div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-membership-card dt,
.studio-membership-card dd {
  margin: 0;
  font-size: 0.9rem;
}

.studio-membership-card dt {
  color: rgba(255, 255, 255, 0.5);
}

.studio-membership-card dd {
  color: #ffffff;
  font-weight: 760;
  text-align: right;
}

.studio-membership-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.94rem;
  line-height: 1.55;
}

.studio-membership-primary-action,
.studio-membership-portal-control button {
  display: inline-flex;
  min-height: 44px;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  padding: 0 20px;
  color: #111111;
  font-size: 0.9rem;
  font-weight: 840;
  text-decoration: none;
  cursor: pointer;
}

.studio-membership-portal-control {
  display: grid;
  gap: 8px;
}

.studio-membership-portal-control small {
  color: rgba(255, 138, 138, 0.88);
  font-size: 0.78rem;
  font-weight: 640;
  text-transform: none;
}

.studio-membership-portal-control button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.studio-membership-offers {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}

.studio-membership-offers-head {
  display: grid;
  max-width: 760px;
  gap: 10px;
}

.studio-membership-offers-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.studio-membership-offers-head p:not(.eyebrow) {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.98rem;
  line-height: 1.6;
}

.studio-membership-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.studio-membership-offer-card {
  display: grid;
  min-height: 312px;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.04);
}

.studio-membership-single-offer-card {
  max-width: 760px;
  min-height: 0;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

.studio-membership-offer-card small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.74rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-membership-offer-card > div {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.studio-membership-offer-card > div strong {
  color: #ffffff;
  font-size: 2.45rem;
  font-weight: 920;
  letter-spacing: 0;
  line-height: 0.95;
}

.studio-membership-offer-card > div span {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.86rem;
  font-weight: 760;
}

.studio-membership-offer-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 860;
  letter-spacing: 0;
  line-height: 1.18;
}

.studio-membership-offer-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.5;
}

.studio-membership-feature-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-membership-feature-list li {
  position: relative;
  padding-left: 18px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.88rem;
  line-height: 1.45;
}

.studio-membership-feature-list li::before {
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  content: "";
}

.studio-membership-offer-card a {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 840;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-membership-offer-card a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.24);
  background: #ffffff;
  color: #111111;
  outline: none;
  transform: translateY(-1px);
}

.studio-membership-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 1040px;
}

.studio-membership-process-step {
  display: grid;
  min-height: 210px;
  align-content: start;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.034)),
    rgba(255, 255, 255, 0.035);
}

.studio-membership-process-step > span {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  padding: 5px 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 840;
  letter-spacing: 0.08em;
  line-height: 1;
}

.studio-membership-process-step svg {
  width: 21px;
  height: 21px;
  color: rgba(255, 255, 255, 0.8);
}

.studio-membership-process-step strong {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.12;
}

.studio-membership-process-step p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.82rem;
  line-height: 1.5;
}

.studio-membership-commerce-note {
  max-width: 720px;
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.78rem;
  line-height: 1.55;
}

.studio-orders-list {
  display: grid;
  max-width: 920px;
  gap: 14px;
}

.studio-orders-page .studio-membership-shell {
  width: min(1360px, calc(100vw - 48px));
}

.studio-orders-gallery-shell {
  gap: clamp(18px, 2vw, 28px);
  padding-top: 86px;
}

.studio-orders-gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.studio-orders-gallery-head div {
  display: grid;
  gap: 8px;
}

.studio-orders-gallery-head h1 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.4rem, 6vw, 6.4rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 0.92;
}

.studio-orders-gallery-head p:not(.eyebrow) {
  max-width: 430px;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.9rem;
  font-weight: 660;
  line-height: 1.5;
  text-align: right;
}

.studio-orders-card-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}

.studio-orders-room-tile {
  isolation: isolate;
  min-height: 0;
  border-radius: 22px;
  background: #0d0d0d;
}

.studio-orders-room-tile.is-pending {
  outline: 1px solid rgba(251, 191, 36, 0.22);
  outline-offset: -1px;
}

.studio-orders-room-tile.is-active,
.studio-orders-room-tile.is-delivered {
  outline: 1px solid rgba(143, 255, 190, 0.18);
  outline-offset: -1px;
}

.studio-orders-room-tile.is-issue {
  outline: 1px solid rgba(251, 113, 133, 0.22);
  outline-offset: -1px;
}

.studio-orders-room-tile-link {
  grid-template-rows: auto minmax(74px, auto);
}

.studio-orders-room-media {
  aspect-ratio: 16 / 9;
}

.studio-orders-room-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  left: 14px;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.studio-orders-room-overlay > small:last-child {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1;
  backdrop-filter: blur(14px);
}

.studio-orders-room-overlay svg {
  width: 14px;
  height: 14px;
}

.studio-orders-room-copy {
  min-height: 82px;
  padding: 16px 20px 17px;
}

.studio-orders-room-copy small {
  white-space: normal;
}

.studio-orders-room-payment {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02)),
    #0d0d0d;
}

.studio-orders-room-payment > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.studio-orders-room-payment > div span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-orders-room-payment > div strong {
  color: #ffffff;
  font-size: clamp(1.18rem, 2vw, 1.58rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1;
}

.studio-orders-pay-button,
.studio-orders-open-button {
  appearance: none;
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #090909;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 16px 40px rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.studio-orders-pay-button:is(:hover, :focus-visible),
.studio-orders-open-button:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #050505;
  outline: none;
  box-shadow:
    0 20px 50px rgba(255, 255, 255, 0.12),
    0 18px 34px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

.studio-orders-pay-button:disabled {
  cursor: progress;
  opacity: 0.68;
  transform: none;
}

.studio-orders-pay-button.is-unavailable:disabled {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.64);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

.studio-orders-pay-button svg {
  animation: spin 800ms linear infinite;
}

.studio-orders-open-button {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
}

.studio-orders-open-button.is-primary {
  background: rgba(255, 255, 255, 0.94);
  color: #090909;
}

.studio-orders-empty-card {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 520px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
}

.studio-orders-empty-card > span {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.studio-orders-empty-card strong {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
}

.studio-orders-empty-card p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.88rem;
  line-height: 1.5;
}

.studio-orders-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 920px;
}

.studio-orders-summary-strip > div {
  display: grid;
  min-width: 0;
  min-height: 104px;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.studio-orders-summary-strip svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.58);
}

.studio-orders-summary-strip span {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 780;
  text-transform: uppercase;
}

.studio-orders-summary-strip strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1.35rem;
  font-weight: 920;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-orders-summary-strip > div.is-clear {
  border-color: rgba(143, 255, 190, 0.16);
  background: rgba(143, 255, 190, 0.06);
}

.studio-orders-summary-strip > div.is-issue {
  border-color: rgba(251, 113, 133, 0.22);
  background: rgba(251, 113, 133, 0.08);
}

.studio-orders-room-board,
.studio-orders-payment-history {
  display: grid;
  max-width: 920px;
  gap: 14px;
}

.studio-orders-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.studio-orders-section-head div {
  display: grid;
  gap: 5px;
}

.studio-orders-section-head span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-orders-section-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.22rem, 2.6vw, 2rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.04;
}

.studio-orders-section-head p {
  max-width: 420px;
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.82rem;
  font-weight: 640;
  line-height: 1.45;
  text-align: right;
}

.studio-orders-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.studio-orders-room-card {
  display: grid;
  min-width: 0;
  min-height: 286px;
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.045);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
}

.studio-orders-room-card.is-unreserved {
  border-color: rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(251, 191, 36, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.studio-orders-room-card.is-active,
.studio-orders-room-card.is-delivered {
  border-color: rgba(143, 255, 190, 0.16);
  background:
    linear-gradient(135deg, rgba(143, 255, 190, 0.062), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-room-card.is-pending {
  border-color: rgba(251, 191, 36, 0.2);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-room-card.is-issue {
  border-color: rgba(251, 113, 133, 0.2);
  background:
    linear-gradient(135deg, rgba(251, 113, 133, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.studio-orders-room-card > strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-orders-room-card > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.61);
  font-size: 0.84rem;
  line-height: 1.48;
}

.studio-orders-room-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.studio-orders-room-metrics span {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.72rem;
  font-weight: 780;
  line-height: 1;
}

.studio-orders-room-metrics svg {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.66);
}

.studio-orders-focus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  max-width: 920px;
  min-height: 156px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.studio-orders-focus-card.is-active,
.studio-orders-focus-card.is-delivered {
  border-color: rgba(143, 255, 190, 0.18);
  background:
    linear-gradient(135deg, rgba(143, 255, 190, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-focus-card.is-pending {
  border-color: rgba(251, 191, 36, 0.22);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.085), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-focus-card.is-unreserved {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.09), rgba(251, 191, 36, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-focus-card.is-issue {
  border-color: rgba(251, 113, 133, 0.22);
  background:
    linear-gradient(135deg, rgba(251, 113, 133, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.studio-orders-focus-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.studio-orders-focus-icon svg {
  width: 21px;
  height: 21px;
}

.studio-orders-focus-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.studio-orders-focus-copy > span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-orders-focus-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.18rem, 2vw, 1.72rem);
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1.05;
}

.studio-orders-focus-copy p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  line-height: 1.45;
}

.studio-orders-focus-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.studio-orders-focus-meta small {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1;
}

.studio-orders-focus-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.studio-orders-focus-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px;
}

.studio-orders-focus-steps li > span {
  display: inline-grid;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.studio-orders-focus-steps li.is-complete > span {
  background: #8fffbf;
  box-shadow: 0 0 0 4px rgba(143, 255, 190, 0.1);
}

.studio-orders-focus-steps li.is-current > span {
  background: #facc15;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.1);
}

.studio-orders-focus-steps li.is-issue > span {
  background: #fb7185;
  box-shadow: 0 0 0 4px rgba(251, 113, 133, 0.1);
}

.studio-orders-focus-steps div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.studio-orders-focus-steps strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  font-weight: 840;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-orders-focus-steps small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-orders-focus-actions {
  display: grid;
  justify-items: end;
  gap: 9px;
  min-width: 190px;
}

.studio-orders-card {
  min-height: 0;
  border-color: rgba(255, 255, 255, 0.095);
}

.studio-orders-card.is-active {
  border-color: rgba(143, 255, 190, 0.15);
  background:
    linear-gradient(135deg, rgba(143, 255, 190, 0.055), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

.studio-orders-card.is-delivered {
  border-color: rgba(143, 255, 190, 0.18);
}

.studio-orders-card.is-pending {
  border-color: rgba(251, 191, 36, 0.18);
  background:
    linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
}

.studio-orders-card.is-issue {
  border-color: rgba(251, 113, 133, 0.2);
  background:
    linear-gradient(135deg, rgba(251, 113, 133, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
}

.studio-orders-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.studio-orders-card-head span {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.studio-orders-status-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 27px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.72rem;
  font-weight: 860;
  line-height: 1;
  text-transform: uppercase;
}

.studio-orders-status-pill.is-active,
.studio-orders-status-pill.is-delivered {
  border-color: rgba(143, 255, 190, 0.17);
  background: rgba(143, 255, 190, 0.09);
  color: rgba(210, 255, 226, 0.92);
}

.studio-orders-status-pill.is-pending {
  border-color: rgba(251, 191, 36, 0.18);
  background: rgba(251, 191, 36, 0.1);
  color: rgba(254, 240, 138, 0.9);
}

.studio-orders-status-pill.is-unreserved {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.76);
}

.studio-orders-status-pill.is-issue {
  border-color: rgba(251, 113, 133, 0.2);
  background: rgba(251, 113, 133, 0.12);
  color: rgba(255, 228, 230, 0.94);
}

.studio-orders-card-meta,
.studio-orders-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.studio-orders-card-meta span {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 740;
  line-height: 1;
}

.studio-orders-next-step {
  display: grid;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.studio-orders-next-step span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.68rem;
  font-weight: 860;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.studio-orders-next-step strong {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.28;
}

.studio-orders-action-row {
  gap: 9px;
}

.studio-orders-checkout-control {
  display: inline-grid;
  width: fit-content;
  gap: 6px;
}

.studio-orders-checkout-control small {
  max-width: 320px;
  color: rgba(255, 138, 138, 0.88);
  font-size: 0.76rem;
  font-weight: 680;
  text-transform: none;
}

.studio-orders-checkout-control small.is-info {
  color: rgba(255, 255, 255, 0.48);
}

.studio-orders-primary-button {
  appearance: none;
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding-inline: 20px;
  box-shadow:
    0 18px 42px rgba(255, 255, 255, 0.1),
    0 12px 26px rgba(0, 0, 0, 0.24);
  transition:
    box-shadow 150ms ease,
    transform 150ms ease;
}

.studio-orders-primary-button svg {
  animation: spin 800ms linear infinite;
}

.studio-orders-primary-button:disabled {
  cursor: progress;
  opacity: 0.7;
}

.studio-orders-primary-button:is(:hover, :focus-visible):not(:disabled),
.studio-orders-secondary-action:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.studio-orders-secondary-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.studio-orders-secondary-action {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 820;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.studio-orders-service-note {
  max-width: 820px;
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.78rem;
  font-weight: 620;
  line-height: 1.55;
}

.studio-orders-care-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 920px;
}

.studio-orders-care-panel > div {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 8px;
  min-height: 160px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.studio-orders-care-panel svg {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.58);
}

.studio-orders-care-panel span {
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 880;
  line-height: 1.18;
}

.studio-orders-care-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.78rem;
  line-height: 1.5;
}

.studio-orders-care-panel a {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.74rem;
  font-weight: 820;
  text-decoration: none;
}

@media (max-width: 760px) {
  html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card,
  html body:has(main.studio-user-project-room) .studio-user-project-order-status,
  .studio-user-story-direction-card,
	  .studio-user-story-film-cta,
	  .studio-membership-grid,
	  .studio-membership-hero,
	  .studio-membership-offer-grid,
	  .studio-membership-process-grid,
	  .studio-orders-focus-card,
	  .studio-orders-focus-steps,
    .studio-orders-card-gallery,
    .studio-orders-room-grid,
	  .studio-orders-summary-strip,
    .studio-orders-care-panel {
	    grid-template-columns: 1fr;
	  }

  .studio-orders-gallery-head {
    display: grid;
    align-items: start;
  }

  .studio-orders-gallery-head p:not(.eyebrow) {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .studio-orders-section-head {
    display: grid;
    align-items: start;
  }

  .studio-orders-section-head p {
    max-width: none;
    text-align: left;
  }

  .studio-user-story-film-cta a,
  .studio-user-story-film-cta button {
    width: 100%;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions a,
	  html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions button,
	  .studio-orders-action-row,
	  .studio-orders-checkout-control,
    .studio-orders-pay-button,
    .studio-orders-open-button,
	  .studio-orders-secondary-action,
	  .studio-orders-primary-button {
	    width: 100%;
	  }

  .studio-orders-room-payment {
    display: grid;
    align-items: start;
  }

  .studio-orders-focus-card {
    justify-items: stretch;
  }

  .studio-orders-focus-icon {
    width: 42px;
    height: 42px;
  }

  .studio-orders-focus-actions {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .studio-user-story-basic-card {
    max-width: 100%;
  }

  .studio-user-story-direction-prompts,
  .studio-user-story-direction-footer {
    justify-content: flex-start;
  }

  .studio-user-story-direction-prompts button,
  .studio-user-story-direction-primary {
    min-height: 38px;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-deliverable-card video {
    width: min(100%, 280px);
    max-height: 58vh;
    justify-self: center;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status {
    gap: 11px;
    padding: 14px;
    border-radius: 14px;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop {
    padding: 12px;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-production-loop,
  html body:has(main.studio-user-project-room) .studio-user-project-order-status.has-production-loop:not([open]) .studio-user-project-production-loop {
    width: calc(100% + 24px);
    max-height: 170px;
    margin: -12px -12px 0;
    border-radius: 13px;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-head {
    align-items: center;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy {
    gap: 5px;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy small {
    font-size: 0.64rem;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-copy strong {
    font-size: clamp(1.04rem, 5.4vw, 1.34rem);
    line-height: 1.08;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-summary {
    display: block;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.75rem;
    font-weight: 710;
    line-height: 1.34;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-toggle {
    display: inline-flex;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-details,
  html body:has(main.studio-user-project-room) .studio-user-project-order-timeline {
    display: none;
    grid-template-columns: 1fr;
  }

  .studio-orders-timeline {
    grid-template-columns: 1fr;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-status-details,
  html body:has(main.studio-user-project-room) .studio-user-project-order-status[open] .studio-user-project-order-timeline {
    display: grid;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-order-status-actions {
    margin-top: 0;
  }

  .studio-membership-shell {
    width: min(100% - 28px, 1040px);
    padding-top: 82px;
  }
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 0;
  z-index: 260;
  display: grid;
  width: min(256px, calc(100vw - 120px));
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(30, 30, 30, 0.96), rgba(18, 18, 18, 0.96)),
    #151515;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(130%);
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel button {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1;
  text-align: left;
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel button.is-danger {
  color: #ff6b72;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel button.is-danger:is(:hover, :focus-visible) {
  background: rgba(255, 107, 114, 0.12);
  color: #ff7f86;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-form {
  display: inline-grid;
  grid-template-columns: minmax(112px, 1fr) 32px;
  width: 100%;
  max-width: 100%;
  align-items: center;
  gap: 6px;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-form input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 760;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-title-form input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

html body:has(main.studio-user-project-room) .studio-user-project-title-form button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

html body:has(main.studio-user-project-room) .studio-user-project-title-form button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel {
  position: fixed;
  top: 74px;
  left: clamp(86px, 8vw, 128px);
  z-index: 230;
  display: grid;
  width: min(390px, calc(100vw - 120px));
  max-height: min(560px, calc(100svh - 104px));
  overflow: auto;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(28, 28, 28, 0.96), rgba(12, 12, 12, 0.96)),
    #111111;
  color: #ffffff;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(22px) saturate(130%);
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header strong {
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 880;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header small,
html body:has(main.studio-user-project-room) .studio-user-project-trash-panel p,
html body:has(main.studio-user-project-room) .studio-user-project-trash-list article small {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.78rem;
  line-height: 1.35;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header button {
  appearance: none;
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-panel header button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list {
  display: grid;
  gap: 8px;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list article > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list article strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 820;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list article > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list button {
  appearance: none;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 820;
  cursor: pointer;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  outline: none;
}

html body:has(main.studio-user-project-room) .studio-user-project-trash-list button.is-danger {
  border-color: rgba(255, 107, 114, 0.18);
  background: rgba(255, 107, 114, 0.1);
  color: #ff7f86;
}

@media (max-width: 760px) {
  html body:has(main.studio-user-project-room) .studio-user-project-title-text,
  html body:has(main.studio-user-project-room) .studio-user-project-title-text strong {
    max-width: min(54vw, 250px) !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-title-menu-panel {
    left: auto;
    right: 0;
    width: min(250px, calc(100vw - 30px));
  }

  html body:has(main.studio-user-project-room) .studio-user-project-title-form {
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    width: min(72vw, 330px);
  }

  html body:has(main.studio-user-project-room) .studio-user-project-trash-panel {
    top: 74px;
    right: 14px;
    left: 14px;
    width: auto;
  }
}

/* Watson memory room entrance: Radaville-inspired arch portal with existing rituals preserved. */
.memorial-photo-private-sanctuary.is-watson-portal,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal {
  --watson-entry-cream: #fff7ec;
  --watson-entry-soft: rgba(255, 247, 236, 0.76);
  --watson-entry-muted: rgba(255, 247, 236, 0.48);
  --watson-entry-line: rgba(255, 247, 236, 0.16);
  --watson-entry-panel: rgba(255, 247, 236, 0.06);
  --watson-entry-panel-strong: rgba(255, 247, 236, 0.1);
  --watson-entry-ink: #090909;
  --watson-entry-display-font: "PPNeueWorld", "Libre Bodoni", "Bodoni 72", "Bodoni MT", Didot, "Times New Roman", serif;
  --watson-entry-sans-font: "PPNeueMontreal", Inter, var(--font-sans), "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  display: grid;
  min-height: calc(100svh - 52px);
  grid-template-areas:
    "portrait"
    "side";
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(18px, 2.8vh, 30px);
  align-content: start;
  overflow: visible;
  padding: clamp(70px, 8.5vh, 96px) clamp(18px, 5vw, 78px) clamp(38px, 7vh, 72px);
  background: #000000 !important;
  color: var(--watson-entry-cream);
  font-family: var(--watson-entry-sans-font);
}

.memorial-photo-private-sanctuary.is-watson-portal::before,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal::before {
  display: none !important;
}

.memorial-photo-private-sanctuary.is-watson-portal::after,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal::after {
  display: none !important;
}

.memorial-photo-watson-entry-mask {
  position: absolute;
  width: 0;
  height: 0;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-portrait {
  display: grid;
  max-width: min(100%, 980px);
  gap: clamp(12px, 1.7vw, 18px);
  justify-items: center;
  text-align: center;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-portrait::before {
  display: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell {
  position: relative;
  width: clamp(184px, 22.12vw, 246px);
  aspect-ratio: 196 / 420;
  overflow: visible;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell::before {
  display: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell::after {
  position: absolute;
  inset: 10% -16% -9%;
  border-radius: 999px 999px 8px 8px;
  background:
    linear-gradient(90deg, transparent, rgba(255, 247, 236, 0.08), transparent);
  content: "";
  filter: blur(18px);
  opacity: 0.76;
  pointer-events: none;
  z-index: -1;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #070605;
  border-radius: 999px 999px 2px 2px;
  box-shadow: 0 34px 92px rgba(0, 0, 0, 0.82);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 34%, rgba(0, 0, 0, 0.28)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 50%, rgba(0, 0, 0, 0.22));
  content: "";
  pointer-events: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal img,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal img {
  width: 135%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 59% 36%;
  padding: 0 !important;
  filter: saturate(0.98) contrast(1.05) brightness(0.92) !important;
  transform: translateX(-10%) scale(1.06);
  animation: memorialWatsonEntryImagePan 8.5s ease-in-out infinite alternate;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-name {
  position: relative;
  inset: auto;
  display: grid;
  width: min(100%, 860px);
  max-width: min(100%, 860px);
  gap: clamp(7px, 1vw, 10px);
  justify-items: center;
  pointer-events: auto;
}

.memorial-photo-private-sanctuary.is-watson-portal :where(
  .memorial-photo-private-sanctuary-name span,
  .memorial-photo-private-sanctuary-name p,
  .memorial-photo-private-sanctuary-side,
  .memorial-photo-private-sanctuary-line,
  .memorial-photo-watson-entry-daily-line,
  .memorial-photo-private-sanctuary-facts,
  .memorial-photo-private-sanctuary-date-input,
  .memorial-photo-private-sanctuary-place-select,
  .memorial-photo-private-sanctuary-actions
) {
  font-family: var(--watson-entry-sans-font);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-name span {
  color: rgba(255, 247, 236, 0.42);
  font-size: clamp(0.58rem, 0.74vw, 0.68rem);
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-name h1 {
  margin: 0;
  color: var(--watson-entry-cream);
  font-family: var(--watson-entry-display-font);
  font-size: clamp(3.2rem, 7.2vw, 7.4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.86;
  text-shadow:
    0 1px 0 rgba(181, 86, 32, 0.4),
    0 22px 58px rgba(0, 0, 0, 0.74);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-name p {
  max-width: min(100%, 620px);
  margin: 0;
  color: rgba(255, 247, 236, 0.72);
  font-size: clamp(0.82rem, 1vw, 0.98rem);
  font-weight: 560;
  line-height: 1.46;
}

.memorial-photo-watson-entry-enter {
  display: inline-flex;
  min-width: 118px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 247, 236, 0.86);
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.92);
  color: #0a0908;
  padding: 0 24px;
  font: inherit;
  font-family: var(--watson-entry-display-font);
  font-size: 0.92rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.memorial-photo-watson-entry-enter:is(:hover, :focus-visible) {
  border-color: #ffffff;
  background: #ffffff;
  color: #000000;
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-enter span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side {
  position: relative;
  z-index: 4;
  display: grid;
  width: min(100%, 1140px);
  max-width: 1140px;
  grid-template-areas:
    "heading heading heading"
    "treat line daily"
    "facts facts daily"
    "actions actions actions";
  grid-template-columns: minmax(170px, 0.6fr) minmax(280px, 1fr) minmax(300px, 1fr);
  gap: clamp(10px, 1.1vw, 14px);
  align-items: stretch;
  justify-self: center;
  border: 1px solid var(--watson-entry-line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 247, 236, 0.07), rgba(255, 247, 236, 0.03));
  color: var(--watson-entry-cream);
  margin: 0;
  padding: clamp(14px, 1.7vw, 20px);
  pointer-events: auto;
  text-align: left;
  backdrop-filter: blur(22px);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side-heading {
  display: grid;
  grid-area: heading;
  gap: 5px;
  max-width: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side-heading span,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line span,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-daily-line span,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts dt {
  color: rgba(255, 247, 236, 0.46) !important;
  font-size: 0.58rem;
  font-weight: 880;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side-heading strong {
  max-width: 100%;
  color: rgba(255, 247, 236, 0.82);
  font-family: var(--watson-entry-sans-font);
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.32;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat {
  grid-area: treat;
  width: 100%;
  min-height: 124px;
  border: 1px solid rgba(255, 247, 236, 0.2) !important;
  border-radius: 8px !important;
  background:
    linear-gradient(160deg, rgba(255, 247, 236, 0.15), rgba(255, 247, 236, 0.06) 58%, rgba(255, 247, 236, 0.035)) !important;
  color: var(--watson-entry-cream);
  box-shadow: none !important;
  transform: none !important;
  backdrop-filter: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat::before,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat::after {
  display: none !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat svg {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 247, 236, 0.18);
  border-radius: 999px;
  color: rgba(255, 247, 236, 0.76);
  padding: 7px;
  filter: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat span {
  color: rgba(255, 247, 236, 0.92);
  font-size: 0.72rem;
  letter-spacing: 0;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat small {
  color: rgba(255, 247, 236, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat:is(:hover, :focus-visible) {
  border-color: rgba(255, 247, 236, 0.42) !important;
  background: rgba(255, 247, 236, 0.16) !important;
  color: #ffffff;
  outline: none;
  transform: translateY(-1px) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat.is-kept,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-treat.is-kept {
  border-color: rgba(255, 247, 236, 0.44) !important;
  background: rgba(255, 247, 236, 0.18) !important;
  color: #ffffff;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line {
  grid-area: line;
  width: 100%;
  min-height: 124px;
  justify-self: stretch;
  gap: 8px;
  border: 1px solid var(--watson-entry-line);
  border-radius: 8px;
  background: var(--watson-entry-panel);
  padding: 12px;
  text-align: left;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line span {
  justify-content: flex-start;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line textarea,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-daily-line textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255, 247, 236, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 247, 236, 0.9);
  padding: 10px;
  font: inherit;
  font-family: var(--watson-entry-sans-font);
  font-size: 0.84rem;
  font-weight: 560;
  line-height: 1.42;
  resize: none;
  text-align: left;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line textarea::placeholder,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-daily-line textarea::placeholder {
  color: rgba(255, 247, 236, 0.36);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line textarea:focus-visible,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-daily-line textarea:focus-visible {
  border-color: rgba(255, 247, 236, 0.52);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 247, 236, 0.08);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-line small {
  display: block;
  color: rgba(255, 247, 236, 0.38);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.28;
}

.memorial-photo-watson-entry-daily-line {
  display: grid;
  grid-area: daily;
  gap: 10px;
  border: 1px solid var(--watson-entry-line);
  border-radius: 8px;
  background: var(--watson-entry-panel);
  padding: 12px;
}

.memorial-photo-watson-entry-daily-line label {
  display: grid;
  gap: 8px;
}

.memorial-photo-watson-entry-daily-line > div {
  display: grid;
  gap: 8px;
}

.memorial-photo-watson-entry-daily-line button,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-actions a {
  display: inline-flex;
  width: fit-content;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 247, 236, 0.18);
  border-radius: 8px;
  background: rgba(255, 247, 236, 0.09);
  color: rgba(255, 247, 236, 0.88);
  padding: 0 12px;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 820;
  text-decoration: none;
  cursor: pointer;
}

.memorial-photo-watson-entry-daily-line button:is(:hover, :focus-visible),
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-actions a:is(:hover, :focus-visible) {
  border-color: rgba(255, 247, 236, 0.42);
  background: rgba(255, 247, 236, 0.15);
  color: #ffffff;
  outline: none;
}

.memorial-photo-watson-entry-daily-line small {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 247, 236, 0.42);
  font-size: 0.7rem;
  font-weight: 620;
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.memorial-photo-watson-entry-daily-line.has-saved {
  border-color: rgba(255, 247, 236, 0.3);
  background: rgba(255, 247, 236, 0.09);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts {
  grid-area: facts;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  perspective: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div {
  min-height: 112px;
  align-content: start;
  border: 1px solid var(--watson-entry-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 247, 236, 0.055) !important;
  box-shadow: none !important;
  padding: 12px;
  transform: none !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div::before,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div::after {
  display: none !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts dd,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-date-value,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts dd,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts .memorial-photo-private-sanctuary-date-value {
  color: rgba(255, 247, 236, 0.88) !important;
  text-shadow: none;
  transform: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-date-value {
  font-size: clamp(0.92rem, 1.08vw, 1.08rem);
  letter-spacing: 0;
  line-height: 1.12;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts small {
  max-width: none;
  color: rgba(255, 247, 236, 0.38) !important;
  font-size: 0.66rem;
  letter-spacing: 0;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-date-input,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-place-select,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts .memorial-photo-private-sanctuary-place-select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255, 247, 236, 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 247, 236, 0.74);
  color-scheme: dark;
  opacity: 1;
  padding: 6px 8px;
  pointer-events: auto;
  transform: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-place-select {
  overflow: hidden;
  font-size: 0.56rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-date-input:focus-visible,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-place-select:focus-visible {
  border-color: rgba(255, 247, 236, 0.52);
  color: #ffffff;
  outline: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-actions {
  display: flex;
  grid-area: actions;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-memory-list,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-story {
  display: none;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side.memorial-photo-watson-memory-deck,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side.memorial-photo-watson-memory-deck {
  width: min(100%, 1180px);
  max-width: 1180px;
  grid-template-areas:
    "stack"
    "ruler";
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(14px, 2vw, 22px);
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-top: clamp(12px, 3vh, 36px);
  padding: 0;
  backdrop-filter: none;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-side-heading {
  display: grid;
  justify-items: center;
  text-align: center;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-side-heading strong {
  max-width: min(100%, 680px);
}

.memorial-photo-watson-deck-chrome {
  display: grid;
  grid-area: chrome;
  grid-template-columns: minmax(90px, 0.7fr) minmax(0, 1fr) minmax(90px, 0.7fr);
  gap: 16px;
  align-items: start;
  color: rgba(255, 247, 236, 0.72);
  font-size: clamp(0.72rem, 0.88vw, 0.88rem);
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.05;
}

.memorial-photo-watson-deck-chrome span:nth-child(2) {
  justify-self: center;
}

.memorial-photo-watson-deck-chrome span:last-child {
  justify-self: end;
}

.memorial-photo-watson-deck-stack {
  --watson-deck-card-bottom: clamp(36px, 6svh, 72px);
  --watson-deck-card-top: 84px;
  display: block;
  grid-area: stack;
  width: 100%;
  min-height: 0;
  scroll-snap-type: y mandatory;
}

.memorial-photo-watson-deck-snap-point {
  display: block;
  width: 100%;
  height: 0;
  scroll-margin-top: var(--watson-deck-card-top);
}

.memorial-photo-watson-deck-card {
  position: sticky;
  top: var(--watson-deck-card-top);
  isolation: isolate;
  display: grid;
  height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
  min-height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.08));
  border-radius: 0;
  background: var(--watson-card-tone, #2c211d);
  color: var(--watson-card-ink, var(--watson-entry-cream));
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 247, 236, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  margin-bottom: var(--watson-deck-card-bottom);
  opacity: 1;
  scroll-snap-align: start;
  transform: none;
  transition: border-color 220ms ease, box-shadow 220ms ease;
  width: 100%;
}

.memorial-photo-watson-deck-card.is-treat {
  z-index: 1;
}

.memorial-photo-watson-deck-card.is-dates {
  z-index: 2;
}

.memorial-photo-watson-deck-card.is-lines {
  z-index: 3;
}

.memorial-photo-watson-deck-card.is-story {
  z-index: 4;
}

.memorial-photo-watson-deck-card.is-photos {
  z-index: 5;
}

.memorial-photo-watson-deck-card.is-photo-album {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.58fr);
}

.memorial-photo-watson-deck-image {
  position: relative;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #080604;
}

.memorial-photo-watson-deck-image::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 58%, rgba(0, 0, 0, 0.38)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 44%, rgba(0, 0, 0, 0.16));
  content: "";
  pointer-events: none;
}

.memorial-photo-watson-deck-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.92) contrast(1.04) brightness(0.88);
}

.memorial-photo-watson-deck-copy {
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.25vw, 16px);
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.18), rgba(80, 48, 34, 0.07)),
    var(--watson-card-tone, #2c211d);
  padding: clamp(22px, 3vw, 42px);
}

.memorial-photo-watson-deck-card:not(.is-photo-album) .memorial-photo-watson-deck-copy {
  min-height: 100%;
  align-content: center;
  justify-items: start;
}

.memorial-photo-watson-photo-mosaic {
  display: grid;
  height: 100%;
  min-height: 100%;
  grid-auto-flow: dense;
  grid-auto-rows: minmax(76px, 1fr);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  background: #050505;
  padding: 3px;
}

.memorial-photo-watson-photo-mosaic button {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(255, 247, 236, 0.06);
  padding: 0;
  cursor: pointer;
}

.memorial-photo-watson-photo-mosaic button:is(:hover, :focus-visible) {
  outline: 2px solid rgba(255, 247, 236, 0.9);
  outline-offset: -2px;
}

.memorial-photo-watson-photo-mosaic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04) brightness(0.88);
  transition: filter 160ms ease, transform 180ms ease;
}

.memorial-photo-watson-photo-mosaic button:is(:hover, :focus-visible) img {
  filter: saturate(1) contrast(1.08) brightness(0.98);
  transform: scale(1.035);
}

.memorial-photo-watson-photo-mosaic .is-tile-1,
.memorial-photo-watson-photo-mosaic .is-tile-7 {
  grid-column: span 2;
  grid-row: span 2;
}

.memorial-photo-watson-photo-mosaic .is-tile-2,
.memorial-photo-watson-photo-mosaic .is-tile-6,
.memorial-photo-watson-photo-mosaic .is-tile-9 {
  grid-row: span 2;
}

.memorial-photo-watson-photo-mosaic .is-tile-4,
.memorial-photo-watson-photo-mosaic .is-tile-8 {
  grid-column: span 2;
}

.memorial-photo-watson-deck-copy > span,
.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-side-heading span,
.memorial-photo-watson-deck-copy :where(.memorial-photo-private-sanctuary-line span, .memorial-photo-watson-entry-daily-line span, .memorial-photo-private-sanctuary-facts dt) {
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.56)) !important;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.memorial-photo-watson-deck-copy h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.96));
  font-family: var(--watson-entry-display-font);
  font-size: clamp(2.35rem, 4.7vw, 5rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.86;
  text-wrap: balance;
}

.memorial-photo-watson-deck-copy p {
  max-width: 34ch;
  margin: 0;
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.74));
  font-size: clamp(0.85rem, 1vw, 0.98rem);
  font-weight: 620;
  line-height: 1.42;
}

.memorial-photo-watson-deck-note {
  max-width: 42ch !important;
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.58)) !important;
  font-size: clamp(0.76rem, 0.88vw, 0.86rem) !important;
  font-weight: 620 !important;
}

.memorial-photo-watson-deck-status-row,
.memorial-photo-watson-deck-photo-meta {
  display: grid;
  width: min(100%, 470px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.18));
  border-bottom: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.12));
}

.memorial-photo-watson-deck-status-row > span,
.memorial-photo-watson-deck-photo-meta > span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px 12px 0;
}

.memorial-photo-watson-deck-status-row > span + span,
.memorial-photo-watson-deck-photo-meta > span + span {
  border-left: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.12));
  padding-left: 14px;
}

.memorial-photo-watson-deck-status-row strong,
.memorial-photo-watson-deck-photo-meta strong,
.memorial-photo-watson-deck-lifeline strong,
.memorial-photo-watson-deck-story-strip strong,
.memorial-photo-watson-deck-saved-line strong {
  min-width: 0;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.96));
  font-size: clamp(1rem, 1.3vw, 1.28rem);
  font-weight: 900;
  line-height: 1.08;
}

.memorial-photo-watson-deck-status-row small,
.memorial-photo-watson-deck-photo-meta small,
.memorial-photo-watson-deck-lifeline span,
.memorial-photo-watson-deck-story-strip small,
.memorial-photo-watson-deck-saved-line span {
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.56));
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.25;
  text-transform: uppercase;
}

.memorial-photo-watson-deck-lifeline,
.memorial-photo-watson-deck-story-strip,
.memorial-photo-watson-deck-saved-line {
  display: grid;
  width: min(100%, 470px);
  gap: 8px;
  border-left: 3px solid var(--watson-card-accent, rgba(255, 247, 236, 0.32));
  background: linear-gradient(90deg, var(--watson-card-panel-strong, rgba(255, 247, 236, 0.1)), rgba(255, 255, 255, 0.08));
  padding: 13px 16px;
}

.memorial-photo-watson-deck-story-strip {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.memorial-photo-watson-deck-story-strip svg {
  color: var(--watson-card-accent, rgba(255, 247, 236, 0.76));
}

.memorial-photo-watson-deck-saved-line strong {
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.78));
  font-size: clamp(0.9rem, 1vw, 1rem);
  font-weight: 720;
  line-height: 1.38;
}

.memorial-photo-watson-deck-prompt-row,
.memorial-photo-watson-deck-cues {
  display: flex;
  max-width: min(100%, 470px);
  flex-wrap: wrap;
  gap: 8px;
}

.memorial-photo-watson-deck-prompt-row button,
.memorial-photo-watson-deck-cues span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.2));
  border-radius: 999px;
  background: var(--watson-card-panel, rgba(255, 247, 236, 0.08));
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.8));
  padding: 0 11px;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 820;
  line-height: 1;
}

.memorial-photo-watson-deck-prompt-row button {
  cursor: pointer;
}

.memorial-photo-watson-deck-prompt-row button:is(:hover, :focus-visible) {
  border-color: var(--watson-card-accent, rgba(255, 247, 236, 0.48));
  background: var(--watson-card-panel-strong, rgba(255, 247, 236, 0.16));
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.96));
  outline: none;
}

.memorial-photo-watson-deck-cues span {
  border-color: var(--watson-card-line, rgba(255, 247, 236, 0.16));
  background: transparent;
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.64));
  text-transform: uppercase;
}

.memorial-photo-watson-deck-action,
.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-actions a,
.memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line button {
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.34));
  border-radius: 999px;
  background: var(--watson-card-panel, rgba(255, 247, 236, 0.1));
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.92));
  padding: 0 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
}

.memorial-photo-watson-deck-action:is(:hover, :focus-visible),
.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-actions a:is(:hover, :focus-visible),
.memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line button:is(:hover, :focus-visible) {
  border-color: var(--watson-card-accent, rgba(255, 247, 236, 0.62));
  background: var(--watson-card-panel-strong, rgba(255, 247, 236, 0.18));
  color: var(--watson-card-ink, #ffffff);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-treat,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-treat {
  width: min(100%, 280px);
  min-height: 132px;
  justify-self: start;
  border-color: var(--watson-card-line, rgba(255, 247, 236, 0.24)) !important;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.5), transparent 28%),
    linear-gradient(160deg, var(--watson-card-panel-strong, rgba(255, 247, 236, 0.18)), rgba(255, 255, 255, 0.08) 70%) !important;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.92)) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-line,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line {
  grid-area: auto;
  order: initial;
  width: min(100%, 430px);
  min-height: 0;
  justify-self: start;
  border-color: var(--watson-card-line, rgba(255, 247, 236, 0.18));
  background: var(--watson-card-panel, rgba(0, 0, 0, 0.18));
  padding: 12px;
  text-align: left;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-line span {
  justify-content: flex-start;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-line textarea,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line textarea {
  min-height: 66px;
  background: rgba(255, 255, 255, 0.24);
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.9));
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-line textarea::placeholder,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line textarea::placeholder {
  color: color-mix(in srgb, var(--watson-card-muted, rgba(45, 33, 27, 0.52)) 72%, transparent);
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-line small,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-watson-entry-daily-line small {
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.42));
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-treat :where(svg, span) {
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.9)) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-treat small {
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.58)) !important;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts {
  width: min(100%, 470px);
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts div,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts div {
  min-height: 94px;
  border-color: var(--watson-card-line, rgba(0, 0, 0, 0.16)) !important;
  background: var(--watson-card-panel, rgba(0, 0, 0, 0.16)) !important;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.9)) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts :where(dt, dd, small, .memorial-photo-private-sanctuary-date-value),
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts :where(dt, dd, small, .memorial-photo-private-sanctuary-date-value) {
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.9)) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts :where(dt, small),
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-facts :where(dt, small) {
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.56)) !important;
}

.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-date-input,
.memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-place-select,
.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-place-select {
  border-color: var(--watson-card-line, rgba(0, 0, 0, 0.14)) !important;
  background: rgba(255, 255, 255, 0.34) !important;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.9)) !important;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-actions {
  justify-content: flex-start;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-memory-list {
  display: grid;
  width: min(100%, 460px);
  gap: 8px;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-memory-list div {
  border: 1px solid var(--watson-card-line, rgba(255, 247, 236, 0.16));
  border-radius: 8px;
  background: var(--watson-card-panel, rgba(0, 0, 0, 0.16));
  padding: 10px 12px;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-memory-list span {
  display: block;
  margin-bottom: 4px;
  color: var(--watson-card-muted, rgba(255, 247, 236, 0.48));
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.memorial-photo-watson-memory-deck .memorial-photo-private-sanctuary-memory-list p {
  margin: 0;
  color: var(--watson-card-ink, rgba(255, 247, 236, 0.78));
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.36;
}

.memorial-photo-watson-deck-ruler {
  display: grid;
  grid-area: ruler;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  color: rgba(255, 247, 236, 0.5);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.memorial-photo-watson-deck-ruler span {
  position: relative;
  padding-top: 12px;
}

.memorial-photo-watson-deck-ruler span::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 247, 236, 0.38) 0 1px, transparent 1px 8px);
  content: "";
}

body:has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock {
  bottom: max(-58px, calc(env(safe-area-inset-bottom) - 58px)) !important;
  width: min(430px, calc(100vw - 40px)) !important;
  opacity: 0.38 !important;
  transform: translateX(-50%) scale(0.92) !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)):has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock {
  bottom: max(-58px, calc(env(safe-area-inset-bottom) - 58px)) !important;
  width: min(430px, calc(100vw - 40px)) !important;
  opacity: 0.38 !important;
  transform: translateX(-50%) scale(0.92) !important;
}

body:has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:is(:hover, :focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:has(.memorial-command-status),
body:has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:has(.memorial-command-add-menu) {
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(540px, calc(100vw - 40px)) !important;
  opacity: 0.98 !important;
  transform: translateX(-50%) scale(1) !important;
}

body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)):has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:is(:hover, :focus-within, .has-tray-items, .is-drop-active, .is-submitting),
body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)):has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:has(.memorial-command-status),
body:has(.memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode)):has(.memorial-photo-private-sanctuary.is-watson-portal) .memorial-ai-command-dock:has(.memorial-command-add-menu) {
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  width: min(540px, calc(100vw - 40px)) !important;
  opacity: 0.98 !important;
  transform: translateX(-50%) scale(1) !important;
}

@keyframes memorialWatsonEntryImagePan {
  from {
    object-position: 55% 36%;
    transform: translateX(-7%) scale(1.07);
  }

  to {
    object-position: 66% 36%;
    transform: translateX(-15%) scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal img {
    animation: none;
  }
}

@media (max-width: 960px) {
  .memorial-photo-private-sanctuary.is-watson-portal,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal {
    gap: 20px;
    padding: clamp(68px, 10vh, 86px) 16px clamp(32px, 6vh, 56px);
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side {
    grid-template-areas:
      "heading"
      "treat"
      "line"
      "daily"
      "facts"
      "actions";
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 680px);
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side.memorial-photo-watson-memory-deck,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side.memorial-photo-watson-memory-deck {
    width: min(100%, 760px);
    grid-template-areas:
      "stack"
      "ruler";
  }

  .memorial-photo-watson-deck-stack {
    --watson-deck-card-bottom: clamp(28px, 5svh, 56px);
    --watson-deck-card-top: 82px;
  }

  .memorial-photo-watson-deck-card {
    top: var(--watson-deck-card-top);
    height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
    min-height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-bottom: var(--watson-deck-card-bottom);
  }

  .memorial-photo-watson-deck-card.is-photo-album {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(190px, 42%) minmax(0, 1fr);
  }

  .memorial-photo-watson-deck-image img {
    min-height: 100%;
  }

  .memorial-photo-watson-deck-copy {
    align-content: start;
  }

  .memorial-photo-watson-photo-mosaic {
    min-height: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .memorial-photo-watson-deck-copy h2 {
    max-width: 12ch;
    font-size: clamp(2.5rem, 11vw, 5rem);
  }
}

@media (max-width: 620px) {
  .memorial-photo-private-sanctuary.is-watson-portal,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal {
    min-height: auto;
    padding: 72px 14px 34px;
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-watson-entry-portal-shell {
    width: clamp(156px, 44vw, 190px);
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-name h1 {
    font-size: clamp(3rem, 17vw, 5.4rem);
  }

  .memorial-photo-watson-entry-enter {
    min-width: 108px;
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-side {
    padding: 12px;
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div,
  .memorial-photo-viewer-page.is-public-memory-room:not(.has-admin-edit-mode) .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-facts div {
    min-height: auto;
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-actions {
    justify-content: stretch;
  }

  .memorial-photo-private-sanctuary.is-watson-portal .memorial-photo-private-sanctuary-actions a,
  .memorial-photo-watson-entry-daily-line button {
    width: 100%;
  }

  .memorial-photo-watson-deck-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .memorial-photo-watson-deck-chrome span:nth-child(2) {
    display: none;
  }

  .memorial-photo-watson-deck-stack {
    --watson-deck-card-bottom: clamp(24px, 4svh, 44px);
    --watson-deck-card-top: 76px;
  }

  .memorial-photo-watson-deck-card {
    top: var(--watson-deck-card-top);
    height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
    min-height: calc(100svh - var(--watson-deck-card-top) - var(--watson-deck-card-bottom));
    grid-template-rows: none;
    margin-bottom: var(--watson-deck-card-bottom);
  }

  .memorial-photo-watson-deck-card.is-photo-album {
    grid-template-rows: minmax(170px, 38%) minmax(0, 1fr);
  }

  .memorial-photo-watson-deck-copy {
    padding: 18px;
  }

  .memorial-photo-watson-deck-copy h2 {
    font-size: clamp(2.25rem, 14vw, 4rem);
  }

  .memorial-photo-watson-deck-status-row,
  .memorial-photo-watson-deck-photo-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .memorial-photo-watson-deck-status-row > span,
  .memorial-photo-watson-deck-photo-meta > span {
    padding: 10px 0;
  }

  .memorial-photo-watson-deck-status-row > span + span,
  .memorial-photo-watson-deck-photo-meta > span + span {
    border-top: 1px solid rgba(255, 247, 236, 0.12);
    border-left: 0;
    padding-left: 0;
  }

  .memorial-photo-watson-deck-lifeline,
  .memorial-photo-watson-deck-story-strip,
  .memorial-photo-watson-deck-saved-line {
    padding: 11px 13px;
  }

  .memorial-photo-watson-deck-prompt-row button,
  .memorial-photo-watson-deck-cues span {
    min-height: 32px;
    font-size: 0.68rem;
  }

  .memorial-photo-watson-photo-mosaic {
    grid-auto-rows: minmax(54px, 1fr);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Memorial room topbar follows the admin/studio sizing rhythm while keeping Watson colors. */
.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-top {
  grid-template-columns: minmax(44px, 52px) minmax(128px, 280px) minmax(0, 1fr);
  gap: 12px;
  min-height: 64px;
  padding: 10px max(22px, 2.4vw);
  border: 0;
  background: rgba(0, 0, 0, 0.94) !important;
  color: rgba(255, 247, 236, 0.88);
  font-family: "PPNeueMontreal", Inter, var(--font-sans), "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  box-shadow:
    0 1px 0 rgba(255, 247, 236, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.36) !important;
  backdrop-filter: blur(18px) saturate(140%);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-viewer-icon.is-back {
  width: 44px;
  height: 44px;
  border: 0 !important;
  background: rgba(255, 247, 236, 0.09) !important;
  color: rgba(255, 247, 236, 0.84);
  box-shadow: none !important;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-viewer-icon.is-back svg {
  width: 21px;
  height: 21px;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-search {
  width: fit-content;
  max-width: min(280px, 100%);
  min-height: 44px;
  gap: 9px;
  border: 1px solid rgba(255, 247, 236, 0.12) !important;
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.08) !important;
  color: rgba(255, 247, 236, 0.82);
  padding: 0 14px 0 9px;
  box-shadow: none !important;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-topbar-glyph {
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 247, 236, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 247, 236, 0.13), rgba(255, 247, 236, 0.055));
  color: currentColor;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-topbar-glyph svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-search .memorial-photo-topbar-glyph {
  color: rgba(255, 247, 236, 0.9);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-topbar-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-search .memorial-photo-topbar-label {
  max-width: 16ch;
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions {
  gap: 8px;
  justify-self: end;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions :where(button, a) {
  min-height: 44px;
  gap: 9px;
  border: 1px solid rgba(255, 247, 236, 0.12) !important;
  border-radius: 999px;
  background: rgba(255, 247, 236, 0.08) !important;
  color: rgba(255, 247, 236, 0.84);
  padding: 0 14px 0 8px;
  font-size: 0.82rem;
  font-weight: 880;
  line-height: 1;
  box-shadow: none !important;
  backdrop-filter: none;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions button .memorial-photo-topbar-glyph {
  color: rgba(202, 222, 255, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions a[href="#memorial-photo-today"] .memorial-photo-topbar-glyph {
  color: rgba(255, 205, 151, 0.96);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions a[href*="/comfort"] .memorial-photo-topbar-glyph {
  color: rgba(255, 247, 236, 0.94);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions .memorial-photo-topbar-label {
  letter-spacing: 0;
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) :where(
  .memorial-photo-viewer-icon.is-back,
  .memorial-photo-public-actions button,
  .memorial-photo-public-actions a
):is(:hover, :focus-visible) {
  background: rgba(255, 247, 236, 0.18) !important;
  color: rgba(255, 255, 255, 0.96);
  outline: none;
  transform: translateY(-1px);
}

.memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) :where(
  .memorial-photo-library-search,
  .memorial-photo-public-actions button,
  .memorial-photo-public-actions a
):is(:hover, :focus-visible) .memorial-photo-topbar-glyph {
  border-color: rgba(255, 247, 236, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 247, 236, 0.2), rgba(255, 247, 236, 0.085));
}

@media (max-width: 760px) {
  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-top {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 60px;
    padding: 8px 12px;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-library-search {
    max-width: 100%;
    min-height: 42px;
    padding: 0 12px;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions {
    gap: 6px;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions :where(button, a) {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions .memorial-photo-topbar-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .memorial-photo-viewer-page.is-public-memory-room.is-library:not(.has-admin-edit-mode) .memorial-photo-public-actions .memorial-photo-topbar-glyph {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }
}

.admin-studio-free-preview-quota-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(1180px, calc(100vw - 42px));
  margin: 18px auto 24px;
}

.admin-studio-free-preview-quota-summary article {
  display: grid;
  gap: 7px;
  min-height: 112px;
  align-content: center;
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 247, 0.82));
  padding: 18px;
  color: var(--foreground);
  box-shadow: none;
}

.admin-studio-free-preview-quota-summary article.is-warning {
  border-color: rgba(154, 101, 0, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.16), rgba(255, 255, 255, 0.82));
}

.admin-studio-free-preview-quota-summary span,
.admin-studio-free-preview-quota-summary small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.admin-studio-free-preview-quota-summary strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2vw, 2.05rem);
  font-weight: 930;
  letter-spacing: 0;
  line-height: 1;
}

html[data-theme="dark"] .admin-studio-free-preview-quota-summary article {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .admin-studio-free-preview-quota-summary article.is-warning {
  border-color: rgba(255, 200, 0, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.12), rgba(255, 255, 255, 0.035));
}

html[data-theme="dark"] .admin-studio-free-preview-quota-summary span,
html[data-theme="dark"] .admin-studio-free-preview-quota-summary small {
  color: rgba(255, 255, 255, 0.56);
}

html[data-theme="dark"] .admin-studio-free-preview-quota-summary strong {
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 760px) {
  .admin-studio-free-preview-quota-summary {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    margin-top: 14px;
  }
}

/* Studio launch responsive layer. Desktop >=1180px keeps the established Flow-style composition. */
@media (max-width: 1179px) {
  .studio-motion-hero.studio-flow-hero {
    width: calc(100vw - 20px);
    max-width: none;
    min-height: 0;
    margin-inline: auto;
    background: #000000;
    box-shadow: none;
  }

  .studio-flow-hero .studio-motion-hero-bg {
    display: none;
  }

  .studio-flow-hero .studio-motion-hero-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
    box-shadow: none;
  }

  .studio-flow-hero .studio-motion-hero-video {
    object-position: center center;
  }

  .studio-flow-hero .studio-motion-hero-copy {
    max-width: none;
    padding: 0;
    transform: none;
  }

  .studio-flow-hero .studio-motion-hero-copy h1,
  .studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
    max-width: 100%;
  }

  .studio-flow-hero-progress {
    width: min(360px, 100%);
  }

  .studio-flow-projects,
  .studio-orders-page .studio-membership-shell,
  .studio-orders-gallery-shell {
    width: min(1180px, calc(100vw - 32px));
  }

  .studio-user-project-room {
    width: min(1180px, calc(100vw - 28px));
  }

  .studio-user-photo-library {
    padding-right: 0;
  }

  .studio-user-project-command.admin-studio-flow-command-dock {
    bottom: max(16px, env(safe-area-inset-bottom));
  }

  .studio-auth-modal {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .studio-auth-modal-panel,
  .studio-profile-menu-popover {
    max-height: calc(100svh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (min-width: 981px) and (max-width: 1179px) {
  .studio-motion-hero.studio-flow-hero {
    height: min(56.25vw, 680px);
    min-height: 560px;
    border-radius: 22px;
  }

  .studio-flow-hero .studio-motion-hero-copy {
    left: clamp(34px, 4vw, 48px);
    bottom: clamp(34px, 4vw, 54px);
    width: min(690px, calc(100% - 72px));
  }

  .studio-flow-hero .studio-motion-hero-copy h1 {
    font-size: 4.2rem;
    line-height: 0.96;
  }

  .studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
    width: min(650px, 100%);
    margin-top: 16px;
    font-size: 1.06rem;
  }

  .studio-flow-hero-donation {
    max-width: min(560px, 100%);
  }

  .studio-flow-new-project-button {
    width: min(240px, 28vw);
    min-height: 106px;
  }

  .studio-flow-projects {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  .studio-motion-hero.studio-flow-hero {
    height: min(72vw, 620px);
    min-height: 520px;
    border-radius: 20px;
  }

  .studio-flow-hero .studio-motion-hero-copy {
    left: 32px;
    bottom: 36px;
    width: min(590px, calc(100% - 64px));
    justify-items: start;
  }

  .studio-flow-hero .studio-motion-hero-copy h1 {
    font-size: 3.55rem;
    line-height: 0.98;
  }

  .studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
    width: min(520px, 100%);
    margin-top: 14px;
    font-size: 1rem;
  }

  .studio-flow-hero-donation {
    max-width: min(490px, 100%);
  }

  .studio-flow-projects,
  .studio-orders-card-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-flow-new-project-button {
    width: min(226px, 34vw);
    min-height: 102px;
    border-radius: 24px;
  }

  .studio-user-project-room {
    padding-bottom: 210px;
  }

  .studio-user-photo-library {
    --studio-user-photo-row-height: clamp(150px, 24svh, 242px);
  }

  .studio-user-photo-mosaic {
    gap: 10px;
  }

  .studio-user-project-command.admin-studio-flow-command-dock {
    right: 22px;
    left: 22px;
    width: auto;
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 680px) {
  .studio-motion-hero.studio-flow-hero {
    width: calc(100vw - 12px);
    height: min(560px, calc(100svh - 82px));
    min-height: 430px;
    border-radius: 18px;
  }

  .studio-flow-hero::before {
    height: 42%;
  }

  .studio-flow-hero::after {
    background:
      linear-gradient(180deg, transparent 36%, rgba(0, 0, 0, 0.76) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.32), transparent 56%);
  }

  .studio-flow-hero .studio-motion-hero-copy {
    right: 16px;
    bottom: 24px;
    left: 16px;
    width: auto;
    justify-items: start;
    gap: 8px;
  }

  .studio-flow-hero .studio-motion-hero-copy h1 {
    max-width: 9.2ch;
    font-size: clamp(2.42rem, 12.2vw, 3.28rem);
    line-height: 0.98;
  }

  .studio-flow-hero .studio-motion-hero-copy p:not(.eyebrow) {
    width: min(320px, 100%);
    margin-top: 8px;
    font-size: 0.94rem;
    line-height: 1.34;
  }

  .studio-flow-hero-donation {
    max-width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 10px 6px 7px;
    border-radius: 18px;
  }

  .studio-flow-hero-donation strong {
    min-width: 46px;
    min-height: 30px;
    font-size: 0.9rem;
  }

  .studio-flow-hero-donation span {
    font-size: 0.74rem;
    line-height: 1.16;
  }

  .studio-flow-hero-progress {
    width: min(300px, 100%);
    gap: 8px;
    margin-top: 9px;
  }

  .studio-flow-hero-progress button {
    height: 5px;
  }

  .studio-flow-projects,
  .studio-orders-page .studio-membership-shell,
  .studio-orders-gallery-shell {
    width: calc(100vw - 24px);
  }

  .studio-flow-new-project-button {
    width: min(206px, calc(100vw - 70px));
    min-height: 88px;
    bottom: max(16px, env(safe-area-inset-bottom));
    border-radius: 22px;
    font-size: 1rem;
  }

  .studio-flow-new-project-button:is(:hover, :focus-visible) {
    transform: translate(-50%, -4px);
  }

  .studio-user-project-room {
    width: calc(100vw - 18px);
    padding-top: 74px;
    padding-bottom: max(230px, calc(188px + env(safe-area-inset-bottom)));
  }

  .studio-user-photo-library {
    --studio-user-photo-row-height: clamp(142px, 42vw, 214px);
  }

  .studio-user-scene-order-bar {
    display: grid;
    align-items: start;
    gap: 10px;
  }

  .studio-user-scene-order-actions {
    justify-content: flex-start;
  }

  .studio-user-free-preview-ready {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 15px;
  }

  .studio-user-free-preview-ready button {
    width: 100%;
  }

  .studio-user-free-preview-ready-backdrop {
    align-items: end;
    padding: 12px;
  }

  .studio-user-free-preview-ready-modal {
    gap: 18px;
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .studio-user-free-preview-ready-reel {
    width: min(330px, 100%);
    height: 132px;
  }

  .studio-user-free-preview-ready-reel span {
    width: 88px;
    height: 106px;
  }

  .studio-user-free-preview-ready-reel span:nth-child(1) {
    transform: translateX(calc(-50% - 92px)) rotate(-11deg);
  }

  .studio-user-free-preview-ready-reel span:nth-child(2) {
    transform: translateX(calc(-50% - 46px)) rotate(-5deg);
  }

  .studio-user-free-preview-ready-reel span:nth-child(3) {
    width: 102px;
    height: 120px;
  }

  .studio-user-free-preview-ready-reel span:nth-child(4) {
    transform: translateX(calc(-50% + 46px)) rotate(5deg);
  }

  .studio-user-free-preview-ready-reel span:nth-child(5) {
    transform: translateX(calc(-50% + 92px)) rotate(11deg);
  }

  .studio-user-free-preview-ready-modal-copy strong {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .studio-user-free-preview-ready-modal-actions {
    width: 100%;
  }

  .studio-user-free-preview-ready-modal-actions button {
    width: 100%;
  }

  .studio-user-photo-timeline {
    gap: 14px;
  }

  .studio-user-photo-mosaic {
    gap: 8px;
  }

  .studio-user-photo-drop-slot {
    flex-basis: 12px;
    width: 12px;
    height: var(--studio-user-photo-row-height);
    min-height: var(--studio-user-photo-row-height);
    margin-inline: -3px;
  }

  .studio-user-photo-card {
    max-width: 100%;
    border-radius: 9px;
  }

  .studio-user-story-film-cta {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 13px;
    padding: 16px;
  }

  .studio-user-story-film-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .studio-user-story-film-cta strong {
    font-size: 1.34rem;
  }

  .studio-user-story-film-requirement {
    max-width: 100%;
  }

  .studio-user-project-command.admin-studio-flow-command-dock {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    width: auto;
    max-height: min(52svh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .studio-auth-modal {
    align-items: start;
    place-items: start center;
    padding: 12px;
  }

  .studio-auth-modal-panel {
    width: 100%;
    max-height: calc(100svh - 24px);
    margin: auto 0;
    overflow-y: auto;
  }

  .studio-auth-modal-panel.is-simple {
    padding-block-start: 58px;
  }

  .studio-profile-menu-popover {
    top: 64px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100svh - 24px);
    overflow-y: auto;
  }

  .studio-orders-card-gallery,
  .studio-orders-room-grid,
  .studio-orders-care-panel,
  .studio-orders-summary-strip {
    grid-template-columns: 1fr;
  }

  .studio-orders-gallery-shell {
    padding-top: 74px;
  }

  .studio-orders-room-payment {
    display: grid;
    align-items: start;
    gap: 12px;
    padding: 14px;
  }

  .studio-orders-room-payment > div,
  .studio-orders-checkout-control,
  .studio-orders-pay-button,
  .studio-orders-open-button {
    width: 100%;
  }
}

@media (max-width: 680px) {
  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar.admin-studio-topbar {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 128px) 38px !important;
    gap: 7px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
    padding-right: 12px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-heading {
    grid-column: 1 !important;
    grid-row: 1 !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 6px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-back-button {
    width: 36px !important;
    height: 36px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-title-menu {
    grid-template-columns: minmax(0, 1fr) 28px !important;
    width: 100% !important;
    max-width: none !important;
    gap: 2px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-title-trigger {
    width: 28px !important;
    height: 32px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-project-title-text,
  html body:has(main.studio-user-project-room) .studio-user-project-title-text strong {
    max-width: 100% !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    grid-template-columns: 16px minmax(0, 1fr) 24px !important;
    gap: 6px !important;
    padding: 0 7px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search input {
    min-width: 0 !important;
    font-size: 0.76rem !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search input::placeholder {
    color: transparent !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search-clear {
    width: 24px !important;
    height: 24px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-user-minis-toolbar-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 38px !important;
    min-width: 38px !important;
    justify-self: end !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-profile-menu,
  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-profile-menu > summary,
  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-profile-menu-trigger {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-flow-home-topbar-avatar {
    width: 38px !important;
    height: 38px !important;
  }

  html body:has(main.studio-user-project-room) main.studio-user-project-room.studio-user-minis-project-page,
  html body:has(main.studio-user-project-room) .studio-user-project-room {
    padding-top: 68px !important;
  }
}

@media (max-width: 430px) {
  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar.admin-studio-topbar {
    grid-template-columns: minmax(0, 1fr) 92px 38px !important;
    gap: 6px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search {
    grid-template-columns: 16px minmax(0, 1fr) 0 !important;
    padding-right: 6px !important;
  }

  html body:has(main.studio-user-project-room) .studio-user-minis-toolbar .studio-minis-room-search-clear.is-empty {
    display: none !important;
  }
}

@media (max-width: 760px) {
  main.studio-user-minis-project-page > .studio-user-minis-console {
    width: calc(100vw - 24px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* Rescue public dark palette, kept after page-specific dark rules so the
   non-Studio site settles into the same black production-room language. */
html[data-theme="dark"] body:has(.site-shell-rescue-console) {
  --background: #000000;
  --background-deep: #000000;
  --background-soft: rgba(255, 200, 0, 0.1);
  --background-faint: #0b0b0c;
  --surface: #111111;
  --surface-soft: #181818;
  --surface-muted: #141414;
  --surface-row: rgba(255, 255, 255, 0.06);
  --foreground: #ffffff;
  --muted-foreground: rgba(255, 255, 255, 0.6);
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.28);
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :is(
  .site-main-shell,
  .site-main,
  .site-footer,
  .section,
  .hero-band,
  .page-band,
  .detail-band,
  .muted-section
) {
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar.admin-studio-topbar.studio-minis-room-toolbar,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console:is(:hover, .is-desktop-expanded, .is-desktop-pinned) {
  border-color: transparent !important;
  background: #000000 !important;
  box-shadow: none !important;
  color: #ffffff;
  backdrop-filter: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search.studio-minis-room-search,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .sidebar-studio-account-popover,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-account-popover {
  border-color: rgba(255, 255, 255, 0.1);
  background: #111111;
  color: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search input {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .footer-brand,
  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .empty-state,
  .content-card,
  .home-hero-shell,
  .home-feature-card,
  .home-feature-panel,
  .home-feature-panel-video,
  .home-intro-card,
  .home-project-brief-item,
  .home-story-empty,
  .home-content-card,
  .recognition-ticker-band,
  .story-hub-hero,
  .story-hub-hero-copy-panel,
  .story-page-nav,
  .story-track-strip,
  .story-series-spotlight,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card,
  .story-feature-card-public,
  .story-library-section-public,
  .story-library-section-instagram,
  .story-record-card,
  .story-record-card-instagram,
  .instagram-record-preview,
  .story-video-card,
  .story-instagram-embed-card,
  .story-gallery-card,
  .proof-section-card,
  .proof-feature-card,
  .trust-logo-card,
  .trust-archive-card,
  .trust-note-card,
  .trust-entry-card,
  .project-card,
  .project-intro-summary,
  .project-intro-list-card,
  .project-intro-feature-card,
  .support-card,
  .support-entry-card,
  .support-case-followup,
  .support-case-story,
  .detail-main,
  .detail-side,
  .detail-photo-gallery,
  .detail-case-intro,
  .detail-gallery,
  .detail-follow-up-card,
  .detail-action-card,
  .detail-project-card,
  .detail-support-block,
  .cats-discovery-panel,
  .cats-feature-card,
  .cats-directory-card,
  .cats-feature-body,
  .cats-directory-body,
  .cats-empty-state,
  .shorts-hero-card,
  .shorts-hero-copy,
  .shorts-hero-side,
  .shorts-episode-card,
  .shorts-linked-card,
  .help-community-hero,
  .help-community-gateway,
  .help-community-entry-card,
  .help-my-rooms-panel,
  .help-channel-board,
  .help-channel-topbar,
  .help-channel-tabs,
  .help-filter-panel,
  .help-request-card,
  .help-network-sidebar,
  .help-invite-manager,
  .help-offer-details,
  .help-report-details,
  .help-owner-actions,
  .help-detail-main,
  .help-detail-action-card,
  .help-detail-participants-card,
  .help-detail-private-card,
  .help-detail-offer-queue,
  .help-detail-timeline-card,
  .help-detail-offer-card,
  .help-detail-cat-card,
  .help-comment-thread-panel,
  .help-comment-card,
  .help-comment-form,
  .help-offer-form,
  .help-invite-form,
  .help-report-form,
  .ai-copilot-card,
  .ai-copilot-result,
  .ai-summary-result
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: var(--shadow-card) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .content-card-body,
  .cats-discovery-count,
  .cats-search-shell,
  .cats-results-status,
  .cats-filter-chip,
  .cats-filter-chip-count,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-directory-need,
  .cats-directory-status-line,
  .home-feature-tags .tag,
  .home-content-card .tag,
  .tag,
  .tag-chip,
  .chip-button,
  .language-pill,
  .field input,
  .field textarea,
  .field select,
  .detail-age-card,
  .detail-preset-card,
  .record-note,
  .project-intro-metric,
  .project-intro-feature-metric,
  .project-intro-link,
  .project-intro-remaining,
  .story-page-nav-link,
  .recognition-ticker-kind,
  .help-status-chip,
  .help-detail-participant-stats span,
  .help-direct-choice-grid span,
  .help-invite-row,
  .help-invite-link-card,
  .help-cat-choice,
  .help-room-type-card,
  .help-room-urgency-card,
  .help-visibility-options label,
  .ai-copilot-suggested-copy,
  .ai-copilot-details,
  .ai-copilot-chip-row span
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  h1,
  h2,
  h3,
  h4,
  strong,
  .home-feature-card h2,
  .home-feature-copy,
  .home-feature-note,
  .home-content-card h3,
  .cats-discovery-copy h1,
  .cats-feature-body h3,
  .cats-feature-copy,
  .cats-directory-body h3,
  .cats-directory-copy,
  .shorts-hero-card h1,
  .shorts-episode-card h3,
  .shorts-linked-card h3
) {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  p,
  li,
  small,
  .hero-lead,
  .home-feature-date,
  .home-feature-caption,
  .home-card-meta,
  .home-card-description,
  .meta-row,
  .helper-text,
  .cats-directory-status-line,
  .cats-directory-need-line,
  .cats-results-status,
  .shorts-episode-card .meta-row,
  .shorts-linked-card p
) {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .eyebrow,
  .card-eyebrow,
  .meta-label,
  .home-feature-kicker,
  .home-feature-linkline a
) {
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-feature-media,
  .home-feature-media-video,
  .cats-feature-media,
  .cats-directory-media,
  .shorts-hero-media,
  .shorts-episode-media
) {
  background: #050505 !important;
}

body:has(.site-shell-rescue-console) :where(
  a[class*="-card"]:hover,
  article[class*="-card"]:hover,
  button[class*="-card"]:hover,
  details[class*="-card"]:hover,
  div[class*="-card"]:hover,
  label[class*="-card"]:hover,
  section[class*="-card"]:hover,
  span[class*="-card"]:hover,
  .help-area-option:hover,
  .help-cat-choice:hover,
  .help-pet-option:hover,
  .donation-copilot-context-grid a:hover,
  .press-secondary-link:hover,
  .cats-quick-tab:hover
) {
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  a[class*="-card"]:hover,
  article[class*="-card"]:hover,
  button[class*="-card"]:hover,
  details[class*="-card"]:hover,
  div[class*="-card"]:hover,
  label[class*="-card"]:hover,
  section[class*="-card"]:hover,
  span[class*="-card"]:hover,
  .help-area-option:hover,
  .help-cat-choice:hover,
  .help-pet-option:hover,
  .donation-copilot-context-grid a:hover,
  .press-secondary-link:hover,
  .cats-quick-tab:hover
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #141414 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .eyebrow {
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(180deg, #ffcf35 0%, #ffd032 100%) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-hero::after {
  background:
    linear-gradient(135deg, transparent 0 18px, #fff3cf 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #fff3cf 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-copy h1 {
  color: #050505 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-copy p:not(.eyebrow) {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button .support-preset-badge,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected .support-preset-badge {
  background: #ffd344 !important;
  color: #050505 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected span {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet {
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: #fffef8 !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .support-payment-sheet h3,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close {
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close:is(:hover, :focus-visible) {
  background: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-option-card {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-option-paypal {
  border-color: #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.22), transparent 28%),
    linear-gradient(135deg, #6f3413 0%, #8d3c14 100%) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-card,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 254, 248, 0.96) !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body small {
  color: rgba(17, 17, 17, 0.58) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body strong {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body span {
  color: rgba(17, 24, 39, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > small,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > small {
  color: #111111 !important;
}

body:has(.site-shell-rescue-console) .rescue-shell-topbar .sidebar-studio-rail-avatar,
body:has(.site-shell-rescue-console) .rescue-shell-topbar :where(.rescue-shell-topbar-avatar, .rescue-shell-account-avatar) {
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .rescue-shell-topbar .sidebar-studio-account-menu summary:is(:hover, :focus-visible) .sidebar-studio-rail-avatar,
body:has(.site-shell-rescue-console) .rescue-shell-topbar .rescue-shell-account-menu summary:is(:hover, :focus-visible) :where(.rescue-shell-topbar-avatar, .rescue-shell-account-avatar) {
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console .sidebar-footer {
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console .sidebar-more-menu {
  gap: 6px;
  padding: 0;
  border-left: 0;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
) {
  --studio-link-accent: #0f172a;
  --studio-link-accent-soft: rgba(15, 23, 42, 0.08);
  --sidebar-icon-color: #0f172a;
  min-height: 50px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: rgba(51, 65, 85, 0.9);
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 760;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
):is(:hover, :focus-visible) {
  border: 0;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  box-shadow: none;
  outline: none;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
).is-active {
  border: 0;
  background: transparent;
  color: #0f172a;
  box-shadow: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link .sidebar-link-icon,
  .sidebar-studio-link.sidebar-link-secondary .sidebar-link-icon,
  .sidebar-more-summary .sidebar-link-icon
) {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-icon,
  .sidebar-studio-link.sidebar-link-secondary:is(:hover, :focus-visible) .sidebar-link-icon,
  .sidebar-more-summary:is(:hover, :focus-visible) .sidebar-link-icon
) {
  border: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link.is-active .sidebar-link-icon,
  .sidebar-studio-link.sidebar-link-secondary.is-active .sidebar-link-icon,
  .sidebar-more-summary.is-active .sidebar-link-icon
) {
  border: 0;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link:is(:hover, :focus-visible) {
  border: 0;
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
  box-shadow: none;
  outline: none;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-icon {
  border: 0;
  background: transparent;
  color: currentColor;
  box-shadow: none;
  transform: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link.is-active {
  border: 0;
  background: transparent;
  color: #0f172a;
  box-shadow: none;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link.is-active .sidebar-link-icon {
  border: 0;
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
) {
  --studio-link-accent: #ffffff;
  --studio-link-accent-soft: rgba(255, 255, 255, 0.12);
  --sidebar-icon-color: #ffffff;
  color: rgba(203, 213, 225, 0.88);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link,
  .sidebar-studio-link.sidebar-link-secondary,
  .sidebar-more-summary
).is-active {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console :where(
  .sidebar-studio-link.is-active .sidebar-link-icon,
  .sidebar-studio-link.sidebar-link-secondary.is-active .sidebar-link-icon,
  .sidebar-more-summary.is-active .sidebar-link-icon
) {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link:is(:hover, :focus-visible) .sidebar-link-icon {
  background: transparent;
  color: currentColor;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link.is-active {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console.is-studio-console .sidebar-link.sidebar-studio-link.is-active .sidebar-link-icon {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .recognition-ticker-label,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search-submit,
html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(.button-primary, .button-secondary:hover, .button-ghost:hover) {
  border-color: rgba(255, 200, 0, 0.9);
  background: #ffc800;
  color: #211a00;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(.button-secondary, .button-ghost) {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111111;
  color: #ffffff;
}

/* Rescue public product pass: thin operational layers for the non-Studio site. */
body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
body:has(.site-shell-rescue-console) .support-impact-strip {
  display: grid;
  gap: 8px;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 760px);
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip strong {
  color: #0f172a;
  font-size: 1rem;
  line-height: 1;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip small {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 850;
}

body:has(.site-shell-rescue-console) .rescue-search-section-stack {
  display: grid;
  gap: 22px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group {
  display: grid;
  gap: 12px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head span {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 930;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head strong {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.78rem;
  font-weight: 860;
}

body:has(.site-shell-rescue-console) .rescue-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-start;
}

body:has(.site-shell-rescue-console) .rescue-search-suggestions a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 0 12px;
  background: #ffffff;
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.8rem;
  font-weight: 840;
  text-decoration: none;
}

body:has(.site-shell-rescue-console) :where(
  .home-content-card .content-card-body,
  .home-pet-card h3,
  .home-pet-card .home-card-description,
  .home-pet-card .home-card-tags,
  .home-pet-card .tag > span,
  .home-pet-card .home-card-meta > span,
  .home-story-card .content-card-body,
  .story-record-card .content-card-body,
  .instagram-record-preview .content-card-body,
  #stories-live-context .content-card-body,
  .cats-feature-body,
  .cats-directory-body,
  .support-cat-card .content-card-body,
  .support-cat-card .card-eyebrow > span,
  .support-cat-card h3,
  .support-cat-card .content-card-body > p,
  .support-cat-card .meta-row > span,
  .shorts-episode-card .content-card-body,
  .shorts-episode-card .card-eyebrow > span,
  .shorts-episode-card h3,
  .shorts-episode-card .tag-row,
  .shorts-episode-card .tag > span,
  .shorts-linked-card .card-eyebrow > span,
  .shorts-linked-card h3,
  .shorts-linked-card .meta-row > span,
  .shorts-linked-card .content-card-body,
  .story-record-card .card-eyebrow > span,
  .story-record-card h3,
  .story-record-card .content-card-body > p,
  .story-record-card .tag-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .card-eyebrow > span,
  .instagram-record-preview h3,
  .instagram-record-preview .content-card-body > p,
  .instagram-record-preview .tag-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-feature-tags .tag,
  .home-feature-tags .tag-chip,
  .home-content-card .tag,
  .home-story-card .card-eyebrow,
  .home-story-card .meta-row,
  .home-story-card .tag,
  .story-record-card .card-eyebrow,
  .story-record-card .meta-row,
  .story-record-card .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-priority-badge,
  .cats-directory-card .meta-label,
  .cats-directory-card .tag,
  .cats-directory-status,
  .cats-directory-status-line,
  .cats-directory-need,
  .cats-directory-need-line,
  .support-cat-card .card-eyebrow,
  .support-cat-card .meta-row,
  .support-cat-card .tag,
  .shorts-hero-tags .tag,
  .shorts-episode-card .tag,
  .shorts-episode-card .card-eyebrow,
  .shorts-episode-card .meta-row,
  .shorts-season-summary-toggle .tag,
  .shorts-episode-cat-pill,
  .shorts-episode-cat-more,
  .shorts-episode-cat-summary,
  .shorts-cat-mini-item,
  .shorts-cat-mini-more
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, 0.7);
}

body:has(.site-shell-rescue-console) :where(
  .home-content-card,
  .home-feature-card-pet,
  .home-feature-card-video,
  .story-record-card,
  .instagram-record-preview,
  .cats-feature-card,
  .cats-directory-card,
  .support-cat-card,
  .shorts-episode-card,
  .shorts-linked-card
):is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

body:has(.site-shell-rescue-console) .cats-discovery-deck {
  max-width: 54ch;
  margin: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.48;
}

body:has(.site-shell-rescue-console) .cats-directory-first {
  gap: 18px;
}

body:has(.site-shell-rescue-console) .cats-directory-first .cats-results-grid {
  margin-top: 0;
}

body:has(.site-shell-rescue-console) .support-impact-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(.site-shell-rescue-console) .support-impact-strip article {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

body:has(.site-shell-rescue-console) .support-impact-strip span {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 930;
  text-transform: uppercase;
}

body:has(.site-shell-rescue-console) .support-impact-strip strong {
  color: #0f172a;
  font-size: 1.02rem;
  line-height: 1.18;
}

body:has(.site-shell-rescue-console) .support-impact-strip p {
  margin: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.44;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-result-group-head span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-scope-strip strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-impact-strip strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-results-copy h1 {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-results-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input:focus-visible {
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .rescue-search-scope-strip span,
  .rescue-search-suggestions a,
  .support-impact-strip article,
  .help-community-brief div
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .rescue-search-result-group-head strong,
  .rescue-search-scope-strip small,
  .cats-discovery-deck,
  .support-impact-strip span,
  .support-impact-strip p,
  .help-community-brief span
) {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-hub-hero,
  .story-hub-hero-copy-panel,
  .story-page-nav,
  .story-track-strip,
  .story-series-spotlight,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-feature-card-public,
  .story-library-section-public,
  .story-library-section-instagram,
  .story-record-card,
  .story-record-card-instagram,
  .instagram-record-preview,
  .story-video-card,
  .story-instagram-embed-card,
  .story-gallery-card
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #111111 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-page-nav-link,
  .story-track-link,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-library .inline-note,
  .story-series-more summary,
  .story-hub-hero .story-feature-card-public .inline-note,
  .instagram-record-visual,
  .instagram-record-scene,
  .instagram-record-phone,
  .instagram-record-floating-badge,
  .instagram-record-title-chip
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-page-nav-link:hover,
  .story-track-link:hover,
  .story-series-route-card:hover,
  .story-series-episode-card:hover
) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #1d1d1d !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-series-route-card.is-latest,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #202020 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .instagram-record-glow-one {
  background: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .instagram-record-sun {
  background: #cbd5e1;
  box-shadow: 0 0 0 10px rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-hub-stack .eyebrow,
  .story-hub-stack .meta-label,
  .story-page-nav-label,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-series-episode-badge,
  .story-feature-card-public .eyebrow,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-library-section .eyebrow,
  .story-video-card .eyebrow,
  #stories-live-context .eyebrow,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag
) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .press-page :where(.eyebrow, .meta-label) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-content-card .content-card-body,
  .home-story-card .content-card-body,
  .story-record-card .content-card-body,
  .instagram-record-preview .content-card-body,
  #stories-live-context .content-card-body,
  .cats-feature-body,
  .cats-directory-body,
  .support-cat-card .content-card-body,
  .support-cat-card .card-eyebrow > span,
  .support-cat-card h3,
  .support-cat-card .content-card-body > p,
  .support-cat-card .meta-row > span,
  .shorts-episode-card .content-card-body,
  .shorts-episode-card .card-eyebrow > span,
  .shorts-episode-card h3,
  .shorts-episode-card .tag-row,
  .shorts-episode-card .tag > span,
  .shorts-linked-card .card-eyebrow > span,
  .shorts-linked-card h3,
  .shorts-linked-card .meta-row > span,
  .shorts-linked-card .content-card-body,
  .story-record-card .card-eyebrow > span,
  .story-record-card h3,
  .story-record-card .content-card-body > p,
  .story-record-card .tag-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .card-eyebrow > span,
  .instagram-record-preview h3,
  .instagram-record-preview .content-card-body > p,
  .instagram-record-preview .tag-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-feature-tags .tag,
  .home-feature-tags .tag-chip,
  .home-content-card .tag,
  .home-story-card .card-eyebrow,
  .home-story-card .meta-row,
  .home-story-card .tag,
  .story-record-card .card-eyebrow,
  .story-record-card .meta-row,
  .story-record-card .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-priority-badge,
  .cats-directory-card .meta-label,
  .cats-directory-card .tag,
  .cats-directory-status,
  .cats-directory-status-line,
  .cats-directory-need,
  .cats-directory-need-line,
  .support-cat-card .card-eyebrow,
  .support-cat-card .meta-row,
  .support-cat-card .tag,
  .shorts-hero-tags .tag,
  .shorts-episode-card .tag,
  .shorts-episode-card .card-eyebrow,
  .shorts-episode-card .meta-row,
  .shorts-season-summary-toggle .tag,
  .shorts-episode-cat-pill,
  .shorts-episode-cat-more,
  .shorts-episode-cat-summary,
  .shorts-cat-mini-item,
  .shorts-cat-mini-more
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-content-card,
  .home-feature-card-pet,
  .home-feature-card-video,
  .story-record-card,
  .instagram-record-preview,
  .cats-feature-card,
  .cats-directory-card,
  .support-cat-card,
  .shorts-episode-card,
  .shorts-linked-card
):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24) !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
) {
  --home-card-surface: #ffffff;
  background: var(--home-card-surface) !important;
  overflow: hidden;
}

body:has(.site-shell-rescue-console) .home-card-grid .home-content-card :where(
  .content-card-body,
  h3,
  .card-eyebrow,
  .card-eyebrow > span,
  .home-card-description,
  .home-card-tags,
  .tag,
  .tag > span,
  .home-card-meta,
  .home-card-meta > span
) {
  border-color: transparent !important;
  background: var(--home-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) {
  background: var(--home-card-surface) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-3px) !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) :where(
  .content-card-body,
  h3,
  .card-eyebrow,
  .card-eyebrow > span,
  .home-card-description,
  .home-card-tags,
  .tag,
  .tag > span,
  .home-card-meta,
  .home-card-meta > span
) {
  background: var(--home-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
) {
  --home-card-surface: #111111;
  background: var(--home-card-surface) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) {
  background: var(--home-card-surface) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22) !important;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  max-width: 100%;
  height: min(calc((100vw - var(--sidebar-rail-width)) * 0.5625), 76svh, 920px);
  min-height: clamp(520px, calc((100vw - var(--sidebar-rail-width)) * 0.54), 760px);
  align-items: end;
  box-sizing: border-box;
  padding: clamp(30px, 5vw, 68px);
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #050506;
  color: #ffffff;
  box-shadow: none;
}

body:has(.site-shell-rescue-console) .site-main:has(.home-hero-video-shell) {
  --site-main-top: var(--rescue-topbar-height) !important;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) {
  padding: 0 !important;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) .home-home-stack {
  gap: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell {
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band {
  width: 100%;
  min-height: 42px;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-label {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-window {
  align-self: stretch;
  align-items: center;
  padding-left: 4px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-kind {
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band + .home-home-highlights {
  width: min(calc(100% - 32px), var(--content-max));
  margin: 18px auto 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.14) 32%, transparent 68%);
}

body:has(.site-shell-rescue-console) .home-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #050506;
  filter: none;
  object-fit: cover;
  object-position: center;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-shell-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-width: none;
  min-width: 0;
  align-content: end;
  gap: 20px;
  padding: 0 !important;
  color: #ffffff;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header {
  gap: 12px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 {
  display: grid;
  gap: 0.08em;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.46);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 span {
  display: block;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-lead {
  max-width: min(620px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.42vw, 1.26rem);
  font-weight: 760;
  line-height: 1.36;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.54);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action {
  width: auto;
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action-primary {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  color: #090909;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action-primary:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #090909;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action:not(.home-hero-action-primary) {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action:not(.home-hero-action-primary):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)),
    rgba(0, 0, 0, 0.42);
  color: #ffffff;
}

body:has(.site-shell-rescue-console) :where(.card-grid, .home-card-grid) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(.card-grid, .home-card-grid):is(:hover, :focus-within, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid .home-content-card :where(
  .content-card-body,
  .content-card-body *,
  .card-eyebrow,
  .card-eyebrow *,
  h3,
  .home-card-description,
  .home-card-description *,
  .home-card-tags,
  .home-card-tags *,
  .tag-row,
  .tag-row *,
  .tag,
  .tag *,
  .home-card-meta,
  .home-card-meta *,
  .meta-row,
  .meta-row *,
  .eyebrow-icon,
  .tag-icon,
  .meta-row-icon
) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
):is(:hover, :focus-visible, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(-3px) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
):is(:hover, :focus-visible, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .card-grid,
body:has(.site-shell-rescue-console) .card-grid:hover,
body:has(.site-shell-rescue-console) .card-grid:focus-within,
body:has(.site-shell-rescue-console) .card-grid:active,
body:has(.site-shell-rescue-console) .home-card-grid,
body:has(.site-shell-rescue-console) .home-card-grid:hover,
body:has(.site-shell-rescue-console) .home-card-grid:focus-within,
body:has(.site-shell-rescue-console) .home-card-grid:active,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:hover,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:focus-within,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:active,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:hover,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:focus-within,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:active {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  body:has(.site-shell-rescue-console) .home-hero-video-shell {
    height: min(72svh, 560px);
    min-height: 480px;
    padding: 24px;
    border-radius: 0;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell::before {
    background:
      linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.54) 100%);
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-shell-copy {
    gap: 16px;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 {
    font-size: clamp(2.1rem, 11vw, 3.1rem);
    line-height: 0.98;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(260px, 100%);
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action {
    width: 100%;
  }
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-hub-hero-copy-panel,
  .story-page-nav-link,
  .story-track-link,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note,
  .story-record-card .content-card-body,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .content-card-body,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span,
  #stories-live-context .content-card-body,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  #stories-live-context .meta-row
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-page-nav-label,
  .story-track-link small,
  .story-page-nav-link small,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note
) {
  color: rgba(15, 23, 42, 0.66) !important;
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-page-nav-link:is(:hover, :focus-visible),
  .story-track-link:is(:hover, :focus-visible),
  .story-series-route-card:is(:hover, :focus-visible),
  .story-series-episode-card:is(:hover, :focus-visible)
) {
  background: rgba(15, 23, 42, 0.055) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-hub-hero-copy-panel,
  .story-page-nav-link,
  .story-track-link,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note,
  .story-record-card .content-card-body,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .content-card-body,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span,
  #stories-live-context .content-card-body,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  #stories-live-context .meta-row
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-page-nav-label,
  .story-track-link small,
  .story-page-nav-link small,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note
) {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-page-nav-link:is(:hover, :focus-visible),
  .story-track-link:is(:hover, :focus-visible),
  .story-series-route-card:is(:hover, :focus-visible),
  .story-series-episode-card:is(:hover, :focus-visible)
) {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .saved-page-intro,
  .saved-mobile-card,
  .saved-summary-card,
  .account-nav-shell
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #111111 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .account-nav-link,
  .account-nav-link.is-active,
  .account-nav-count,
  .mobile-companion-disabled-button
) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #181818 !important;
  color: #ffffff !important;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .eyebrow,
  .meta-label,
  .card-eyebrow,
  .card-eyebrow span
) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-record-card .eyebrow-icon,
  .story-record-card .tag-icon,
  .story-record-card .meta-row-icon,
  #stories-live-context .eyebrow-icon,
  #stories-live-context .tag-icon,
  #stories-live-context .meta-row-icon,
  .instagram-record-preview .eyebrow-icon,
  .instagram-record-preview .tag-icon,
  .instagram-record-preview .meta-row-icon,
  .instagram-record-floating-badge svg
) {
  color: rgba(255, 255, 255, 0.62) !important;
}

@media (max-width: 900px) {
  .rescue-search-results-toolbar {
    grid-template-columns: 1fr;
  }

  .rescue-search-page-form.has-clear {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rescue-search-page-form.has-clear .rescue-search-clear-link {
    order: 3;
    grid-column: 1 / -1;
    justify-self: start;
  }

  body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
  body:has(.site-shell-rescue-console) .support-impact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
  body:has(.site-shell-rescue-console) .support-impact-strip {
    grid-template-columns: 1fr;
  }
}

body:has(.site-shell-rescue-console) .site-main.site-main-not-home:has(> .rescue-page-band-tight) {
  --site-main-top: var(--rescue-topbar-height);
}

body:has(.site-shell-rescue-console) .site-main-not-home > .page-band.rescue-page-band-tight:first-child,
body:has(.site-shell-rescue-console) .rescue-page-band-tight {
  padding-top: 0;
}

body:has(.site-shell-rescue-console) .site-main-not-home > .page-band.cats-page-band.rescue-page-band-tight:first-child,
body:has(.site-shell-rescue-console) .cats-page-band.rescue-page-band-tight {
  padding-top: clamp(20px, 2.3vw, 34px);
}

body:has(.site-shell-rescue-console) .site-main.site-main-not-home:has(> .support-page-band) {
  --site-main-top: 0px;
}

body:has(.site-shell-rescue-console) #rescue-cats .card-grid {
  align-items: start;
  margin-top: 26px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card {
  min-height: auto;
  align-self: start;
  gap: 10px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .media-thumb {
  height: 178px;
  margin-bottom: 12px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .content-card-body {
  gap: 8px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .card-eyebrow {
  min-height: 22px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card h3 {
  line-height: 1.12;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .content-card-body > p {
  line-height: 1.45;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .meta-row {
  margin-top: 2px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  body:has(.site-shell-rescue-console) #rescue-cats .card-grid {
    margin-top: 18px;
  }
}

main.admin-studio-site-assets-page .admin-studio-site-assets-shot-board {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px;
}

main.admin-studio-site-assets-page .admin-studio-site-assets-shot-board .admin-studio-site-assets-shot {
  display: grid;
  grid-template-columns: minmax(320px, 44%) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  width: 100%;
  min-width: 0;
}

main.admin-studio-site-assets-page .admin-studio-site-assets-shot-board .admin-studio-site-assets-shot > section {
  align-content: start;
  gap: 10px;
  padding: 16px;
}

main.admin-studio-site-assets-page .admin-studio-site-assets-media-slot {
  aspect-ratio: 16 / 9 !important;
  align-self: start;
  width: 100%;
  min-height: 0;
}

@media (max-width: 820px) {
  main.admin-studio-site-assets-page .admin-studio-site-assets-shot-board .admin-studio-site-assets-shot {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .studio-flow-hero:has(.studio-flow-hero-cta) .studio-motion-hero-copy {
    bottom: clamp(132px, 16vw, 160px);
  }

  .studio-flow-starter-frame-main {
    right: clamp(22px, 5vw, 54px);
    width: min(560px, 58vw);
  }

  .studio-flow-starter-frame-side {
    right: clamp(330px, 46vw, 460px);
    width: min(220px, 26vw);
  }

  .studio-flow-starter-frame-low {
    right: clamp(54px, 10vw, 128px);
    width: min(300px, 38vw);
  }

  .studio-flow-starter-timeline {
    right: clamp(22px, 5vw, 54px);
    width: min(420px, 54vw);
  }
}

@media (max-width: 680px) {
  .studio-flow-hero:has(.studio-flow-hero-cta) .studio-motion-hero-copy {
    bottom: max(118px, calc(106px + env(safe-area-inset-bottom)));
  }

  .studio-flow-hero-cta {
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 100%;
    padding-inline: 14px;
  }

  .studio-flow-hero-cta .studio-flow-new-project-button {
    width: min(220px, calc(100vw - 54px));
    min-height: 74px;
    padding: 18px 22px;
    border-radius: 22px;
    font-size: 1rem;
  }

  .studio-flow-hero-cta .studio-flow-new-project-button:is(:hover, :focus-visible) {
    transform: translateY(-4px);
  }

  .studio-flow-home:has(.studio-flow-hero-cta) .studio-flow-hero .studio-motion-hero-copy {
    bottom: 150px;
  }

  .studio-flow-starter-hero {
    height: calc(100svh - 82px);
    min-height: 460px;
  }

  .studio-flow-starter-hero::before {
    height: 48%;
  }

  .studio-flow-starter-hero .studio-motion-hero-copy h1 {
    max-width: 10.6ch;
    font-size: clamp(2.26rem, 11.2vw, 3.05rem);
  }

  .studio-flow-starter-stage::after {
    right: -190px;
    bottom: 124px;
    width: 520px;
    opacity: 0.46;
    transform: rotate(-10deg);
  }

  .studio-flow-starter-frame-main {
    top: 84px;
    right: -94px;
    width: 86vw;
    border-radius: 23px;
    opacity: 0.82;
  }

  .studio-flow-starter-frame-side,
  .studio-flow-starter-frame-low {
    display: none;
  }

  .studio-flow-starter-frame span {
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    border-radius: 17px;
  }

  .studio-flow-starter-timeline {
    right: 16px;
    bottom: 88px;
    grid-template-columns: repeat(5, minmax(24px, 1fr));
    gap: 6px;
    width: min(250px, 68vw);
    padding: 7px;
    border-radius: 17px;
    opacity: 0.78;
  }

  .studio-flow-starter-timeline span {
    border-radius: 9px;
  }

  .studio-flow-starter-stamp {
    top: 22px;
    left: 18px;
    width: 68px;
  }
}

/* Editorial records: identifiable artwork, one source/date line, no repeated tags. */
.story-editorial-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  min-width: 0; height: 100%; color: var(--text, #17212c); text-decoration: none;
  border: 1px solid rgba(25, 45, 40, .12); border-radius: 20px;
  background: #fff; box-shadow: 0 6px 20px rgba(21, 38, 31, .035);
  transition: transform .18s ease, box-shadow .18s ease;
}
.story-editorial-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,38,31,.10); }
.story-editorial-card:focus-visible { outline: 3px solid #126c61; outline-offset: 4px; }
.story-cover { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #eef0eb; flex-shrink: 0; }
.story-cover img { margin: 0; }
.story-cover-type { color: #24483f; background: #e6eee7; }
.story-cover-tone-1.story-cover-type { color: #493d2b; background: #f1e9db; }
.story-cover-tone-2.story-cover-type { color: #2d4052; background: #e4ebf1; }
.story-cover-tone-3.story-cover-type { color: #593e3d; background: #f2e6e1; }
.story-cover-lettering { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; height: 100%; padding: clamp(20px, 2.4vw, 32px); }
.story-cover-label { font-size: 10px; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; font-weight: 650; }
.story-cover-source { font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.6vw, 35px); font-weight: 500; line-height: 1.08; max-width: 18ch; overflow-wrap: anywhere; }
.story-cover-rule { height: 2px; width: 42px; background: currentColor; opacity: .55; }
.story-cover-play { position: absolute; bottom: 16px; left: 16px; display: grid; place-items: center; height: 38px; width: 38px; border-radius: 50%; color: white; background: rgba(10,20,15,.8); }
.story-editorial-copy { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 22px; }
.story-editorial-source { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; margin: 0; font-size: 12px; line-height: 1.5; }
.story-editorial-source > span { font-weight: 700; color: #365c50; }
.story-editorial-source time { color: #69726e; font-size: 11px; white-space: nowrap; }
.story-editorial-card .story-editorial-copy h3 { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.3; letter-spacing: -.025em; margin: 0; }
.story-editorial-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.65; color: #626e69; }
.story-editorial-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(25,45,40,.10); color: #52695f; font-size: 10px; line-height: 1.5; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.story-editorial-footer > span:last-child { font-size: 20px; }
.story-editorial-featured .story-cover { aspect-ratio: 2 / 1; }
.story-editorial-detail { display: flex; flex-direction: column; overflow: hidden; }
.story-editorial-detail .story-cover { min-height: 320px; aspect-ratio: 16 / 10; }
.story-editorial-detail .story-cover-source { font-size: clamp(32px, 4.5vw, 68px); }
.story-cover-credit { display: block; padding: 10px 16px; font-size: 11px; color: #596b62; background: #f2f4ef; }
html[data-theme="dark"] .story-editorial-card { background: #16211e; color: #ecf1ed; border-color: #34443d; }
html[data-theme="dark"] .story-editorial-source > span { color: #bad8c8; }
html[data-theme="dark"] .story-editorial-summary, html[data-theme="dark"] .story-editorial-source time { color: #bdc8c2; }
html[data-theme="dark"] .story-editorial-footer { color: #b7cbbf; border-color: #34443d; }
html[data-theme="dark"] .story-cover-credit { background: #1e2b25; color: #cad7ce; }
@media (max-width: 640px) {
  .story-editorial-copy { padding: 18px; gap: 12px; }
  .story-cover-source { font-size: 30px; }
  .story-editorial-detail .story-cover { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .story-editorial-card { transition: none; } .story-editorial-card:hover { transform: none; } }

/* Adopted records keep the complete portrait beside the final placement status. */
.adopted-profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.adopted-profile-hero .detail-gallery-stage-media { aspect-ratio: 1; min-height: 0; height: auto; background: #ecece6; }
.adopted-profile-hero .detail-gallery-stage-media img { object-fit: contain; }
@media (max-width: 720px) { .adopted-profile-hero { grid-template-columns: 1fr; gap: 24px; } }
.adopted-cats-grid .media-thumb { aspect-ratio: 4 / 3; height: auto; background: #ecece6; }
.adopted-cats-grid .media-thumb img { object-fit: contain; }