/* Preserved full-shell visuals, adapted to current server-rendered auth and navigation. */
.peony-auth, .peony-permanent-shell {
  --sans: Tahoma, Arial, sans-serif;
  font-family: var(--sans);
}
.peony-auth [hidden], .peony-permanent-shell [hidden] { display: none !important; }
.peony-auth a:focus-visible, .peony-auth button:focus-visible,
.peony-permanent-shell a:focus-visible, .peony-permanent-shell button:focus-visible {
  outline: 3px solid #d4ae7c; outline-offset: 4px;
}
.peony-auth .peony-auth-header { flex-wrap: wrap; padding-block: 14px; }
.peony-auth .peony-auth-locales { flex-wrap: wrap; }
.peony-auth .peony-auth-locales a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 10px; border-radius: 6px;
  color: #c8c0b5; font-size: 12px;
}
.peony-auth .peony-auth-locales a[aria-current=page] { color: #272624; background: #e9dfd1; }
.peony-auth .peony-auth-intro h2 {
  max-width: 610px; margin: 20px 0 16px; color: #f2ece2;
  font: 500 clamp(36px, 4.4vw, 66px)/1.2 var(--serif); letter-spacing: -.035em;
}
.peony-auth[dir=rtl] .peony-auth-intro h2,
html[dir=rtl] .peony-auth .peony-auth-intro h2 { font-family: var(--sans); line-height: 1.4; letter-spacing: 0; }
.peony-auth .peony-auth-intro p { color: #c2bdb3; font-size: 16px; line-height: 1.9; }
.peony-auth .peony-auth-proof span { font-size: 12px; line-height: 1.7; }
.peony-auth .peony-auth-panel { min-width: 0; }
.peony-auth .angel-auth-card {
  width: 100%; border: 0; color: #eee6da; backdrop-filter: none; box-shadow: none;
}
.peony-auth .angel-auth-card-head h1 { color: #f1ebe1; font-size: clamp(25px, 2.3vw, 33px); line-height: 1.45; }
.peony-auth .angel-auth-card-head p { color: #c2b9ac; }
.peony-auth .angel-auth-tabs { background: #ffffff08; border: 1px solid #ffffff1b; }
.peony-auth .angel-auth-tabs button { color: #c9c0b1; }
.peony-auth .angel-auth-tabs button[aria-selected=true] { background: #e9dfd1; color: #272624; }
.peony-auth .angel-field input { background: #ffffff08; color: #f1ece4; border-color: #ffffff26; }
.peony-auth .angel-field input::placeholder { color: #a9a296; }
.peony-auth .angel-field input:focus { border-color: #c7a37b; box-shadow: 0 0 0 3px #c7a37b26; }
.peony-auth .angel-auth-remember { color: #c9c1b5; }
.peony-auth .angel-auth-remember input { accent-color: #c09a70; }
.peony-auth .angel-auth-submit {
  color: #261f18; border: 1px solid #e3c7a3; border-radius: 12px;
  background: linear-gradient(100deg, #cfac83, #f0d1af); box-shadow: 0 12px 30px #c09a7022;
}
.peony-auth .angel-auth-alert-error { color: #ffe0db; background: #69372d55; border-color: #c6827570; }
.peony-auth .angel-auth-alert-info { color: #d3f0df; background: #29594355; border-color: #91b6a16b; }
.peony-auth .angel-auth-locked { color: #e9d6ba; background: #c39d7310; border-color: #bf9b723f; }
.peony-auth .angel-auth-locked p { color: #c2b9ac; }
.peony-auth .peony-auth-footer { color: #a99e90; font-size: 10px; }

/* Keep the donor's repaired document scrolling; mirror only the fixed rail. */
.peony-permanent-shell { color: var(--ink); }
.peony-permanent-shell > .side-rail { left: 0; right: auto; width: 276px; }
.peony-permanent-shell > .main-frame { width: auto; margin-left: 276px; margin-right: 0; }
.peony-permanent-shell[dir=rtl] > .main-frame { margin-left: 0; margin-right: 276px; }
.peony-permanent-shell[dir=rtl] > .side-rail { left: auto; right: 0; }
.peony-permanent-shell .shell-topbar {
  height: auto; min-height: 72px; grid-template-columns: minmax(0, 1fr) minmax(160px, 320px) auto;
}
.peony-permanent-shell .shell-topbar:not(:has([data-aos-palette-open])) { grid-template-columns: minmax(0, 1fr) auto; }
.peony-permanent-shell .topbar-section { overflow: hidden; }
.peony-permanent-shell .topbar-section b { overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.peony-permanent-shell .breadcrumb { margin: 0; padding: 0; background: none; }
.peony-permanent-shell .owner-chip { max-width: 220px; }
.peony-permanent-shell .owner-chip b { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.peony-permanent-shell .owner-chip small { font-size: 10px; }
.peony-permanent-shell .topbar-command { min-height: 44px; }
.peony-permanent-shell .topbar-command span { font-size: 13px; }
.peony-permanent-shell .topbar-command .peony-palette-icon { flex: 0 0 auto; font-size: 22px; }
.peony-permanent-shell .brand-lockup { flex-shrink: 0; }
.peony-permanent-shell .locale-switch { flex-shrink: 0; margin: 0 18px 14px; }
.peony-permanent-shell .locale-switch a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0;
  border: 0; border-radius: 6px; padding: 4px; background: transparent; color: #c4c4bc; font-size: 12px;
}
.peony-permanent-shell .locale-switch a[aria-current=page] { color: #282725; background: #e9dfd1; }
.peony-permanent-shell .peony-locale-modal { display: flex; justify-content: center; }
.peony-permanent-shell .peony-locale-modal button { min-width: 60px; min-height: 44px; color: #c4c4bc; font-size: 12px; }
.peony-permanent-shell .rail-link { min-height: 48px; height: auto; padding-block: 10px; }
.peony-permanent-shell .rail-link span, .peony-permanent-shell .rail-link b { font-size: 13px; line-height: 1.6; }
.peony-permanent-shell .rail-icon { width: 22px; flex: 0 0 22px; text-align: center; color: #c6a37f; }
.peony-permanent-shell .rail-active-marker { position: absolute; inset-inline-end: -14px; width: 3px; height: 24px; border-radius: 3px; background: #c3a17c; }
.peony-permanent-shell .angel-status { width: 100%; }
.peony-permanent-shell .angel-status b { font-size: 12px; line-height: 1.6; }
.peony-permanent-shell .angel-status small { font-size: 10px; line-height: 1.6; }
.peony-permanent-shell .peony-legacy-content { min-width: 0; padding: 28px clamp(16px, 2.8vw, 42px) 48px; }
.peony-permanent-shell .peony-legacy-footer { padding: 20px; color: #78746e; text-align: center; font-size: 11px; }
.peony-permanent-shell .owner-preview { font-family: var(--sans); }
.peony-permanent-shell .owner-hero {
  min-height: 380px; color: #f0ebe3; border-color: #ffffff13;
  background: linear-gradient(90deg, #0b0d0cf2, #0b0d0cba 53%, #0b0d0c30), url('/angel/peony-neural-command-core-v3.png') center/cover #0b0d0c;
}
.peony-permanent-shell[dir=rtl] .owner-hero { background: linear-gradient(270deg, #0b0d0cf2, #0b0d0cd1 53%, #0b0d0c65), url('/angel/peony-neural-command-core-v3.png') center/cover #0b0d0c; }
.peony-permanent-shell .owner-hero h1 { color: #f0ebe3; max-width: 720px; font-size: clamp(32px, 4vw, 60px); line-height: 1.22; }
.peony-permanent-shell[dir=rtl] .owner-hero h1 { font-family: var(--sans); letter-spacing: 0; line-height: 1.4; }
.peony-permanent-shell .owner-hero p { color: #d1c8bb; }
.peony-permanent-shell .owner-hero a { color: #efd3ae; text-decoration: underline; text-underline-offset: 4px; }
.peony-permanent-shell .owner-eyebrow { color: #d0ad82; }
.peony-permanent-shell .owner-readonly { color: #d5e7da; background: #223d329e; border-color: #b9cfc342; }
.peony-permanent-shell .ac-command-palette { z-index: 1090; }

@media (max-width: 1100px) {
  .peony-permanent-shell .shell-topbar { grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) auto; padding-inline: 18px; }
  .peony-permanent-shell .breadcrumb { display: none; }
}
@media (max-width: 900px) {
  .peony-auth .peony-auth-intro h2 { font-size: clamp(30px, 6vw, 48px); }
  .peony-auth .peony-auth-stage { gap: 30px; }
  .peony-auth .peony-auth-panel { max-width: 580px; justify-self: center; }
  .peony-permanent-shell > .main-frame,
  .peony-permanent-shell[dir=rtl] > .main-frame { width: 100%; margin: 0; }
  .peony-permanent-shell > .side-rail { transform: translateX(-105%); visibility: hidden; }
  .peony-permanent-shell[dir=rtl] > .side-rail { transform: translateX(105%); }
  .aos-menu-open .peony-permanent-shell > .side-rail { transform: translateX(0); visibility: visible; }
  .peony-permanent-shell .mobile-menu,
  .peony-permanent-shell .mobile-close { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .peony-permanent-shell .mobile-scrim { display: none; position: fixed; inset: 0; z-index: 35; background: #0006; border: 0; }
  .aos-menu-open .peony-permanent-shell .mobile-scrim { display: block; }
}
@media (max-width: 620px) {
  .peony-auth .peony-auth-brand small { display: none; }
  .peony-auth .peony-auth-locales { width: 100%; justify-content: center; }
  .peony-auth .peony-auth-stage { padding-inline: 0; }
  .peony-auth .peony-auth-intro { padding-inline: 8px; }
  .peony-permanent-shell .shell-topbar { grid-template-columns: minmax(0, 1fr) 44px auto; gap: 8px; padding: 8px 10px; }
  .peony-permanent-shell .topbar-command { width: 44px; padding: 0; justify-content: center; }
  .peony-permanent-shell .topbar-command .peony-palette-icon { display: inline; }
  .peony-permanent-shell .owner-chip > span { display: none; }
  .peony-permanent-shell .owner-chip { display: flex; }
  .peony-permanent-shell .peony-legacy-content { padding-inline: 12px; }
  .peony-permanent-shell .owner-hero { min-height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .peony-auth *, .peony-permanent-shell * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* Sensitive identity forms share the permanent PEONY frame without data navigation. */
.peony-focus-shell {
    box-sizing: border-box;
    min-height: 100vh;
    padding: clamp(18px, 4vw, 48px);
    font-family: var(--sans);
    line-height: 1.8;
}
.peony-focus-shell .peony-focus-header {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 32px;
    color: #ede5d9;
    letter-spacing: .18em;
}
.peony-focus-shell .peony-focus-header span { font-weight: 700; }
.peony-focus-shell .peony-focus-header small { color: #bda482; font-size: 11px; }
.peony-focus-shell main {
    box-sizing: border-box;
    width: min(100%, 720px);
    margin: 0 auto clamp(24px, 5vh, 60px);
    padding: clamp(22px, 4vw, 44px);
    border: 1px solid #b095703d;
    border-radius: 25px;
    background: linear-gradient(155deg, #181a18ec, #101211ee);
    box-shadow: 0 28px 80px #0005;
    overflow-wrap: anywhere;
}
.peony-focus-shell main > small { display: block; color: #b9b2a7; font-size: 13px; }
.peony-focus-shell main > small:last-child { margin-block-start: 26px; }
.peony-focus-shell h1 { margin-block: 28px 16px; font-size: clamp(24px, 4vw, 32px); line-height: 1.5; }
.peony-focus-shell h2 { margin-block: 24px 12px; font-size: 20px; }
.peony-focus-shell p { margin-block: 14px; }
.peony-focus-shell nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 20px; }
.peony-focus-shell a { color: #dfc39a; text-underline-offset: .25em; }
.peony-focus-shell a[aria-current="page"] { color: #fff5e6; font-weight: 700; text-decoration-thickness: 3px; }
.peony-focus-shell label { display: block; margin-block-start: 14px; }
.peony-focus-shell input,
.peony-focus-shell button {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px;
    margin-block: 10px;
    border: 1px solid #b69d7659;
    border-radius: 12px;
    font: inherit;
}
.peony-focus-shell input { color: #f1ece5; background: #0b0e0ca6; }
.peony-focus-shell input[type="checkbox"] { width: auto; margin-inline-end: 8px; accent-color: #b79b74; }
.peony-focus-shell button { color: #171a16; background: #c7ad86; border-color: #c7ad86; font-weight: 700; cursor: pointer; }
.peony-focus-shell button:hover:not(:disabled) { background: #ddc39a; }
.peony-focus-shell button:disabled { opacity: .5; cursor: not-allowed; }
.peony-focus-shell :is(button, a, input, summary):focus-visible { outline: 3px solid #e3c38e; outline-offset: 4px; }
.peony-focus-shell .truth,
.peony-focus-shell .notice { padding: 16px 20px; border-inline-start: 4px solid #88aa89; border-radius: 12px; background: #718d7224; }
.peony-focus-shell .error,
.peony-focus-shell [role="alert"] { color: #f4b5ab; }
.peony-focus-shell .addresses { display: grid; gap: 12px; margin-block: 24px; }
.peony-focus-shell .addresses span { display: block; color: #b9b2a7; font-size: 14px; }
.peony-focus-shell .addresses b { overflow-wrap: anywhere; font-weight: 600; }
.peony-focus-shell .note { color: #c5bdb2; font-size: 15px; }
.peony-focus-shell details { margin-block-start: 26px; padding-block-start: 18px; border-block-start: 1px solid #b095703d; }
.peony-focus-shell summary { cursor: pointer; font-weight: 600; }
.peony-focus-shell time,
.peony-focus-shell dd { overflow-wrap: anywhere; }
@media (max-width: 540px) {
    .peony-focus-shell { padding: 18px 12px; }
    .peony-focus-shell main { padding: 24px 18px; border-radius: 20px; }
}


/* Presentation adapter for the existing Livewire navigation and account header. */
.peony-permanent-shell .peony-legacy-topbar {
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  height: auto;
  min-height: 72px;
  gap: 16px;
  padding-block: 8px;
}
.peony-permanent-shell .peony-legacy-header-adapter { min-width: 0; }
.peony-permanent-shell .peony-legacy-header-adapter .header {
  position: static !important;
  width: 100%;
  min-height: 0;
  height: auto;
  gap: 12px;
  padding: 0 !important;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
.peony-permanent-shell .peony-legacy-header-adapter .top-navbar {
  position: static !important;
  min-width: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none !important;
}
.peony-permanent-shell .peony-legacy-header-adapter .top-navbar .container-fluid {
  padding: 0;
}
.peony-permanent-shell .peony-legacy-header-adapter .top-navbar .navbar-nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
}
.peony-permanent-shell .peony-legacy-header-adapter .top-navbar .nav-item {
  margin-block: 0 !important;
}
.peony-permanent-shell .peony-legacy-header-adapter .header > .nav {
  flex-wrap: nowrap;
  justify-content: flex-end;
  margin: 0;
}
.peony-permanent-shell .peony-legacy-header-adapter .header > .nav .dropdown {
  padding-block: 0 !important;
}
.peony-permanent-shell .peony-legacy-header-adapter #menuDropDown {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.peony-permanent-shell .peony-legacy-header-adapter .sidebar-btn,
.peony-permanent-shell .peony-legacy-header-adapter .header-btn,
.peony-permanent-shell .peony-legacy-header-adapter .bg-overlay {
  display: none !important;
}
.peony-permanent-shell .peony-legacy-navigation { min-width: 0; }
.peony-permanent-shell .peony-legacy-navigation .search-control {
  margin: 0 22px 12px !important;
  padding: 0 !important;
}
.peony-permanent-shell .peony-legacy-navigation #menuSearch {
  min-height: 38px;
  padding-inline: 12px 34px;
  color: #eee7de;
  background: #ffffff0a;
  border: 1px solid #ffffff18;
  border-radius: 9px;
  font-size: 12px;
}
.peony-permanent-shell .peony-legacy-navigation #menuSearch::placeholder {
  color: #bab2a7;
}
.peony-permanent-shell .peony-legacy-navigation .aside-menu-container__search-icon {
  inset-inline-end: 11px;
  pointer-events: none;
}
.peony-permanent-shell .peony-legacy-navigation .aside-menu-container__search-icon path {
  fill: #bca789;
}
.peony-permanent-shell .peony-legacy-nav,
.peony-permanent-shell .peony-legacy-nav .aside-menu-container__aside-menu {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: visible;
}
.peony-permanent-shell .peony-legacy-nav .aside-menu-container__aside-menu {
  padding: 0;
  list-style: none;
}
.peony-permanent-shell .peony-legacy-nav .nav-item { margin: 3px 0; }
.peony-permanent-shell .peony-legacy-nav .nav-link {
  min-height: 44px;
  padding: 10px 12px !important;
  gap: 10px;
  color: #c9c0b4;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}
.peony-permanent-shell .peony-legacy-nav .nav-link:hover,
.peony-permanent-shell .peony-legacy-nav .nav-item.active > .nav-link {
  color: #fff7eb;
  background: linear-gradient(90deg, #ffffff05, #ae927125);
}
.peony-permanent-shell .peony-legacy-nav .aside-menu-icon {
  flex: 0 0 22px;
  width: 22px !important;
  padding-inline-end: 0 !important;
  text-align: center;
  color: #c4aa88;
}
.peony-permanent-shell .peony-legacy-nav .aside-menu-title {
  display: block;
  flex: 1;
  width: auto;
  min-width: 0;
  color: inherit;
  font-size: 12px;
  white-space: normal;
}
.peony-permanent-shell .peony-legacy-nav .no-record {
  padding: 10px;
  color: #c9c0b4;
  font-size: 12px;
}
@media (max-width: 1180px) {
  .peony-permanent-shell .peony-legacy-header-adapter .header { flex-wrap: wrap; }
  .peony-permanent-shell .peony-legacy-header-adapter .top-navbar {
    display: block !important;
    flex: 1 1 100%;
  }
  .peony-permanent-shell .peony-legacy-header-adapter .header > .nav {
    margin-inline-start: auto;
  }
}
@media (max-width: 620px) {
  .peony-permanent-shell .peony-legacy-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding-inline: 12px;
  }
  .peony-permanent-shell .peony-legacy-topbar .topbar-section { padding-top: 7px; }
  .peony-permanent-shell .peony-legacy-header-adapter .header > .nav > li {
    padding-inline: 4px !important;
  }
  .peony-permanent-shell .peony-legacy-header-adapter #menuDropDown {
    max-width: 105px;
    font-size: 11px;
  }
}


/* Merge once into the central peony-shell-adapter.css. Do not load as a page stylesheet.
   Inbox structural styles and staff-preview components are scoped to their surfaces.
   Source: canonical angel/inbox/index.blade.php and public/angel/staff-invite-preview.css. */
.peony-inbox-surface, .peony-preview-surface { min-height: 100vh; }
.peony-inbox-content, .peony-preview-content { position: relative; z-index: 1; }
.peony-inbox-surface .wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr) 320px; min-height: 100vh; color: #f0ebe3; }
.peony-inbox-surface .sidebar, .peony-inbox-surface .right { background: #101211c9; }
.peony-inbox-surface .sidebar { border-inline-end: 1px solid #ffffff15; overflow-y: auto; }
.peony-inbox-surface .right { border-inline-start: 1px solid #ffffff15; padding: 20px; }
.peony-inbox-surface .main { min-width: 0; background: #181a18c9; display: flex; flex-direction: column; }
.peony-inbox-surface .header { padding: 18px 20px; border-bottom: 1px solid #ffffff15; font-size: 20px; font-weight: 800; }
.peony-inbox-surface .conv { padding: 14px 16px; border-bottom: 1px solid #ffffff10; }
.peony-inbox-surface .conv.active { background: #c09a702e; }
.peony-inbox-surface .name { font-weight: 800; margin-bottom: 6px; }
.peony-inbox-surface .meta { color: #b5ad9f; font-size: 12px; }
.peony-inbox-surface .last { color: #d1c8bb; font-size: 13px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peony-inbox-surface .chat-head { padding: 18px 22px; border-bottom: 1px solid #ffffff15; display: flex; justify-content: space-between; gap: 16px; }
.peony-inbox-surface .messages { padding: 22px; overflow-y: auto; flex: 1; }
.peony-inbox-surface .msg { max-width: 70%; margin-bottom: 14px; padding: 12px 14px; border-radius: 16px; line-height: 1.5; font-size: 14px; overflow-wrap: anywhere; }
.peony-inbox-surface .inbound { background: #ffffff0d; border-start-start-radius: 4px; }
.peony-inbox-surface .outbound { background: #6b543d; margin-inline-start: auto; border-start-end-radius: 4px; }
.peony-inbox-surface .composer { border-top: 1px solid #ffffff15; padding: 16px; display: flex; gap: 10px; }
.peony-inbox-surface .composer input { flex: 1; min-width: 0; background: #0b0d0c; color: #f1ece4; border: 1px solid #ffffff26; border-radius: 14px; padding: 14px; }
.peony-inbox-surface .composer button { background: #c09a70; color: #261f18; border: 0; border-radius: 14px; padding: 0 20px; font-weight: 800; }
.peony-inbox-surface .composer :disabled { opacity: .65; cursor: not-allowed; }
.peony-inbox-surface .badge { display: inline-block; padding: 4px 8px; border-radius: 999px; background: #29594355; color: #b9ead5; font-size: 12px; margin-top: 8px; }
.peony-inbox-surface .card { background: #ffffff0a; border: 1px solid #ffffff15; border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.peony-inbox-surface .label { color: #b5ad9f; font-size: 12px; margin-bottom: 4px; }
.peony-inbox-surface .value { font-weight: 800; }
.peony-inbox-surface .empty { color: #b5ad9f; padding: 30px; }
@media (max-width: 1100px) {
  .peony-inbox-surface .wrap { grid-template-columns: minmax(230px, 32%) minmax(0, 1fr); }
  .peony-inbox-surface .right { grid-column: 1 / -1; border-inline-start: 0; border-block-start: 1px solid #ffffff15; }
}
@media (max-width: 740px) {
  .peony-inbox-surface .wrap { grid-template-columns: minmax(0, 1fr); }
  .peony-inbox-surface .sidebar { border-inline-end: 0; border-block-end: 1px solid #ffffff15; }
  .peony-inbox-surface .msg { max-width: 90%; }
  .peony-inbox-surface .messages { padding: 16px; }
}

/* Existing preview component geometry, now centrally scoped. */
.peony-preview-surface {
    --peony-graphite: #111310;
    --peony-graphite-2: #1b1f1b;
    --peony-graphite-3: #282d28;
    --peony-ivory: #f7f2e8;
    --peony-paper: #fffdf8;
    --peony-champagne: #c99a55;
    --peony-champagne-light: #eed7a8;
    --peony-champagne-dark: #80511f;
    --peony-emerald: #2d8b68;
    --peony-emerald-light: #8fd5b8;
    --peony-muted: #777166;
    --peony-line: rgba(128, 81, 31, .18);
    --peony-shadow: 0 28px 80px rgba(31, 25, 16, .16);
    --peony-serif: Georgia, "Times New Roman", serif;
    --peony-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Arial, sans-serif;
}

.peony-preview-surface *,
.peony-preview-surface *::before,
.peony-preview-surface *::after { box-sizing: border-box; }
.peony-preview-surface { min-width: 320px; scroll-behavior: smooth; }
.peony-preview-surface { margin: 0; font-family: var(--peony-sans); font-size: 16px; color: var(--peony-graphite); text-rendering: optimizeLegibility; }
.peony-preview-surface a { color: inherit; }
.peony-preview-surface button,
.peony-preview-surface summary { font: inherit; }
.peony-preview-surface img { display: block; max-width: 100%; }
.peony-preview-surface h1,
.peony-preview-surface h2,
.peony-preview-surface p { margin-block-start: 0; }

.peony-preview-surface .peony-skip-link {
    position: fixed;
    inset-block-start: 12px;
    inset-inline-start: -999px;
    z-index: 100;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--peony-paper);
    color: var(--peony-graphite);
    font-weight: 800;
    box-shadow: var(--peony-shadow);
}
.peony-preview-surface .peony-skip-link:focus { inset-inline-start: 12px; }

.peony-preview-surface .peony-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: max-content;
    text-decoration: none;
}
.peony-preview-surface .peony-brand img { filter: drop-shadow(0 10px 18px rgba(201, 154, 85, .18)); }
.peony-preview-surface .peony-brand span,
.peony-preview-surface .peony-brand strong,
.peony-preview-surface .peony-brand small { display: block; }
.peony-preview-surface .peony-brand strong {
    font-family: var(--peony-serif);
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: .2em;
}
.peony-preview-surface .peony-brand small { margin-block-start: 3px; font-size: .69rem; font-weight: 750; letter-spacing: .12em; opacity: .62; }

.peony-preview-surface .peony-language-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .055);
}
.peony-preview-surface .peony-language-nav a {
    min-height: 36px;
    padding: 9px 12px;
    border-radius: 999px;
    color: inherit;
    font-size: .78rem;
    font-weight: 760;
    line-height: 1;
    text-decoration: none;
    opacity: .65;
    transition: background .18s ease, opacity .18s ease, color .18s ease;
}
.peony-preview-surface .peony-language-nav a:hover { opacity: 1; }
.peony-preview-surface .peony-language-nav a[aria-current="page"] { background: var(--peony-champagne-light); color: #25180a; opacity: 1; }

.peony-preview-surface.peony-owner-preview { min-height: 100vh; background: #171a17; color: #f9f3e8; }
.peony-preview-surface .peony-owner-shell { min-height: 100vh; background: radial-gradient(circle at 90% -10%, rgba(201, 154, 85, .18), transparent 30%), radial-gradient(circle at 3% 48%, rgba(45, 139, 104, .09), transparent 32%), #171a17; }
.peony-preview-surface .peony-topbar {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
    align-items: center;
    gap: 24px;
    min-height: 78px;
    padding: 14px clamp(22px, 4vw, 64px);
    border-block-end: 1px solid rgba(255, 255, 255, .08);
    background: rgba(17, 19, 16, .82);
    backdrop-filter: blur(18px);
}
.peony-preview-surface .peony-topbar .peony-brand { justify-self: start; }
.peony-preview-surface .peony-state-pill {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid rgba(143, 213, 184, .2);
    border-radius: 999px;
    background: rgba(45, 139, 104, .11);
    color: #b9ead5;
    font-size: .72rem;
    font-weight: 830;
    letter-spacing: .05em;
}
.peony-preview-surface .peony-state-pill i,
.peony-preview-surface .peony-preview-ribbon i { width: 7px; height: 7px; border-radius: 50%; background: var(--peony-emerald-light); box-shadow: 0 0 0 5px rgba(143, 213, 184, .09); }

.peony-preview-surface .peony-owner-main { width: min(100%, 1480px); margin: 0 auto; padding: clamp(30px, 5vw, 72px) clamp(18px, 4vw, 60px) 70px; }
.peony-preview-surface .peony-owner-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: end; gap: clamp(26px, 5vw, 80px); margin-block-end: 30px; }
.peony-preview-surface .peony-kicker { display: block; margin-block-end: 12px; color: var(--peony-champagne-light); font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.peony-preview-surface .peony-owner-heading h1 { max-width: 780px; margin-block-end: 14px; font-family: var(--peony-serif); font-size: clamp(2.2rem, 4.6vw, 4.8rem); font-weight: 500; line-height: .98; letter-spacing: -.045em; }
.peony-preview-surface .peony-owner-heading > div > p { max-width: 720px; margin: 0; color: rgba(249, 243, 232, .64); font-size: 1.03rem; line-height: 1.78; }
.peony-preview-surface .peony-readonly-notice { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border: 1px solid rgba(143, 213, 184, .2); border-radius: 18px; background: rgba(45, 139, 104, .1); }
.peony-preview-surface .peony-readonly-notice > span { display: grid; flex: 0 0 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--peony-emerald); color: white; font-weight: 900; }
.peony-preview-surface .peony-readonly-notice p { margin: 2px 0 0; color: #d9eee5; font-size: .88rem; line-height: 1.65; }

.peony-preview-surface .peony-selection-bar { position: relative; z-index: 10; display: grid; grid-template-columns: 1fr 1fr minmax(220px, auto); align-items: stretch; margin-block-end: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: rgba(255, 255, 255, .045); }
.peony-preview-surface .peony-selection-current { display: flex; min-height: 74px; flex-direction: column; justify-content: center; padding: 13px 20px; border-inline-end: 1px solid rgba(255, 255, 255, .08); }
.peony-preview-surface .peony-selection-current span { margin-block-end: 5px; color: rgba(249, 243, 232, .45); font-size: .7rem; font-weight: 750; }
.peony-preview-surface .peony-selection-current strong { font-size: .96rem; font-weight: 800; }
.peony-preview-surface .peony-role-picker { position: relative; }
.peony-preview-surface .peony-role-picker summary { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 26px; padding: 13px 20px; color: var(--peony-champagne-light); font-size: .85rem; font-weight: 820; cursor: pointer; list-style: none; }
.peony-preview-surface .peony-role-picker summary::-webkit-details-marker { display: none; }
.peony-preview-surface .peony-role-picker[open] summary { background: rgba(201, 154, 85, .08); }
.peony-preview-surface .peony-role-grid { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 30; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 5px; width: min(730px, calc(100vw - 36px)); max-height: 56vh; overflow: auto; padding: 10px; border: 1px solid rgba(238, 215, 168, .2); border-radius: 18px; background: #20241f; box-shadow: 0 30px 90px rgba(0, 0, 0, .46); }
.peony-preview-surface .peony-role-grid a { padding: 12px 13px; border-radius: 11px; color: rgba(249, 243, 232, .72); font-size: .78rem; font-weight: 720; text-decoration: none; }
.peony-preview-surface .peony-role-grid a:hover,
.peony-preview-surface .peony-role-grid a[aria-current="page"] { background: rgba(201, 154, 85, .14); color: var(--peony-champagne-light); }

.peony-preview-surface .peony-owner-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.peony-preview-surface .peony-experience-panel,
.peony-preview-surface .peony-ai-panel,
.peony-preview-surface .peony-governance-panel,
.peony-preview-surface .peony-safety-panel,
.peony-preview-surface .peony-journey { border: 1px solid rgba(255, 255, 255, .085); border-radius: 24px; background: rgba(255, 255, 255, .045); box-shadow: 0 24px 70px rgba(0, 0, 0, .12); }
.peony-preview-surface .peony-experience-panel { grid-column: span 7; min-height: 416px; padding: clamp(24px, 3vw, 38px); }
.peony-preview-surface .peony-ai-panel { position: relative; isolation: isolate; grid-column: span 5; min-height: 416px; overflow: hidden; padding: clamp(24px, 3vw, 38px); background: linear-gradient(150deg, rgba(42, 48, 42, .94), rgba(24, 28, 24, .97)); }
.peony-preview-surface .peony-governance-panel { grid-column: span 8; display: grid; gap: 0; padding: 8px 26px; }
.peony-preview-surface .peony-safety-panel { grid-column: span 4; padding: 27px; border-color: rgba(143, 213, 184, .14); background: rgba(45, 139, 104, .07); }
.peony-preview-surface .peony-panel-heading,
.peony-preview-surface .peony-guest-card-heading { display: flex; align-items: flex-start; gap: 16px; }
.peony-preview-surface .peony-panel-index { display: grid; flex: 0 0 38px; height: 38px; place-items: center; border: 1px solid rgba(238, 215, 168, .25); border-radius: 12px; color: var(--peony-champagne-light); font-size: .72rem; font-weight: 900; }
.peony-preview-surface .peony-panel-heading h2,
.peony-preview-surface .peony-guest-card-heading h2 { margin: 0 0 7px; font-size: 1.22rem; }
.peony-preview-surface .peony-panel-heading p,
.peony-preview-surface .peony-guest-card-heading p { max-width: 650px; margin: 0; color: rgba(249, 243, 232, .57); font-size: .88rem; line-height: 1.65; }

.peony-preview-surface .peony-channel-bridge { display: grid; grid-template-columns: 1fr 54px 1fr; align-items: center; gap: 5px; margin: 40px 0 26px; }
.peony-preview-surface .peony-channel-card { display: flex; align-items: center; gap: 13px; min-height: 92px; padding: 17px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: rgba(255, 255, 255, .045); }
.peony-preview-surface .peony-channel-card div { min-width: 0; }
.peony-preview-surface .peony-channel-card strong,
.peony-preview-surface .peony-channel-card small { display: block; }
.peony-preview-surface .peony-channel-card strong { margin-block-end: 5px; font-size: .84rem; }
.peony-preview-surface .peony-channel-card small { color: rgba(249, 243, 232, .45); font-size: .69rem; }
.peony-preview-surface .peony-channel-icon { position: relative; display: inline-grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: rgba(201, 154, 85, .13); }
.peony-preview-surface .peony-channel-email::before { content: ""; width: 20px; height: 14px; border: 2px solid var(--peony-champagne-light); border-radius: 4px; }
.peony-preview-surface .peony-channel-email::after { content: ""; position: absolute; width: 12px; height: 12px; transform: translateY(-4px) rotate(45deg); border-right: 2px solid var(--peony-champagne-light); border-bottom: 2px solid var(--peony-champagne-light); }
.peony-preview-surface .peony-channel-whatsapp::before { content: ""; width: 19px; height: 19px; border: 2px solid var(--peony-emerald-light); border-radius: 50%; }
.peony-preview-surface .peony-channel-whatsapp::after { content: ""; position: absolute; inset-block-end: 10px; inset-inline-start: 11px; width: 7px; height: 7px; transform: skew(-18deg); border-left: 2px solid var(--peony-emerald-light); }
.peony-preview-surface .peony-channel-state { margin-inline-start: auto; color: var(--peony-champagne-light); letter-spacing: .12em; opacity: .65; }
.peony-preview-surface .peony-bridge-line { position: relative; display: flex; align-items: center; }
.peony-preview-surface .peony-bridge-line::before,
.peony-preview-surface .peony-bridge-line::after { content: ""; flex: 1; height: 1px; background: rgba(238, 215, 168, .32); }
.peony-preview-surface .peony-bridge-line i { width: 8px; height: 8px; border: 2px solid var(--peony-champagne-light); border-radius: 50%; }
.peony-preview-surface .peony-assurance-row { display: flex; flex-wrap: wrap; gap: 9px; }
.peony-preview-surface .peony-assurance-row > span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(143, 213, 184, .16); border-radius: 999px; background: rgba(45, 139, 104, .08); color: #c9e8db; font-size: .72rem; font-weight: 750; }
.peony-preview-surface .peony-assurance-row i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--peony-emerald); color: white; font-style: normal; font-size: .67rem; }
.peony-preview-surface .peony-fine-print { margin: 15px 0 0; color: rgba(249, 243, 232, .72); font-size: .73rem; line-height: 1.55; }

.peony-preview-surface .peony-ai-visual { position: relative; display: grid; width: 168px; height: 168px; margin: 0 auto 20px; place-items: center; }
.peony-preview-surface .peony-ai-orbit { position: absolute; border: 1px solid rgba(238, 215, 168, .22); border-radius: 50%; }
.peony-preview-surface .peony-ai-orbit-one { inset: 12px; animation: peony-orbit 18s linear infinite; }
.peony-preview-surface .peony-ai-orbit-two { inset: 34px; border-style: dashed; animation: peony-orbit 12s linear infinite reverse; }
.peony-preview-surface .peony-ai-orbit-one::before,
.peony-preview-surface .peony-ai-orbit-two::before { content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--peony-champagne-light); box-shadow: 0 0 17px rgba(238, 215, 168, .8); }
.peony-preview-surface .peony-ai-core { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(238, 215, 168, .25); border-radius: 28px; background: radial-gradient(circle at 36% 24%, rgba(238, 215, 168, .18), rgba(201, 154, 85, .05)); box-shadow: 0 20px 45px rgba(0, 0, 0, .28); }
.peony-preview-surface .peony-lock-chip { display: inline-flex; align-items: center; padding: 6px 9px; border: 1px solid rgba(238, 215, 168, .2); border-radius: 999px; color: var(--peony-champagne-light); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.peony-preview-surface .peony-ai-panel h2 { margin: 12px 0 8px; font-family: var(--peony-serif); font-size: 1.6rem; font-weight: 500; }
.peony-preview-surface .peony-ai-panel > p { margin: 0; color: rgba(249, 243, 232, .58); font-size: .84rem; line-height: 1.65; }
.peony-preview-surface .peony-ai-rule { display: grid; gap: 5px; margin-block-start: 20px; padding-block-start: 17px; border-block-start: 1px solid rgba(255, 255, 255, .08); }
.peony-preview-surface .peony-ai-rule strong { font-size: .78rem; }
.peony-preview-surface .peony-ai-rule span { color: rgba(249, 243, 232, .47); font-size: .72rem; line-height: 1.55; }

.peony-preview-surface .peony-governance-panel article { display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; }
.peony-preview-surface .peony-governance-panel article + article { border-block-start: 1px solid rgba(255, 255, 255, .075); }
.peony-preview-surface .peony-governance-mark { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border: 1px solid rgba(238, 215, 168, .2); border-radius: 12px; color: var(--peony-champagne-light); }
.peony-preview-surface .peony-governance-panel h2,
.peony-preview-surface .peony-safety-panel h2 { margin: 0 0 6px; font-size: .92rem; }
.peony-preview-surface .peony-governance-panel p { margin: 0; color: rgba(249, 243, 232, .5); font-size: .77rem; line-height: 1.58; }
.peony-preview-surface .peony-safety-heading { display: flex; align-items: center; gap: 12px; }
.peony-preview-surface .peony-safety-heading > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: rgba(45, 139, 104, .18); color: var(--peony-emerald-light); }
.peony-preview-surface .peony-safety-panel ul { display: grid; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.peony-preview-surface .peony-safety-panel li { position: relative; padding-inline-start: 22px; color: #cce5da; font-size: .77rem; line-height: 1.52; }
.peony-preview-surface .peony-safety-panel li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--peony-emerald-light); font-weight: 900; }

.peony-preview-surface .peony-journey { margin-block-start: 18px; padding: 24px 26px; }
.peony-preview-surface .peony-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-block-end: 20px; }
.peony-preview-surface .peony-journey-heading span { font-size: .85rem; font-weight: 820; }
.peony-preview-surface .peony-journey-heading strong { color: var(--peony-champagne-light); font-size: .73rem; letter-spacing: .12em; }
.peony-preview-surface .peony-journey ol { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; margin: 0; padding: 0; overflow-x: auto; list-style: none; }
.peony-preview-surface .peony-journey li { position: relative; min-height: 86px; padding: 13px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.peony-preview-surface .peony-journey li::after { content: ""; position: absolute; inset-block-start: 28px; inset-inline-end: -9px; z-index: 1; width: 9px; height: 1px; background: rgba(238, 215, 168, .25); }
.peony-preview-surface .peony-journey li:last-child::after { display: none; }
.peony-preview-surface .peony-journey li span,
.peony-preview-surface .peony-journey li strong { display: block; }
.peony-preview-surface .peony-journey li span { margin-block-end: 11px; color: rgba(249, 243, 232, .7); font-size: .65rem; font-weight: 850; }
.peony-preview-surface .peony-journey li strong { color: rgba(249, 243, 232, .64); font-size: .72rem; line-height: 1.45; }
.peony-preview-surface .peony-journey li.is-current { border-color: rgba(143, 213, 184, .22); background: rgba(45, 139, 104, .08); }
.peony-preview-surface .peony-journey li.is-current span { color: var(--peony-emerald-light); }
.peony-preview-surface .peony-journey li.is-current strong { color: #e4f5ee; }

.peony-preview-surface.peony-guest-preview { min-height: 100vh; background: var(--peony-graphite); color: var(--peony-ivory); }
.peony-preview-surface .peony-guest-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 16% 15%, rgba(201, 154, 85, .17), transparent 27%), radial-gradient(circle at 86% 80%, rgba(45, 139, 104, .13), transparent 30%), linear-gradient(145deg, #111310, #1b201b 58%, #111310); }
.peony-preview-surface .peony-guest-shell::before { content: ""; position: absolute; inset-block-start: -310px; inset-inline-end: -250px; z-index: -1; width: 700px; height: 700px; border: 1px solid rgba(238, 215, 168, .08); border-radius: 50%; box-shadow: 0 0 0 90px rgba(238, 215, 168, .018), 0 0 0 180px rgba(238, 215, 168, .012); }
.peony-preview-surface .peony-guest-topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 1300px); margin: 0 auto; padding: 22px clamp(18px, 4vw, 50px); }
.peony-preview-surface .peony-guest-main { width: min(100%, 1280px); margin: 0 auto; padding: clamp(34px, 6vw, 86px) clamp(18px, 4vw, 50px) 38px; }
.peony-preview-surface .peony-welcome-panel { display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, .72fr); align-items: center; gap: clamp(38px, 8vw, 120px); }
.peony-preview-surface .peony-guest-intro { max-width: 650px; }
.peony-preview-surface .peony-guest-mark { display: grid; width: 132px; height: 132px; margin-block-end: 30px; place-items: center; border: 1px solid rgba(238, 215, 168, .15); border-radius: 42px; background: rgba(255, 255, 255, .035); box-shadow: 0 35px 90px rgba(0, 0, 0, .22); }
.peony-preview-surface .peony-guest-intro h1 { margin: 0 0 18px; font-family: var(--peony-serif); font-size: clamp(2.6rem, 6.2vw, 6rem); font-weight: 500; line-height: .95; letter-spacing: -.05em; }
.peony-preview-surface .peony-guest-intro > p { max-width: 610px; margin: 0; color: rgba(247, 242, 232, .63); font-size: 1.03rem; line-height: 1.8; }
.peony-preview-surface .peony-preview-ribbon { display: inline-flex; align-items: center; gap: 12px; margin-block-start: 28px; padding: 12px 15px; border: 1px solid rgba(143, 213, 184, .17); border-radius: 14px; background: rgba(45, 139, 104, .08); color: #caeadc; font-size: .78rem; line-height: 1.5; }

.peony-preview-surface .peony-guest-card { position: relative; padding: clamp(24px, 4vw, 42px); border: 1px solid rgba(255, 255, 255, .56); border-radius: 34px; background: rgba(255, 253, 248, .97); color: var(--peony-graphite); box-shadow: 0 45px 120px rgba(0, 0, 0, .32); }
.peony-preview-surface .peony-guest-card::before { content: ""; position: absolute; inset: 13px; z-index: -1; border-radius: 28px; box-shadow: 0 0 0 1px rgba(201, 154, 85, .16); }
.peony-preview-surface .peony-guest-card .peony-panel-index { border-color: rgba(128, 81, 31, .17); color: var(--peony-champagne-dark); }
.peony-preview-surface .peony-guest-card-heading h2 { color: var(--peony-graphite); }
.peony-preview-surface .peony-guest-card-heading p { color: var(--peony-muted); }
.peony-preview-surface .peony-guest-channels { display: grid; grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr); align-items: center; gap: 7px; margin: 34px 0 25px; }
.peony-preview-surface .peony-guest-channels > div { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 9px; padding: 15px 8px; border: 1px solid var(--peony-line); border-radius: 16px; background: #fbf6ed; text-align: center; }
.peony-preview-surface .peony-guest-channels strong { font-size: .72rem; line-height: 1.35; }
.peony-preview-surface .peony-code-link { display: flex; align-items: center; }
.peony-preview-surface .peony-code-link i { flex: 1; height: 1px; background: rgba(128, 81, 31, .2); }
.peony-preview-surface .peony-code-link b { display: grid; flex: 0 0 28px; height: 28px; place-items: center; border: 1px solid rgba(45, 139, 104, .24); border-radius: 50%; color: var(--peony-emerald); font-size: .7rem; }
.peony-preview-surface .peony-code-label { margin: 0 0 10px; color: #665f55; font-size: .74rem; font-weight: 760; }
.peony-preview-surface .peony-code-preview { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; direction: ltr; }
.peony-preview-surface .peony-code-preview span { display: grid; min-height: 58px; place-items: center; border: 1px solid #dfd5c4; border-radius: 13px; background: white; color: #c7b89e; font-size: 1.25rem; }
.peony-preview-surface .peony-preview-button { display: flex; width: 100%; min-height: 56px; align-items: center; justify-content: space-between; margin-block-start: 16px; padding: 13px 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #22251f, #111310); color: white; font-weight: 850; opacity: .72; cursor: not-allowed; }
.peony-preview-surface .peony-preview-button i { font-style: normal; font-size: 1.2rem; }
html[dir="rtl"] .peony-preview-surface .peony-preview-button i { transform: rotate(180deg); }
.peony-preview-surface .peony-disabled-note { margin: 8px 0 0; color: #9a9184; font-size: .7rem; text-align: center; }
.peony-preview-surface .peony-assurance-guest { margin-block-start: 19px; }
.peony-preview-surface .peony-assurance-guest > span { border-color: rgba(45, 139, 104, .14); background: rgba(45, 139, 104, .055); color: #386b58; }
.peony-preview-surface .peony-guest-card .peony-fine-print { color: #918779; }

.peony-preview-surface .peony-guest-trust-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; margin-block-start: 24px; }
.peony-preview-surface .peony-guest-ai-card,
.peony-preview-surface .peony-privacy-card { display: flex; align-items: flex-start; gap: 17px; min-height: 150px; padding: 22px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 22px; background: rgba(255, 255, 255, .038); }
.peony-preview-surface .peony-mini-orb { display: grid; flex: 0 0 58px; height: 58px; place-items: center; border: 1px solid rgba(238, 215, 168, .17); border-radius: 20px; background: rgba(201, 154, 85, .06); }
.peony-preview-surface .peony-guest-ai-card h2,
.peony-preview-surface .peony-privacy-card h2 { margin: 10px 0 7px; font-size: .95rem; }
.peony-preview-surface .peony-guest-ai-card p,
.peony-preview-surface .peony-privacy-card p { margin: 0; color: rgba(247, 242, 232, .52); font-size: .78rem; line-height: 1.6; }
.peony-preview-surface .peony-privacy-card small { display: block; margin-block-start: 10px; color: rgba(143, 213, 184, .72); font-size: .69rem; line-height: 1.5; }
.peony-preview-surface .peony-privacy-icon { display: grid; flex: 0 0 48px; height: 48px; place-items: center; border-radius: 16px; background: rgba(45, 139, 104, .12); color: var(--peony-emerald-light); font-size: 1.2rem; }
.peony-preview-surface .peony-guest-footer { display: flex; justify-content: space-between; gap: 20px; width: min(100%, 1280px); margin: 0 auto; padding: 24px clamp(18px, 4vw, 50px) 36px; color: rgba(247, 242, 232, .7); font-size: .69rem; }
.peony-preview-surface .peony-guest-footer strong { color: rgba(143, 213, 184, .9); font-weight: 750; }

html[dir="rtl"] .peony-preview-surface .peony-owner-heading h1,
html[dir="rtl"] .peony-preview-surface .peony-guest-intro h1 { letter-spacing: 0; }
html[dir="rtl"] .peony-preview-surface .peony-channel-email::after { transform: translateY(-4px) rotate(45deg); }

.peony-preview-surface .peony-language-nav a:focus-visible,
.peony-preview-surface .peony-brand:focus-visible,
.peony-preview-surface .peony-role-picker summary:focus-visible,
.peony-preview-surface .peony-role-grid a:focus-visible,
.peony-preview-surface .peony-preview-button:focus-visible { outline: 3px solid var(--peony-champagne-light); outline-offset: 3px; }

@keyframes peony-orbit { to { transform: rotate(360deg); } }

@media (max-width: 1080px) {
    .peony-preview-surface .peony-topbar { grid-template-columns: 1fr auto; }
    .peony-preview-surface .peony-topbar .peony-language-nav { grid-column: 1 / -1; grid-row: 2; }
    .peony-preview-surface .peony-owner-heading { grid-template-columns: 1fr; }
    .peony-preview-surface .peony-experience-panel,
.peony-preview-surface .peony-ai-panel { grid-column: span 6; }
    .peony-preview-surface .peony-governance-panel,
.peony-preview-surface .peony-safety-panel { grid-column: span 6; }
    .peony-preview-surface .peony-welcome-panel { grid-template-columns: 1fr 440px; gap: 48px; }
}

@media (max-width: 820px) {
    .peony-preview-surface .peony-topbar { grid-template-columns: 1fr auto; padding-inline: 18px; }
    .peony-preview-surface .peony-state-pill { font-size: .63rem; }
    .peony-preview-surface .peony-selection-bar { grid-template-columns: 1fr 1fr; }
    .peony-preview-surface .peony-role-picker { grid-column: 1 / -1; border-block-start: 1px solid rgba(255, 255, 255, .08); }
    .peony-preview-surface .peony-selection-current:nth-child(2) { border-inline-end: 0; }
    .peony-preview-surface .peony-role-grid { inset-inline-start: 0; inset-inline-end: auto; grid-template-columns: repeat(2, minmax(140px, 1fr)); }
    .peony-preview-surface .peony-experience-panel,
.peony-preview-surface .peony-ai-panel,
.peony-preview-surface .peony-governance-panel,
.peony-preview-surface .peony-safety-panel { grid-column: 1 / -1; }
    .peony-preview-surface .peony-ai-panel { min-height: auto; }
    .peony-preview-surface .peony-welcome-panel { grid-template-columns: 1fr; }
    .peony-preview-surface .peony-guest-intro { text-align: center; margin-inline: auto; }
    .peony-preview-surface .peony-guest-mark { margin-inline: auto; }
    .peony-preview-surface .peony-preview-ribbon { text-align: start; }
    .peony-preview-surface .peony-guest-card { width: min(100%, 520px); margin-inline: auto; }
    .peony-preview-surface .peony-guest-trust-grid { grid-template-columns: 1fr; width: min(100%, 720px); margin-inline: auto; }
}

@media (max-width: 590px) {
    .peony-preview-surface .peony-brand small { font-size: .57rem; }
    .peony-preview-surface.peony-owner-preview .peony-language-nav,
.peony-preview-surface .peony-guest-topbar .peony-language-nav { width: 100%; order: 3; }
    .peony-preview-surface .peony-topbar,
.peony-preview-surface .peony-guest-topbar { display: flex; flex-wrap: wrap; }
    .peony-preview-surface .peony-state-pill { margin-inline-start: auto; }
    .peony-preview-surface .peony-owner-main { padding-block-start: 38px; }
    .peony-preview-surface .peony-owner-heading h1 { font-size: 2.45rem; }
    .peony-preview-surface .peony-selection-bar { grid-template-columns: 1fr; }
    .peony-preview-surface .peony-selection-current { border-inline-end: 0; border-block-end: 1px solid rgba(255, 255, 255, .08); }
    .peony-preview-surface .peony-role-grid { grid-template-columns: 1fr; }
    .peony-preview-surface .peony-channel-bridge { grid-template-columns: 1fr; }
    .peony-preview-surface .peony-bridge-line { min-height: 30px; flex-direction: column; justify-content: center; }
    .peony-preview-surface .peony-bridge-line::before,
.peony-preview-surface .peony-bridge-line::after { width: 1px; min-height: 11px; flex: none; }
    .peony-preview-surface .peony-journey { padding-inline: 16px; }
    .peony-preview-surface .peony-guest-main { padding-block-start: 30px; }
    .peony-preview-surface .peony-guest-intro h1 { font-size: 3rem; }
    .peony-preview-surface .peony-guest-mark { width: 104px; height: 104px; border-radius: 32px; }
    .peony-preview-surface .peony-guest-mark img { width: 78px; height: 78px; }
    .peony-preview-surface .peony-guest-card { padding: 25px 18px; border-radius: 25px; }
    .peony-preview-surface .peony-guest-channels { grid-template-columns: 1fr 48px 1fr; }
    .peony-preview-surface .peony-guest-channels strong { font-size: .65rem; }
    .peony-preview-surface .peony-code-preview { gap: 5px; }
    .peony-preview-surface .peony-code-preview span { min-height: 49px; border-radius: 10px; }
    .peony-preview-surface .peony-guest-footer { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .peony-preview-surface { scroll-behavior: auto; }
    .peony-preview-surface *,
.peony-preview-surface *::before,
.peony-preview-surface *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
    .peony-preview-surface.peony-owner-preview,
.peony-preview-surface.peony-guest-preview { --peony-champagne-light: #ffe5aa; }
    .peony-preview-surface .peony-experience-panel,
.peony-preview-surface .peony-ai-panel,
.peony-preview-surface .peony-governance-panel,
.peony-preview-surface .peony-safety-panel,
.peony-preview-surface .peony-journey { border-color: rgba(255, 255, 255, .24); }
}

/* Bind preview tokens and page canvas to the selected shell family. */
.peony-preview-surface {
  --peony-graphite: var(--rail, #171817);
  --peony-graphite-2: #1b1f1b;
  --peony-graphite-3: #282d28;
  --peony-ivory: var(--ivory, #f4f1eb);
  --peony-paper: var(--paper, #fffdf8);
  --peony-champagne: var(--gold, #ae9271);
  --peony-champagne-light: #e9cfad;
  --peony-champagne-dark: var(--gold-dark, #80664b);
  --peony-serif: var(--serif, Georgia, serif);
  --peony-sans: var(--sans, Tahoma, Arial, sans-serif);
  font-family: var(--peony-sans);
}
.peony-preview-surface .peony-owner-shell,
.peony-preview-surface .peony-guest-shell { background: transparent; }
.peony-preview-surface .peony-guest-shell::before { display: none; }
.peony-preview-surface .peony-language-nav a { min-height: 44px; display: inline-flex; align-items: center; }
html[dir=rtl] .peony-preview-surface .peony-owner-heading h1,
html[dir=rtl] .peony-preview-surface .peony-guest-intro h1 { font-family: var(--peony-sans); line-height: 1.4; letter-spacing: 0; }


/* One entry family for existing invitation, password, guest and payment forms. */
.peony-entry-shell { min-height:100dvh; position:relative; isolation:isolate; }
.peony-entry-brand,.peony-entry-content { position:relative; z-index:1; }
.peony-entry-content { width:100%; margin-inline:auto; }
.peony-entry-content .peony-entry-form-stage { background:none; }
.peony-entry-content .bg-white,.peony-entry-content .bg-gray-100 { background:transparent!important; }
.peony-entry-content .card,.peony-entry-content .bg-white.shadow-md,.peony-entry-content .w-lg-700px {
  color:#f0e9df; background:#171a18ee!important; border:1px solid #c2a07944; border-radius:22px; box-shadow:0 24px 70px #0003;
}
.peony-entry-content .text-dark,.peony-entry-content .text-gray-900 { color:#f0e9df!important; }
.peony-entry-content .text-muted,.peony-entry-content .text-gray-600 { color:#c0b7aa!important; }
.peony-entry-content label { color:#e4d9ca; }
.peony-entry-content input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.peony-entry-content select {
  background:#ffffff08; border-color:#ffffff26; color:#f2ebe2;
}
.peony-entry-content input::placeholder { color:#b5aa9b; }
.peony-entry-content .btn-primary,.peony-entry-content button[type=submit] { background:#d1b28a; border-color:#d1b28a; color:#241f19; }
.peony-entry-content a { color:#d9b68c; }
.peony-payment-surface { max-width:900px; }
/* The public templates use the same family; publication remains a separate release. */
.peony-visitor-shell { min-height:100dvh; background:#f4f0e8; color:#242822; --bs-primary:#a48562; --bs-link-color:#795b38; font-family:Tahoma,Arial,sans-serif; }
.peony-visitor-shell header,.peony-visitor-shell .navbar,.peony-visitor-shell footer { background:#121713; color:#eee7dc; }
.peony-visitor-shell header a,.peony-visitor-shell .navbar a,.peony-visitor-shell footer a { color:#e0c6a5; }
.peony-visitor-shell .btn-primary { background:#a48562; border-color:#a48562; }
.peony-legal-shell { min-height:100dvh; padding:0 16px; color:#eee6dc; background:#111612; font:16px/1.8 Tahoma,Arial,sans-serif; }
.peony-legal-shell header,.peony-legal-shell main,.peony-legal-shell footer { width:min(900px,100%); margin-inline:auto; }
.peony-legal-shell header { padding:36px 0 22px; border-bottom:1px solid #b5997433; }
.peony-legal-shell a { color:#d4b38b; }
.peony-legal-shell nav { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:16px; }
.peony-legal-shell main { padding:34px 0 48px; }
.peony-legal-shell h1 { font:500 clamp(2rem,6vw,3rem)/1.25 Georgia,serif; color:#f2e9db; }
.peony-legal-shell h2 { margin-top:2rem; font-size:1.4rem; color:#e3c6a3; }
.peony-legal-shell h3 { margin-top:1.4rem; font-size:1.1rem; }
.peony-legal-shell .muted,.peony-legal-shell .updated { color:#b9b1a7; }
.peony-legal-shell .summary { margin:24px 0; padding:18px 20px; background:#b4987011; border-inline-start:3px solid #bfa078; border-radius:8px; }
.peony-legal-shell footer { padding:22px 0 38px; border-top:1px solid #b5997433; color:#b9b1a7; }
/* Standard framework error documents reuse the same frame without auth or data lookup. */
.peony-entry-error { display:grid; min-height:100dvh; align-content:center; gap:28px; padding:24px; text-align:center; }
.peony-entry-error .peony-focus-header { display:flex; justify-content:center; gap:12px; color:#d9bd99; }
.peony-entry-error main { width:min(100%,640px); margin-inline:auto; padding:clamp(24px,5vw,48px); border:1px solid #b5997444; border-radius:24px; background:#101613; }
.peony-entry-error .peony-error-code { font:500 64px/1 Georgia,serif; color:#c4a57e; }
.peony-entry-error h1 { font-size:22px; line-height:1.8; margin-block:20px 32px; }
.peony-entry-error a { color:#e3c69f; text-decoration:underline; text-underline-offset:5px; }
/* Shared original brand and neural backdrop also surround visitor and legal content. */
.peony-visitor-content,.peony-legal-content { position:relative; z-index:1; }
.peony-visitor-shell.peony-auth { background:#111612; color:#242822; }
.peony-visitor-shell .peony-entry-brand { background:transparent; }
.peony-visitor-content { background:#f4f0e8; }
.peony-visitor-shell .text-primary { color:#9a754d!important; -webkit-text-fill-color:currentColor; background:none!important; }
.peony-visitor-shell .bg-primary,.peony-visitor-shell .btn-primary { background:#ae9271!important; border-color:#ae9271!important; color:#211c17; }
.peony-visitor-shell .btn-primary:hover { background:#c8ac89!important; border-color:#c8ac89!important; }
.peony-visitor-shell .number-big,.peony-visitor-shell .number,.peony-visitor-shell .top-heading { color:#9a754d!important; -webkit-text-fill-color:currentColor; background-image:none!important; }
.peony-visitor-shell .home-page .hero-section { background:linear-gradient(90deg,#101411ee,#10141177),url('/angel/peony-neural-command-core-v3.png') center/cover; color:#f4ebdd; }
.peony-visitor-shell .home-page .hero-section h1,.peony-visitor-shell .home-page .hero-section p { color:#f4ebdd!important; }
.peony-visitor-shell .home-page .hero-section .text-primary { color:#d9b991!important; }
.peony-legal-shell.peony-auth { background:#111612; }
.peony-legal-shell .peony-auth-art { opacity:.12; }
.peony-legal-shell header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.peony-legal-shell nav { margin:0; }
.peony-visitor-shell .home-page .how-work-section .card .card-number {
  color:#9a754d!important; -webkit-text-fill-color:currentColor; background:none!important; -webkit-text-stroke:0;
}

/* Shared workspace content: preserve module grids, states and native controls. */
.peony-permanent-shell .peony-legacy-content {
  font-family: var(--sans);
}
.peony-permanent-shell .peony-legacy-content :is(.container-fluid:not(.historical-review), .p360, .search-wrap, .fc-shell, .ps-shell, .md-shell, .gw, .po, .as-workspace) {
  font-size: 14px;
  line-height: 1.65;
}
.peony-permanent-shell .peony-legacy-content :is(.p360, .search-wrap, .fc-shell, .ps-shell, .md-shell, .gw, .po, .as-workspace) {
  font-family: var(--sans);
}
.peony-permanent-shell .peony-legacy-content .peony-module-surface {
  --angel-bg: var(--ivory);
  --angel-card: var(--paper);
  --angel-text: var(--ink);
  --angel-muted: var(--muted);
  --angel-primary: var(--gold-dark);
  --angel-dark: var(--ink);
  --angel-gold: var(--gold);
  --angel-line: var(--line);
  --angel-ok: var(--green);
  --angel-danger: var(--danger);
}
.peony-permanent-shell .peony-legacy-content :is(.container-fluid, .p360, .search-wrap, .fc-shell, .ps-shell, .as-workspace) h1 {
  font-family: var(--sans);
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
}
.peony-permanent-shell .peony-legacy-content :is(.section-title, .ap-section-header h2, .fc-section-title h2, .ps-panel-head h2) {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
}
.peony-permanent-shell .peony-legacy-content :is(.p360, .search-wrap) :is(.kicker, .label, .meta, .muted, .strong, .pill) {
  font-weight: 600;
}
.peony-permanent-shell .peony-legacy-content :is(.p360 .value, .gw-metric, .po-num, .md-number, .ap-stat-card strong, .fc-stats strong, .ps-stats strong) {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.peony-permanent-shell .peony-legacy-content :is(.container-fluid .card, .p360 .cardx, .search-card, .search-wrap .stat, .md-card, .gw-card, .po-card, .af-card, .ap-action-card, .fc-card, .ps-panel, .fc-stats article, .ps-stats article) {
  border-color: var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 20px #28272508;
}
.peony-permanent-shell .peony-legacy-content :is(.p360 .cardx, .search-card, .search-wrap .stat, .md-card, .gw-card, .po-card, .af-card, .fc-card, .ps-panel, .fc-stats article, .ps-stats article) {
  background: var(--paper);
}
.peony-permanent-shell .peony-legacy-content :is(.p360 .hero, .fc-hero, .ps-hero) {
  border-color: var(--line);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 8px 26px #28272508;
  padding: clamp(20px, 2.5vw, 32px);
}
.peony-permanent-shell .peony-legacy-content :is(.md-shell, .gw, .po) {
  border-color: var(--line);
  border-radius: 20px;
  background: var(--ivory);
}
.peony-permanent-shell .peony-legacy-content :is(.md-hero, .gw-hero, .po-hero) {
  border-radius: 16px;
}
.peony-permanent-shell .peony-legacy-content :is(.btn, .btnx, .af-btn, .af-button, .md-action, .po-btn, .ps-action, .fc-shell button, .ps-controls button) {
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
/* Explicit anchor colors outrank the shared shell's inherited link color. */
.peony-permanent-shell .peony-legacy-content :is(.btn-primary, .af-btn-primary, .af-button-primary, .md-action-dark, .po-dark, .fc-shell button, .ps-action, .ps-controls button) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.peony-permanent-shell .peony-legacy-content :is(.btnx-primary, .btnx-green) {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.peony-permanent-shell .peony-legacy-content :is(.btnx-gold, .md-action-gold, .po-gold) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}
.peony-permanent-shell .peony-legacy-content :is(.btn-outline-primary, .btnx:not(.btnx-primary):not(.btnx-green):not(.btnx-gold)) {
  border-color: var(--line);
  background: var(--paper);
  color: var(--ink);
}
.peony-permanent-shell .peony-legacy-content :is(a.btn-danger, a.btn-success, a.btn-dark) { color: #fff; }
.peony-permanent-shell .peony-legacy-content :is(a.btn-warning, a.btn-light) { color: var(--ink); }
.peony-permanent-shell .peony-legacy-content a.btn-outline-danger { color: var(--danger); }
.peony-permanent-shell .peony-legacy-content a.btn-outline-success { color: var(--green); }
.peony-permanent-shell .peony-legacy-content :is(.form-control, .form-select, .search-input, .md-input, .po-input, .af-input, .fc-shell input, .fc-shell select, .ps-controls input) {
  border-color: var(--line);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
}
.peony-permanent-shell .peony-legacy-content :is(.form-control, .form-select, .search-input, .md-input, .po-input, .af-input):focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px #ae927126;
}
.peony-permanent-shell .peony-legacy-content :is(.table, .fc-table table, .ps-panel table, .as-workspace table) {
  font-size: 13px;
  line-height: 1.6;
  border-color: var(--line);
}
.peony-permanent-shell .peony-legacy-content :is(.table, .fc-table table, .ps-panel table, .as-workspace table) :is(th, td) {
  padding: 12px 14px;
  border-color: var(--line);
}
.peony-permanent-shell .peony-legacy-content :is(.table, .fc-table table, .ps-panel table, .as-workspace table) thead th {
  background: var(--ivory);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: normal;
}

/* One permanent interior theme for authenticated module pages and their forms.
   Scope stops at module content: the rail, Owner hero, auth and raw sheet cells
   retain their established presentation. No visibility or capability override. */
.peony-permanent-shell .peony-legacy-content {
  --angel-bg:var(--ivory); --angel-card:var(--paper); --angel-text:var(--ink);
  --angel-muted:var(--muted); --angel-primary:var(--gold-dark); --angel-dark:var(--ink);
  --angel-gold:var(--gold); --angel-line:var(--line); --angel-ok:var(--green); --angel-danger:var(--danger);
  color:var(--ink); font-family:var(--sans); font-size:14px;
}
.peony-permanent-shell .peony-legacy-content .container-fluid { min-width:0; padding-inline:0; }
.peony-permanent-shell .peony-legacy-content :is(.fc-shell,.ps-shell) {
  --fc-ink:var(--ink); --fc-muted:var(--muted); --fc-gold:var(--gold); --fc-line:var(--line); --fc-cream:var(--ivory); --fc-green:var(--green);
  --ps-ink:var(--ink); --ps-muted:var(--muted); --ps-gold:var(--gold); --ps-line:var(--line); --ps-cream:var(--ivory); --ps-green:var(--green);
}
.peony-permanent-shell .peony-legacy-content :is(.md-shell,.gw,.po,.fc-shell,.ps-shell,.search-wrap,.calendar-admin) {
  width:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; color:var(--ink); font-family:var(--sans); direction:inherit;
}
.peony-permanent-shell .peony-legacy-content .ps-glow,
.peony-permanent-shell .peony-legacy-content .md-hero::after { display:none; }
.peony-permanent-shell .peony-legacy-content :is(.container-fluid,.as-workspace,.fc-shell,.ps-shell,.search-wrap,.calendar-admin,.peony-inbox-surface) h1 {
  color:var(--ink); font-family:var(--sans); font-size:clamp(25px,2.3vw,34px); font-weight:600; line-height:1.45; letter-spacing:normal;
}
.peony-permanent-shell .peony-legacy-content :is(.container-fluid,.as-workspace,.fc-shell,.ps-shell,.search-wrap,.calendar-admin,.peony-inbox-surface) :is(h2,h3,h4,h5,h6) {
  font-family:var(--sans); font-weight:600; line-height:1.5; letter-spacing:normal;
}
.peony-permanent-shell .peony-legacy-content :is(.card-header,.ap-section-header,.fc-section-title,.ps-panel-head) :is(h2,h3,h4),
.peony-permanent-shell .peony-legacy-content :is(.md-card,.gw-card,.po-card,.pv-card,.calendar-admin article) > :is(h2,h3,h4) {
  font-size:19px; color:var(--ink); margin-block:0 8px;
}
.peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero,.fc-hero,.ps-hero) {
  padding:24px; margin-block-end:22px; border:1px solid var(--line); border-radius:16px;
  background:var(--paper); color:var(--ink); box-shadow:0 4px 16px #28272505;
}
.peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero,.fc-hero,.ps-hero) :is(h1,.text-white) { color:var(--ink)!important; }
.peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero,.fc-hero,.ps-hero) :is(p,small,.text-white-50) { color:var(--muted)!important; font-size:13px; line-height:1.8; }
.peony-permanent-shell .peony-legacy-content :is(.md-kicker,.gw-k,.po-k,.fc-kicker,.ps-kicker,.search-sub) { color:var(--gold-dark); font-size:12px; font-weight:600; letter-spacing:normal; }
.peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero) .btn-outline-light { color:var(--ink); border-color:var(--line); background:var(--paper); }
.peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero) .btn-outline-light:hover { background:var(--ivory); }
.peony-permanent-shell .peony-legacy-content .container-fluid > .d-flex:has(:is(h1,h2)) { flex-wrap:wrap; gap:16px; align-items:flex-start!important; margin-block-end:22px!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid > .d-flex:has(:is(h1,h2)) > .d-flex { flex-wrap:wrap; gap:8px; }
.peony-permanent-shell .peony-legacy-content :is(.card,.af-card,.md-card,.gw-card,.po-card,.pv-card,.source-card,.search-card,.result-card,.ai-card,.fc-card,.ps-panel,.calendar-admin article) {
  border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); box-shadow:0 4px 16px #28272505;
}
.peony-permanent-shell .peony-legacy-content .container-fluid .card { border:1px solid var(--line)!important; box-shadow:0 4px 16px #28272505!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card-body { padding:22px; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card-header { padding:16px 22px; min-height:0; background:var(--paper)!important; color:var(--ink); border-block-end:1px solid var(--line); }
.peony-permanent-shell .peony-legacy-content :is(.af-card-padding-lg,.md-card.p-4,.gw-card.p-4,.po-card.p-4) { padding:22px!important; }
.peony-permanent-shell .peony-legacy-content :is(.fc-section-title,.ps-panel-head) { padding:18px 22px; }
.peony-permanent-shell .peony-legacy-content :is(.md-number,.gw-metric,.po-num,.ap-stat-card strong,.fc-stats strong,.ps-stats strong,.search-wrap .stat b) {
  font-family:var(--sans); font-size:26px; line-height:1.45; font-weight:600; font-variant-numeric:tabular-nums;
}
.peony-permanent-shell .peony-legacy-content :is(.md-muted,.search-wrap .muted,.calendar-admin .notice,.gw-code,.po-blocker) { color:var(--muted); }
.peony-permanent-shell .peony-legacy-content :is(.search-wrap .strong,.search-wrap .pill,.gw-pill,.po-pill) { font-weight:600; }
.peony-permanent-shell .peony-legacy-content :is(.gw-pill,.po-soft,.po-blocker,.search-wrap .pill) { background:var(--ivory); border-color:var(--line); color:var(--ink); }
.peony-permanent-shell .peony-legacy-content :is(.container-fluid,.as-workspace,.fc-shell,.ps-shell,.search-wrap,.calendar-admin) :is(.form-label,.angel-label,label,.md-muted,.text-muted) { line-height:1.7; }
.peony-permanent-shell .peony-legacy-content :is(.container-fluid,.as-workspace,.fc-shell,.ps-shell,.search-wrap,.calendar-admin) :is(.form-control,.form-select,.af-input,.md-input,.po-input,.search-input),
.peony-permanent-shell .peony-legacy-content :is(.fc-shell,.ps-shell,.calendar-admin) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
  min-width:0; max-width:100%; min-height:44px; padding:10px 12px; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; font-family:var(--sans); font-size:14px; line-height:1.6;
}
.peony-permanent-shell .peony-legacy-content :is(.form-control,.form-select,.af-input,.md-input,.po-input,.search-input)::placeholder { color:var(--muted); opacity:1; }
.peony-permanent-shell .peony-legacy-content :is(.form-control,.form-select,.af-input,.md-input,.po-input,.search-input):focus,
.peony-permanent-shell .peony-legacy-content :is(.fc-shell,.ps-shell,.calendar-admin) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea):focus {
  border-color:var(--gold-dark); outline:2px solid transparent; box-shadow:0 0 0 3px #ae927126;
}
.peony-permanent-shell .peony-legacy-content :is(.form-control,.form-select,.af-input,.md-input,.po-input,.search-input):is(:disabled,[readonly]) { background:var(--ivory); color:var(--muted); }
.peony-permanent-shell .peony-legacy-content :is(.btn,.af-btn,.af-button,.btnx,.md-action,.po-btn,.ps-action,.calendar-admin button,.fc-shell button,.ps-controls button) {
  min-height:42px; padding:10px 14px; border-radius:10px; font-family:var(--sans); font-size:13px; font-weight:600; line-height:1.5;
}
.peony-permanent-shell .peony-legacy-content :is(.btn-sm,.af-btn-sm,.fc-actions button,.ps-action) { min-height:36px; padding:7px 11px; }
.peony-permanent-shell .peony-legacy-content :is(.btn-primary,.btn-dark,.af-btn-primary,.af-button-primary,.md-action-dark,.po-dark,.fc-shell button,.ps-action,.ps-controls button,.calendar-admin button) {
  color:var(--paper)!important; background:var(--ink)!important; border-color:var(--ink)!important;
}
.peony-permanent-shell .peony-legacy-content :is(.btn-light,.btn-outline-dark,.btn-outline-primary,.af-btn-default,.af-btn-ghost,.af-button-ghost,.btnx:not(:where(.btnx-primary,.btnx-green,.btnx-gold)),.po-soft) { background:var(--paper); color:var(--ink); border:1px solid var(--line); }
.peony-permanent-shell .peony-legacy-content :is(.btnx-primary,.btn-success,.btnx-green) { background:var(--green); border-color:var(--green); color:#fff!important; }
.peony-permanent-shell .peony-legacy-content :is(.md-action-gold,.po-gold,.btnx-gold) { color:var(--ink); background:var(--gold); border-color:var(--gold); }
.peony-permanent-shell .peony-legacy-content :is(.btn,.af-btn,.af-button,.btnx,.md-action,.po-btn,.ps-action,.calendar-admin button,.fc-shell button,.ps-controls button):disabled { opacity:.55; cursor:not-allowed; }
.peony-permanent-shell .peony-legacy-content :is(.table,.fc-table table,.ps-panel table,.gw-table,.as-workspace table) { width:100%; color:var(--ink); font-family:var(--sans); font-size:13px; line-height:1.65; border-color:var(--line); }
.peony-permanent-shell .peony-legacy-content :is(.table,.fc-table table,.ps-panel table,.gw-table,.as-workspace table) :is(th,td) { padding:12px 14px; border-color:var(--line); text-align:start; vertical-align:middle; }
.peony-permanent-shell .peony-legacy-content :is(.table,.fc-table table,.ps-panel table,.gw-table,.as-workspace table) thead th { color:var(--muted); background:var(--ivory); font-size:12px; font-weight:600; letter-spacing:normal; text-transform:none; }
.peony-permanent-shell .peony-legacy-content :is(.table-responsive,.fc-table,.ps-table-wrap,.card-body:has(>table)) { overflow-x:auto; max-width:100%; }
.peony-permanent-shell .peony-legacy-content :is(.fc-shell label,.ps-controls label,.gw-table th) { font-size:13px; font-weight:600; }
.peony-permanent-shell .peony-legacy-content :is(.fc-pill,.ps-pill,.md-status,.po-pill,.gw-pill) { font-size:12px; line-height:1.6; border-radius:8px; }
/* Status colors remain recognizable; saturated status cards become neutral cards
   with semantic accents, without changing their labels or values. */
.peony-permanent-shell .peony-legacy-content .container-fluid .card:is(.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-dark) { background:var(--paper)!important; color:var(--ink)!important; border-inline-start:4px solid var(--gold-dark)!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card.bg-success { border-inline-start-color:var(--green)!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card.bg-danger { border-inline-start-color:var(--danger)!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card:is(.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-dark) .card-body { color:var(--ink)!important; }
.peony-permanent-shell .peony-legacy-content .container-fluid .card:is(.bg-primary,.bg-success,.bg-info,.bg-warning,.bg-danger,.bg-dark) .card-body :is(h2,h3,p,.text-white,small) { color:var(--ink)!important; }
.peony-permanent-shell .peony-legacy-content .alert { border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.8; }
/* Inbox uses the same paper surface; the permanent outer rail stays dark. */
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface { padding:0; background:transparent; color:var(--ink); font-family:var(--sans); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .wrap { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--paper); color:var(--ink); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface :is(.main,.messages,.right,.card,.inbound,.composer) { background:var(--paper); color:var(--ink); border-color:var(--line); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface :is(.sidebar,.header,.chat-head) { background:var(--ivory); color:var(--ink); border-color:var(--line); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface :is(.meta,.last,.label,.composer p) { color:var(--muted); font-size:12px; line-height:1.8; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface :is(.name,.value,.header) { font-weight:600; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .header { font-size:18px; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .conv { border-color:var(--line); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .conv:is(.active,[aria-current=page]) { background:#ae92711c; border-inline-start:3px solid var(--gold-dark); }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .msg { border:1px solid var(--line); box-shadow:none; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .composer button { padding:10px 14px; border-radius:10px; color:var(--paper); background:var(--ink); font-size:13px; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .empty { border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--muted); padding:24px; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .empty h2 { color:var(--ink); font-size:19px; }
.peony-permanent-shell .peony-legacy-content .peony-inbox-surface .badge { background:#e5efe8; color:var(--green); }
/* Layout helpers used only by the two remaining component pages. */
.peony-permanent-shell .peony-legacy-content .peony-patient-create .peony-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-block-end:18px; }
.peony-permanent-shell .peony-legacy-content .peony-doctors .peony-doctor-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-block-end:18px; }
.peony-permanent-shell .peony-legacy-content .peony-doctors .peony-doctor-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-block-end:18px; }
.peony-permanent-shell .peony-legacy-content .peony-doctors .peony-doctor-columns { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:18px; }
@media(max-width:1100px) {
  .peony-permanent-shell .peony-legacy-content .peony-doctors .peony-doctor-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .peony-permanent-shell .peony-legacy-content :is(.md-hero,.gw-hero,.po-hero,.fc-hero,.ps-hero) { padding:18px; }
  .peony-permanent-shell .peony-legacy-content .container-fluid .card-body,
  .peony-permanent-shell .peony-legacy-content :is(.af-card-padding-lg,.md-card.p-4,.gw-card.p-4,.po-card.p-4) { padding:16px!important; }
  .peony-permanent-shell .peony-legacy-content .container-fluid .card-body.p-0 { padding:0!important; }
  .peony-permanent-shell .peony-legacy-content :is(.fc-section-title,.ps-panel-head) { padding:16px; }
  .peony-permanent-shell .peony-legacy-content .peony-patient-create .peony-form-grid,
  .peony-permanent-shell .peony-legacy-content .peony-doctors :is(.peony-doctor-metrics,.peony-doctor-actions,.peony-doctor-columns) { grid-template-columns:minmax(0,1fr); }
}

.peony-permanent-shell .peony-legacy-content .container-fluid > .d-flex > div > h2 { color:var(--ink); font:600 clamp(25px,2.3vw,34px)/1.45 var(--sans); letter-spacing:normal; }
/* Consistent native select sizing, including WebKit's menu controls. */
.peony-permanent-shell .peony-legacy-content :is(select.af-input,.form-select,.fc-shell select,.ps-shell select,.calendar-admin select) {
  -webkit-appearance:none; appearance:none; min-height:44px; padding-inline-end:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236f6a63' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px 16px; background-position:right 12px center;
}
.peony-permanent-shell[dir=rtl] .peony-legacy-content :is(select.af-input,.form-select,.fc-shell select,.ps-shell select,.calendar-admin select) { background-position:left 12px center; }
.peony-permanent-shell .peony-legacy-content :is(.form-control,.form-select,.af-input,.md-input,.po-input,.search-input,.fc-shell input,.fc-shell select,.ps-shell input,.ps-shell select) { font-weight:400; }
.peony-permanent-shell .peony-legacy-content .fc-shell label { align-content:start; }
.peony-permanent-shell .peony-legacy-content .fc-issue form > button { align-self:end; }
.peony-permanent-shell .peony-legacy-content .text-muted { color:var(--muted)!important; }
.peony-permanent-shell .peony-legacy-content .text-success { color:var(--green)!important; }
.peony-permanent-shell .peony-legacy-content .text-danger { color:var(--danger)!important; }
.peony-permanent-shell .peony-legacy-content .alert-warning { background:#fff3d9; color:#684414; border:1px solid #ead8b2; }
.peony-permanent-shell .peony-legacy-content .alert-danger { background:#f8e7e3; color:#8b332f; border:1px solid #e6c6bf; }
.peony-permanent-shell .peony-legacy-content .alert-success { background:#e7f0e9; color:#315a42; border:1px solid #c6d8ca; }
.peony-permanent-shell .peony-legacy-content .alert-info { background:#e8eef0; color:#395b6b; border:1px solid #ccdce2; }
.peony-permanent-shell .peony-legacy-content .alert-secondary { background:var(--ivory); color:var(--ink); border:1px solid var(--line); }
.peony-permanent-shell .peony-legacy-content .text-warning { color:#805d27!important; }
.peony-permanent-shell .peony-legacy-content .text-info { color:#395b6b!important; }
.peony-permanent-shell .peony-legacy-content .badge.bg-dark { background:var(--ink)!important; }
/* Only the source-browser frame changes; physical cell styles stay untouched. */
.peony-permanent-shell .peony-legacy-content .historical-review .review-hero { padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); }
.peony-permanent-shell .peony-legacy-content .historical-review .review-hero h1 { color:var(--ink)!important; }
.peony-permanent-shell .peony-legacy-content .historical-review .review-hero p { color:var(--muted); }
.peony-permanent-shell .peony-legacy-content .historical-projection { border-color:var(--line); border-radius:16px; background:var(--paper); }
.peony-permanent-shell .peony-legacy-content .hrp-control { background:var(--ivory); border-color:var(--line); border-radius:12px; }
.peony-permanent-shell .peony-legacy-content .hrp-control button { min-height:42px; border-radius:10px; background:var(--ink); color:var(--paper); font:600 13px/1.5 var(--sans); }

/* Keep native calendar field order stable inside translated workspaces. */
.peony-permanent-shell .peony-legacy-content input[type="date"] {
  direction: ltr;
  text-align: start;
}