/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --runtime-angle: 0deg;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

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

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .table {
    display: table;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .italic {
    font-style: italic;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background: var(--paper);
  letter-spacing: 0;
  margin: 0;
  font-family: Inter, PingFang SC, Microsoft YaHei, system-ui, sans-serif;
}

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

button, textarea {
  font: inherit;
}

button {
  color: inherit;
}

.shell {
  width: min(1180px, 100% - 40px);
  margin: 0 auto;
}

.site-header {
  z-index: 50;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  background: #f7f7f3eb;
  border-bottom: 1px solid #dedfd8e6;
  position: sticky;
  top: 0;
}

.header-inner {
  align-items: center;
  gap: 42px;
  height: 70px;
  display: flex;
}

.brand {
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 800;
  display: inline-flex;
}

.brand-mark {
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 15px;
  display: grid;
}

.main-nav {
  color: #454844;
  align-items: center;
  gap: 30px;
  font-size: 14px;
  display: flex;
}

.main-nav a {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.header-actions {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  display: flex;
}

.icon-button {
  border: 1px solid #0000;
  border-radius: 6px;
  place-items: center;
  width: 38px;
  height: 38px;
  display: grid;
}

.icon-button:hover {
  border-color: var(--line);
  background: #ecece6;
}

.header-login {
  cursor: pointer;
  border: 0;
}

.user-chip {
  border: 1px solid var(--line);
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.user-chip-avatar {
  object-fit: cover;
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.member-chip {
  color: #805011;
  background: #f8df9d;
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
}

.button {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 700;
  transition: transform .16s, background .16s;
  display: inline-flex;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: .45;
  transform: none;
}

.button-dark {
  background: var(--ink);
  color: #fff;
}

.button-light {
  color: var(--ink);
  background: #fff;
}

.button-outline {
  border-color: var(--line);
  background: none;
}

.button-small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.market-intro {
  border-bottom: 1px solid var(--line);
  background: #fbfbf8;
}

.intro-grid {
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 72px;
  min-height: 565px;
  padding-block: 58px;
  display: grid;
}

.intro-copy h1 {
  max-width: 680px;
  margin: 20px 0;
  font-family: Georgia, Songti SC, serif;
  font-size: 58px;
  font-weight: 600;
  line-height: 1.12;
}

.intro-copy > p {
  max-width: 590px;
  color: var(--muted);
  margin: 0;
  font-size: 17px;
  line-height: 1.8;
}

.kicker, .section-kicker {
  color: var(--coral);
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.intro-actions {
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  display: flex;
}

.text-link {
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
}

.trust-row {
  color: #60645f;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  font-size: 12px;
  display: flex;
}

.trust-row span {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.featured-panel {
  background: #fff;
  border: 1px solid #cfd1c9;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 60px #2328231a;
}

.featured-label {
  z-index: 2;
  background: #fffffff0;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  top: 16px;
  left: 16px;
}

.featured-info {
  border-top: 1px solid var(--soft-line);
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
  padding: 18px 20px;
  display: flex;
}

.featured-info span {
  color: var(--muted);
  font-size: 12px;
}

.featured-info h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.round-arrow {
  background: var(--ink);
  border-radius: 50%;
  place-items: center;
  width: 40px;
  height: 40px;
  display: grid;
  color: #fff !important;
}

.product-visual {
  color: #fff;
  background: #303633;
  height: 190px;
  position: relative;
  overflow: hidden;
}

.product-visual.is-large {
  height: 360px;
}

.accent-gold {
  color: #29291f;
  background: #d6a228;
}

.visual-grid {
  opacity: .23;
  background-image: linear-gradient(#ffffff4d 1px, #0000 1px), linear-gradient(90deg, #ffffff4d 1px, #0000 1px);
  background-size: 34px 34px;
  position: absolute;
  inset: 0;
}

.visual-window {
  background: #14191747;
  border: 1px solid #ffffff8c;
  width: 70%;
  height: 65%;
  position: absolute;
  top: 18%;
  left: 15%;
  box-shadow: 10px 12px #14191726;
}

.visual-window-bar {
  border-bottom: 1px solid #ffffff59;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding-left: 10px;
  display: flex;
}

.visual-window-bar span {
  opacity: .75;
  background: currentColor;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}

.visual-content {
  align-items: center;
  gap: 18px;
  height: calc(100% - 24px);
  padding: 16px;
  display: flex;
}

.visual-lines {
  flex: 1;
  gap: 8px;
  display: grid;
}

.visual-lines span {
  opacity: .72;
  background: currentColor;
  height: 5px;
}

.visual-lines span:nth-child(2) {
  width: 68%;
}

.visual-lines span:nth-child(3) {
  width: 84%;
}

.visual-code {
  opacity: .8;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  position: absolute;
  bottom: 8px;
  right: 12px;
}

.catalog-section, .page-section {
  padding: 82px 0 100px;
}

.page-section {
  min-height: 720px;
}

.section-heading {
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  display: flex;
}

.section-heading h2, .page-heading h1 {
  margin: 8px 0 0;
  font-family: Georgia, Songti SC, serif;
  font-size: 38px;
  font-weight: 600;
}

.section-heading p {
  max-width: 380px;
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.page-heading {
  margin-bottom: 34px;
}

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

.catalog-tools {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 22px;
  display: flex;
}

.filter-bar {
  gap: 6px;
  display: flex;
}

.filter-bar button {
  height: 38px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  display: inline-flex;
}

.filter-bar button:hover {
  color: var(--ink);
  background: #eeeee8;
}

.filter-bar button.is-active {
  color: #fff;
  background: var(--ink);
}

.catalog-search {
  border: 1px solid var(--line);
  width: min(310px, 100%);
  height: 40px;
  color: var(--muted);
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.catalog-search input {
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 13px;
}

.catalog-empty {
  color: var(--muted);
  text-align: center;
  padding: 70px 20px;
}

.product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 24px;
  display: grid;
}

.product-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  min-width: 0;
  transition: transform .18s, box-shadow .18s;
  overflow: hidden;
}

.card-visual-wrap {
  position: relative;
}

.card-visual-wrap .badge {
  color: var(--ink);
  background: #fffffff0;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 800;
  position: absolute;
  top: 12px;
  left: 12px;
}

.badge-coral {
  color: #92233e !important;
  background: #ffd7df !important;
}

.badge-teal {
  color: #125e59 !important;
  background: #cdf3ee !important;
}

.badge-gold {
  color: #76510c !important;
  background: #ffe9a4 !important;
}

.badge-blue {
  color: #244c9b !important;
  background: #dce6ff !important;
}

.badge-green {
  color: #28603a !important;
  background: #d9f1df !important;
}

.badge-ink {
  color: #fff !important;
  background: var(--ink) !important;
}

.detail-badge {
  border: 1px solid;
  border-radius: 4px;
  width: max-content;
  margin-top: 12px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.card-visual-wrap .favorite-button {
  position: absolute;
  top: 12px;
  right: 12px;
}

.product-card-body {
  padding: 18px;
}

.eyebrow-row {
  color: var(--muted);
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.view-count {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.product-card h3 {
  margin: 11px 0 8px;
  font-size: 19px;
}

.product-card p {
  min-height: 46px;
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.product-meta {
  color: #8b8f8a;
  margin-top: 12px;
  font-size: 11px;
  display: block;
}

.card-link {
  align-items: center;
  gap: 5px;
  margin-top: 17px;
  font-size: 13px;
  font-weight: 800;
  display: inline-flex;
}

.favorite-button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
}

.favorite-button.is-active {
  color: #df4d45;
  background: #fff6f4;
  border-color: #edb3ad;
}

.card-visual-wrap .favorite-button {
  border: 0;
  justify-content: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  box-shadow: 0 3px 12px #0000001f;
}

.membership-strip {
  background: var(--ink);
  color: #fff;
  padding: 46px 0;
}

.membership-strip-inner {
  grid-template-columns: 1.2fr 1fr auto;
  align-items: center;
  gap: 40px;
  display: grid;
}

.section-kicker.light {
  color: #f1bd4c;
}

.membership-strip h2 {
  margin: 7px 0 0;
  font-family: Georgia, Songti SC, serif;
  font-size: 30px;
  font-weight: 500;
}

.membership-points {
  color: #d4d6d3;
  gap: 9px;
  font-size: 13px;
  display: grid;
}

.membership-points span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.comparison-section {
  border-top: 1px solid var(--line);
  background: #eceee8;
  padding: 76px 0 86px;
}

.comparison-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  display: grid;
}

.comparison-grid article {
  background: #f9faf6;
  border: 1px solid #d3d5ce;
  border-radius: 8px;
  flex-direction: column;
  min-height: 280px;
  padding: 25px;
  display: flex;
}

.comparison-grid article.is-featured {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
}

.comparison-provider {
  color: var(--muted);
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.comparison-grid .is-featured .comparison-provider {
  color: #bdc1bc;
}

.comparison-provider b {
  color: #805011;
  background: #f8df9d;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 9px;
}

.comparison-grid h3 {
  margin: 20px 0 7px;
  font-size: 20px;
}

.comparison-grid article > strong {
  font-size: 34px;
}

.comparison-grid article > strong small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.comparison-grid .is-featured > strong small {
  color: #b8bcb7;
}

.comparison-quota {
  border-top: 1px solid var(--line);
  align-items: center;
  gap: 8px;
  margin-top: 25px;
  padding-top: 17px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}

.comparison-grid .is-featured .comparison-quota {
  border-color: #3d413e;
}

.comparison-grid article > p {
  min-height: 38px;
  color: var(--muted);
  margin: 10px 0 22px;
  font-size: 11px;
  line-height: 1.7;
}

.comparison-grid .is-featured > p {
  color: #bdc1bc;
}

.comparison-grid article > a, .reference-label {
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.reference-label {
  color: #92968f;
}

.comparison-note {
  color: #8f938d;
  margin: 16px 0 0;
  font-size: 10px;
}

.detail-page {
  padding: 34px 0 100px;
}

.back-link {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  margin-bottom: 26px;
  font-size: 13px;
  display: inline-flex;
}

.detail-hero {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  padding-bottom: 64px;
  display: grid;
}

.detail-copy h1 {
  margin: 14px 0 18px;
  font-family: Georgia, Songti SC, serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.16;
}

.detail-stats {
  align-items: center;
  gap: 10px;
  margin: -6px 0 14px;
  display: flex;
}

.detail-stats span {
  color: #4f544f;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.detail-stats small {
  color: #7e6330;
  background: #f6eacb;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 9px;
}

.detail-copy > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.bullet-list {
  gap: 10px;
  margin-top: 22px;
  font-size: 14px;
  display: grid;
}

.bullet-list span {
  align-items: center;
  gap: 8px;
  display: flex;
}

.bullet-list svg {
  color: var(--teal);
}

.detail-actions {
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  display: flex;
}

.content-section, .comments-section, .agent-demo {
  max-width: 850px;
  margin: 64px auto 0;
}

.detail-section-heading {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  display: flex;
}

.detail-section-heading h2, .detail-section-heading > div h2 {
  margin: 0;
  font-size: 24px;
}

.detail-section-heading > div small {
  color: #9a9d98;
  margin-top: 4px;
  font-size: 10px;
  display: block;
}

.detail-section-heading > span {
  color: var(--muted);
  font-size: 13px;
}

.lesson-list {
  border-top: 1px solid var(--line);
}

.lesson-list > div {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 42px 1fr auto 80px;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  font-size: 13px;
  display: grid;
}

.lesson-index {
  color: #a2a59f;
  font-family: ui-monospace, monospace;
}

.lesson-list svg {
  color: #8d918c;
}

.lesson-list > div > span:last-child {
  color: var(--muted);
  text-align: right;
}

.free-label {
  color: #277b52;
  background: #e7f2ea;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 11px;
}

.agent-demo {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 26px;
}

#agent-demo {
  scroll-margin-top: 90px;
}

.agent-demo-head {
  border-bottom: 1px solid var(--soft-line);
  color: var(--muted);
  justify-content: space-between;
  padding-bottom: 18px;
  font-size: 11px;
  display: flex;
}

.agent-demo-head div {
  color: var(--ink);
  align-items: center;
  gap: 7px;
  font-weight: 800;
  display: flex;
}

.live-dot {
  background: #36a36d;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 0 4px #e5f4eb;
}

.agent-demo label {
  margin: 22px 0 9px;
  font-size: 13px;
  font-weight: 800;
  display: block;
}

.agent-input-wrap {
  position: relative;
}

.agent-input-wrap textarea, .comment-compose textarea {
  resize: vertical;
  background: #fbfbf8;
  border: 1px solid #cfd1ca;
  border-radius: 6px;
  outline: none;
  width: 100%;
}

.agent-input-wrap textarea {
  min-height: 118px;
  padding: 14px 52px 14px 14px;
}

.agent-input-wrap textarea:focus, .comment-compose textarea:focus {
  border-color: var(--ink);
}

.agent-input-wrap button {
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  place-items: center;
  width: 35px;
  height: 35px;
  display: grid;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.spin {
  animation: .8s linear infinite spin;
}

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

.demo-result {
  border-left: 3px solid var(--teal);
  background: #f1f7f5;
  margin-top: 16px;
  padding: 18px;
}

.demo-result > div {
  align-items: center;
  gap: 8px;
  font-weight: 800;
  display: flex;
}

.demo-result ol {
  color: #414742;
  margin: 14px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
}

.demo-result p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.release-section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  justify-content: space-between;
  gap: 30px;
  padding: 28px;
  display: flex;
}

.release-section h2 {
  margin: 8px 0;
  font-size: 32px;
}

.release-section p {
  max-width: 520px;
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.release-meta {
  min-width: 180px;
  color: var(--muted);
  align-content: center;
  gap: 8px;
  font-size: 12px;
  display: grid;
}

.comment-compose {
  grid-template-columns: 40px 1fr;
  gap: 12px;
  display: grid;
}

.avatar {
  background: var(--coral);
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 800;
  display: grid;
}

.avatar-muted {
  color: #555a55;
  background: #dfe1db;
}

.comment-compose textarea {
  padding: 12px;
}

.comment-compose button {
  float: right;
  margin-top: 8px;
}

.comment-list {
  border-top: 1px solid var(--line);
  margin-top: 28px;
}

.comment-list article {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 40px 1fr;
  gap: 12px;
  padding: 22px 0;
  display: grid;
}

.comment-list strong {
  font-size: 13px;
}

.comment-list article div > span {
  color: var(--muted);
  margin-left: 10px;
  font-size: 11px;
}

.comment-list p {
  color: #4f544f;
  margin: 8px 0 0;
  font-size: 13px;
}

.membership-page {
  min-height: 720px;
  padding: 84px 0 110px;
}

.membership-layout {
  grid-template-columns: 1fr 470px;
  align-items: center;
  gap: 90px;
  display: grid;
}

.membership-copy h1 {
  max-width: 630px;
  margin: 16px 0 20px;
  font-family: Georgia, Songti SC, serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.14;
}

.membership-copy > p {
  max-width: 600px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.membership-values {
  gap: 20px;
  margin-top: 36px;
  display: grid;
}

.membership-values > div {
  color: var(--teal);
  grid-template-columns: 24px 1fr;
  gap: 12px;
  display: grid;
}

.membership-values span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.membership-values strong {
  color: var(--ink);
  font-size: 14px;
  display: block;
}

.checkout-column {
  width: 100%;
}

.billing-toggle {
  border: 1px solid var(--line);
  background: #ecece6;
  border-radius: 7px;
  width: max-content;
  margin: 0 auto 14px;
  padding: 4px;
  display: flex;
}

.billing-toggle button {
  height: 34px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  padding: 0 14px;
  font-size: 12px;
}

.billing-toggle button.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 2px 7px #14191414;
}

.billing-toggle span {
  color: #c44936;
  font-weight: 800;
}

.pricing-card {
  background: #fff;
  border: 1px solid #c9cbc4;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 20px 55px #23282317;
}

.pricing-head {
  border-bottom: 1px solid var(--soft-line);
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  display: flex;
}

.pricing-head > div > span {
  color: var(--muted);
  font-size: 12px;
}

.pricing-head h2 {
  margin: 7px 0 0;
  font-size: 42px;
}

.pricing-head small {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.pricing-badge {
  color: #8a5710;
  background: #fae8b7;
  border-radius: 4px;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.pricing-features {
  gap: 15px;
  padding: 24px 0;
  display: grid;
}

.pricing-features span {
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
}

.pricing-features svg {
  color: var(--teal);
}

.payment-buttons {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  display: grid;
}

.pay-wechat {
  color: #fff;
  background: #20a865;
}

.pay-redeem {
  color: #fff;
  background: #8b5cf6;
}

.pay-alipay {
  color: #fff;
  background: #1677ff;
}

.pricing-note {
  color: #969a95;
  text-align: center;
  margin: 13px 0 0;
  font-size: 10px;
}

.membership-intro {
  max-width: 760px;
  margin-bottom: 54px;
}

.membership-intro h1 {
  max-width: 760px;
}

.pricing-section, .service-pricing-section {
  margin-top: 42px;
}

.pricing-section-head {
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 20px;
  display: flex;
}

.pricing-section-head h2 {
  margin: 7px 0 0;
  font-size: 27px;
}

.pricing-section-head > p {
  color: var(--muted);
  margin: 0;
  font-size: 12px;
}

.current-plan {
  color: #226b48;
  background: #e8f4ec;
  border-radius: 5px;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.plan-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.plan-card {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  flex-direction: column;
  min-width: 0;
  padding: 20px 17px;
  display: flex;
}

.plan-card-head {
  justify-content: space-between;
  gap: 8px;
  min-height: 55px;
  display: flex;
}

.plan-card-head > div > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  display: block;
}

.plan-card-head strong {
  margin-top: 7px;
  font-size: 23px;
  display: inline-block;
}

.plan-card-head small {
  color: var(--muted);
  font-size: 10px;
}

.plan-current {
  background: #e8f4ec;
  border-radius: 4px;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  color: #226b48 !important;
  font-size: 9px !important;
  display: flex !important;
}

.plan-credits {
  margin: 17px 0 14px;
  font-size: 24px;
  font-weight: 800;
}

.plan-credits span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 9px;
  font-weight: 500;
  display: block;
}

.plan-meta {
  border-top: 1px solid var(--soft-line);
  color: var(--muted);
  gap: 8px;
  padding: 13px 0 18px;
  font-size: 10px;
  display: grid;
}

.plan-meta span {
  justify-content: space-between;
  display: flex;
}

.plan-meta b {
  color: var(--ink);
}

.plan-card .button {
  width: 100%;
  min-height: 37px;
  margin-top: auto;
  padding: 0 8px;
  font-size: 11px;
}

.selected-checkout {
  border: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 20px 22px;
  display: flex;
}

.selected-checkout > div:first-child {
  gap: 3px;
  display: grid;
}

.selected-checkout span, .selected-checkout small {
  color: #bfc2be;
  font-size: 10px;
}

.selected-checkout strong {
  font-size: 17px;
}

.selected-checkout .payment-buttons {
  width: 420px;
}

.service-pricing-section {
  border-top: 1px solid var(--line);
  padding-top: 44px;
}

.price-table {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.price-table > div {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: 1.3fr 1fr .9fr .8fr;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 12px;
  display: grid;
}

.price-table > div:last-child {
  border-bottom: 0;
}

.price-table-head {
  color: var(--muted);
  background: #efefe9;
  font-weight: 800;
  min-height: 46px !important;
  font-size: 10px !important;
}

.price-table b {
  color: var(--teal);
}

.membership-active {
  color: #226b48;
  background: #e8f4ec;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
}

.modal-backdrop {
  z-index: 100;
  background: #14171594;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.checkout-modal {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  width: min(380px, 100%);
  padding: 30px;
  position: relative;
}

.modal-close {
  cursor: pointer;
  background: #f0f0eb;
  border: 0;
  border-radius: 5px;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  position: absolute;
  top: 10px;
  right: 10px;
}

.payment-logo {
  color: #fff;
  border-radius: 50%;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  display: grid;
}

.payment-logo.wechat {
  background: #20a865;
}

.payment-logo.alipay {
  background: #1677ff;
}

.checkout-modal h3 {
  margin: 0;
  font-size: 21px;
}

.checkout-modal p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.fake-qr {
  border: 1px solid var(--line);
  place-items: center;
  width: 150px;
  height: 150px;
  margin: 18px auto;
  display: grid;
}

.prototype-label {
  color: #a0a39f;
  font-size: 11px;
}

.demo-pay-button {
  width: 100%;
  margin-bottom: 12px;
}

.payment-success {
  min-height: 220px;
  color: var(--teal);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.payment-success strong {
  color: var(--ink);
  font-size: 18px;
}

.payment-success span {
  color: var(--muted);
  font-size: 12px;
}

.auth-modal {
  background: #fff;
  border-radius: 8px;
  width: min(410px, 100%);
  padding: 30px;
  position: relative;
}

.auth-icon {
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  display: grid;
}

.auth-modal h2 {
  margin: 16px 0 6px;
  font-size: 23px;
}

.auth-modal > p {
  color: var(--muted);
  margin: 0 0 22px;
  font-size: 13px;
}

.auth-modal form {
  gap: 8px;
  display: grid;
}

.auth-channel-tabs {
  background: #efefe9;
  border-radius: 6px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 2px 0 8px;
  padding: 4px;
  display: grid;
}

.auth-channel-tabs button {
  height: 36px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  display: flex;
}

.auth-channel-tabs button.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 4px #2328231a;
}

.auth-modal label {
  margin-top: 7px;
  font-size: 12px;
  font-weight: 800;
}

.auth-modal input {
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: 0;
  width: 100%;
  height: 42px;
  padding: 0 11px;
}

.auth-modal input:focus {
  border-color: var(--ink);
}

.code-row {
  grid-template-columns: 1fr 112px;
  gap: 8px;
  display: grid;
}

.code-row button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #efefe9;
  border-radius: 6px;
  font-size: 12px;
}

.auth-submit {
  width: 100%;
  margin: 14px 0 12px;
}

.account-page {
  min-height: 720px;
  padding: 62px 0 100px;
}

.account-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 34px;
  display: flex;
}

.account-identity {
  align-items: center;
  gap: 16px;
  display: flex;
}

.account-avatar {
  color: #fff;
  background: var(--coral);
  border-radius: 50%;
  place-items: center;
  width: 56px;
  height: 56px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

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

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

.account-identity h1 {
  margin: 3px 0 0;
  font-size: 25px;
}

.account-grid {
  grid-template-columns: 220px 1fr;
  gap: 32px;
  display: grid;
}

.account-nav {
  align-content: start;
  gap: 5px;
  display: grid;
}

.account-nav button {
  height: 44px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  display: flex;
}

.account-nav a {
  height: 44px;
  color: var(--muted);
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 13px;
  display: flex;
}

.account-nav button.is-active {
  color: var(--ink);
  background: #e8e9e3;
  font-weight: 800;
}

.account-membership {
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px;
  display: flex;
}

.account-membership span {
  color: #bbbeba;
  font-size: 11px;
}

.account-membership h2 {
  margin: 5px 0;
  font-size: 24px;
}

.account-membership p {
  color: #d2d4d1;
  margin: 0;
  font-size: 12px;
}

.account-section-head {
  justify-content: space-between;
  align-items: center;
  margin: 34px 0 12px;
  display: flex;
}

.account-section-head h2 {
  margin: 0;
  font-size: 19px;
}

.account-section-head > div:first-child {
  gap: 2px;
  display: grid;
}

.account-section-head > div:first-child > span, .profile-editor .account-section-head > span {
  color: var(--muted);
  font-size: 11px;
}

.account-section-actions {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.account-blueprint-list {
  gap: 8px;
}

.account-blueprint-item {
  background: #faf8fb;
  border: 1px solid #ddd6e0;
  border-radius: 8px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  display: grid;
}

.account-blueprint-open {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 8px;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  display: grid;
}

.account-blueprint-open:hover {
  background: #ffffffd9;
}

.account-blueprint-open:disabled {
  opacity: .65;
  cursor: wait;
}

.account-blueprint-open strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
}

.account-blueprint-open div span {
  color: var(--muted);
  font-size: 11px;
}

.account-blueprint-open > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.account-blueprint-item .icon-button {
  color: #a63e57;
  margin-right: 8px;
}

.profile-form {
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 4px 4px #25233a1f;
}

.profile-avatar-editor {
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  display: flex;
}

.profile-avatar-preview {
  border: 2px solid var(--ink);
  color: #fff;
  background: var(--coral);
  border-radius: 50%;
  flex: 0 0 80px;
  place-items: center;
  width: 80px;
  height: 80px;
  display: grid;
  overflow: hidden;
}

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

.profile-avatar-editor > div {
  gap: 6px;
  display: grid;
}

.profile-avatar-editor > div > span {
  color: var(--muted);
  font-size: 10px;
}

.profile-avatar-editor > div > div {
  align-items: center;
  gap: 7px;
  display: flex;
}

.profile-field-grid {
  grid-template-columns: 1.2fr .8fr 1fr;
  gap: 14px;
  margin-top: 22px;
  display: grid;
}

.profile-form label {
  color: #514e5e;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.profile-form input:not([type="file"]), .profile-form select, .profile-form textarea {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  outline: 0;
  width: 100%;
  padding: 10px 11px;
  font-size: 13px;
}

.profile-form input:focus, .profile-form select:focus, .profile-form textarea:focus {
  border-color: var(--ink);
}

.profile-bio {
  margin-top: 16px;
  position: relative;
}

.profile-bio > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 500;
  position: absolute;
  bottom: 8px;
  right: 10px;
}

.profile-save-row {
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  margin-top: 16px;
  display: flex;
}

.profile-save-row > span {
  color: #a04c39;
  font-size: 11px;
}

.activity-list {
  border-top: 1px solid var(--line);
}

.activity-list a {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  display: grid;
}

.activity-icon {
  color: #fff;
  border-radius: 6px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.activity-icon.teal {
  background: var(--teal);
}

.activity-icon.coral {
  background: var(--coral);
}

.activity-icon.ink {
  background: var(--ink);
}

.activity-list strong {
  font-size: 13px;
  display: block;
}

.activity-list div span, .activity-list a > span:last-child {
  color: var(--muted);
  font-size: 11px;
}

.account-empty {
  border-top: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  padding: 70px 20px;
  font-size: 13px;
}

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

.asset-library-item {
  border: 1px solid var(--line);
  background: #ffffffc7;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.asset-preview {
  aspect-ratio: 16 / 10;
  color: var(--muted);
  background: #f0edf2;
  place-items: center;
  display: grid;
  position: relative;
  overflow: hidden;
}

.asset-preview img, .asset-preview video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.asset-library-info {
  gap: 10px;
  padding: 12px;
  display: grid;
}

.asset-library-info > div:first-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.asset-library-info strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.asset-library-info span {
  color: var(--muted);
  font-size: 10px;
}

.asset-library-actions {
  align-items: center;
  gap: 6px;
  min-height: 32px;
  display: flex;
}

.asset-library-actions select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  flex: 1;
  min-width: 0;
  height: 30px;
  font-size: 11px;
}

.asset-library-actions > span {
  flex: 1;
}

.player-layout {
  color: #fff;
  background: #111311;
  grid-template-columns: minmax(0, 1fr) 330px;
  min-height: calc(100vh - 70px);
  display: grid;
}

.player-main {
  padding: 28px clamp(24px, 5vw, 70px) 60px;
}

.player-back {
  color: #b9bcb8;
}

.video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
  place-items: center;
  width: 100%;
  display: grid;
  overflow: hidden;
}

.video-frame iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

.video-placeholder {
  color: #afb2ae;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  display: flex;
}

.lesson-title-row {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 25px;
  display: flex;
}

.lesson-title-row span {
  color: #9ea19d;
  font-size: 11px;
}

.lesson-title-row h1 {
  margin: 6px 0 0;
  font-size: 23px;
}

.player-main .button-outline {
  color: #fff;
  border-color: #555a56;
}

.lesson-description {
  color: #9ea19d;
  max-width: 760px;
  font-size: 13px;
  line-height: 1.7;
}

.course-sidebar {
  background: #191c1a;
  border-left: 1px solid #303431;
  padding: 28px 20px;
}

.course-sidebar-head {
  justify-content: space-between;
  font-size: 13px;
  display: flex;
}

.course-sidebar-head strong {
  color: #77c6ae;
}

.progress-track {
  background: #323633;
  height: 3px;
  margin: 15px 0 22px;
}

.progress-track span {
  background: var(--teal);
  height: 100%;
  display: block;
}

.sidebar-lessons {
  gap: 6px;
  display: grid;
}

.sidebar-lessons button {
  color: #c8cbc7;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  grid-template-columns: 28px 1fr;
  gap: 9px;
  width: 100%;
  padding: 12px;
  display: grid;
}

.sidebar-lessons button.is-active {
  color: #fff;
  background: #2a2e2b;
}

.lesson-status {
  border: 1px solid #4b504c;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  display: grid;
}

.sidebar-lessons strong, .sidebar-lessons small {
  display: block;
}

.sidebar-lessons strong {
  font-size: 12px;
}

.sidebar-lessons small {
  color: #888d89;
  margin-top: 5px;
  font-size: 10px;
}

.course-locked {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: calc(100vh - 70px);
  display: flex;
}

.course-locked h1 {
  margin: 4px 0 0;
}

.course-locked p {
  color: var(--muted);
  margin: 0 0 10px;
}

.admin-page {
  min-height: 720px;
  padding: 58px 0 100px;
}

.admin-locked {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: calc(100vh - 70px);
  padding: 30px;
  display: flex;
}

.admin-locked h1 {
  margin: 5px 0 0;
  font-size: 30px;
}

.admin-locked p {
  color: var(--muted);
  margin: 0 0 8px;
}

.admin-head {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
  display: flex;
}

.admin-head h1 {
  margin: 7px 0 4px;
  font-size: 32px;
}

.admin-head p {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
}

.stat-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  display: grid;
}

.stat-grid article {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  gap: 7px;
  padding: 20px;
  display: grid;
}

.stat-grid article svg {
  color: var(--teal);
}

.stat-grid article span {
  color: var(--muted);
  font-size: 11px;
}

.stat-grid article strong {
  font-size: 25px;
}

.stat-grid article small {
  color: #32845a;
}

.admin-columns {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  margin-top: 24px;
  display: grid;
}

.pricing-admin {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  margin-top: 24px;
  padding: 24px;
}

.model-settings-admin {
  margin-top: 24px;
}

.model-settings-admin .admin-section-title {
  align-items: flex-start;
  min-height: 88px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.model-settings-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px 20px 8px;
  display: grid;
}

.model-settings-box {
  border: 1px solid #d8d2dc;
  border-radius: 6px;
  margin: 0;
  padding: 16px 16px 12px;
}

.model-settings-box legend {
  color: #4d4656;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
}

.model-settings-field {
  color: #6e6874;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.model-settings-field input, .model-settings-field select {
  color: #302c39;
  background: #fff;
  border: 1px solid #d6d0da;
  border-radius: 4px;
  outline: 0;
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

.model-settings-field input:focus, .model-settings-field select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px #ff66851a;
}

.model-settings-field select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.secret-input-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.secret-toggle {
  color: #6f6977;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.secret-toggle input {
  accent-color: var(--coral);
}

.model-ping-row {
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  display: flex;
}

.model-ping-status {
  color: #8c8793;
  font-size: 11px;
  line-height: 1.5;
}

.model-ping-status.is-ok {
  color: #2f7a45;
}

.model-ping-status.is-bad {
  color: #b52f50;
}

.pricing-admin-head {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  display: flex;
}

.pricing-admin-head h2 {
  margin: 5px 0 3px;
  font-size: 21px;
}

.pricing-admin-head p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.pricing-admin-head > div:last-child {
  gap: 8px;
  display: flex;
}

.admin-publish-bar {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 16px 0 2px;
  display: flex;
}

.admin-publish-bar label {
  color: var(--muted);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.admin-publish-bar input {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  width: 240px;
  min-width: 0;
  padding: 9px 11px;
}

.admin-publish-bar p {
  color: var(--muted);
  margin: 0;
  font-size: 11px;
}

.admin-publish-bar .is-error {
  color: #b43838;
}

.admin-publish-bar .is-success {
  color: #26765b;
}

.admin-price-block {
  margin-top: 25px;
}

.admin-price-block h3 {
  margin: 0 0 10px;
  font-size: 14px;
}

.editable-price-table {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
}

.editable-price-table > div {
  border-bottom: 1px solid var(--soft-line);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 7px 12px;
  font-size: 11px;
  display: grid;
}

.editable-price-table > div:last-child {
  border-bottom: 0;
}

.editable-price-table > div:first-child {
  min-height: 38px;
  color: var(--muted);
  background: #f1f1ec;
  font-size: 9px;
  font-weight: 800;
}

.plan-edit-table > div, .service-edit-table > div {
  grid-template-columns: 1.2fr repeat(4, 1fr);
  min-width: 680px;
}

.comparison-edit-table > div {
  grid-template-columns: 1fr 1fr .7fr 1.7fr;
  min-width: 680px;
}

.editable-price-table input {
  border: 1px solid var(--line);
  background: #fbfbf8;
  border-radius: 4px;
  outline: 0;
  width: 100%;
  min-width: 0;
  height: 33px;
  padding: 0 8px;
  font-size: 11px;
}

.editable-price-table input:focus {
  border-color: var(--ink);
}

.admin-section, .admin-side section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.admin-section-title {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  min-height: 65px;
  padding: 0 20px;
  display: flex;
}

.admin-section-title h2, .admin-side h2 {
  margin: 0;
  font-size: 16px;
}

.admin-section-title > div p {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 10px;
}

.admin-section-title button {
  color: #fff;
  background: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 11px;
}

.badge-admin {
  margin: 24px 0;
  overflow: hidden;
}

.badge-admin .admin-section-title {
  min-height: 82px;
}

.badge-admin-list {
  display: grid;
  overflow: hidden;
}

.badge-admin-list article {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: 28px minmax(140px, .78fr) minmax(150px, 1fr) minmax(112px, .72fr) minmax(150px, .9fr) minmax(145px, .88fr) minmax(145px, .88fr);
  align-items: end;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px 14px;
  display: grid;
}

.badge-admin-list article:last-child {
  border-bottom: 0;
}

.badge-admin-list label {
  color: var(--muted);
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  display: grid;
}

.badge-admin-list input:not([type="checkbox"]), .badge-admin-list select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  font-size: 11px;
}

.date-input-wrap {
  display: block;
  position: relative;
}

.date-input-wrap > span {
  color: #5f5b70;
  pointer-events: none;
  background: #fff;
  align-items: center;
  font-size: 11px;
  display: flex;
  position: absolute;
  inset: 1px 32px 1px 9px;
}

.badge-product {
  align-self: center;
  gap: 4px;
  display: grid;
}

.badge-product strong {
  font-size: 12px;
}

.badge-product small {
  color: var(--muted);
  font-size: 9px;
}

.badge-toggle {
  align-self: center;
}

.badge-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--coral);
}

.badge-color-picker {
  align-items: center;
  gap: 5px;
  height: 34px;
  display: flex;
}

.badge-color-picker button {
  cursor: pointer;
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 1px var(--line);
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0;
}

.badge-color-picker button.is-active {
  box-shadow: 0 0 0 2px var(--ink);
}

.badge-swatch-coral {
  background: #ff6685;
}

.badge-swatch-teal {
  background: #35a9a3;
}

.badge-swatch-gold {
  background: #f2bd3d;
}

.badge-swatch-blue {
  background: #5b7ee5;
}

.badge-swatch-green {
  background: #69a96f;
}

.badge-swatch-ink {
  background: #25233a;
}

.admin-save-status {
  border-top: 1px solid var(--soft-line);
  color: var(--muted);
  margin: 0;
  padding: 10px 18px;
  font-size: 10px;
}

.comment-admin {
  margin: 24px 0;
  overflow: hidden;
}

.comment-admin-head {
  min-height: 82px;
}

.comment-admin-actions {
  gap: 8px;
  display: flex;
}

.comment-admin-tools {
  border-bottom: 1px solid var(--line);
  background: #faf9fb;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  display: flex;
}

.comment-status-tabs {
  gap: 4px;
  display: flex;
}

.comment-status-tabs button {
  height: 32px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 11px;
}

.comment-status-tabs button.is-active {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}

.comment-admin-tools > label {
  border: 1px solid var(--line);
  min-width: 220px;
  height: 34px;
  color: var(--muted);
  background: #fff;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 0 9px;
  display: flex;
}

.comment-admin-tools input {
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 11px;
}

.comment-admin-list {
  display: grid;
}

.comment-admin-list article {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: 220px minmax(0, 1fr) 76px 112px;
  align-items: center;
  gap: 18px;
  min-height: 90px;
  padding: 14px 18px;
  display: grid;
}

.comment-admin-meta {
  gap: 4px;
  display: grid;
}

.comment-admin-meta strong {
  font-size: 12px;
}

.comment-admin-meta span, .comment-admin-meta small {
  color: var(--muted);
  font-size: 9px;
}

.comment-admin-list article > p {
  color: #4e4a5d;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.comment-status {
  text-align: center;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 9px;
  font-weight: 800;
}

.status-pending {
  color: #7b570f;
  background: #fff0b8;
}

.status-published {
  color: #256344;
  background: #dff2e6;
}

.status-hidden {
  color: #6c6877;
  background: #eae7ed;
}

.comment-row-actions {
  justify-content: flex-end;
  gap: 5px;
  display: flex;
}

.comment-row-actions button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  place-items: center;
  width: 32px;
  height: 32px;
  display: grid;
}

.comment-row-actions button:hover {
  border-color: var(--ink);
}

.comment-row-actions button.danger {
  color: #b23c48;
}

.comment-admin-empty {
  color: var(--muted);
  text-align: center;
  padding: 44px 18px;
  font-size: 12px;
}

.admin-table > div {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: minmax(220px, 1fr) 100px 90px 45px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 18px;
  font-size: 12px;
  display: grid;
}

.admin-table > div:last-child {
  border-bottom: 0;
}

.admin-table-head {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 10px !important;
}

.status-live {
  color: #277b52;
  background: #e7f2ea;
  border-radius: 4px;
  width: max-content;
  padding: 4px 7px;
}

.admin-table a {
  font-weight: 800;
}

.admin-side {
  align-content: start;
  gap: 18px;
  display: grid;
}

.admin-side section {
  padding: 20px;
}

.admin-side h2 {
  margin-bottom: 18px;
}

.admin-side section > div:not(.funnel) {
  color: var(--teal);
  grid-template-columns: 22px 1fr;
  gap: 10px;
  margin-top: 15px;
  display: grid;
}

.admin-side section > div span {
  color: var(--muted);
  font-size: 12px;
}

.admin-side section > div strong {
  color: var(--ink);
  display: block;
}

.funnel {
  gap: 7px;
  display: grid;
}

.funnel span {
  background: var(--teal);
  min-width: 88px;
  padding: 8px 9px;
  display: block;
  color: #fff !important;
  font-size: 10px !important;
}

.site-footer {
  border-top: 1px solid var(--line);
  background: #eeeee8;
  padding: 52px 0 24px;
}

.footer-grid {
  justify-content: space-between;
  gap: 40px;
  display: flex;
}

.footer-brand {
  margin-bottom: 12px;
}

.footer-grid p {
  color: var(--muted);
  font-size: 13px;
}

.footer-links {
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  font-size: 12px;
  display: flex;
}

.footer-bottom {
  color: #969a95;
  border-top: 1px solid #d7d8d1;
  margin-top: 38px;
  padding-top: 18px;
  font-size: 11px;
}

.empty-page {
  place-content: center;
  justify-items: center;
  gap: 20px;
  min-height: 600px;
  display: grid;
}

.drama-page {
  background: #f3f4ef;
  min-height: 820px;
  padding: 42px 0 100px;
}

.drama-topbar {
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 28px;
  display: flex;
}

.drama-topbar h1 {
  margin: 9px 0 8px;
  font-family: Georgia, Songti SC, serif;
  font-size: 40px;
  font-weight: 600;
}

.drama-topbar p {
  color: var(--muted);
  margin: 0;
  font-size: 14px;
}

.quota-summary {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  width: 220px;
  padding: 15px 17px;
}

.quota-summary > span {
  color: var(--muted);
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.quota-summary strong {
  margin-top: 7px;
  font-size: 25px;
  display: block;
}

.quota-summary strong small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.quota-summary > small {
  color: #929690;
  font-size: 9px;
}

.quota-track {
  background: #e8e9e3;
  height: 4px;
  margin: 9px 0 7px;
  overflow: hidden;
}

.quota-track span {
  background: var(--coral);
  height: 100%;
  display: block;
}

.drama-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.drama-sidebar {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  position: sticky;
  top: 94px;
}

.workspace-status {
  border-bottom: 1px solid var(--soft-line);
  align-items: center;
  gap: 8px;
  padding-bottom: 16px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
}

.drama-sidebar nav {
  border-bottom: 1px solid var(--soft-line);
  gap: 5px;
  padding: 14px 0;
  display: grid;
}

.drama-sidebar nav a {
  min-height: 39px;
  color: var(--muted);
  border-radius: 5px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  font-size: 12px;
  display: flex;
}

.drama-sidebar nav a span {
  margin-left: auto;
}

.drama-sidebar nav a.is-active {
  color: var(--ink);
  background: #efefe9;
  font-weight: 800;
}

.pipeline-list {
  gap: 12px;
  padding: 17px 4px;
  display: grid;
}

.pipeline-list > span {
  color: #969994;
  text-transform: uppercase;
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 800;
}

.pipeline-list div {
  color: #626661;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  display: flex;
}

.pipeline-list b {
  border: 1px solid var(--line);
  color: #929590;
  border-radius: 50%;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 9px;
  display: grid;
}

.provider-note {
  color: var(--teal);
  background: #edf5f2;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  padding: 13px;
  display: grid;
}

.provider-note p {
  color: #5c645f;
  margin: 0;
  font-size: 10px;
  line-height: 1.55;
}

.provider-note strong {
  color: #245e51;
  margin-bottom: 2px;
  display: block;
}

.drama-main {
  gap: 22px;
  min-width: 0;
  display: grid;
}

.create-panel, .task-section {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
}

.create-panel {
  padding: 25px;
}

.panel-title, .task-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.panel-title > div > span, .task-heading > div > span {
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
}

.panel-title h2, .task-heading h2 {
  margin: 4px 0 0;
  font-size: 22px;
}

.source-toggle {
  border: 1px solid var(--line);
  background: #efefe9;
  border-radius: 7px;
  width: max-content;
  margin: 24px 0 18px;
  padding: 3px;
  display: flex;
}

.source-toggle button {
  height: 34px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  font-size: 12px;
  display: inline-flex;
}

.source-toggle button.is-active {
  color: var(--ink);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 2px 7px #14191414;
}

.field-block {
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.field-block > span, .option-group > span {
  font-size: 11px;
  font-weight: 800;
}

.input-with-icon {
  height: 44px;
  color: var(--muted);
  background: #fbfbf8;
  border: 1px solid #cfd1ca;
  border-radius: 6px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  display: flex;
}

.input-with-icon:focus-within {
  border-color: var(--ink);
}

.input-with-icon input {
  background: none;
  border: 0;
  outline: 0;
  width: 100%;
}

.field-block textarea {
  resize: vertical;
  background: #fbfbf8;
  border: 1px solid #cfd1ca;
  border-radius: 6px;
  outline: 0;
  width: 100%;
  min-height: 118px;
  padding: 13px;
  line-height: 1.65;
}

.field-block textarea:focus {
  border-color: var(--ink);
}

.upload-zone {
  min-height: 130px;
  color: var(--muted);
  cursor: pointer;
  background: #fbfbf8;
  border: 1px dashed #b8bbb4;
  border-radius: 7px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  display: flex;
}

.upload-zone:hover {
  border-color: var(--ink);
}

.upload-zone input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
}

.upload-zone strong {
  max-width: 80%;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.upload-zone span {
  font-size: 10px;
}

.option-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
  display: grid;
}

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

.option-group > div {
  border: 1px solid var(--line);
  background: #f0f0eb;
  border-radius: 6px;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  display: grid;
}

.option-group button {
  min-height: 34px;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 11px;
}

.option-group button.is-active {
  color: var(--ink);
  background: #fff;
  font-weight: 800;
  box-shadow: 0 2px 6px #14191414;
}

.submit-row {
  border-top: 1px solid var(--soft-line);
  align-items: center;
  gap: 18px;
  min-height: 64px;
  margin-top: 24px;
  padding-top: 20px;
  display: flex;
}

.submit-row > div {
  gap: 3px;
  display: grid;
}

.submit-row > div span {
  color: var(--muted);
  font-size: 10px;
}

.submit-row > div strong {
  font-size: 15px;
}

.submit-row .cost-estimate small {
  color: #929690;
  font-size: 9px;
}

.submit-row .button {
  margin-left: auto;
}

.form-message {
  color: #a04c39;
  font-size: 11px;
}

.task-section {
  overflow: hidden;
}

.task-heading {
  border-bottom: 1px solid var(--line);
  padding: 21px 24px;
}

.task-heading > span {
  color: var(--muted);
  align-self: center;
  font-size: 11px;
}

.task-list {
  display: grid;
}

.task-row {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: 66px minmax(0, 1fr) 105px 38px;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 14px 20px;
  display: grid;
}

.task-row:last-child {
  border-bottom: 0;
}

.task-thumb {
  color: #fff;
  background: #343936;
  place-items: center;
  width: 66px;
  height: 58px;
  display: grid;
  position: relative;
}

.task-thumb span {
  font-size: 8px;
  position: absolute;
  bottom: 4px;
  right: 5px;
}

.task-info {
  min-width: 0;
}

.task-info > div:first-child {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.task-info strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.task-info div > span, .task-info p {
  color: var(--muted);
  font-size: 9px;
}

.task-info p {
  margin: 6px 0 9px;
}

.task-progress {
  background: #e7e8e2;
  height: 3px;
  overflow: hidden;
}

.task-progress span {
  background: var(--teal);
  height: 100%;
  transition: width .5s linear;
  display: block;
}

.task-state {
  color: #a76323;
  grid-template-columns: 18px 1fr;
  align-items: center;
  font-size: 10px;
  display: grid;
}

.task-state small {
  color: var(--muted);
  grid-column: 2;
}

.task-state.is-done {
  color: var(--teal);
}

.task-empty {
  color: #a2a59f;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 180px;
  display: flex;
}

.task-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.task-empty span {
  font-size: 11px;
}

@media (max-width: 900px) {
  .main-nav {
    display: none;
  }

  .intro-grid, .detail-hero, .membership-layout {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    gap: 42px;
  }

  .featured-panel {
    max-width: 620px;
  }

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

  .membership-strip-inner, .comparison-grid {
    grid-template-columns: 1fr 1fr;
  }

  .membership-strip-inner .button {
    grid-column: 1 / -1;
    width: max-content;
  }

  .membership-layout {
    gap: 45px;
  }

  .checkout-column {
    max-width: 520px;
  }

  .player-layout {
    grid-template-columns: 1fr;
  }

  .course-sidebar {
    border-top: 1px solid #303431;
    border-left: 0;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-columns {
    grid-template-columns: 1fr;
  }

  .pricing-admin-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-publish-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-publish-bar label {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-publish-bar input {
    width: 100%;
  }

  .plan-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .drama-layout {
    grid-template-columns: 1fr;
  }

  .drama-sidebar {
    position: static;
  }

  .drama-sidebar nav {
    grid-template-columns: 1fr 1fr;
  }

  .pipeline-list {
    grid-template-columns: repeat(5, 1fr);
  }

  .pipeline-list > span {
    grid-column: 1 / -1;
  }

  .pipeline-list div {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(100% - 28px, 1180px);
  }

  .header-inner {
    height: 62px;
  }

  .header-join {
    display: none;
  }

  .intro-grid {
    min-height: auto;
    padding-block: 42px;
  }

  .intro-copy h1 {
    font-size: 39px;
  }

  .intro-copy > p {
    font-size: 15px;
  }

  .intro-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .product-visual.is-large {
    height: 270px;
  }

  .catalog-section, .page-section {
    padding: 58px 0 70px;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .section-heading h2, .page-heading h1 {
    font-size: 31px;
  }

  .catalog-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-bar {
    padding-bottom: 2px;
    overflow-x: auto;
  }

  .catalog-search {
    width: 100%;
  }

  .filter-bar button {
    flex: none;
  }

  .product-grid, .comparison-grid {
    grid-template-columns: 1fr;
  }

  .comparison-grid article {
    min-height: 250px;
  }

  .membership-strip-inner {
    grid-template-columns: 1fr;
  }

  .membership-strip h2 {
    font-size: 26px;
  }

  .membership-strip-inner .button {
    grid-column: auto;
  }

  .detail-page {
    padding-top: 24px;
  }

  .detail-hero {
    gap: 36px;
    padding-bottom: 44px;
  }

  .detail-copy h1, .membership-copy h1 {
    font-size: 38px;
  }

  .detail-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .detail-actions .favorite-button {
    justify-content: center;
  }

  .lesson-list > div {
    grid-template-columns: 34px 1fr auto;
    padding: 13px 0;
  }

  .lesson-list > div > span:last-child {
    display: none;
  }

  .release-section {
    flex-direction: column;
  }

  .agent-demo {
    padding: 18px;
  }

  .membership-page {
    padding: 58px 0 80px;
  }

  .pricing-card {
    padding: 22px;
  }

  .membership-intro {
    margin-bottom: 38px;
  }

  .pricing-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .plan-grid {
    grid-template-columns: 1fr;
  }

  .plan-card {
    min-height: 230px;
  }

  .selected-checkout {
    flex-direction: column;
    align-items: stretch;
  }

  .selected-checkout .payment-buttons {
    width: 100%;
  }

  .price-table {
    overflow-x: auto;
  }

  .price-table > div {
    min-width: 650px;
  }

  .payment-buttons {
    grid-template-columns: 1fr;
  }

  .account-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .account-grid {
    grid-template-columns: 1fr;
  }

  .account-nav {
    grid-template-columns: repeat(2, 1fr);
  }

  .account-nav a {
    justify-content: center;
  }

  .account-membership {
    flex-direction: column;
    align-items: flex-start;
  }

  .asset-library-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .player-layout {
    min-height: auto;
  }

  .player-main {
    padding: 22px 14px 36px;
  }

  .lesson-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .course-sidebar {
    padding: 24px 14px 40px;
  }

  .admin-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-grid article {
    padding: 15px;
  }

  .admin-table {
    overflow-x: auto;
  }

  .admin-table > div {
    min-width: 680px;
  }

  .drama-page {
    padding-top: 28px;
  }

  .drama-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .drama-topbar h1 {
    font-size: 34px;
  }

  .quota-summary {
    width: 100%;
  }

  .drama-sidebar {
    display: none;
  }

  .create-panel {
    padding: 18px;
  }

  .panel-title {
    flex-direction: column;
    gap: 7px;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  .submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .submit-row .button {
    width: 100%;
    margin-left: 0;
  }

  .task-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .task-row {
    grid-template-columns: 54px minmax(0, 1fr) 30px;
    padding: 14px;
  }

  .task-thumb {
    width: 54px;
    height: 54px;
  }

  .task-state {
    grid-area: 2 / 2 / auto / -1;
  }

  .task-row > svg, .task-row > .icon-button {
    grid-area: 1 / 3;
  }
}

:root {
  --ink: #25233a;
  --muted: #706d80;
  --paper: #fff9fb;
  --white: #fff;
  --line: #d9d2df;
  --soft-line: #eee8f0;
  --coral: #ff6685;
  --teal: #35a9a3;
  --gold: #f2bd3d;
  --blue: #5b7ee5;
  --green: #69a96f;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(#eadfea 1px, #0000 1px);
  background-size: 20px 20px;
  font-family: Microsoft YaHei UI, PingFang SC, system-ui, sans-serif;
}

.site-header {
  border-bottom: 2px solid var(--ink);
  background: #fff9fbf0;
  box-shadow: 0 4px #5b7ee51a;
}

.brand {
  color: var(--ink);
  font-weight: 900;
}

.brand-short {
  display: none;
}

.brand-mark {
  border: 2px solid var(--ink);
  background: var(--coral);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-3deg);
}

.main-nav a:hover {
  color: #e94269;
}

.member-chip {
  background: #ffe69b;
  border: 1px solid #c88b12;
  box-shadow: 2px 2px #c88b12;
}

.button-dark {
  border-color: var(--ink);
  background: var(--ink);
  box-shadow: 3px 3px 0 var(--coral);
}

.button-dark:hover {
  background: #39364f;
}

.button-stop {
  color: #fff;
  background: #d63b61;
  border-color: #bd3154;
  box-shadow: 2px 2px #8f2442;
}

.button-stop:hover {
  background: #bd3154;
}

.button-light, .button-outline {
  border-color: var(--ink);
  box-shadow: 2px 2px #25233a2e;
}

.market-intro {
  min-height: 600px;
  color: var(--ink);
  background-image: url("/images/anime-studio-hero.jpg");
  background-position: 50% 44%;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.hero-shade {
  background: #fff7fbb8;
  position: absolute;
  inset: 0;
}

.market-intro:after {
  content: "創作中!";
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: #ffe36e;
  padding: 9px 14px;
  font-weight: 900;
  position: absolute;
  top: 92px;
  right: 4%;
  transform: rotate(4deg);
}

.intro-grid {
  z-index: 1;
  align-items: center;
  min-height: 600px;
  padding-block: 58px 78px;
  display: flex;
  position: relative;
}

.intro-copy {
  width: min(660px, 68%);
}

.intro-copy h1, .section-heading h2, .page-heading h1, .membership-copy h1, .detail-copy h1, .drama-topbar h1 {
  font-family: Arial Rounded MT Bold, Microsoft YaHei UI, sans-serif;
  font-weight: 900;
}

.intro-copy h1 {
  text-shadow: 3px 3px #ffffffe6;
  font-size: 62px;
  line-height: 1.13;
}

.intro-copy > p {
  color: #4f4b5d;
  text-shadow: 1px 1px #fff;
  font-weight: 600;
}

.kicker, .section-kicker {
  color: #e94269;
}

.hero-stickers {
  justify-items: end;
  gap: 12px;
  display: grid;
  position: absolute;
  bottom: 54px;
  right: 1%;
}

.hero-stickers span {
  border: 2px solid var(--ink);
  width: max-content;
  box-shadow: 4px 4px 0 var(--ink);
  background: #fff;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  transform: rotate(-2deg);
}

.hero-stickers span:last-child {
  color: #174f53;
  background: #aee9e2;
  transform: rotate(2deg);
}

.catalog-section {
  background: #ffffffc2;
}

.section-heading h2, .page-heading h1 {
  color: var(--ink);
}

.filter-bar button.is-active {
  box-shadow: 2px 2px 0 var(--coral);
}

.catalog-search, .product-card, .featured-panel, .pricing-card, .plan-card, .comparison-grid article, .account-membership, .admin-section, .admin-side section, .pricing-admin, .create-panel, .task-section, .drama-sidebar {
  border-width: 2px;
  border-color: var(--ink);
}

.product-card {
  box-shadow: 5px 5px #25233a24;
}

.product-card:hover {
  transform: translate(-2px, -4px);
  box-shadow: 8px 9px #ff66853d;
}

.product-card h3 {
  font-weight: 900;
}

.card-visual-wrap .badge {
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.card-visual-wrap .favorite-button {
  border: 1px solid var(--ink);
}

.product-visual {
  background: #756cd8;
}

.accent-coral {
  background: #ff7690;
}

.accent-teal {
  background: #43b7ae;
}

.accent-gold {
  background: #ffd567;
}

.accent-blue {
  background: #6992ee;
}

.accent-ink {
  background: #55536e;
}

.accent-green {
  background: #75bd84;
}

.visual-grid {
  opacity: .28;
  background-size: 28px 28px;
  transform: rotate(-4deg)scale(1.1);
}

.visual-burst {
  border: 18px solid #ffffff38;
  border-radius: 50%;
  width: 130px;
  height: 130px;
  position: absolute;
  top: -25px;
  right: -20px;
}

.visual-kana {
  color: #fff3;
  font-size: 100px;
  font-weight: 900;
  position: absolute;
  bottom: -24px;
  left: 12px;
  transform: rotate(-8deg);
}

.visual-window {
  border: 2px solid var(--ink);
  background: #2b274361;
  transform: rotate(-1deg);
  box-shadow: 8px 9px #25233a57;
}

.visual-code {
  background: #ffffff2e;
  border: 1px solid;
  padding: 4px 7px;
}

.comparison-section {
  border-block: 2px solid var(--ink);
  background: #eaf7f4;
}

.comparison-grid article {
  box-shadow: 4px 4px #25233a24;
}

.comparison-grid article.is-featured {
  box-shadow: 5px 5px 0 var(--coral);
  background: #504b78;
}

.membership-strip {
  border-top: 2px solid var(--ink);
  background: #504b78;
}

.membership-strip .button-light {
  background: #ffe36e;
}

.membership-page, .account-page, .admin-page, .drama-page, .detail-page {
  background: #fff9fbc7;
}

.plan-card {
  box-shadow: 3px 3px #25233a1f;
}

.plan-card.is-selected {
  border-color: var(--coral);
  box-shadow: 4px 4px 0 var(--coral);
}

.selected-checkout, .account-membership {
  box-shadow: 5px 5px 0 var(--coral);
  background: #504b78;
}

.price-table, .editable-price-table {
  border-width: 2px;
  border-color: var(--ink);
  box-shadow: 3px 3px #25233a1f;
}

.price-table-head, .editable-price-table > div:first-child {
  background: #fff0a8;
}

.pricing-admin {
  box-shadow: 5px 5px #5b7ee526;
}

.stat-grid article {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px #25233a1f;
}

.stat-grid article:first-child {
  background: #fff0f3;
}

.stat-grid article:nth-child(2) {
  background: #eef8f5;
}

.stat-grid article:nth-child(3) {
  background: #fff8dc;
}

.stat-grid article:nth-child(4) {
  background: #eef2ff;
}

.drama-page {
  background-color: #f8f5fb;
}

.drama-sidebar {
  box-shadow: 4px 4px #25233a24;
}

.create-panel {
  box-shadow: 5px 5px #ff66852b;
}

.task-section {
  box-shadow: 5px 5px #35a9a329;
}

.source-toggle button.is-active, .option-group button.is-active {
  color: #8f2340;
  background: #ffe8ef;
}

.provider-note {
  background: #e4f8f4;
  border: 1px solid #78bdb6;
}

.site-footer {
  border-top: 2px solid var(--ink);
  background: #f3eaf3;
}

@media (max-width: 900px) {
  .intro-copy {
    width: min(720px, 82%);
  }

  .hero-stickers {
    display: none;
  }
}

@media (max-width: 640px) {
  .brand {
    font-size: 15px;
  }

  .brand-full, .user-name {
    display: none;
  }

  .brand-short {
    display: inline;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
  }

  .user-chip {
    justify-content: center;
    min-width: 38px;
    padding: 0;
  }

  .market-intro, .intro-grid {
    min-height: 590px;
  }

  .market-intro {
    background-position: 58%;
  }

  .hero-shade {
    background: #fff7fbcc;
  }

  .market-intro:after {
    font-size: 10px;
    top: 84px;
    right: 16px;
  }

  .intro-copy {
    width: 100%;
    padding-top: 88px;
  }

  .intro-copy h1 {
    font-size: 42px;
  }

  .product-card {
    box-shadow: 4px 4px #25233a24;
  }

  .profile-field-grid {
    grid-template-columns: 1fr;
  }

  .profile-avatar-editor {
    align-items: flex-start;
  }

  .profile-save-row {
    flex-direction: column;
    align-items: stretch;
  }

  .profile-save-row .button {
    width: 100%;
  }
}

.blueprint-page {
  color: #29263c;
  background: #f5f2f7;
  flex-direction: column;
  height: calc(100vh - 70px);
  min-height: 680px;
  display: flex;
  overflow: hidden;
}

body:has(.blueprint-page) .site-footer {
  display: none;
}

.blueprint-loading {
  min-height: 70vh;
  color: var(--muted);
  place-items: center;
  font-weight: 700;
  display: grid;
}

.blueprint-toolbar {
  background: #fffffff5;
  border-bottom: 1px solid #d8d3dc;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 9px 16px;
  display: grid;
}

.blueprint-title-block {
  align-items: center;
  gap: 10px;
  min-width: 0;
  display: flex;
}

.blueprint-mark {
  border: 2px solid var(--ink);
  color: #fff;
  background: var(--coral);
  width: 38px;
  height: 38px;
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 6px;
  flex: none;
  place-items: center;
  display: grid;
}

.blueprint-title-block > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.blueprint-title-block input {
  background: none;
  border: 0;
  outline: 0;
  width: min(280px, 100%);
  min-width: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 900;
}

.blueprint-title-picker {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: min(320px, 42vw);
  padding: 2px 4px 2px 0;
  display: inline-flex;
}

.blueprint-title-picker:hover {
  background: var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .blueprint-title-picker:hover {
    background: color-mix(in srgb, var(--coral) 10%, transparent);
  }
}

.blueprint-title-picker:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.blueprint-title-picker > span:first-child {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
}

.blueprint-title-picker > svg {
  color: #8c8793;
  flex-shrink: 0;
}

.blueprint-title-block > div > span {
  color: #8c8793;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  display: flex;
}

.status-dot {
  background: var(--green);
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

.blueprint-mode {
  background: #f1eef3;
  border: 1px solid #d8d3dc;
  border-radius: 6px;
  padding: 3px;
  display: flex;
}

.blueprint-mode button {
  color: #777180;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.blueprint-mode button.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 5px #2c26371f;
}

.blueprint-actions {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.cloud-draft-badge {
  color: #26766d;
  white-space: nowrap;
  background: #eaf8f5;
  border: 1px solid #9dcec4;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.blueprint-approval-bar {
  background: #fff8df;
  border-bottom: 1px solid #e6c675;
  grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.3fr) minmax(180px, .8fr) auto auto 32px;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  display: grid;
}

.blueprint-approval-bar > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.blueprint-approval-bar strong {
  color: #6d5210;
  font-size: 12px;
}

.blueprint-approval-bar span {
  color: #846d34;
  font-size: 10px;
}

.blueprint-approval-bar pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #ffffffb3;
  border: 1px solid #ead79f;
  border-radius: 4px;
  max-height: 76px;
  margin: 0;
  padding: 7px 9px;
  font: 9px / 1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: auto;
}

.blueprint-approval-bar input {
  background: #fff;
  border: 1px solid #d9c27f;
  border-radius: 4px;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  font-size: 10px;
}

.approval-shot-timeline {
  gap: 8px;
  min-width: 0;
  padding: 2px 0 5px;
  display: flex;
  overflow-x: auto;
}

.approval-shot-timeline article {
  background: #ffffffc7;
  border: 1px solid #ead79f;
  border-radius: 5px;
  flex: 0 0 150px;
  gap: 5px;
  min-width: 0;
  padding: 6px;
  display: grid;
}

.approval-shot-timeline video {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #242128;
  border-radius: 3px;
  width: 100%;
}

.approval-shot-timeline article > div {
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  display: flex;
}

.approval-shot-timeline strong {
  color: #55461f;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.approval-shot-timeline p {
  color: #75663e;
  max-height: 32px;
  margin: 0;
  font-size: 8px;
  line-height: 1.4;
  overflow: hidden;
}

.approval-shot-status {
  white-space: nowrap;
  background: #eee8d6;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 7px;
  font-weight: 800;
}

.approval-shot-status.is-succeeded {
  color: #287958;
  background: #e3f5ec;
}

.approval-shot-status.is-failed {
  color: #a82949;
  background: #ffe8ed;
}

.asset-preview audio {
  width: calc(100% - 18px);
}

@media (max-width: 1100px) {
  .blueprint-approval-bar {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) auto auto 32px;
  }

  .blueprint-approval-bar input {
    grid-column: 1 / 3;
  }
}

.blueprint-layout {
  grid-template-columns: var(--blueprint-left, 248px) 6px minmax(360px, 1fr) 6px var(--blueprint-right, 276px);
  flex: 1;
  min-height: 0;
  display: grid;
}

.blueprint-library, .blueprint-inspector {
  background: #fff;
  flex-direction: column;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.blueprint-library {
  border-right: 0;
}

.blueprint-inspector {
  border-left: 0;
}

.blueprint-layout.is-runtime-locked .blueprint-library {
  opacity: .62;
  pointer-events: none;
}

.blueprint-layout.is-runtime-locked .blueprint-inspector input, .blueprint-layout.is-runtime-locked .blueprint-inspector textarea, .blueprint-layout.is-runtime-locked .blueprint-inspector select, .blueprint-layout.is-runtime-locked .blueprint-inspector button, .blueprint-layout.is-runtime-locked .blueprint-inspector a {
  pointer-events: none;
}

.blueprint-layout.is-runtime-locked .blueprint-inspector input, .blueprint-layout.is-runtime-locked .blueprint-inspector textarea, .blueprint-layout.is-runtime-locked .blueprint-inspector select {
  opacity: .68;
}

.blueprint-resize-handle {
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
  background: #e8e3eb;
  width: 100%;
  position: relative;
}

.blueprint-resize-handle:after {
  content: "";
  background: #b9b1c0;
  border-radius: 2px;
  width: 2px;
  height: 28px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blueprint-resize-handle:hover, .blueprint-resize-handle:focus-visible, .blueprint-layout.is-resizing .blueprint-resize-handle {
  background: var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .blueprint-resize-handle:hover, .blueprint-resize-handle:focus-visible, .blueprint-layout.is-resizing .blueprint-resize-handle {
    background: color-mix(in srgb, var(--coral) 22%, #efeaf1);
  }
}

.blueprint-resize-handle:hover, .blueprint-resize-handle:focus-visible, .blueprint-layout.is-resizing .blueprint-resize-handle {
  outline: none;
}

.blueprint-resize-handle:hover:after, .blueprint-resize-handle:focus-visible:after, .blueprint-layout.is-resizing .blueprint-resize-handle:after {
  background: var(--coral);
}

body.is-blueprint-resizing, body.is-blueprint-resizing * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.blueprint-panel-tabs {
  border-bottom: 1px solid #e4dfe7;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 49px;
  padding: 7px;
  display: grid;
}

.blueprint-panel-tabs-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blueprint-panel-tabs button {
  color: #7b7581;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 4px;
  height: 34px;
  margin: 0;
  padding: 0;
  font: 700 11px / 34px inherit;
  overflow: hidden;
}

.blueprint-panel-tabs button.is-active {
  color: var(--ink);
  background: #f1edf3;
}

.blueprint-panel-heading {
  border-bottom: 1px solid #e4dfe7;
  align-items: center;
  gap: 8px;
  min-height: 49px;
  padding: 0 15px;
  font-size: 13px;
  display: flex;
}

.node-library-scroll, .field-designer, .node-inspector-body {
  min-height: 0;
  padding: 13px;
  overflow-y: auto;
}

.blueprint-search {
  color: #8b8490;
  background: #fff;
  border: 1px solid #d8d2dc;
  border-radius: 5px;
  grid-template-columns: 16px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  margin-bottom: 11px;
  padding: 0 8px;
  display: grid;
}

.blueprint-search:focus-within {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px #ff66851a;
}

.blueprint-search input {
  color: #3d3942;
  background: none;
  border: 0;
  outline: 0;
  min-width: 0;
  height: 32px;
  padding: 0;
  font-size: 10px;
}

.blueprint-search input::-webkit-search-cancel-button {
  display: none;
}

.blueprint-search button {
  color: #8b8490;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  display: grid;
}

.blueprint-search button:hover {
  color: var(--coral);
}

.blueprint-search-empty {
  color: #98919c;
  text-align: center;
  padding: 22px 8px;
  font-size: 10px;
}

.blueprint-parameter-search {
  margin-bottom: 0;
}

.panel-help {
  color: #89838d;
  margin: 0 0 12px;
  font-size: 9px;
  line-height: 1.55;
}

.node-library-group {
  margin-bottom: 18px;
}

.node-library-group h3 {
  color: #6f6977;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 7px;
  font-size: 11px;
  display: flex;
}

.node-library-group h3 span {
  color: #8f8996;
  text-align: center;
  background: #f0edf2;
  border-radius: 10px;
  min-width: 20px;
  padding: 2px 5px;
}

.node-library-group-body {
  display: grid;
}

.blueprint-pack-description {
  color: #98919d;
  margin: 0 0 8px;
  font-weight: 400;
  line-height: 1.45;
  font-size: 9px !important;
}

.node-library-subgroup {
  margin: 0 0 10px;
  padding-left: 2px;
}

.node-library-subgroup-toggle {
  color: #7a7480;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  display: flex;
}

.node-library-subgroup-toggle svg {
  flex: none;
  transition: transform .15s;
}

.node-library-subgroup.is-collapsed .node-library-subgroup-toggle {
  margin-bottom: 0;
}

.node-library-subgroup.is-collapsed .node-library-subgroup-toggle svg {
  transform: rotate(-90deg);
}

.node-library-subgroup-toggle > span:last-child {
  color: #9a94a0;
  text-align: center;
  background: #f3f0f5;
  border-radius: 9px;
  flex: none;
  min-width: 18px;
  margin-left: auto;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
}

.node-library-subgroup-body {
  display: grid;
}

.skill-pack-item-list {
  color: #8f8996;
  margin: 6px 0 0;
  padding-left: 16px;
  font-size: 9px;
  line-height: 1.45;
}

.skill-pack-item-list li {
  margin: 0;
}

.blueprint-pack-group .node-palette-item small {
  white-space: normal;
}

.blueprint-pack-functions {
  border-top: 1px solid #e7e1e8;
  margin-top: 14px;
  padding-top: 12px;
}

.pack-function-item {
  background: #fff;
  border: 1px solid #ddd7e1;
  border-radius: 5px;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  margin-bottom: 7px;
  padding: 9px;
  display: grid;
}

.pack-function-item > span {
  color: #fff;
  background: #c76585;
  border-radius: 4px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.pack-function-item > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.pack-function-item strong {
  color: #302d3b;
  font-size: 11px;
}

.pack-function-item small {
  color: #928c97;
  font-size: 9px;
  line-height: 1.35;
}

.pack-function-item button {
  color: #6c6370;
  cursor: pointer;
  background: #faf8fb;
  border: 1px solid #ddd7e1;
  border-radius: 4px;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.pack-function-item button:disabled {
  color: #4f956d;
  cursor: default;
}

.imported-pack-card {
  background: #fff;
  border: 1px solid #ddd7e1;
  border-radius: 5px;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin-bottom: 7px;
  padding: 9px;
  display: grid;
}

.imported-pack-card > span {
  color: #fff;
  background: #c76585;
  border-radius: 4px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.imported-skill-pack-card > span {
  background: #b8943a;
}

.imported-pack-card > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.imported-pack-card strong {
  color: #302d3b;
  font-size: 11px;
}

.imported-pack-card small {
  color: #928c97;
  font-size: 9px;
  line-height: 1.35;
}

.imported-pack-card button {
  color: #6c6370;
  cursor: pointer;
  background: #faf8fb;
  border: 1px solid #ddd7e1;
  border-radius: 4px;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.imported-pack-card button:hover {
  color: var(--coral);
  border-color: #e7c4ce;
}

.node-library-group-toggle {
  color: #6f6977;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  display: flex;
}

.node-library-group-toggle-label {
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.node-library-group-toggle svg {
  flex: none;
  transition: transform .15s;
}

.node-library-group.is-collapsed .node-library-group-toggle {
  margin-bottom: 0;
}

.node-library-group.is-collapsed .node-library-group-toggle svg {
  transform: rotate(-90deg);
}

.node-library-group-toggle > span:last-child {
  color: #8f8996;
  text-align: center;
  background: #f0edf2;
  border-radius: 10px;
  flex: none;
  min-width: 20px;
  margin-left: auto;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: 700;
}

.skill-library-group .node-library-group-toggle-label {
  color: #9a7a2f;
}

.node-palette-item {
  cursor: grab;
  background: #fff;
  border: 1px solid #ddd7e1;
  border-left: 3px solid;
  border-radius: 5px;
  grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  margin-bottom: 7px;
  padding: 9px;
  display: grid;
}

.node-palette-item:active {
  cursor: grabbing;
}

.node-palette-item > span {
  color: #fff;
  background: currentColor;
  border-radius: 4px;
  place-items: center;
  width: 28px;
  height: 28px;
  display: grid;
}

.node-palette-item > span svg {
  color: #fff;
}

.node-palette-item > div {
  gap: 2px;
  min-width: 0;
  display: grid;
}

.node-palette-item strong {
  color: #302d3b;
  font-size: 11px;
}

.node-palette-item small {
  color: #928c97;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.node-input {
  color: #238c87;
}

.node-model {
  color: #e84e73;
}

.node-tool {
  color: #4d70ce;
}

.node-logic {
  color: #b8820c;
}

.node-data {
  color: #6f6977;
}

.node-output {
  color: #4c9256;
}

.blueprint-canvas {
  background: #f7f3f8;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.blueprint-canvas .react-flow__controls {
  border: 1px solid #cbc4d0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 5px 18px #312a3a21;
}

.blueprint-canvas .react-flow__controls-button {
  color: #4b4651;
  background: #fff;
  border-bottom-color: #ded8e2;
}

.blueprint-canvas .react-flow__controls-button:hover {
  background: #f2edf4;
}

.blueprint-canvas .react-flow__controls-button svg {
  fill: currentColor;
}

.blueprint-canvas .react-flow__minimap {
  background: #fffffff0;
  border: 1px solid #cbc4d0;
  border-radius: 4px;
}

.blueprint-canvas .react-flow__minimap-mask {
  fill: #e0d9e49e;
}

.blueprint-canvas .react-flow__selection {
  border: 1px solid var(--coral);
  background: var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .blueprint-canvas .react-flow__selection {
    background: color-mix(in srgb, var(--coral) 12%, transparent);
  }
}

.blueprint-canvas .react-flow__nodesselection-rect {
  border: 1px solid var(--coral);
  background: none;
}

.blueprint-canvas-hint {
  z-index: 4;
  color: #77707e;
  pointer-events: none;
  background: #fffffff0;
  border: 1px solid #d8d1dc;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.blueprint-canvas.is-function-edit .blueprint-canvas-hint {
  color: #4a6280;
  background: #eff6fff5;
  border-color: #b7c9df;
  top: 52px;
}

.blueprint-fn-exit {
  z-index: 5;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  display: flex;
  position: absolute;
  top: 12px;
  left: 12px;
}

.blueprint-fn-exit > button {
  color: #2a4560;
  cursor: pointer;
  background: #fff;
  border: 1px solid #8aa3be;
  border-radius: 6px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  box-shadow: 0 2px 8px #2a45601f;
}

.blueprint-fn-exit > button:hover {
  background: #eef4fb;
  border-color: #6e8cae;
}

.blueprint-fn-exit > button.blueprint-fn-copy {
  color: #8a4a12;
  background: #fff8f0;
  border-color: #c47a3c;
}

.blueprint-fn-exit > button.blueprint-fn-copy:hover {
  background: #ffefd9;
  border-color: #a86220;
}

.blueprint-fn-path {
  color: #5a7188;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  font-size: 11px;
  display: inline-flex;
  overflow: hidden;
}

.blueprint-fn-path kbd {
  color: #6d8299;
  background: #f7fafc;
  border: 1px solid #c3d0de;
  border-radius: 3px;
  padding: 1px 5px;
  font: 10px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.blueprint-canvas.is-pack-fn-readonly .blueprint-canvas-hint {
  color: #7a5a28;
  background: #fff8ecf5;
  border-color: #d4b48a;
}

.pack-fn-readonly-badge {
  color: #8a5a18;
  background: #fff7ea;
  border: 1px solid #d4b48a;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.is-pack-fn-readonly {
  opacity: .72;
}

.node-palette-item.is-drag-disabled {
  cursor: default;
  opacity: .78;
}

.node-palette-item.is-drag-disabled:active {
  cursor: default;
}

.function-palette-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.function-palette-actions > button {
  color: #5a7188;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.function-palette-actions > button:hover {
  color: #2a4560;
  background: #eef3f8;
}

.function-palette-actions > button[aria-label^="删除"] {
  color: #a63e57;
}

.function-palette-actions > button[aria-label^="删除"]:hover {
  background: #fdecef;
}

.blueprint-node.is-function-call {
  outline: 1px dashed #7a93b0;
}

.blueprint-node.is-skill-call {
  outline: 1px dashed #c49a3c;
}

.inspector-open-fn {
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}

.skill-compose-preview {
  background: #fffaf0;
  border: 1px solid #ead9b0;
  border-radius: 6px;
  margin: 0 0 12px;
  padding: 10px;
}

.skill-compose-preview strong {
  color: #7a5d1e;
  margin-bottom: 6px;
  font-size: 12px;
  display: block;
}

.skill-compose-preview pre {
  white-space: pre-wrap;
  word-break: break-word;
  color: #5c4a28;
  max-height: 180px;
  margin: 0;
  font: 11px / 1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: auto;
}

.skill-palette-item small {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.blueprint-type-legend {
  z-index: 4;
  color: #706978;
  pointer-events: none;
  background: #fffffff0;
  border: 1px solid #d8d1dc;
  border-radius: 4px;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: 245px;
  padding: 7px 9px;
  font: 8px ui-monospace, SFMono-Regular, Consolas, monospace;
  display: flex;
  position: absolute;
  top: 14px;
  right: 14px;
  box-shadow: 0 3px 12px #322b3b14;
}

.blueprint-type-legend span {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.blueprint-type-legend i {
  border: 1px solid #ffffffbf;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 4px;
}

.blueprint-node {
  color: #727780;
  background: #fff;
  border: 1px solid #625d68;
  border-radius: 6px;
  width: 220px;
  padding: 0;
  position: relative;
  overflow: visible;
  box-shadow: 4px 5px #342e3e24;
}

.blueprint-node.has-multi-pins {
  width: 220px;
}

.blueprint-node.is-selected {
  border-color: currentColor;
  box-shadow: 0 0 0 3px, 5px 6px #342e3e29;
}

@supports (color: color-mix(in lab, red, red)) {
  .blueprint-node.is-selected {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent), 5px 6px 0 #342e3e29;
  }
}

.blueprint-node.is-runtime-running:after {
  content: "";
  z-index: 2;
  background: conic-gradient(from var(--runtime-angle), #ff6685, #ffd55e, #5ad7c4, #7d8cff, #ff6685);
  filter: drop-shadow(0 0 5px #ff668585);
  pointer-events: none;
  -webkit-mask-composite: xor;
  border-radius: 10px;
  padding: 3px;
  animation: 1.15s linear infinite blueprint-runtime-border;
  position: absolute;
  inset: -5px;
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.blueprint-node.is-runtime-completed {
  border-color: #50a982;
  box-shadow: 0 0 0 2px #50a98233, 4px 5px #342e3e1f;
}

.blueprint-node.is-runtime-error {
  border-color: #d63b61;
  box-shadow: 0 0 0 3px #d63b612e, 4px 5px #342e3e1f;
}

.blueprint-node-error-badge {
  z-index: 5;
  color: #fff;
  pointer-events: none;
  background: #d6325d;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  position: absolute;
  top: -10px;
  right: -10px;
  box-shadow: 0 2px 7px #91193957;
}

.blueprint-node-success-badge {
  z-index: 5;
  color: #fff;
  pointer-events: none;
  background: #35a870;
  border: 2px solid #fff;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
  position: absolute;
  top: -10px;
  right: -10px;
  box-shadow: 0 2px 7px #1f784d52;
}

.blueprint-edge-runtime-outline.is-exec {
  filter: drop-shadow(0 0 4px #ff9f1cd1);
}

.blueprint-edge-runtime-outline.is-data {
  filter: drop-shadow(0 0 4px #00aeb8b8);
}

.blueprint-edge-runtime {
  animation: .65s linear infinite blueprint-runtime-edge;
}

.blueprint-edge-runtime.is-exec {
  stroke-dasharray: 10 7;
}

.blueprint-edge-runtime.is-data {
  stroke-dasharray: 5 5;
  animation-duration: .48s;
}

@property --runtime-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes blueprint-runtime-border {
  to {
    --runtime-angle: 360deg;
  }
}

@keyframes blueprint-runtime-edge {
  to {
    stroke-dashoffset: -32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blueprint-node.is-runtime-running:after, .blueprint-edge-runtime {
    animation: none;
  }
}

.blueprint-node-head {
  color: #29263c;
  background: #eeeaf2;
  border-radius: 5px 5px 0 0;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 6px 10px;
  display: flex;
  box-shadow: inset 0 -1px #3a334329, inset 0 1px #fffc;
}

.blueprint-node.node-input .blueprint-node-head {
  background: linear-gradient(90deg, #ccefeb, #eef9f7);
}

.blueprint-node.node-model .blueprint-node-head {
  background: linear-gradient(90deg, #ffd6e1, #fff0f4);
}

.blueprint-node.node-tool .blueprint-node-head {
  background: linear-gradient(90deg, #d9e5ff, #f0f4ff);
}

.blueprint-node.node-logic .blueprint-node-head {
  background: linear-gradient(90deg, #ffeab2, #fff7df);
}

.blueprint-node.node-data .blueprint-node-head {
  background: linear-gradient(90deg, #e8e1ed, #f7f3f9);
}

.blueprint-node.node-output .blueprint-node-head {
  background: linear-gradient(90deg, #e7d6f0, #f7effa);
}

.blueprint-node-head > span {
  color: currentColor;
  place-items: center;
  width: 19px;
  height: 19px;
  display: grid;
}

.blueprint-node-head > span svg {
  color: inherit;
}

.blueprint-node-head strong {
  color: #29263c;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}

.blueprint-node-pins {
  background: linear-gradient(#fff, #fbf9fc);
  border-radius: 0 0 5px 5px;
  overflow: visible;
}

.blueprint-pin-row {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 30px;
  display: grid;
  position: relative;
}

.blueprint-pin-row + .blueprint-pin-row {
  border-top: 1px solid #ece7ef;
}

.blueprint-pin-side {
  align-items: center;
  min-width: 0;
  height: 100%;
  display: flex;
  position: relative;
}

.blueprint-pin-side-input {
  justify-content: flex-start;
  padding-left: 12px;
}

.blueprint-pin-side-output {
  justify-content: flex-end;
  padding-right: 12px;
}

.blueprint-pin-side-input .blueprint-handle {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

.blueprint-pin-side-output .blueprint-handle {
  position: absolute !important;
  top: 50% !important;
  left: auto !important;
  right: 0 !important;
  transform: translate(50%, -50%) !important;
}

.blueprint-pin-label {
  color: #6f6874;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
}

.blueprint-pin-label b {
  color: #d6325d;
  margin-left: 2px;
}

.blueprint-pin-side-input .blueprint-pin-label {
  padding-left: 4px;
}

.blueprint-pin-side-output .blueprint-pin-label {
  padding-right: 4px;
}

.blueprint-optional-pin-row {
  background: #faf7fb;
  border-top: 1px solid #e8e2eb;
  align-items: center;
  min-height: 31px;
  display: flex;
  position: relative;
}

.blueprint-optional-pin-row > button {
  color: #7c7482;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 30px;
  padding: 0 10px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.blueprint-optional-pin-row > button:hover {
  color: #9e3153;
  background: #fff0f4;
}

.blueprint-optional-pin-row > button svg {
  transition: transform .16s;
}

.blueprint-optional-pin-row > button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.blueprint-collapsed-handles {
  pointer-events: none;
  width: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.blueprint-collapsed-handles .blueprint-handle {
  opacity: 0;
  pointer-events: none !important;
  top: 50% !important;
  left: -1px !important;
  transform: translate(-50%, -50%) !important;
}

.blueprint-handle {
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #625d68, 0 0 5px;
  border: 2px solid #fff !important;
  width: 13px !important;
  height: 13px !important;
}

.blueprint-handle-exec {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow: 0 0 0 1px #fff;
  border: 1px solid #5e5965 !important;
  border-radius: 2px !important;
  width: 12px !important;
  height: 12px !important;
}

.preview-toggle {
  background: #faf8fb;
  border: 1px solid #d8d2dc;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  font-size: 11px;
  display: flex;
}

.blueprint-empty {
  color: #aaa4af;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 260px;
  padding: 30px;
  display: flex;
}

.blueprint-empty .button {
  margin-top: 8px;
}

.function-save-draft {
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}

.function-import-pack {
  justify-content: center;
  width: 100%;
  margin-bottom: 12px;
}

.function-library-empty {
  color: #928c97;
  text-align: center;
  padding: 18px 10px;
  font-size: 10px;
  line-height: 1.6;
}

.blueprint-fn-pack-dialog {
  text-align: left;
  width: min(520px, 100%);
}

.blueprint-fn-pack-dialog h2, .blueprint-fn-pack-dialog > p {
  text-align: center;
}

.fn-pack-import-list {
  max-height: min(52vh, 420px);
  margin-top: 12px;
  overflow-y: auto;
}

.function-palette-item > button {
  color: #a63e57;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.blueprint-empty strong {
  color: #6e6874;
  font-size: 13px;
}

.blueprint-empty span {
  font-size: 10px;
  line-height: 1.6;
}

.node-inspector-body {
  align-content: start;
  gap: 14px;
  display: grid;
}

.inspector-node-type {
  background: #f5f2f6;
  border-left: 3px solid;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  display: flex;
}

.inspector-node-type span {
  color: #423e4b;
  font-size: 11px;
  font-weight: 800;
}

.inspector-node-type code {
  color: #817a87;
  font-size: 9px;
}

.inspector-field {
  color: #6e6874;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.inspector-field input, .inspector-field select, .inspector-field textarea {
  color: #302c39;
  background: #fff;
  border: 1px solid #d6d0da;
  border-radius: 4px;
  outline: 0;
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
}

.inspector-field textarea {
  resize: vertical;
}

.inspector-field input:focus, .inspector-field select:focus, .inspector-field textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px #ff66851a;
}

.inspector-delete {
  color: #b62e50;
  cursor: pointer;
  background: #fff3f6;
  border: 1px solid #e2a5b3;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}

.inspector-runtime-error {
  color: #8f2442;
  background: #fff1f4;
  border: 1px solid #ef9db2;
  border-radius: 5px;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px;
  display: grid;
}

.inspector-runtime-error > span {
  color: #fff;
  background: #d6325d;
  border-radius: 50%;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  display: grid;
}

.inspector-runtime-error strong {
  font-size: 11px;
}

.inspector-runtime-error p {
  overflow-wrap: anywhere;
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

.inspector-runtime-output {
  background: #f2fbf7;
  border: 1px solid #9fd4bd;
  border-radius: 5px;
  gap: 9px;
  margin-bottom: 12px;
  padding: 10px;
  display: grid;
}

.inspector-runtime-output > div {
  color: #287958;
  align-items: center;
  gap: 6px;
  display: flex;
}

.inspector-runtime-output > div strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
}

.inspector-runtime-output pre {
  color: #3d4943;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid #d5e8df;
  border-radius: 4px;
  max-height: 280px;
  margin: 0;
  padding: 9px;
  font: 10px / 1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: auto;
}

.inspector-runtime-output img, .inspector-runtime-output video, .inspector-runtime-output audio {
  object-fit: contain;
  background: #242128;
  border-radius: 4px;
  width: 100%;
  height: auto;
  max-height: 260px;
}

.inspector-runtime-output a {
  color: #287958;
  width: fit-content;
  font-size: 10px;
  font-weight: 800;
  text-decoration: underline;
}

.h3-node-note {
  color: #5e4771;
  background: #f8f1fc;
  border: 1px solid #c8b4df;
  border-radius: 5px;
  gap: 4px;
  padding: 10px;
  display: grid;
}

.h3-node-note strong {
  font-size: 10px;
}

.h3-node-note span {
  font-size: 9px;
  line-height: 1.55;
}

.template-fragment-editor {
  gap: 8px;
  display: grid;
}

.template-fragment-editor-head {
  gap: 2px;
  display: grid;
}

.template-fragment-editor-head strong {
  color: #423e4b;
  font-size: 10px;
}

.template-fragment-editor-head span {
  color: #817a87;
  font-size: 9px;
  line-height: 1.5;
}

.template-fragment-editor ul {
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.template-fragment-editor li {
  background: #fff;
  border: 1px solid #e4dee8;
  border-radius: 4px;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  display: grid;
}

.template-fragment-editor li code {
  color: #b62e50;
  font-size: 10px;
  font-weight: 700;
}

.template-fragment-editor li span {
  color: #5c5664;
  font-size: 10px;
  font-weight: 600;
}

.template-fragment-editor li button {
  color: #b62e50;
  cursor: pointer;
  background: #fff3f6;
  border: 0;
  border-radius: 4px;
  place-items: center;
  width: 26px;
  height: 26px;
  display: grid;
}

.template-fragment-editor li button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.template-fragment-editor > .button {
  justify-content: center;
  width: 100%;
}

.safe-operation-note {
  color: #356a65;
  background: #f0faf8;
  border: 1px solid #bfd8d5;
  border-radius: 5px;
  gap: 4px;
  padding: 10px;
  display: grid;
}

.safe-operation-note strong {
  font-size: 10px;
}

.safe-operation-note span {
  font-size: 9px;
  line-height: 1.55;
}

.optional-config-section {
  background: #faf8fb;
  border: 1px solid #d9d2df;
  border-radius: 5px;
  overflow: hidden;
}

.optional-config-section > button {
  color: #625c69;
  cursor: pointer;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  display: flex;
}

.optional-config-section > button span {
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.optional-config-section > button svg {
  transition: transform .16s;
}

.optional-config-section.is-open > button svg {
  transform: rotate(180deg);
}

.optional-config-section > button small {
  color: #9a939f;
  font-size: 9px;
}

.optional-config-section > div {
  background: #fff;
  border-top: 1px solid #e5dfe8;
  gap: 12px;
  padding: 10px;
  display: grid;
}

.field-add-grid {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  display: grid;
}

.field-add-grid button {
  cursor: pointer;
  background: #faf8fb;
  border: 1px solid #d8d2dc;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.field-add-grid button:hover {
  border-color: var(--coral);
  background: #fff1f5;
}

.field-list {
  gap: 9px;
  margin-top: 14px;
  display: grid;
}

.field-editor-row {
  background: #fff;
  border: 1px solid #ded8e2;
  border-radius: 5px;
  padding: 10px;
}

.field-editor-row > div {
  grid-template-columns: 14px 22px 1fr 24px;
  align-items: center;
  gap: 6px;
  display: grid;
}

.field-editor-drag-handle {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.field-editor-drag-handle:active {
  cursor: grabbing;
}

.field-editor-drag-handle > svg {
  color: #9a929f;
}

.field-editor-row > div > span {
  color: #fff;
  background: #6f6977;
  border-radius: 3px;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 9px;
  display: grid;
}

.field-editor-row > div strong {
  font-size: 10px;
}

.field-editor-row > div button {
  color: #a63e57;
  cursor: pointer;
  background: none;
  border: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  display: grid;
}

.field-editor-row > label {
  color: #817a88;
  gap: 4px;
  margin-top: 9px;
  font-size: 9px;
  display: grid;
}

.field-editor-row > label input[type="text"], .field-editor-row > label input[type="number"], .field-editor-row > label input:not([type]), .field-editor-row > label select {
  background: #fff;
  border: 1px solid #d8d2dc;
  border-radius: 3px;
  outline: 0;
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  font-size: 10px;
}

.field-editor-row .field-required {
  align-items: center;
  gap: 5px;
  display: flex;
}

.field-editor-row .field-required input {
  accent-color: var(--coral);
}

.workbench-preview {
  background: #f8f5fa;
  flex: 1;
  grid-template-columns: 270px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: 54px;
  min-height: 0;
  padding: 44px max(24px, 50vw - 590px);
  display: grid;
  overflow-y: auto;
}

.workbench-preview-sidebar {
  position: sticky;
  top: 0;
}

.workbench-preview-sidebar h1 {
  margin: 12px 0;
  font-size: 34px;
  line-height: 1.2;
}

.workbench-preview-sidebar > p {
  color: var(--muted);
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.7;
}

.preview-meta {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  font-size: 11px;
  display: flex;
}

.preview-meta span {
  color: var(--muted);
}

.workbench-preview-main {
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 6px 6px #5b7ee529;
}

.preview-form-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.preview-form-head span {
  color: var(--coral);
  font-size: 10px;
  font-weight: 900;
}

.preview-form-head h2 {
  margin: 5px 0 0;
  font-size: 22px;
}

.preview-field-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  display: grid;
}

.preview-field {
  color: #585261;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.preview-field.is-wide {
  grid-column: 1 / -1;
}

.preview-field > span b {
  color: var(--coral);
  margin-left: 3px;
}

.preview-field input[type="text"], .preview-field input[type="number"], .preview-field select, .preview-field textarea {
  background: #fcfbfc;
  border: 1px solid #d2ccd6;
  border-radius: 5px;
  outline: 0;
  width: 100%;
  min-width: 0;
  padding: 11px;
  font-size: 12px;
}

.preview-field textarea {
  resize: vertical;
}

.preview-slider {
  align-items: center;
  gap: 10px;
  min-height: 42px;
  display: flex;
}

.preview-slider input {
  min-width: 0;
  accent-color: var(--coral);
  flex: 1;
}

.preview-slider output {
  text-align: center;
  background: #f2eef4;
  border-radius: 4px;
  min-width: 52px;
  padding: 7px;
  font-size: 10px;
}

.preview-upload {
  color: #7e7785;
  background: #faf8fb;
  border: 1px dashed #aaa2af;
  border-radius: 5px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 115px;
  display: flex;
}

.preview-upload small {
  color: #aaa3ae;
  font-size: 9px;
  font-weight: 500;
}

.preview-submit-row {
  border-top: 1px solid #e6e1e8;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  display: flex;
}

.preview-submit-row > span {
  color: #99929d;
  font-size: 9px;
}

.preview-result {
  background: #eefaf3;
  border: 1px solid #92c9b0;
  border-radius: 6px;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  display: flex;
}

.preview-result > span {
  color: #fff;
  background: var(--green);
  border-radius: 5px;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  display: grid;
}

.preview-result strong {
  font-size: 12px;
}

.preview-result p {
  color: #668070;
  margin: 5px 0 0;
  font-size: 10px;
}

.preview-result.is-error {
  background: #fff1f4;
  border-color: #e0a0af;
}

.preview-result.is-error > span {
  background: #c83d60;
}

.preview-result.is-error p {
  color: #9b3850;
}

.preview-upload {
  cursor: pointer;
  position: relative;
}

.preview-upload input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.runtime-result-list {
  gap: 12px;
  margin-top: 18px;
  display: grid;
}

.runtime-output {
  background: #f5fbf8;
  border: 1px solid #bdd8cc;
  border-radius: 6px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.runtime-output > strong {
  color: #315c4c;
  font-size: 12px;
}

.runtime-output pre {
  color: #37333d;
  white-space: pre-wrap;
  word-break: break-word;
  background: #fff;
  border-radius: 4px;
  max-height: 420px;
  margin: 0;
  padding: 12px;
  font: 11px / 1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow: auto;
}

.runtime-output img, .runtime-output video, .runtime-output audio {
  object-fit: contain;
  background: #201e24;
  border-radius: 5px;
  width: min(100%, 720px);
  max-height: 560px;
}

.runtime-file-link {
  width: fit-content;
}

.runtime-steps {
  background: #faf8fb;
  border: 1px solid #ded8e2;
  border-radius: 5px;
  padding: 11px 13px;
}

.runtime-steps summary {
  cursor: pointer;
  color: #615b67;
  font-size: 10px;
  font-weight: 800;
}

.runtime-step {
  border-bottom: 1px solid #e9e4eb;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 10px;
  display: flex;
}

.runtime-step:last-child {
  border-bottom: 0;
}

.runtime-step small {
  color: #99919d;
  text-align: right;
}

.runtime-step.is-error span, .runtime-step.is-error small {
  color: #b52e4f;
}

.runtime-step.is-skipped span, .runtime-step.is-skipped small {
  color: #a57823;
}

.blueprint-dialog-backdrop {
  z-index: 100;
  background: #231e2b8a;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.blueprint-dialog {
  border: 2px solid var(--ink);
  width: min(470px, 100%);
  box-shadow: 7px 7px 0 var(--coral);
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  position: relative;
}

.blueprint-dialog-close {
  cursor: pointer;
  background: none;
  border: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

.validation-icon {
  border-radius: 50%;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  display: grid;
}

.validation-icon.has-error {
  color: #b52f50;
  background: #ffe7ed;
}

.validation-icon.is-valid {
  color: #367f47;
  background: #e5f6e9;
}

.blueprint-dialog h2 {
  margin: 0;
  font-size: 20px;
}

.blueprint-dialog > p {
  color: var(--muted);
  margin: 8px 0 18px;
  font-size: 11px;
}

.blueprint-agent-library-dialog {
  text-align: left;
  width: min(520px, 100%);
}

.blueprint-agent-library-dialog .validation-icon {
  margin-inline: auto;
}

.blueprint-agent-library-dialog h2, .blueprint-agent-library-dialog > p {
  text-align: center;
}

.agent-library-toolbar {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  display: flex;
}

.agent-library-name {
  min-width: 0;
  height: 34px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d5ced9;
  border-radius: 6px;
  flex: auto;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.agent-library-name:focus {
  outline: 2px solid var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .agent-library-name:focus {
    outline: 2px solid color-mix(in srgb, var(--coral) 35%, transparent);
  }
}

.agent-library-name:focus {
  outline-offset: 1px;
}

.agent-library-name:disabled {
  opacity: .6;
}

.agent-library-toolbar .button {
  white-space: nowrap;
  flex: none;
}

.agent-library-list {
  gap: 8px;
  max-height: min(42vh, 360px);
  margin: 0 0 14px;
  padding: 2px;
  display: grid;
  overflow: auto;
}

.agent-library-item {
  background: #faf8fb;
  border: 1px solid #ddd6e0;
  border-radius: 8px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 4px;
  display: grid;
}

.agent-library-item.is-active {
  border-color: var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .agent-library-item.is-active {
    border-color: color-mix(in srgb, var(--coral) 55%, #ddd6e0);
  }
}

.agent-library-item.is-active {
  background: var(--coral);
}

@supports (color: color-mix(in lab, red, red)) {
  .agent-library-item.is-active {
    background: color-mix(in srgb, var(--coral) 8%, white);
  }
}

.agent-library-open {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  display: grid;
}

.agent-library-open:hover {
  background: #fffc;
}

.agent-library-open:disabled {
  opacity: .6;
  cursor: wait;
}

.agent-library-open strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  overflow: hidden;
}

.agent-library-open small {
  color: var(--muted);
  font-size: 10px;
}

.agent-library-item .icon-button {
  color: #a63e57;
}

.agent-library-empty {
  color: var(--muted);
  text-align: center;
  border: 1px dashed #d5ced9;
  border-radius: 8px;
  padding: 18px 12px;
  font-size: 12px;
}

.validation-list {
  text-align: left;
  gap: 7px;
  max-height: 260px;
  margin-bottom: 20px;
  display: grid;
  overflow-y: auto;
}

.validation-list > div {
  border-radius: 4px;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 10px;
  font-size: 10px;
  line-height: 1.5;
  display: flex;
}

.validation-list > div svg {
  flex: none;
  margin-top: 1px;
}

.validation-list .is-error {
  color: #9d2b47;
  background: #fff0f3;
}

.validation-list .is-warning {
  color: #8a6414;
  background: #fff8df;
}

.validation-list .is-success {
  color: #397a49;
  background: #eaf7ed;
}

.blueprint-ai-dialog {
  text-align: left;
  width: min(560px, 100%);
}

.blueprint-ai-dialog .validation-icon {
  margin-left: auto;
  margin-right: auto;
}

.blueprint-ai-dialog h2, .blueprint-ai-dialog > p {
  text-align: center;
}

.blueprint-ai-dialog .inspector-field {
  text-align: left;
  margin-top: 4px;
}

.blueprint-ai-dialog textarea {
  resize: vertical;
  min-height: 110px;
}

.ai-prompt-chips {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  display: flex;
}

.ai-prompt-chips button {
  color: #6d6674;
  cursor: pointer;
  background: #f7f4f8;
  border: 1px solid #ddd6e2;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 700;
}

.ai-prompt-chips button:hover {
  border-color: var(--coral);
  color: #a83d5b;
  background: #fff3f6;
}

.ai-dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.ai-dialog-actions .button {
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 108px;
  display: inline-flex;
}

.blueprint-ai-dialog .form-message {
  margin-top: 10px;
  display: block;
}

@media (max-width: 1100px) {
  .blueprint-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto auto;
  }

  .blueprint-actions .button-outline {
    width: 38px;
    padding: 0;
    font-size: 0;
  }

  .cloud-draft-badge {
    display: none;
  }
}

@media (max-width: 900px) {
  .model-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .blueprint-page {
    height: auto;
    min-height: calc(100vh - 70px);
    overflow: visible;
  }

  .blueprint-toolbar {
    z-index: 20;
    grid-template-columns: minmax(0, 1fr) auto;
    position: sticky;
    top: 70px;
  }

  .blueprint-mode {
    grid-area: 2 / 1 / auto / -1;
  }

  .blueprint-mode button {
    flex: 1;
    justify-content: center;
  }

  .blueprint-actions .button {
    width: 38px;
    padding: 0;
    font-size: 0;
  }

  .blueprint-layout {
    grid-template-rows: 260px 560px 340px;
    grid-template-columns: minmax(0, 1fr);
    min-height: 1040px;
    display: grid;
  }

  .blueprint-resize-handle {
    display: none;
  }

  .blueprint-library {
    border-bottom: 1px solid #d8d3dc;
    border-right: 0;
  }

  .blueprint-inspector {
    border-top: 1px solid #d8d3dc;
    border-left: 0;
  }

  .node-library-scroll {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 10px;
    display: grid;
    overflow-x: auto;
  }

  .node-library-scroll > .panel-help {
    display: none;
  }

  .node-library-group {
    min-width: 150px;
    margin: 0;
  }

  .workbench-preview {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 28px 18px 50px;
  }

  .workbench-preview-sidebar {
    position: static;
  }
}

@media (max-width: 560px) {
  .blueprint-toolbar {
    padding-inline: 10px;
    top: 70px;
  }

  .blueprint-mark, .blueprint-actions .button-outline {
    display: none;
  }

  .blueprint-layout {
    grid-template-rows: 250px 520px 360px;
  }

  .blueprint-canvas-hint, .blueprint-type-legend {
    display: none;
  }

  .workbench-preview-main {
    padding: 18px;
  }

  .preview-field-grid {
    grid-template-columns: 1fr;
  }

  .preview-field.is-wide {
    grid-column: auto;
  }

  .preview-submit-row {
    flex-direction: column;
    align-items: stretch;
  }

  .preview-submit-row .button {
    width: 100%;
  }
}

.talk-workbench {
  min-height: calc(100vh - 72px);
}

.talk-workbench-bar {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 8px;
  display: flex;
}

.talk-workbench-bar .back-link {
  margin-bottom: 0;
}

.talk-workbench-body {
  background: linear-gradient(#f4faf8 0%, #f8f5fa 48%, #f7f7f3 100%);
  min-height: calc(100vh - 140px);
}

.talk-mode-tabs {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
  display: grid;
}

.talk-mode-tabs button {
  color: #4d5c57;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9d8d3;
  border-radius: 6px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 800;
}

.talk-mode-tabs button.is-active {
  border-color: var(--teal);
  color: #0f5f57;
  background: #e8f6f3;
}

.talk-mode-tabs button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.talk-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.talk-actions .button {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.is-spinning {
  animation: .9s linear infinite talk-spin;
}

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

@media (max-width: 900px) {
  .talk-workbench-bar {
    flex-wrap: wrap;
  }
}

.drama-blueprint-bar-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  display: flex;
}

.drama-blueprint-quota {
  color: #6a4b2e;
  background: #fffaf4;
  border: 1px solid #e0d5c8;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.drama-blueprint-quota small {
  color: #9a7d5f;
  font-weight: 600;
}

.drama-blueprint-quota .quota-track {
  background: #f0e4d6;
  border-radius: 999px;
  width: 56px;
  height: 6px;
  overflow: hidden;
}

.drama-blueprint-quota .quota-track > span {
  background: var(--coral);
  height: 100%;
  display: block;
}

.drama-blueprint-workbench .talk-workbench-body {
  background: linear-gradient(#fbf6f1 0%, #f8f5fa 50%, #f7f7f3 100%);
}

.drama-blueprint-workbench .talk-mode-tabs button.is-active {
  color: #8a3d22;
  background: #fff1ea;
  border-color: #d97857;
}

.nav-garden-link {
  align-items: center;
  gap: 4px;
  display: inline-flex;
  color: #975551 !important;
}

.home-garden-strip {
  background: #f0e7d6;
  padding: 64px 0;
  overflow: hidden;
}

.home-garden-inner {
  grid-template-columns: minmax(230px, .8fr) minmax(0, 1fr);
  align-items: center;
  gap: 68px;
  display: grid;
}

.home-garden-inner h2 {
  letter-spacing: -.05em;
  max-width: 580px;
  margin: 8px 0 10px;
  font-size: clamp(26px, 3vw, 42px);
}

.home-garden-inner p {
  color: #6f6258;
  max-width: 560px;
  margin: 0 0 20px;
  line-height: 1.8;
}

.home-garden-visual {
  background: linear-gradient(#a8d1d0 0 52%, #cfb67b 52% 100%);
  border: 2px solid #453e3a;
  border-radius: 8px;
  min-height: 190px;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px #b88272;
}

.home-garden-visual:after {
  content: "";
  background: repeating-linear-gradient(90deg, #0000 0 17px, #68503421 17px 20px), linear-gradient(#0000 0 60%, #b99561 60%);
  height: 37%;
  position: absolute;
  inset: auto 0 0;
}

.home-garden-sun {
  color: #f7d778;
  text-shadow: 2px 2px #80694e;
  font-size: 38px;
  position: absolute;
  top: 20px;
  left: 25px;
}

.home-garden-visual i {
  background: #6e5e62;
  width: 44px;
  position: absolute;
  bottom: 46px;
  box-shadow: inset 0 0 0 4px #473f45, 4px 0 #f1d0a6, 12px 0 #f1d0a6, 20px 0 #f1d0a6, 28px 0 #f1d0a6;
}

.home-garden-visual i:first-of-type {
  height: 86px;
  left: 92px;
}

.home-garden-visual i:nth-of-type(2) {
  background: #81716a;
  height: 112px;
  left: 149px;
}

.home-garden-visual i:nth-of-type(3) {
  background: #a37265;
  height: 70px;
  left: 205px;
}

.home-garden-visual b {
  z-index: 1;
  color: #fff8e9;
  letter-spacing: .12em;
  text-shadow: 2px 2px #6e5543;
  font-size: 12px;
  position: absolute;
  bottom: 14px;
  right: 16px;
}

.garden-loading {
  color: #5d524d;
  background: #f4eee3;
  place-content: center;
  justify-items: center;
  gap: 14px;
  min-height: calc(100vh - 120px);
  display: grid;
}

.garden-loading-sun {
  color: #f2c860;
  background: #fdebb5;
  border: 2px solid #554b48;
  border-radius: 50%;
  place-items: center;
  width: 72px;
  height: 72px;
  font-size: 30px;
  animation: 1.4s ease-in-out infinite garden-pulse;
  display: grid;
  box-shadow: 5px 5px #cead7c;
}

@keyframes garden-pulse {
  50% {
    transform: translateY(-4px);
    box-shadow: 8px 9px #cead7c;
  }
}

.garden-hero {
  color: #3c3a3e;
  background: linear-gradient(#acd5d3 0%, #e7d7b8 62%, #c9a474 62%, #b77d65 100%);
  min-height: min(720px, 100vh - 72px);
  position: relative;
  overflow: hidden;
}

.garden-hero:before {
  content: "";
  opacity: .45;
  background-color: #0000;
  background-image: linear-gradient(90deg, #ffffff24 1px, #0000 1px), linear-gradient(#ffffff1a 1px, #0000 1px);
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: 42px 42px;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  position: absolute;
  inset: 0;
}

.garden-hero-sun {
  background: #f5d36f;
  border: 4px solid #6b5a52;
  border-radius: 50%;
  width: 145px;
  height: 145px;
  position: absolute;
  top: 10%;
  right: 16%;
  box-shadow: 9px 9px #6a4e4159;
}

.garden-hero-sun:before, .garden-hero-sun:after {
  content: "";
  background: #f5d36f;
  position: absolute;
}

.garden-hero-sun:before {
  width: 220px;
  height: 9px;
  top: 68px;
  left: -40px;
  box-shadow: 0 -34px #f5d36f, 0 34px #f5d36f;
}

.garden-hero-sun:after {
  width: 9px;
  height: 220px;
  top: -40px;
  left: 68px;
  box-shadow: -34px 0 #f5d36f, 34px 0 #f5d36f;
}

.garden-hero-buildings {
  align-items: end;
  gap: 4px;
  height: 48%;
  padding: 0 4%;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.garden-hero-buildings i {
  background: repeating-linear-gradient(90deg, #0000 0 18px, #5f5957 18px 22px), repeating-linear-gradient(0deg, #e9b889 0 19px, #4d4345 19px 23px);
  border: 4px solid #4d4345;
  border-bottom: 0;
  flex: 1;
  min-width: 80px;
  height: 66%;
  position: relative;
  box-shadow: inset 0 0 0 3px #bb7666;
}

.garden-hero-buildings i:first-child {
  background-color: #b96c65;
  height: 53%;
}

.garden-hero-buildings i:nth-child(2) {
  background-color: #bf8a6b;
  height: 88%;
}

.garden-hero-buildings i:nth-child(3) {
  background-color: #887b78;
  height: 72%;
}

.garden-hero-buildings i:nth-child(4) {
  background-color: #a97367;
  height: 95%;
}

.garden-hero-buildings i:nth-child(5) {
  background-color: #647270;
  height: 60%;
}

.garden-hero-inner {
  z-index: 2;
  padding-top: clamp(70px, 10vw, 130px);
  position: relative;
}

.garden-kicker {
  color: #7a4d49;
  letter-spacing: .12em;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}

.garden-hero h1 {
  letter-spacing: -.075em;
  max-width: 670px;
  margin: 14px 0 18px;
  font-family: Georgia, Times New Roman, serif;
  font-size: clamp(46px, 6.1vw, 84px);
  line-height: .98;
}

.garden-hero p {
  color: #5d5757;
  max-width: 510px;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
}

.garden-hero-actions {
  align-items: center;
  gap: 20px;
  margin-top: 27px;
  display: flex;
}

.garden-hero-actions .button {
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.garden-inline-message {
  color: #9d3e51 !important;
  margin-top: 16px !important;
  font-size: 12px !important;
}

.garden-about {
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
  gap: 70px;
  padding-top: 90px;
  padding-bottom: 90px;
  display: grid;
}

.garden-about h2 {
  letter-spacing: -.05em;
  margin: 9px 0;
  font-size: 34px;
}

.garden-about > div > p {
  max-width: 570px;
  color: var(--muted);
  margin: 0;
  line-height: 1.85;
}

.garden-principles {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  display: grid;
}

.garden-principles article {
  color: #775755;
  background: #fbf8f2;
  border: 1px solid #ded5c9;
  border-radius: 7px;
  align-content: start;
  gap: 9px;
  min-height: 160px;
  padding: 20px 15px;
  display: grid;
}

.garden-principles svg {
  color: #b96d62;
}

.garden-principles strong {
  font-size: 13px;
}

.garden-principles span {
  color: #807873;
  font-size: 11px;
  line-height: 1.65;
}

.garden-gate {
  background: linear-gradient(145deg, #e2d7c6, #a8c8c2);
  place-items: center;
  min-height: calc(100vh - 150px);
  padding: 40px 20px;
  display: grid;
}

.garden-gate-card {
  text-align: center;
  background: #fbf6ed;
  border: 2px solid #494146;
  border-radius: 10px;
  justify-items: center;
  gap: 13px;
  width: min(490px, 100%);
  padding: 48px;
  display: grid;
  box-shadow: 10px 10px #af796d;
}

.garden-gate-card > svg {
  color: #a45b56;
}

.garden-gate-card h1 {
  letter-spacing: -.05em;
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
}

.garden-gate-card p {
  color: #756e6c;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.garden-gate-card .button {
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  display: inline-flex;
}

.garden-gate-card small {
  color: #a49790;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.6;
}

.garden-onboarding {
  background: linear-gradient(160deg, #f7f0e4 0%, #e2eee9 48%, #eee0c8 100%);
  min-height: calc(100vh - 72px);
  padding: 60px 0 100px;
}

.garden-onboarding-shell > header {
  max-width: 690px;
}

.garden-onboarding-shell > header h1 {
  letter-spacing: -.06em;
  margin: 9px 0;
  font-family: Georgia, serif;
  font-size: clamp(34px, 4.5vw, 56px);
}

.garden-onboarding-shell > header p {
  color: #746c69;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.garden-stepper {
  gap: 0;
  margin: 42px 0 24px;
  padding-bottom: 3px;
  display: flex;
  overflow-x: auto;
}

.garden-stepper span {
  color: #9b918e;
  white-space: nowrap;
  align-items: center;
  gap: 7px;
  min-width: 96px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  position: relative;
}

.garden-stepper span:not(:last-child):after {
  content: "";
  background: #cfc4ba;
  width: 28px;
  height: 1px;
  margin-left: 3px;
}

.garden-stepper b {
  border: 1px solid #c6bbb2;
  border-radius: 50%;
  place-items: center;
  width: 22px;
  height: 22px;
  font-size: 10px;
  display: grid;
}

.garden-stepper .is-current, .garden-stepper .is-complete {
  color: #914c4e;
}

.garden-stepper .is-current b {
  color: #fff;
  background: #914c4e;
  border-color: #914c4e;
}

.garden-stepper .is-complete b {
  color: #fff;
  background: #73948d;
  border-color: #73948d;
}

.garden-creation-card {
  background: #fffcf7d9;
  border: 1px solid #d9cebf;
  border-radius: 10px;
  min-height: 475px;
  padding: clamp(28px, 5vw, 54px);
  box-shadow: 0 18px 50px #56463b17;
}

.garden-step-content {
  max-width: 890px;
}

.garden-step-content h2 {
  letter-spacing: -.055em;
  margin: 8px 0;
  font-size: clamp(27px, 3.2vw, 39px);
}

.garden-step-content > p {
  color: #776e6b;
  max-width: 650px;
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
}

.garden-consent-list {
  gap: 10px;
  max-width: 710px;
  margin-top: 28px;
  display: grid;
}

.garden-consent-list label {
  color: #5d5758;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dfd6cc;
  border-radius: 7px;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
}

.garden-consent-list input {
  accent-color: #a45b56;
  margin-top: 3px;
}

.garden-large-field {
  max-width: 470px;
  margin-top: 34px;
  display: grid;
  position: relative;
}

.garden-large-field > span {
  color: #7e7170;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
}

.garden-large-field input {
  color: #443f42;
  background: #fffefa;
  border: 2px solid #aa6c64;
  border-radius: 7px;
  outline: 0;
  height: 62px;
  padding: 0 50px 0 16px;
  font-size: 22px;
  font-weight: 800;
}

.garden-large-field small {
  color: #a69a93;
  font-size: 10px;
  position: absolute;
  bottom: 20px;
  right: 13px;
}

.garden-question-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 26px;
  display: grid;
}

.garden-question-list fieldset {
  background: #fffdfa;
  border: 1px solid #ddd3c7;
  border-radius: 7px;
  margin: 0;
  padding: 15px;
}

.garden-question-list legend {
  color: #4e4849;
  width: 100%;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.garden-question-list legend b {
  color: #fff;
  background: #9b6b61;
  border-radius: 50%;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 9px;
  display: inline-grid;
}

.garden-question-list fieldset > div {
  gap: 6px;
  margin-top: 11px;
  display: grid;
}

.garden-question-list label {
  color: #786f6b;
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 7px;
  font-size: 11px;
  display: flex;
}

.garden-question-list label.is-selected {
  color: #6f3f43;
  background: #f7e9df;
  font-weight: 800;
}

.garden-question-list input {
  accent-color: #a45b56;
}

.garden-goal-heading {
  margin: 32px 0 10px;
  font-size: 15px;
}

.garden-goal-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.garden-goal-grid button {
  color: #5c5554;
  text-align: left;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd4ca;
  border-radius: 6px;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 13px 10px;
  display: grid;
}

.garden-goal-grid button.is-selected {
  background: #fff0e8;
  border-color: #a55e58;
  box-shadow: inset 0 0 0 1px #a55e58;
}

.garden-goal-grid b {
  color: #fff;
  background: #7a9891;
  border-radius: 50%;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  display: grid;
}

.garden-goal-grid strong, .garden-goal-grid small {
  display: block;
}

.garden-goal-grid strong {
  font-size: 11px;
}

.garden-goal-grid small {
  color: #938a84;
  margin-top: 3px;
  font-size: 9px;
  line-height: 1.45;
}

.garden-persona-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  display: grid;
}

.garden-persona-grid button {
  color: #554c4c;
  text-align: left;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #ddd4ca;
  border-radius: 8px;
  flex-direction: column;
  align-items: flex-start;
  min-height: 268px;
  padding: 22px;
  display: flex;
}

.garden-persona-grid button.is-selected {
  background: #fff1e9;
  border: 2px solid #a55d58;
  box-shadow: 5px 5px #e1b096;
}

.garden-persona-mark {
  color: #fff0bc;
  background: #5b827c;
  border-radius: 50%;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 18px;
  display: grid;
}

.garden-persona-grid strong {
  font-size: 16px;
}

.garden-persona-grid p {
  color: #756a68;
  flex: 1;
  margin: 10px 0;
  font-size: 11px;
  line-height: 1.75;
}

.garden-persona-grid div {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.garden-persona-grid em {
  color: #865553;
  background: #f0ded2;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.garden-persona-grid small {
  color: #8c807b;
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.5;
}

.garden-sprite-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  margin-top: 28px;
  display: grid;
}

.garden-sprite-grid button {
  color: #594f4e;
  cursor: pointer;
  background: #fffdf9;
  border: 1px solid #ddd4ca;
  border-radius: 7px;
  justify-items: center;
  gap: 7px;
  padding: 13px 5px;
  display: grid;
}

.garden-sprite-grid button.is-selected {
  background: #fff1e8;
  border: 2px solid #a55d58;
}

.garden-sprite-grid strong {
  font-size: 12px;
}

.garden-sprite-grid small {
  color: #91857f;
  font-size: 9px;
}

.garden-sprite {
  width: 34px;
  height: 50px;
  image-rendering: pixelated;
  display: inline-block;
  position: relative;
}

.garden-sprite.is-large {
  transform-origin: bottom;
  width: 58px;
  height: 82px;
  transform: scale(1.03);
}

.garden-sprite-hair, .garden-sprite-face, .garden-sprite-body {
  display: block;
  position: absolute;
}

.garden-sprite-hair {
  z-index: 3;
  background: var(--sprite-hair);
  width: 21px;
  height: 23px;
  box-shadow: 4px 4px 0 var(--sprite-hair);
  border: 3px solid #43363b;
  border-radius: 11px 11px 6px 6px;
  top: 0;
  left: 7px;
}

.garden-sprite-face {
  z-index: 2;
  background: var(--sprite-skin);
  border: 2px solid #43363b;
  border-radius: 4px 4px 8px 8px;
  width: 18px;
  height: 18px;
  top: 11px;
  left: 9px;
}

.garden-sprite-face:after {
  content: "·  ·";
  color: #4d3940;
  letter-spacing: 1px;
  white-space: pre;
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 4px;
  left: 2px;
}

.garden-sprite-body {
  z-index: 1;
  background: var(--sprite-accent);
  border: 3px solid #43363b;
  border-radius: 5px 5px 2px 2px;
  width: 24px;
  height: 25px;
  bottom: 1px;
  left: 5px;
  box-shadow: 0 8px 0 -3px #44393c;
}

.garden-sprite.is-large .garden-sprite-hair {
  width: 36px;
  height: 38px;
  box-shadow: 7px 7px 0 var(--sprite-hair);
  border-width: 4px;
  border-radius: 18px 18px 8px 8px;
  left: 11px;
}

.garden-sprite.is-large .garden-sprite-face {
  border-width: 3px;
  width: 31px;
  height: 30px;
  top: 19px;
  left: 14px;
}

.garden-sprite.is-large .garden-sprite-face:after {
  letter-spacing: 3px;
  font-size: 13px;
  top: 7px;
  left: 4px;
}

.garden-sprite.is-large .garden-sprite-body {
  border-width: 4px;
  width: 42px;
  height: 42px;
  left: 8px;
  box-shadow: 0 13px 0 -4px #44393c;
}

.garden-birthday {
  color: #5d5351;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.garden-birthday > span {
  margin-right: 4px;
}

.garden-birthday select {
  color: #5e5653;
  background: #fff;
  border: 1px solid #d6ccc2;
  border-radius: 5px;
  height: 37px;
  padding: 0 10px;
}

.garden-arrival {
  max-width: 620px;
  min-height: 315px;
  padding: 18px 0 0 125px;
  position: relative;
}

.garden-arrival-portrait {
  background: linear-gradient(#a6cdcd 0 62%, #d9ba80 62%);
  border: 2px solid #5d5151;
  border-radius: 7px;
  place-items: end center;
  width: 82px;
  height: 108px;
  display: grid;
  position: absolute;
  top: 24px;
  left: 18px;
  overflow: hidden;
  box-shadow: 4px 4px #d89279;
}

.garden-arrival h2 {
  letter-spacing: -.05em;
  margin: 8px 0;
  font-family: Georgia, serif;
  font-size: 33px;
}

.garden-arrival > p {
  color: #766d6a;
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.garden-arrival dl {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 23px 0;
  display: grid;
}

.garden-arrival dl div {
  background: #fff;
  border: 1px solid #ded3c8;
  border-radius: 5px;
  padding: 10px;
}

.garden-arrival dt {
  color: #998d85;
  font-size: 9px;
}

.garden-arrival dd {
  color: #5e5350;
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
}

.garden-arrival > small {
  color: #91847d;
  max-width: 470px;
  font-size: 10px;
  line-height: 1.7;
  display: block;
}

.garden-form-error {
  color: #9c3546;
  background: #fff0f2;
  border: 1px solid #e1a1a5;
  border-radius: 5px;
  margin: 20px 0 0;
  padding: 10px 12px;
  font-size: 11px;
}

.garden-creation-actions {
  justify-content: flex-end;
  gap: 9px;
  margin-top: 36px;
  display: flex;
}

.garden-creation-actions .button {
  align-items: center;
  gap: 7px;
  display: inline-flex;
}

.garden-app {
  background: #f3f0eb;
  min-height: calc(100vh - 72px);
  padding-bottom: 70px;
}

.garden-topbar {
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fcf9f3ed;
  border-bottom: 1px solid #d6cfc7;
  position: sticky;
  top: 0;
}

.garden-topbar-inner {
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  min-height: 60px;
  display: flex;
}

.garden-logo {
  color: #504448;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  display: inline-flex;
}

.garden-logo > span {
  color: #fff3b5;
  background: #a45e58;
  border: 2px solid #4e4145;
  border-radius: 50%;
  place-items: center;
  width: 29px;
  height: 29px;
  font-size: 13px;
  display: grid;
  box-shadow: 2px 2px #d99b78;
}

.garden-topbar-inner > div:last-child {
  color: #8c807a;
  align-items: center;
  gap: 11px;
  font-size: 11px;
  display: flex;
}

.garden-topbar-inner > div:last-child > b {
  color: #5b514e;
}

.garden-weather-badge {
  border: 1px solid var(--weather-tone);
  align-items: center;
  gap: 6px;
  min-width: 119px;
  padding: 5px 8px;
  display: inline-flex;
}

@supports (color: color-mix(in lab, red, red)) {
  .garden-weather-badge {
    border: 1px solid color-mix(in srgb, var(--weather-tone) 55%, #d8d0c6);
  }
}

.garden-weather-badge {
  background: var(--weather-tone);
  border-radius: 5px;
}

@supports (color: color-mix(in lab, red, red)) {
  .garden-weather-badge {
    background: color-mix(in srgb, var(--weather-tone) 14%, white);
  }
}

.garden-weather-badge > b {
  color: var(--weather-tone);
  font-size: 18px;
}

.garden-weather-badge span {
  gap: 0;
  display: grid;
}

.garden-weather-badge strong {
  color: #584e4d;
  font-size: 10px;
}

.garden-weather-badge small {
  color: #8b817c;
  font-size: 8px;
}

.garden-layout {
  grid-template-columns: 195px minmax(0, 1fr) 225px;
  align-items: start;
  gap: 17px;
  padding-top: 22px;
  display: grid;
}

.garden-character-card, .garden-budget-card, .garden-memory-card, .garden-transparency {
  background: #fffdfa;
  border: 1px solid #ded7ce;
  border-radius: 7px;
}

.garden-character-card {
  text-align: center;
  padding: 14px;
  position: sticky;
  top: 82px;
}

.garden-character-portrait {
  background: linear-gradient(#acd5d3 0 60%, #d6b274 60%);
  border: 2px solid #625455;
  border-radius: 5px;
  place-items: end center;
  height: 125px;
  display: grid;
  position: relative;
  overflow: hidden;
}

.garden-character-portrait:before {
  content: "";
  background: repeating-linear-gradient(90deg, #c49b63 0 13px, #d7b97a 13px 16px);
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
}

.garden-character-portrait .garden-sprite {
  z-index: 1;
}

.garden-status {
  z-index: 2;
  color: #38685d;
  background: #e2f2e8;
  border-radius: 999px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 7px;
  left: 7px;
}

.garden-status.is-paused {
  color: #875c2d;
  background: #fff0cf;
}

.garden-character-card h1 {
  margin: 14px 0 2px;
  font-size: 20px;
}

.garden-character-card > p {
  color: #877a74;
  margin: 0;
  font-size: 10px;
}

.garden-character-tags {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 11px 0;
  display: flex;
}

.garden-character-tags span {
  color: #805957;
  background: #f3e3da;
  border-radius: 99px;
  padding: 3px 6px;
  font-size: 8px;
  font-weight: 800;
}

.garden-character-card dl {
  border-top: 1px solid #e9e3dc;
  border-bottom: 1px solid #e9e3dc;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 10px 0;
  display: grid;
}

.garden-character-card dt {
  color: #a0948e;
  font-size: 8px;
}

.garden-character-card dd {
  color: #615755;
  margin: 4px 0 0;
  font-size: 9px;
  font-weight: 800;
}

.garden-pause-button {
  color: #655755;
  cursor: pointer;
  background: #f7f2ed;
  border: 1px solid #d8cec4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  margin-top: 11px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.garden-pause-button:hover {
  color: #854d4b;
  border-color: #aa6a61;
}

.garden-pause-button:disabled {
  opacity: .55;
  cursor: wait;
}

.garden-main {
  gap: 16px;
  min-width: 0;
  display: grid;
}

.garden-map {
  background: linear-gradient(#a8d1d0 0 45%, #e1c48d 45% 59%, #b68166 59%);
  border: 2px solid #595050;
  border-radius: 8px;
  min-height: 328px;
  position: relative;
  overflow: hidden;
  box-shadow: 5px 5px #d79677;
}

.garden-map:after {
  content: "";
  z-index: 0;
  background-color: #0000;
  background-image: linear-gradient(#ffffff17 1px, #0000 1px), linear-gradient(90deg, #ffffff17 1px, #0000 1px);
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: 23px 23px;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
  position: absolute;
  inset: 0;
}

.garden-map-sky {
  z-index: 1;
  height: 47%;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.garden-map-sun {
  color: #f5d06c;
  text-shadow: 2px 2px #8a6f55;
  font-size: 58px;
  position: absolute;
  top: 19px;
  right: 58px;
}

.garden-map-cloud {
  background: #ffffff8f;
  border-radius: 20px;
  width: 70px;
  height: 19px;
  position: absolute;
}

.garden-map-cloud:before, .garden-map-cloud:after {
  content: "";
  background: inherit;
  border-radius: 50%;
  position: absolute;
}

.garden-map-cloud:before {
  width: 26px;
  height: 26px;
  top: -11px;
  left: 12px;
}

.garden-map-cloud:after {
  width: 34px;
  height: 34px;
  top: -17px;
  right: 8px;
}

.cloud-one {
  top: 59px;
  left: 16%;
}

.cloud-two {
  top: 24px;
  left: 43%;
  transform: scale(.68);
}

.garden-map-building {
  z-index: 3;
  color: #fff0c8;
  background: repeating-linear-gradient(90deg, #c9856c 0 18px, #574e4e 18px 22px), repeating-linear-gradient(0deg, #0000 0 19px, #544c4b 19px 23px);
  border: 3px solid #504749;
  border-bottom: 0;
  position: absolute;
  bottom: 51px;
  box-shadow: inset 0 0 0 3px #a86760;
}

.garden-map-building > span, .garden-map-roof > span, .garden-map-market > span {
  color: #fff7d9;
  letter-spacing: .04em;
  background: #433633c2;
  padding: 3px 5px;
  font-size: 8px;
  font-weight: 900;
  position: absolute;
  top: 6px;
  left: 6px;
}

.building-one {
  width: 20%;
  height: 109px;
  left: 8%;
}

.building-two {
  background: repeating-linear-gradient(90deg, #839878 0 18px, #4f564c 18px 22px), repeating-linear-gradient(0deg, #0000 0 19px, #4f564c 19px 23px);
  width: 17%;
  height: 149px;
  left: 31%;
}

.building-three {
  background: repeating-linear-gradient(90deg, #9b7975 0 18px, #51484b 18px 22px), repeating-linear-gradient(0deg, #0000 0 19px, #51484b 19px 23px);
  width: 24%;
  height: 184px;
  right: 11%;
}

.garden-map-roof {
  z-index: 4;
  background: #769267;
  border: 3px solid #4c4d47;
  width: 138px;
  height: 61px;
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
}

.garden-map-roof:after {
  content: "";
  background: repeating-linear-gradient(90deg, #91b071 0 12px, #5f7e56 12px 15px);
  position: absolute;
  inset: 9px;
}

.garden-map-roof i {
  z-index: 2;
  background: #4d6a48;
  width: 9px;
  height: 23px;
  position: absolute;
  bottom: -5px;
}

.garden-map-roof i:first-of-type {
  left: 28px;
}

.garden-map-roof i:nth-of-type(2) {
  height: 29px;
  left: 65px;
}

.garden-map-roof i:nth-of-type(3) {
  height: 20px;
  right: 26px;
}

.garden-map-market {
  z-index: 5;
  background: #c46f61;
  border: 3px solid #554d4a;
  width: 112px;
  height: 74px;
  position: absolute;
  bottom: 49px;
  right: 3%;
}

.garden-map-market:after {
  content: "";
  background: repeating-linear-gradient(90deg, #efbf63 0 12px, #9e5152 12px 24px);
  height: 16px;
  position: absolute;
  bottom: -3px;
  left: -3px;
  right: -3px;
}

.garden-map-market i {
  background: #ffd77b;
  width: 9px;
  height: 32px;
  position: absolute;
  bottom: 16px;
}

.garden-map-market i:first-of-type {
  left: 24px;
}

.garden-map-market i:nth-of-type(2) {
  left: 52px;
}

.garden-map-market i:nth-of-type(3) {
  left: 80px;
}

.garden-map-path {
  z-index: 2;
  background: repeating-linear-gradient(90deg, #be9b72 0 21px, #dab98a 21px 27px);
  width: 100%;
  height: 57px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.garden-map-character {
  z-index: 7;
  filter: drop-shadow(3px 3px #382e2c59);
  position: absolute;
  bottom: 42px;
  left: 54%;
}

.garden-map-hotspots {
  z-index: 10;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.garden-map-hotspots button {
  color: #fff9df;
  cursor: pointer;
  pointer-events: auto;
  background: #473b33c4;
  border: 1px solid #443933c7;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  font-size: 8px;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
}

.garden-map-hotspots button:hover, .garden-map-hotspots button:focus-visible {
  color: #4d413d;
  background: #fff2bc;
  border-color: #e9c978;
  outline: 0;
  box-shadow: 0 0 0 2px #fff2bc80;
}

.garden-map-hotspots button:disabled {
  opacity: .55;
  cursor: wait;
}

.garden-map-hotspots .is-tea-shop {
  bottom: 128px;
  left: 31%;
}

.garden-map-hotspots .is-roof-garden {
  top: 78px;
  left: 48%;
}

.garden-map-hotspots .is-night-market {
  bottom: 126px;
  right: 3%;
}

.garden-map-resident {
  z-index: 8;
  color: #fff8e8;
  background: #453934c7;
  border: 1px solid #3e3330b3;
  border-radius: 4px;
  gap: 1px;
  min-width: 74px;
  padding: 5px 7px;
  font-size: 8px;
  line-height: 1.25;
  display: grid;
  position: absolute;
  box-shadow: 2px 2px #3a302d4d;
}

.garden-map-resident > span {
  color: var(--resident-color);
  text-shadow: 1px 1px #493e3c;
  font-size: 21px;
  position: absolute;
  top: -7px;
  left: -8px;
}

.garden-map-resident b {
  font-size: 9px;
}

.garden-map-resident small {
  color: #f3e4c4;
  font-size: 7px;
}

.garden-map-resident.is-tea-shop {
  bottom: 168px;
  left: 30%;
}

.garden-map-resident.is-roof-garden {
  top: 83px;
  left: 48%;
}

.garden-map-resident.is-night-market {
  bottom: 128px;
  right: 2%;
}

.garden-map-caption {
  z-index: 9;
  color: #fff5d7;
  background: #423733b8;
  border: 1px solid #4839329e;
  border-radius: 4px;
  max-width: 250px;
  padding: 7px 10px;
  font-size: 9px;
  line-height: 1.5;
  position: absolute;
  bottom: 10px;
  right: 13px;
}

.garden-map-caption b {
  margin-bottom: 1px;
  font-size: 10px;
  display: block;
}

.garden-today {
  background: #fffaf3;
  border: 1px solid #e0d5c7;
  border-radius: 8px;
  grid-template-columns: 1fr minmax(250px, .93fr);
  gap: 20px;
  padding: 22px;
  display: grid;
}

.garden-today h2 {
  letter-spacing: -.04em;
  margin: 5px 0;
  font-size: 22px;
}

.garden-today p {
  color: #807671;
  margin: 0;
  font-size: 11px;
  line-height: 1.65;
}

.garden-suggestion textarea {
  resize: vertical;
  color: #564d4b;
  background: #fff;
  border: 1px solid #d6cbc1;
  border-radius: 5px;
  outline: 0;
  width: 100%;
  min-height: 86px;
  padding: 10px;
  font: 11px / 1.65 inherit;
}

.garden-suggestion textarea:focus {
  border-color: #a86860;
  box-shadow: 0 0 0 2px #a868601f;
}

.garden-suggestion > div {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  display: flex;
}

.garden-suggestion small {
  color: #9d918a;
  font-size: 9px;
}

.garden-suggestion .button {
  align-items: center;
  gap: 5px;
  font-size: 11px;
  display: inline-flex;
}

.garden-dashboard-error {
  margin: 0;
}

.garden-section-head {
  justify-content: space-between;
  align-items: end;
  gap: 15px;
  display: flex;
}

.garden-section-head h2 {
  letter-spacing: -.04em;
  margin: 5px 0 0;
  font-size: 22px;
}

.garden-event-grid {
  gap: 10px;
  margin-top: 11px;
  display: grid;
}

.garden-event-grid article {
  background: #fff3e8;
  border: 1px solid #dcb9a2;
  border-radius: 7px;
  gap: 13px;
  padding: 15px;
  display: flex;
}

.garden-event-grid > article > span {
  color: #fff0a9;
  background: #a96759;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 35px;
  height: 35px;
  font-size: 17px;
  display: grid;
}

.garden-event-grid h3 {
  margin: 0;
  font-size: 14px;
}

.garden-event-grid p {
  color: #796a63;
  margin: 5px 0 10px;
  font-size: 11px;
  line-height: 1.65;
}

.garden-event-grid div div {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.garden-event-grid .button {
  font-size: 10px;
}

.garden-activity-section {
  padding-top: 4px;
}

.garden-activity-list {
  background: #fffdfa;
  border: 1px solid #e0d8d0;
  border-radius: 7px;
  gap: 0;
  margin-top: 12px;
  display: grid;
  overflow: hidden;
}

.garden-activity-list article {
  border-bottom: 1px solid #ece5de;
  grid-template-columns: 57px minmax(0, 1fr) 54px;
  align-items: start;
  gap: 12px;
  padding: 15px;
  display: grid;
}

.garden-activity-list article:last-child {
  border-bottom: 0;
}

.garden-activity-date {
  text-align: center;
  gap: 3px;
  display: grid;
}

.garden-activity-date span {
  color: #8e827d;
  font-size: 10px;
}

.garden-activity-date b {
  color: #ad625b;
  font-size: 11px;
}

.garden-activity-title {
  align-items: center;
  gap: 7px;
  display: flex;
}

.garden-activity-title h3 {
  margin: 0;
  font-size: 14px;
}

.garden-activity-title span {
  border-radius: 999px;
  padding: 3px 5px;
  font-size: 8px;
  font-weight: 800;
}

.garden-activity-title .is-ai {
  color: #356b63;
  background: #e2f1ec;
}

.garden-activity-title .is-rule {
  color: #8a6440;
  background: #fff0d2;
}

.garden-activity-list p {
  color: #756b67;
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.75;
}

.garden-activity-list small {
  color: #a07d55;
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.55;
  display: block;
}

.garden-activity-cost {
  color: #815e56;
  text-align: right;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
}

.garden-activity-dialogue {
  color: #62716d;
  background: #eef5f0;
  border-left: 3px solid #8ca59a;
  border-radius: 0 4px 4px 0;
  gap: 3px;
  margin-top: 9px;
  padding: 8px 9px;
  font-size: 10px;
  line-height: 1.55;
  display: grid;
}

.garden-activity-dialogue strong {
  color: #426a60;
}

.garden-activity-dialogue span:last-child {
  color: #80615a;
}

.garden-empty-log {
  color: #938882;
  background: #ffffffa6;
  border: 1px dashed #d6cdc4;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 18px;
  font-size: 11px;
  display: flex;
}

.garden-empty-log svg {
  color: #c17c5d;
}

.garden-sidebar {
  gap: 12px;
  display: grid;
  position: sticky;
  top: 82px;
}

.garden-budget-card, .garden-memory-card, .garden-neighbor-card {
  padding: 14px;
}

.garden-neighbor-card {
  background: #f7fbf6;
  border: 1px solid #d7ded5;
  border-radius: 7px;
}

.garden-neighbor-card h2 {
  margin: 6px 0 10px;
  font-size: 16px;
}

.garden-neighbor-card > p {
  color: #7f8880;
  margin: 0;
  font-size: 9px;
  line-height: 1.6;
}

.garden-current-resident, .garden-relationship-list > div {
  align-items: center;
  gap: 8px;
  display: flex;
}

.garden-current-resident {
  background: #fff;
  border: 1px solid #d8e2d7;
  border-radius: 5px;
  padding: 8px;
}

.garden-current-resident i, .garden-relationship-list i {
  border: 2px solid #fff;
  border-radius: 50%;
  flex: none;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 1px #404f4538;
}

.garden-current-resident strong, .garden-current-resident small, .garden-relationship-list strong, .garden-relationship-list small {
  display: block;
}

.garden-current-resident strong, .garden-relationship-list strong {
  color: #52645a;
  font-size: 10px;
}

.garden-current-resident small, .garden-relationship-list small {
  color: #89948b;
  margin-top: 2px;
  font-size: 8px;
}

.garden-relationship-list {
  gap: 7px;
  margin-top: 9px;
  display: grid;
}

.garden-relationship-list > div {
  border-top: 1px solid #e2ebe1;
  padding-top: 7px;
}

.garden-budget-card > div:first-child {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.garden-budget-card button {
  color: #9b5e59;
  cursor: pointer;
  background: none;
  border: 0;
  font-size: 9px;
  font-weight: 800;
}

.garden-budget-card > strong {
  color: #544847;
  letter-spacing: -.05em;
  margin: 10px 0 8px;
  font-size: 27px;
  display: block;
}

.garden-budget-card > strong small {
  color: #9b8e88;
  letter-spacing: 0;
  font-size: 10px;
  font-weight: 600;
}

.garden-budget-track {
  background: #ede5dc;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.garden-budget-track span {
  border-radius: inherit;
  background: linear-gradient(90deg, #7da096, #c57461);
  height: 100%;
  display: block;
}

.garden-budget-card p {
  color: #928781;
  margin: 8px 0 0;
  font-size: 9px;
  line-height: 1.65;
}

.garden-budget-editor {
  gap: 5px;
  margin-top: 10px;
  display: flex;
}

.garden-budget-editor input {
  border: 1px solid #d5cbc2;
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  height: 29px;
  padding: 0 7px;
  font-size: 10px;
}

.garden-budget-editor .button {
  color: #fff;
  background: var(--ink);
  align-items: center;
  padding: 0 8px;
  display: inline-flex;
}

.garden-memory-card h2 {
  margin: 6px 0 9px;
  font-size: 16px;
}

.garden-memory-card article {
  border-bottom: 1px solid #ede6df;
  padding: 9px 0;
}

.garden-memory-card article:last-child {
  border: 0;
}

.garden-memory-card b {
  color: #655856;
  font-size: 10px;
}

.garden-memory-card p {
  color: #91857f;
  margin: 3px 0 0;
  font-size: 9px;
  line-height: 1.6;
}

.garden-transparency {
  color: #6e665f;
  background: #edf5f0;
  gap: 8px;
  padding: 13px;
  display: flex;
}

.garden-transparency svg {
  color: #53837b;
  flex: none;
}

.garden-transparency strong {
  font-size: 10px;
  display: block;
}

.garden-transparency p {
  margin: 4px 0 0;
  font-size: 9px;
  line-height: 1.6;
}

.garden-admin {
  min-width: 0;
  margin-top: 24px;
}

.garden-admin > .admin-section-title {
  padding: 24px 28px 20px;
}

.garden-admin-body {
  padding: 24px 28px 28px;
}

.garden-admin-form {
  grid-template-columns: minmax(180px, 1.2fr) minmax(160px, 1.2fr) minmax(100px, .65fr) minmax(100px, .65fr) minmax(140px, 1fr) auto;
  align-items: end;
  gap: 14px;
  display: grid;
}

.garden-admin-form label, .garden-admin-debug-target label {
  color: #746b69;
  gap: 8px;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.garden-admin-form input, .garden-admin-form select, .garden-admin-debug-target input {
  color: #554c4c;
  background: #fff;
  border: 1px solid #d7cfc7;
  border-radius: 5px;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  font-size: 12px;
}

.garden-admin-user-search {
  position: relative;
}

.garden-admin-user-search > div {
  color: #958982;
  background: #fff;
  border: 1px solid #d7cfc7;
  border-radius: 5px;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  display: flex;
}

.garden-admin-user-search > div input {
  border: 0;
  outline: 0;
  height: 100%;
  padding: 0;
}

.garden-admin-user-search > small {
  color: #a09690;
  font-size: 10px;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}

.garden-admin-user-search ul {
  z-index: 5;
  background: #fff;
  border: 1px solid #ded7cf;
  border-radius: 6px;
  margin: 0;
  padding: 6px;
  list-style: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  box-shadow: 0 10px 24px #46372d1f;
}

.garden-admin-user-search li button {
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 4px;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  display: grid;
}

.garden-admin-user-search li button:hover {
  background: #f7f3ef;
}

.garden-admin-user-search li strong {
  color: #554c4c;
  font-size: 12px;
}

.garden-admin-user-search li small {
  color: #a09791;
  overflow-wrap: anywhere;
  font-size: 10px;
}

.payment-logo.redeem {
  color: #8b5cf6;
  background: #f3e8ff;
}

.redeem-hint {
  color: #5f5a70;
  text-align: left;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
}

.redeem-hint b {
  color: #3f3a55;
}

.redeem-field {
  text-align: left;
  color: #746b80;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.redeem-field input {
  border: 1px solid var(--line);
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 6px;
  height: 42px;
  padding: 0 12px;
  font-size: 14px;
}

.redeem-error {
  color: #b42318;
  margin: 0 0 10px;
  font-size: 12px;
}

.redemption-admin {
  margin: 24px 0;
  overflow: hidden;
}

.redemption-admin .admin-section-title {
  align-items: flex-start;
  min-height: 96px;
  padding-top: 18px;
  padding-bottom: 16px;
}

.redemption-admin-body {
  padding: 18px 20px 22px;
}

.redemption-admin-form {
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 12px;
  display: grid;
}

.redemption-admin-form label {
  color: var(--muted);
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.redemption-admin-form input, .redemption-admin-form select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  height: 38px;
  padding: 0 10px;
  font-size: 12px;
}

.redemption-admin-batch {
  background: #faf8ff;
  border: 1px dashed #d7cfe8;
  border-radius: 6px;
  margin: 12px 0 16px;
  padding: 12px;
}

.redemption-admin-batch > div {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  display: flex;
}

.redemption-admin-batch button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  font-size: 11px;
  display: inline-flex;
}

.redemption-admin-batch pre {
  white-space: pre-wrap;
  word-break: break-all;
  color: #4c4560;
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
}

.redemption-admin-list-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 14px 0 8px;
  display: flex;
}

.redemption-admin-filter {
  color: #4c4560;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.redemption-admin-filter input {
  accent-color: #3f3a55;
  width: 15px;
  height: 15px;
}

.redemption-admin-list-toolbar > small {
  color: var(--muted);
  font-size: 11px;
}

.redemption-admin-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
}

.redemption-admin-list > div {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 1fr) 72px 140px 80px;
  align-items: center;
  gap: 12px;
  min-width: 860px;
  padding: 12px 14px;
  font-size: 12px;
  display: grid;
}

.redemption-admin-list > div:last-child {
  border-bottom: 0;
}

.redemption-admin-list-head {
  text-transform: uppercase;
  background: #faf9fb;
  font-weight: 800;
  color: var(--muted) !important;
  font-size: 10px !important;
}

.redemption-admin-list span strong, .redemption-admin-list span small {
  display: block;
}

.redemption-admin-list span small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.redemption-status {
  border-radius: 999px;
  width: fit-content;
  padding: 3px 6px;
  font-size: 10px;
}

.redemption-status.is-active {
  color: #376d61;
  background: #e3f2ec;
}

.redemption-status.is-redeemed {
  color: #5b4d8a;
  background: #efeaff;
}

.redemption-status.is-revoked, .redemption-status.is-expired {
  color: #933e4b;
  background: #ffedf0;
}

.redemption-admin-actions {
  gap: 6px;
  display: flex;
}

.redemption-admin-actions button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.redemption-admin-empty {
  text-align: center;
  color: var(--muted) !important;
  padding: 32px 14px !important;
  display: block !important;
}

@media (max-width: 900px) {
  .redemption-admin-form {
    grid-template-columns: 1fr 1fr;
  }
}

.users-admin {
  margin: 24px 0;
  overflow: hidden;
}

.users-admin .admin-section-title {
  align-items: flex-start;
  min-height: 96px;
  padding-top: 18px;
  padding-bottom: 16px;
}

.users-admin .admin-section-title button {
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.users-admin-body {
  padding: 18px 20px 22px;
}

.users-admin-search {
  align-items: center;
  gap: 10px;
  display: flex;
}

.users-admin-search label {
  border: 1px solid var(--line);
  min-width: 0;
  height: 38px;
  color: var(--muted);
  background: #faf9fb;
  border-radius: 5px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  display: flex;
}

.users-admin-search input {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
  font-size: 12px;
}

.users-admin-list {
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-top: 12px;
  overflow-x: auto;
}

.users-admin-list > div {
  border-bottom: 1px solid var(--soft-line);
  grid-template-columns: minmax(220px, 1.6fr) 72px 90px 110px 150px;
  align-items: center;
  gap: 14px;
  min-width: 860px;
  padding: 14px 16px;
  font-size: 12px;
  display: grid;
}

.users-admin-list > div:last-child {
  border-bottom: 0;
}

.users-admin-list-head {
  text-transform: uppercase;
  background: #faf9fb;
  font-weight: 800;
  color: var(--muted) !important;
  font-size: 10px !important;
}

.users-admin-list span strong, .users-admin-list span small {
  display: block;
}

.users-admin-list span small {
  color: var(--muted);
  margin-top: 3px;
  font-size: 10px;
}

.users-admin-id {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.users-admin-actions {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.users-admin-actions button {
  border: 1px solid var(--line);
  cursor: pointer;
  background: #fff;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 11px;
  display: inline-flex;
}

.users-admin-list > div.is-editing {
  background: #fbf8f3;
}

.users-admin-empty {
  text-align: center;
  color: var(--muted) !important;
  padding: 36px 16px !important;
  display: block !important;
}

.users-admin-edit {
  border: 1px solid var(--line);
  background: #fcfbf9;
  border-radius: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  display: grid;
}

.users-admin-edit h3, .users-admin-edit > p {
  grid-column: 1 / -1;
  margin: 0;
}

.users-admin-edit > p {
  color: var(--muted);
  font-size: 12px;
}

.users-admin-edit label {
  color: var(--muted);
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
}

.users-admin-edit input, .users-admin-edit select {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 4px;
  height: 36px;
  padding: 0 10px;
  font-size: 12px;
}

.users-admin-edit-actions {
  grid-column: 1 / -1;
  gap: 8px;
  display: flex;
}

@media (max-width: 900px) {
  .garden-admin-form {
    grid-template-columns: 1fr 1fr;
  }

  .users-admin-edit {
    grid-template-columns: 1fr;
  }
}

.garden-admin-form .button {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 38px;
  display: inline-flex;
}

.garden-admin .admin-save-status {
  margin: 16px 0;
  padding: 12px 0;
  line-height: 1.7;
}

.garden-admin-list {
  border: 1px solid #ded7cf;
  border-radius: 6px;
  margin-top: 16px;
  overflow-x: auto;
}

.garden-admin-list > div {
  color: #6d6260;
  border-bottom: 1px solid #ece5df;
  grid-template-columns: minmax(160px, 1.5fr) 80px 80px 130px 82px;
  align-items: center;
  gap: 14px;
  min-width: 720px;
  padding: 14px 16px;
  font-size: 11px;
  display: grid;
}

.garden-admin-list > div:last-child {
  border-bottom: 0;
}

.garden-admin-list-head {
  background: #f7f3ef;
  font-weight: 800;
  color: #958982 !important;
}

.garden-admin-list span strong, .garden-admin-list span small {
  display: block;
}

.garden-admin-list span small {
  color: #a09791;
  overflow-wrap: anywhere;
  margin-top: 4px;
  font-size: 10px;
}

.garden-admin-status {
  border-radius: 999px;
  width: fit-content;
  padding: 3px 6px;
  font-size: 10px;
}

.garden-admin-status.is-active {
  color: #376d61;
  background: #e3f2ec;
}

.garden-admin-status.is-invited {
  color: #855c2b;
  background: #fff0d0;
}

.garden-admin-status.is-suspended {
  color: #933e4b;
  background: #ffedf0;
}

.garden-admin-empty {
  text-align: center;
  color: #a09690 !important;
  display: block !important;
}

.garden-admin-debug-button {
  color: #59734d;
  cursor: pointer;
  background: #f1f5eb;
  border: 1px solid #d1d9c7;
  border-radius: 5px;
  padding: 7px 9px;
  font-size: 11px;
}

.garden-admin-debug {
  border-top: 1px solid #e4ded6;
  margin-top: 28px;
  padding-top: 24px;
}

.garden-admin-debug > h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.garden-admin-debug > p {
  color: #91847d;
  font-size: 12px;
  line-height: 1.8;
}

.garden-admin-debug-target {
  align-items: end;
  gap: 12px;
  margin: 20px 0 24px;
  display: flex;
}

.garden-admin-debug-target label {
  flex: 1;
}

.garden-admin-debug-target .button {
  min-height: 38px;
}

.garden-admin-debug > .garden-debug {
  background: #fcfcf7;
  border: 1px solid #dce1d1;
  border-radius: 10px;
  padding: 24px;
}

@media (max-width: 780px) {
  .garden-admin > .admin-section-title {
    padding: 22px 18px 18px;
  }

  .garden-admin-body {
    padding: 20px 18px 22px;
  }

  .garden-admin-debug-target {
    flex-wrap: wrap;
  }

  .garden-admin-debug-target label {
    flex-basis: 100%;
  }

  .garden-admin-debug > .garden-debug {
    padding: 18px 14px;
  }
}

@media (max-width: 1050px) {
  .garden-layout {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .garden-sidebar {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    position: static;
  }

  .garden-character-card {
    top: 82px;
  }

  .garden-goal-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .garden-sprite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .garden-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .garden-admin-form .button {
    width: fit-content;
  }
}

@media (max-width: 780px) {
  .home-garden-inner, .garden-about {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .home-garden-visual {
    order: 2;
  }

  .garden-hero {
    min-height: 600px;
  }

  .garden-hero-sun {
    width: 95px;
    height: 95px;
    right: 13%;
  }

  .garden-hero-sun:before {
    width: 145px;
    top: 44px;
    left: -25px;
    box-shadow: 0 -23px #f5d36f, 0 23px #f5d36f;
  }

  .garden-hero-sun:after {
    height: 145px;
    top: -25px;
    left: 44px;
    box-shadow: -23px 0 #f5d36f, 23px 0 #f5d36f;
  }

  .garden-hero-buildings {
    height: 38%;
  }

  .garden-hero-inner {
    padding-top: 82px;
  }

  .garden-about {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .garden-principles {
    grid-template-columns: 1fr;
  }

  .garden-principles article {
    min-height: auto;
  }

  .garden-question-list, .garden-persona-grid, .garden-goal-grid {
    grid-template-columns: 1fr;
  }

  .garden-sprite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .garden-arrival {
    padding: 130px 0 0;
  }

  .garden-arrival-portrait {
    left: 0;
  }

  .garden-creation-card {
    padding: 26px 18px;
  }

  .garden-stepper {
    margin-top: 28px;
  }

  .garden-layout {
    grid-template-columns: 1fr;
  }

  .garden-character-card {
    text-align: left;
    grid-template-columns: 120px 1fr;
    gap: 8px 15px;
    display: grid;
    position: static;
  }

  .garden-character-portrait {
    grid-row: 1 / span 5;
    height: 146px;
  }

  .garden-character-card h1 {
    align-self: end;
    margin: 0;
  }

  .garden-character-card > p {
    align-self: start;
  }

  .garden-character-tags {
    justify-content: start;
    margin: 0;
  }

  .garden-character-card dl {
    padding: 7px 0;
  }

  .garden-pause-button {
    grid-column: 2;
    margin: 0;
  }

  .garden-sidebar {
    grid-template-columns: 1fr;
  }

  .garden-topbar-inner > div:last-child > span {
    display: none;
  }

  .garden-weather-badge {
    min-width: 0;
  }

  .garden-today {
    grid-template-columns: 1fr;
  }

  .garden-map {
    min-height: 275px;
  }

  .building-one {
    left: 3%;
  }

  .building-two {
    left: 28%;
  }

  .building-three {
    right: 3%;
  }

  .garden-map-roof {
    transform: translateX(-58%)scale(.85);
  }

  .garden-map-market, .garden-map-resident.is-night-market, .garden-map-hotspots .is-night-market {
    display: none;
  }

  .garden-map-resident.is-tea-shop {
    bottom: 160px;
    left: 28%;
  }

  .garden-map-hotspots .is-tea-shop {
    bottom: 132px;
    left: 27%;
  }

  .garden-map-hotspots .is-roof-garden {
    top: 74px;
    left: 43%;
  }

  .garden-admin-list {
    overflow-x: auto;
  }

  .garden-admin-form {
    grid-template-columns: 1fr;
  }

  .garden-admin-form .button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .garden-hero-inner {
    padding-top: 66px;
  }

  .garden-hero h1 {
    font-size: 44px;
  }

  .garden-hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .garden-gate-card {
    padding: 35px 24px;
  }

  .garden-onboarding {
    padding-top: 35px;
  }

  .garden-question-list {
    gap: 8px;
  }

  .garden-sprite-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .garden-birthday {
    flex-wrap: wrap;
  }

  .garden-arrival dl {
    grid-template-columns: 1fr;
  }

  .garden-map {
    min-height: 238px;
  }

  .garden-map-character {
    left: 50%;
  }

  .garden-map-caption {
    max-width: 155px;
  }

  .garden-activity-list article {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 12px;
  }

  .garden-activity-cost {
    text-align: left;
    grid-column: 2;
  }

  .garden-event-grid article {
    padding: 12px;
  }

  .garden-topbar-inner {
    min-height: 56px;
  }

  .garden-topbar-inner > div:last-child > b {
    display: none;
  }
}

.paper-poc-loading {
  color: #554f55;
  background: #f3eee7;
  place-items: center;
  min-height: calc(100vh - 140px);
  padding: 40px;
  font-size: 14px;
  font-weight: 800;
  display: grid;
}

.paper-poc-page {
  --paper-poc-ink: #3e3a40;
  --paper-poc-line: #cfc5bc;
  --paper-poc-paper: #fffdf9;
  --paper-poc-blue: #416f8f;
  --paper-poc-blue-soft: #e8f1f6;
  --paper-poc-teal: #4f8278;
  min-height: calc(100vh - 72px);
  color: var(--paper-poc-ink);
  background-color: #eee8df;
  background-image: linear-gradient(#ffffff52 1px, #0000 1px), none;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: 100% 28px;
  background-attachment: scroll, scroll;
  background-origin: padding-box, padding-box;
  background-clip: border-box, border-box;
}

.paper-poc-topbar {
  z-index: 25;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffbf5f5;
  border-bottom: 2px solid #4d464b;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 68px;
  padding: 12px clamp(16px, 2.4vw, 36px);
  display: flex;
  position: sticky;
  top: 70px;
  box-shadow: 0 4px #584a461a;
}

.paper-poc-topbar-main, .paper-poc-topbar-actions, .paper-poc-title, .paper-poc-back, .paper-poc-button, .paper-poc-badge {
  align-items: center;
  display: flex;
}

.paper-poc-topbar-main {
  gap: clamp(12px, 2vw, 26px);
  min-width: 0;
}

.paper-poc-topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.paper-poc-back {
  color: #6d6160;
  flex: none;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.paper-poc-back:hover {
  color: #9f554f;
}

.paper-poc-title {
  gap: 9px;
  min-width: 0;
}

.paper-poc-mark {
  color: #f7fbff;
  background: var(--paper-poc-blue);
  border: 1px solid #395d73;
  border-radius: 6px;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  display: grid;
  box-shadow: 3px 3px #b9ccd7;
}

.paper-poc-title strong, .paper-poc-title small {
  display: block;
}

.paper-poc-title strong {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  overflow: hidden;
}

.paper-poc-title small {
  color: #8d8280;
  margin-top: 2px;
  font-size: 9px;
}

.paper-poc-hash {
  color: #756b69;
  background: #f5f0ea;
  border: 1px solid #d9d0c8;
  border-radius: 4px;
  padding: 6px 8px;
  font: 800 9px / 1 monospace;
}

.paper-poc-button {
  color: #365a70;
  cursor: pointer;
  background: #edf5f8;
  border: 1px solid #9aaeb9;
  border-radius: 5px;
  justify-content: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  font: 800 10px / 1 inherit;
}

.paper-poc-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 2px 2px #adc0ca;
}

.paper-poc-button-dark {
  color: #fff;
  background: #474047;
  border-color: #403a40;
}

.paper-poc-button-quiet {
  color: #655b59;
  background: #fffaf5;
  border-color: #d5cbc3;
}

.paper-poc-button:disabled {
  color: #a79d98;
  cursor: not-allowed;
  background: #eee9e4;
  border-color: #ddd5ce;
}

.paper-poc-layout {
  grid-template-columns: minmax(230px, 270px) minmax(560px, 1fr) minmax(250px, 300px);
  gap: 14px;
  width: min(1880px, 100%);
  min-height: calc(100vh - 140px);
  margin: 0 auto;
  padding: 16px clamp(12px, 1.5vw, 24px) 28px;
  display: grid;
}

.paper-poc-panel, .paper-poc-canvas {
  background: var(--paper-poc-paper);
  border: 2px solid #4f484c;
  border-radius: 8px;
  min-width: 0;
  box-shadow: 5px 5px #cfb8a8;
}

.paper-poc-panel {
  align-self: start;
  overflow: hidden;
}

.paper-poc-section {
  border-bottom: 1px solid #e3dbd3;
  padding: 15px;
}

.paper-poc-section:last-child {
  border-bottom: 0;
}

.paper-poc-section-heading {
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  display: flex;
}

.paper-poc-section-heading > span {
  color: #fff;
  letter-spacing: .05em;
  background: #607f8e;
  border: 1px solid #51656f;
  border-radius: 4px;
  flex: none;
  place-items: center;
  min-width: 29px;
  height: 25px;
  padding: 0 5px;
  font-size: 8px;
  font-weight: 900;
  display: grid;
}

.paper-poc-section-heading strong, .paper-poc-section-heading small {
  display: block;
}

.paper-poc-section-heading strong {
  font-size: 12px;
}

.paper-poc-section-heading small {
  color: #978c87;
  margin-top: 2px;
  font-size: 9px;
}

.paper-poc-action, .paper-poc-file-picker {
  color: #5e5555;
  background: #faf7f2;
  border: 1px solid #cfc4bc;
  border-radius: 6px;
  width: 100%;
  min-height: 39px;
  font-family: inherit;
}

.paper-poc-action {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 800;
  display: flex;
}

.paper-poc-action:hover:not(:disabled) {
  color: #315f76;
  background: #edf5f7;
  border-color: #688a9a;
}

.paper-poc-action:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.paper-poc-action-primary {
  color: #fff;
  background: var(--paper-poc-blue);
  border-color: #315d73;
}

.paper-poc-file-picker {
  text-align: center;
  cursor: pointer;
  border-style: dashed;
  justify-items: center;
  gap: 4px;
  padding: 16px 10px;
  display: grid;
  position: relative;
}

.paper-poc-file-picker:hover {
  background: #eff6f8;
  border-color: #54778a;
}

.paper-poc-file-picker svg {
  color: #52798c;
}

.paper-poc-file-picker strong {
  font-size: 10px;
}

.paper-poc-file-picker small {
  color: #9a8f8a;
  font-size: 8px;
}

.paper-poc-file-picker input {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}

.paper-poc-file-status, .paper-poc-validation {
  background: #f8f5f0;
  border: 1px solid #d9d2c9;
  border-radius: 5px;
  align-items: flex-start;
  gap: 8px;
  margin-top: 9px;
  padding: 9px;
  display: flex;
}

.paper-poc-file-status > span, .paper-poc-validation > span {
  flex: none;
  margin-top: 1px;
}

.paper-poc-file-status strong, .paper-poc-file-status small, .paper-poc-validation strong, .paper-poc-validation small {
  overflow-wrap: anywhere;
  display: block;
}

.paper-poc-file-status strong, .paper-poc-validation strong {
  font-size: 9px;
}

.paper-poc-file-status small, .paper-poc-validation small {
  color: #8c817d;
  margin-top: 3px;
  font-size: 8px;
  line-height: 1.55;
}

.paper-poc-file-status.is-ready, .paper-poc-validation.is-valid {
  color: #356a60;
  background: #edf7f3;
  border-color: #a9c8bf;
}

.paper-poc-file-status.is-warning {
  color: #8b682e;
  background: #fff8e8;
  border-color: #dcc48f;
}

.paper-poc-file-status.is-error, .paper-poc-validation.is-invalid {
  color: #913b49;
  background: #fff0f2;
  border-color: #dda8ad;
}

.paper-poc-replace-section textarea {
  resize: vertical;
  color: #4f494d;
  background: #fff;
  border: 1px solid #cfc6be;
  border-radius: 5px;
  outline: 0;
  width: 100%;
  min-height: 128px;
  padding: 9px;
  font: 10px / 1.65 inherit;
}

.paper-poc-replace-section textarea:focus {
  border-color: #51798e;
  box-shadow: 0 0 0 2px #416f8f21;
}

.paper-poc-replace-meta {
  color: #998e89;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 9px;
  font-size: 8px;
  display: flex;
}

.paper-poc-canvas {
  grid-template-rows: auto minmax(560px, 1fr) auto;
  display: grid;
  overflow: hidden;
}

.paper-poc-canvas-head, .paper-poc-canvas-foot {
  background: #f9f6f1;
  padding: 11px 14px;
}

.paper-poc-canvas-head {
  border-bottom: 1px solid #ddd5ce;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.paper-poc-canvas-head span {
  color: #54788a;
  letter-spacing: .14em;
  font-size: 8px;
  font-weight: 900;
}

.paper-poc-canvas-head h1 {
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 3px 0 0;
  font-size: 13px;
  overflow: hidden;
}

.paper-poc-live-state {
  flex: none;
  align-items: center;
  gap: 6px;
  display: flex;
  color: #9a6b43 !important;
  letter-spacing: 0 !important;
}

.paper-poc-live-state i, .paper-poc-canvas-foot i {
  background: #c8914c;
  border-radius: 50%;
  width: 7px;
  height: 7px;
}

.paper-poc-live-state.is-ready {
  color: #43796d !important;
}

.paper-poc-live-state.is-ready i, .paper-poc-canvas-foot .is-ready i {
  background: #4f8b7d;
  box-shadow: 0 0 0 3px #4f8b7d24;
}

.paper-poc-editor-frame {
  background: #ddd7cf;
  min-width: 0;
  height: min(72vh, 860px);
  min-height: 560px;
}

.paper-poc-editor {
  background: #fff;
  min-height: 560px !important;
}

.paper-poc-canvas-foot {
  border-top: 1px solid #ddd5ce;
  gap: 4px;
  display: grid;
}

.paper-poc-canvas-foot span {
  color: #7c654c;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
}

.paper-poc-canvas-foot small {
  color: #918783;
  font-size: 8px;
  line-height: 1.5;
}

.paper-poc-mapping-list {
  gap: 7px;
  display: grid;
}

.paper-poc-mapping-list article {
  background: #fbf8f4;
  border: 1px solid #d8d0c8;
  border-radius: 5px;
  padding: 8px;
}

.paper-poc-mapping-list article > div {
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: 5px;
  display: grid;
}

.paper-poc-mapping-list strong, .paper-poc-mapping-list b {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  overflow: hidden;
}

.paper-poc-mapping-list b {
  color: #3f6d82;
  font-family: monospace;
}

.paper-poc-mapping-list small {
  color: #918680;
  margin-top: 5px;
  font-size: 8px;
  display: block;
}

.paper-poc-progress-list {
  gap: 6px;
  margin-top: 10px;
  display: grid;
}

.paper-poc-progress-list > span {
  color: #897e7a;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  display: flex;
}

.paper-poc-progress-list i {
  color: #887b76;
  background: #ebe5df;
  border-radius: 50%;
  place-items: center;
  width: 17px;
  height: 17px;
  font-size: 9px;
  font-style: normal;
  display: grid;
}

.paper-poc-progress-list > span.is-done {
  color: #3e756a;
  font-weight: 800;
}

.paper-poc-progress-list > span.is-done i {
  color: #fff;
  background: #5a8f82;
}

.paper-poc-boundary ul, .paper-poc-mobile-card ul {
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.paper-poc-boundary li, .paper-poc-mobile-card li {
  color: #756c69;
  align-items: flex-start;
  gap: 7px;
  font-size: 9px;
  line-height: 1.55;
  display: flex;
}

.paper-poc-boundary li svg, .paper-poc-mobile-card li svg {
  color: #5b847b;
  flex: none;
  margin-top: 1px;
}

.paper-poc-boundary li:nth-last-child(-n+3) svg {
  color: #b27345;
}

.paper-poc-badge {
  color: #365f74;
  background: var(--paper-poc-blue-soft);
  border-radius: 999px;
  gap: 5px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 900;
}

.paper-poc-page-mobile {
  padding-bottom: 32px;
}

.paper-poc-mobile-shell {
  gap: 12px;
  width: min(620px, 100% - 28px);
  margin: 18px auto 0;
  display: grid;
}

.paper-poc-mobile-hero, .paper-poc-mobile-card {
  background: #fffdf9;
  border: 2px solid #50494d;
  border-radius: 8px;
  padding: 19px;
  box-shadow: 5px 5px #ceb5a5;
}

.paper-poc-mobile-hero > span {
  color: #47758a;
  letter-spacing: .12em;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 900;
  display: flex;
}

.paper-poc-mobile-hero h1 {
  letter-spacing: -.04em;
  margin: 10px 0 8px;
  font-size: 25px;
}

.paper-poc-mobile-hero p, .paper-poc-mobile-card p {
  color: #786f6d;
  margin: 0;
  font-size: 11px;
  line-height: 1.75;
}

.paper-poc-mobile-card h2 {
  margin: 0 0 12px;
  font-size: 14px;
}

.paper-poc-mobile-boundary {
  background: #fff5e9;
  border-color: #a46b51;
}

@media (max-width: 1100px) and (min-width: 821px) {
  .paper-poc-topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .paper-poc-topbar-actions {
    justify-content: flex-start;
  }

  .paper-poc-layout {
    grid-template-columns: 220px minmax(520px, 1fr);
  }

  .paper-poc-right {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .paper-poc-right .paper-poc-section {
    border-bottom: 0;
    border-right: 1px solid #e3dbd3;
  }

  .paper-poc-right .paper-poc-section:last-child {
    border-right: 0;
  }
}

@media (max-width: 820px) {
  .paper-poc-topbar {
    flex-direction: row;
    align-items: center;
    min-height: 58px;
    position: static;
  }

  .paper-poc-page-mobile .paper-poc-topbar {
    border-bottom-width: 1px;
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

/* [project]/node_modules/@xyflow/react/dist/style.css [app-client] (css) */
.react-flow {
  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: #ffffff80;
  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: #f0f0f099;
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: #f0f0f040;
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px #00000014;
  --xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;
  --xy-node-border-radius-default: 3px;
  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;
  --xy-selection-background-color-default: #0059dc14;
  --xy-selection-border-default: 1px dotted #0059dccc;
  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px #00000014;
  --xy-edge-label-background-color-default: #fff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
  direction: ltr;
}

.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;
  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;
  --xy-attribution-background-color-default: #96969640;
  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: #3c3c3c99;
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;
  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #555;
  --xy-background-pattern-lines-color-default: #333;
  --xy-background-pattern-cross-color-default: #333;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: #f0f0f040;
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px #ffffff14;
  --xy-node-boxshadow-selected-default: 0 0 0 .5px #999;
  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;
  --xy-selection-background-color-default: #c8c8dc14;
  --xy-selection-border-default: 1px dotted #c8c8dccc;
  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px #00000014;
  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}

.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}

.react-flow__container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__pane {
  z-index: 1;
  touch-action: none;
}

.react-flow__pane.draggable {
  cursor: grab;
}

.react-flow__pane.dragging {
  cursor: grabbing;
}

.react-flow__pane.selection {
  cursor: pointer;
}

.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}

.react-flow__renderer {
  z-index: 4;
}

.react-flow__selection {
  z-index: 6;
}

.react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible {
  outline: none;
}

.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}

.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}

.react-flow .react-flow__edges {
  position: absolute;
}

.react-flow .react-flow__edges svg {
  pointer-events: none;
  position: absolute;
  overflow: visible;
}

.react-flow__edge {
  pointer-events: visibleStroke;
}

.react-flow__edge.selectable {
  cursor: pointer;
}

.react-flow__edge.animated path {
  stroke-dasharray: 5;
  animation: .5s linear infinite dashdraw;
}

.react-flow__edge.animated path.react-flow__edge-interaction {
  stroke-dasharray: none;
  animation: none;
}

.react-flow__edge.inactive {
  pointer-events: none;
}

.react-flow__edge.selected, .react-flow__edge:focus, .react-flow__edge:focus-visible {
  outline: none;
}

.react-flow__edge.selected .react-flow__edge-path, .react-flow__edge.selectable:focus .react-flow__edge-path, .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
  stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
}

.react-flow__edge-textwrapper {
  pointer-events: all;
}

.react-flow__edge .react-flow__edge-text {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}

.react-flow__connection {
  pointer-events: none;
}

.react-flow__connection .animated {
  stroke-dasharray: 5;
  animation: .5s linear infinite dashdraw;
}

svg.react-flow__connectionline {
  z-index: 1001;
  position: absolute;
  overflow: visible;
}

.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}

.react-flow__node {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
  position: absolute;
}

.react-flow__node.selectable {
  cursor: pointer;
}

.react-flow__node.draggable {
  cursor: grab;
  pointer-events: all;
}

.react-flow__node.draggable.dragging {
  cursor: grabbing;
}

.react-flow__nodesselection {
  z-index: 3;
  transform-origin: 0 0;
  pointer-events: none;
}

.react-flow__nodesselection-rect {
  pointer-events: all;
  cursor: grab;
  position: absolute;
}

.react-flow__handle {
  pointer-events: none;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
  width: 6px;
  min-width: 5px;
  height: 6px;
  min-height: 5px;
  position: absolute;
}

.react-flow__handle.connectingfrom {
  pointer-events: all;
}

.react-flow__handle.connectionindicator {
  pointer-events: all;
  cursor: crosshair;
}

.react-flow__handle-bottom {
  top: auto;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.react-flow__handle-top {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.react-flow__handle-left {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

.react-flow__handle-right {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}

.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}

.react-flow__panel {
  z-index: 5;
  margin: 15px;
  position: absolute;
}

.react-flow__panel.top {
  top: 0;
}

.react-flow__panel.bottom {
  bottom: 0;
}

.react-flow__panel.top.center, .react-flow__panel.bottom.center {
  left: 50%;
  transform: translateX(-15px)translateX(-50%);
}

.react-flow__panel.left {
  left: 0;
}

.react-flow__panel.right {
  right: 0;
}

.react-flow__panel.left.center, .react-flow__panel.right.center {
  top: 50%;
  transform: translateY(-15px)translateY(-50%);
}

.react-flow__attribution {
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  margin: 0;
  padding: 2px 3px;
  font-size: 10px;
}

.react-flow__attribution a {
  color: #999;
  text-decoration: none;
}

@keyframes dashdraw {
  from {
    stroke-dashoffset: 10px;
  }
}

.react-flow__edgelabel-renderer {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__viewport-portal {
  -webkit-user-select: none;
  user-select: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.react-flow__minimap {
  background: var(--xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)));
}

.react-flow__minimap-svg {
  display: block;
}

.react-flow__minimap-mask {
  fill: var(--xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)));
  stroke: var(--xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)));
  stroke-width: var(--xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)));
}

.react-flow__minimap-node {
  fill: var(--xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)));
  stroke: var(--xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)));
  stroke-width: var(--xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)));
}

.react-flow__background-pattern.dots {
  fill: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)));
}

.react-flow__background-pattern.lines {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)));
}

.react-flow__background-pattern.cross {
  stroke: var(--xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)));
}

.react-flow__controls {
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
  flex-direction: column;
  display: flex;
}

.react-flow__controls.horizontal {
  flex-direction: row;
}

.react-flow__controls-button {
  background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
  border: none;
  border-bottom: 1px solid
      var(--xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)));
  width: 26px;
  height: 26px;
  color: var(--xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)));
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  align-items: center;
  padding: 4px;
  display: flex;
}

.react-flow__controls-button svg {
  fill: currentColor;
  width: 100%;
  max-width: 12px;
  max-height: 12px;
}

.react-flow__edge.updating .react-flow__edge-path {
  stroke: #777;
}

.react-flow__edge-text {
  font-size: 10px;
}

.react-flow__node.selectable:focus, .react-flow__node.selectable:focus-visible {
  outline: none;
}

.react-flow__node-input, .react-flow__node-default, .react-flow__node-output, .react-flow__node-group {
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
  padding: 10px;
  font-size: 12px;
}

.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
  box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
}

.react-flow__node-input.selectable.selected, .react-flow__node-input.selectable:focus, .react-flow__node-input.selectable:focus-visible, .react-flow__node-default.selectable.selected, .react-flow__node-default.selectable:focus, .react-flow__node-default.selectable:focus-visible, .react-flow__node-output.selectable.selected, .react-flow__node-output.selectable:focus, .react-flow__node-output.selectable:focus-visible, .react-flow__node-group.selectable.selected, .react-flow__node-group.selectable:focus, .react-flow__node-group.selectable:focus-visible {
  box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
}

.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}

.react-flow__nodesselection-rect, .react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}

.react-flow__nodesselection-rect:focus, .react-flow__nodesselection-rect:focus-visible, .react-flow__selection:focus, .react-flow__selection:focus-visible {
  outline: none;
}

.react-flow__controls-button:hover {
  background: var(--xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)));
  color: var(--xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)));
}

.react-flow__controls-button:disabled {
  pointer-events: none;
}

.react-flow__controls-button:disabled svg {
  fill-opacity: .4;
}

.react-flow__controls-button:last-child {
  border-bottom: none;
}

.react-flow__controls.horizontal .react-flow__controls-button {
  border-bottom: none;
  border-right: 1px solid
      var(--xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)));
}

.react-flow__controls.horizontal .react-flow__controls-button:last-child {
  border-right: none;
}

.react-flow__resize-control {
  position: absolute;
}

.react-flow__resize-control.left, .react-flow__resize-control.right {
  cursor: ew-resize;
}

.react-flow__resize-control.top, .react-flow__resize-control.bottom {
  cursor: ns-resize;
}

.react-flow__resize-control.top.left, .react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}

.react-flow__resize-control.bottom.left, .react-flow__resize-control.top.right {
  cursor: nesw-resize;
}

.react-flow__resize-control.handle {
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border: 1px solid #fff;
  border-radius: 1px;
  width: 5px;
  height: 5px;
  translate: -50% -50%;
}

.react-flow__resize-control.handle.left {
  top: 50%;
  left: 0;
}

.react-flow__resize-control.handle.right {
  top: 50%;
  left: 100%;
}

.react-flow__resize-control.handle.top {
  top: 0;
  left: 50%;
}

.react-flow__resize-control.handle.bottom {
  top: 100%;
  left: 50%;
}

.react-flow__resize-control.handle.top.left, .react-flow__resize-control.handle.bottom.left {
  left: 0;
}

.react-flow__resize-control.handle.top.right, .react-flow__resize-control.handle.bottom.right {
  left: 100%;
}

.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-style: solid;
  border-width: 0;
}

.react-flow__resize-control.line.left, .react-flow__resize-control.line.right {
  width: 1px;
  height: 100%;
  top: 0;
  transform: translate(-50%);
}

.react-flow__resize-control.line.left {
  border-left-width: 1px;
  left: 0;
}

.react-flow__resize-control.line.right {
  border-right-width: 1px;
  left: 100%;
}

.react-flow__resize-control.line.top, .react-flow__resize-control.line.bottom {
  width: 100%;
  height: 1px;
  left: 0;
  transform: translate(0, -50%);
}

.react-flow__resize-control.line.top {
  border-top-width: 1px;
  top: 0;
}

.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}

.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}

.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}

/*# sourceMappingURL=_00f_pam._.css.map*/